/* ============================================================
   ARAMA — üst kutu, öneri katmanı, sonuç ekranı
   Token'lar stil.css'teki :root'tan gelir.
   ============================================================ */

/* .ara-sar artık .ust-ana'nın esnek çocuğu; min-width:0 ONUN üstünde
   olmalı. Bu projede min-width:auto üç kez yatay kaymaya yol açtı
   (.banner-kutu, .guven) — yeni esnek/ızgara çocuğunda ilk bakılacak yer. */
.ara-sar{ position:relative; flex:1; min-width:0; }

.ara-geri, .ara-sil, .ara-git{
  display:grid; place-items:center; flex-shrink:0;
  border:0; background:none; cursor:pointer; color:var(--metin3);
  border-radius:var(--r);
  transition:color var(--hiz), background var(--hiz);
}
/* Sınıftaki display:grid, tarayıcının [hidden]{display:none} kuralını
   ezer — temizle düğmesi kutu boşken de görünüyordu. Niteliği geri al. */
.ara-geri[hidden], .ara-sil[hidden], .ara-git[hidden]{ display:none; }

.ara-geri{ display:none; width:30px; height:30px; margin-left:-4px; color:var(--metin); }
.ara-sil{ width:26px; height:26px; }
.ara-sil:hover{ color:var(--metin); background:var(--hat); }

/* type="search" kendi iptal düğmesini çiziyor; artık kendi temizle
   düğmemiz var, ikisi yan yana iki ayrı × gibi görünüyordu. */
.ara input::-webkit-search-cancel-button{ display:none; }

.ara-git{
  width:34px; height:30px; margin:-4px -7px -4px 0;
  background:var(--mnd); color:#fff;
  border-radius:var(--r);
}
.ara-git:hover{ background:var(--mnd-koyu); }
.ara-git .ikn{ width:17px; height:17px; }

/* kutu odaktayken sol büyüteç markaya dönsün — odak geri bildirimi
   yalnız kenarlıkla kalmasın */
.ara:focus-within > .ikn{ color:var(--mnd); }

/* ---------- panel ---------- */
.ara-panel{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:5;
  background:var(--zemin);
  border:1.5px solid var(--metin); border-radius:var(--r2);
  max-height:min(70vh, 560px); overflow-y:auto; overscroll-behavior:contain;
  padding:6px 0 10px;
  scrollbar-width:thin;
}
.ara-panel[hidden]{ display:none; }

.ara-bolum{ padding:8px 6px 4px; }
.ara-bolum + .ara-bolum{ border-top:1px solid var(--hat); margin-top:4px; }
.ara-bolum-bas{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:2px 10px 8px;
}
.ara-bolum-bas h4{
  margin:0; font-size:11px; font-weight:700; letter-spacing:var(--dar-aralik, .06em);
  text-transform:var(--buyuk-harf, uppercase); color:var(--metin3);
}
.ara-temizle-hepsi{
  border:0; background:none; cursor:pointer; padding:2px 4px;
  font-size:12px; font-weight:700; color:var(--mnd);
  border-radius:var(--r);
}
.ara-temizle-hepsi:hover{ background:var(--mnd-acik); }

