/* ============================================================
   Arama önerileri paneli — header arama kutusunun altı
   Davranış: assets/js/hs-ara.js · İşaretleme: index.html .header-search
   Renk / yarıçap / gölge yalnız tokens.css'ten.
   ============================================================ */
.header-search{ position:relative; }

.ara-panel{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:3000;
  background:var(--surface); color:var(--ink); text-align:left;
  border:1px solid var(--seperator-color); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  max-height:min(72vh, 620px); overflow:auto; overscroll-behavior:contain;
  padding:6px 0;
}
.ara-panel[hidden]{ display:none; }

.ara-bas{
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  padding:10px 16px 4px;
}

/* Satır (ürün, kategori, sayfa, son arama) */
.ara-s{
  display:flex; align-items:center; gap:12px;
  padding:8px 16px; color:inherit; cursor:pointer; text-decoration:none;
}
.ara-s:hover, .ara-s:focus{ text-decoration:none; color:inherit; }
.ara-s.on, .ara-s:hover{ background:var(--primary-tint); }
.ara-s.on{ box-shadow:inset 3px 0 0 var(--accent-color); }

.ara-s img, .ara-s .yok{
  flex:none; width:44px; height:44px; border-radius:var(--radius-sm);
  object-fit:contain; background:var(--surface); border:1px solid var(--seperator-color);
}
.ara-s .t{ flex:1; min-width:0; }
.ara-s .ad{
  display:block; font-size:14px; font-weight:600; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ara-s .alt{
  display:block; font-size:12px; color:var(--muted); margin-top:2px;
  font-family:ui-monospace, Consolas, monospace;
}
.ara-s .f{
  flex:none; text-align:right; font-size:13.5px; font-weight:800;
  color:var(--primary-color); white-space:nowrap;
}
.ara-s .f i{ display:block; font-style:normal; font-size:11.5px; font-weight:600; margin-top:2px; }
.ara-s .f i.ok{ color:var(--success-ink); }
.ara-s .f i.no{ color:var(--muted); }

.ara-s .ik{
  flex:none; width:28px; height:28px; border-radius:var(--radius-sm);
  background:var(--light-gray); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}
.ara-s .ik svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.ara-s mark{ background:var(--accent-tint); color:inherit; padding:0 1px; border-radius:3px; }

.ara-s.tum{
  border-top:1px solid var(--seperator-color); margin-top:6px;
  padding:12px 16px; font-size:13.5px; font-weight:700; color:var(--primary-color);
}

/* Çipler (sık aranan, kategoriler) */
.ara-cipler{ display:flex; flex-wrap:wrap; gap:6px; padding:4px 16px 8px; }
.ara-s.cip{
  display:inline-flex; gap:6px; padding:6px 12px;
  border:1px solid var(--seperator-color); border-radius:var(--radius-pill);
  font-size:13px; font-weight:600; color:var(--ink); background:var(--surface);
}
.ara-s.cip.on, .ara-s.cip:hover{
  background:var(--primary-tint); border-color:var(--seperator-dark-color); box-shadow:none;
}
.ara-s.cip.on{ outline:2px solid var(--accent-color); outline-offset:1px; }
.ara-s.cip .n{ font-weight:500; color:var(--muted); }
.ara-s.cip svg{ width:13px; height:13px; fill:none; stroke:var(--muted); stroke-width:1.9; }

.ara-bos{ padding:18px 16px; font-size:13.5px; color:var(--muted); }
.ara-bos a{ color:var(--primary-color); font-weight:700; text-decoration:underline; }
.ara-yuk{ padding:14px 16px; font-size:13px; color:var(--muted); }
.ara-ipucu{
  border-top:1px solid var(--seperator-color); margin-top:8px;
  padding:10px 16px 6px; font-size:12px; color:var(--muted);
}
.ara-ipucu b{ color:var(--ink); font-weight:600; }

/* Ekran okuyucu durumu (görünmez, duyurulur) */
.ara-durum{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:991px){
  .ara-panel{ max-height:70vh; }
  .ara-s .f{ font-size:13px; }
}
@media (prefers-reduced-motion:no-preference){
  .ara-s{ transition:background-color .1s ease; }
}