/* ---------- öneri satırı ---------- */
.ara-sat{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; cursor:pointer; border-radius:var(--r);
  transition:background var(--hiz);
}
.ara-sat:hover, .ara-sat.vurgu{ background:var(--panel); }
.ara-sat-ikon{ display:grid; place-items:center; flex-shrink:0; color:var(--metin3); }
.ara-sat-ikon .ikn{ width:17px; height:17px; }
.ara-sat-ad{
  flex:1; min-width:0; font-size:13.5px; color:var(--metin2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* eşleşen kısım kalın + koyu: göz sorguyu satırda hemen bulsun */
.ara-sat-ad b{ font-weight:700; color:var(--metin); }
.ara-sat-not{
  flex-shrink:0; font-size:11px; font-weight:700; color:var(--metin3);
  background:var(--panel); border-radius:var(--r3); padding:2px 8px;
}
.ara-sat-ok{ flex-shrink:0; color:var(--metin3); opacity:0; transition:opacity var(--hiz); }
.ara-sat:hover .ara-sat-ok, .ara-sat.vurgu .ara-sat-ok{ opacity:1; }
.ara-sat-ok .ikn{ width:15px; height:15px; }
.ara-sat-sil{
  flex-shrink:0; display:grid; place-items:center;
  width:24px; height:24px; border:0; background:none; cursor:pointer;
  color:var(--metin3); border-radius:50%;
  transition:background var(--hiz), color var(--hiz);
}
.ara-sat-sil:hover{ background:var(--hat); color:var(--metin); }
.ara-sat-sil .ikn{ width:13px; height:13px; }

/* ---------- çipler ---------- */
.ara-cipler{ display:flex; flex-wrap:wrap; gap:7px; padding:0 10px 4px; }
.ara-cipler.ortala{ justify-content:center; padding:0; }

.ara-cip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:7px 11px; border-radius:var(--r3);
  background:var(--panel); border:1px solid transparent;
  font-size:12.5px; font-weight:600; color:var(--metin2);
  transition:border-color var(--hiz), color var(--hiz), background var(--hiz);
}
.ara-cip:hover, .ara-cip.vurgu{
  background:var(--mnd-acik); border-color:var(--mnd); color:var(--mnd-koyu);
}
.ara-cip .ikn{ width:14px; height:14px; color:var(--metin3); }
.ara-cip:hover .ikn{ color:var(--mnd); }
.ara-cip button{
  display:grid; place-items:center; width:18px; height:18px;
  margin-right:-4px; border:0; background:none; cursor:pointer;
  color:var(--metin3); border-radius:50%;
}
.ara-cip button:hover{ background:rgba(23,23,26,.10); color:var(--metin); }
.ara-cip button .ikn{ width:11px; height:11px; }

/* popüler aramalarda sıra numarası — ilk üç markaya boyanır */
.ara-sira{
  display:grid; place-items:center; flex-shrink:0;
  width:17px; height:17px; border-radius:50%;
  background:var(--hat); color:var(--metin2);
  font-size:10px; font-weight:700; font-style:normal;
}
.ara-cip.pop:nth-child(-n+3) .ara-sira{ background:var(--mnd); color:#fff; }

/* ---------- kategori kısayolları ---------- */
.ara-kisayol{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
  gap:6px; padding:0 10px 4px;
}
.ara-kisayol.ortala{ max-width:640px; margin:18px auto 0; padding:0; }
.ara-kis{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:0; padding:12px 6px; border-radius:var(--r2);
  background:var(--panel); border:1px solid transparent;
  font-size:11.5px; font-weight:700; color:var(--metin2);
  transition:border-color var(--hiz), color var(--hiz), transform var(--hiz) var(--egri);
}
.ara-kis:hover{ border-color:var(--mnd); color:var(--mnd-koyu); transform:translateY(-2px); }
.ara-kis .ikn{ width:19px; height:19px; color:var(--metin3); }
.ara-kis:hover .ikn{ color:var(--mnd); }
.ara-kis span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* ---------- panelde ürün satırı ---------- */
.ara-urunler{ display:flex; flex-direction:column; }
.ara-urun{
  display:flex; align-items:center; gap:11px;
  padding:8px 12px; border-radius:var(--r);
  transition:background var(--hiz);
}
.ara-urun:hover{ background:var(--panel); }
.ara-urun-gorsel{
  flex-shrink:0; width:42px; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--r); background:var(--panel);
}
.ara-urun-gorsel .gorsel{ width:100%; height:100%; }
.ara-urun-gorsel img{ width:100%; height:100%; object-fit:cover; }
.ara-urun-orta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ara-urun-ad{
  font-size:13px; font-weight:600; color:var(--metin2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ara-urun-ad b{ font-weight:700; color:var(--metin); }
.ara-urun-alt{
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--metin3);
  overflow:hidden; white-space:nowrap;
}
.ara-urun-alt .yildizlar{ font-size:10px; }
.ara-urun-fiyat{ flex-shrink:0; font-size:13.5px; font-weight:700; color:var(--mnd); }

/* ---------- "tümünü gör" ve boş öneri ---------- */
.ara-tum{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:6px 10px 0; padding:11px; cursor:pointer;
  border-radius:var(--r2); background:var(--mnd-acik);
  font-size:13px; color:var(--mnd-koyu);
  transition:background var(--hiz);
}
/* Ham hex yerine token: Intel mavisi sürümüne kopyalanırken renk
   yalnız :root'tan çevrilsin, burada unutulacak bir hex kalmasın. */
.ara-tum:hover, .ara-tum.vurgu{ background:var(--mnd); color:#fff; }
.ara-tum .ikn{ width:15px; height:15px; }

.ara-bos{ padding:20px 16px 12px; text-align:center; }
.ara-bos p{ margin:0; font-size:14px; }
.ara-bos-alt{ margin-top:4px !important; font-size:12.5px; color:var(--metin2); }

/* ============================================================
   SONUÇ EKRANI
   ============================================================ */

.ara-sayfa{ padding-block:14px 40px; }

.ara-sonuc-bos{
  max-width:620px; margin:0 auto; padding:44px 16px 56px; text-align:center;
}
.ara-sonuc-bos h2{
  margin:14px 0 0; 
  font-size:20px; font-weight:700; letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.ara-sonuc-bos p{ margin:8px 0 20px; font-size:13.5px; color:var(--metin2); }

/* kategori ekranındaki satır içi stillerin sınıf karşılıkları */

/* ============================================================
   MOBİL — kutu tam ekrana açılır
   ============================================================ */

@media (max-width:899px){
  /* masaüstünde turuncu gönder düğmesi var, mobilde yer yok */
  .ara-git{ display:none; }

  body[data-ara="acik"]{ overflow:hidden; }

  body[data-ara="acik"] .ara-sar{
    position:fixed; inset:0; z-index:200;
    display:flex; flex-direction:column;
    padding:10px 12px 0; background:var(--zemin);
  }
  body[data-ara="acik"] .ara-geri{ display:grid; }
  body[data-ara="acik"] .ara > .ikn{ display:none; }
  /* stil.css'te .ara{flex:1} var — yatay barda doğru, ama tam ekran
     katman dikey bir flex kabı: orada flex:1 kutuyu ekranın yarısına
     kadar BÜYÜTÜP paneli 426px aşağı itiyordu. flex-shrink yetmez,
     büyümeyi de kapatmak gerekiyor. */
  body[data-ara="acik"] .ara{ flex:0 0 auto; }

  body[data-ara="acik"] .ara-panel{
    position:static; flex:1; min-height:0; margin-top:8px;
    border:0; border-radius:0; box-shadow:none; max-height:none;
    padding-bottom:24px;
  }
  /* açılan panel üstteki diğer her şeyi örtüyor; kategori rayı ve
     eylemler tam ekranda görünmesin */
  body[data-ara="acik"] .ust-nav,
  body[data-ara="acik"] .ust-eyl,
  body[data-ara="acik"] .logo,
  body[data-ara="acik"] .promo{ display:none; }

  .ara-kisayol{ grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); }
}

@media (prefers-reduced-motion:reduce){
  .ara-kis:hover{ transform:none; }
}

/* "Bunu mu demek istediniz" — düzeltilmiş sorgu lacivert kupon etiketi */
.ara-yakin{ margin:8px 0 12px; font-size:var(--t5); font-weight:600; color:var(--metin); }
.ara-yakin-btn{
  margin-left:4px; padding:4px 14px; border-radius:var(--r-tam);
  background:var(--metin); color:var(--zemin); font-weight:700;
}