/* ==========================================================================
   MultiToolCore — assets/css/pp/search.css
   Üst bar canlı araç araması (studio-header + assets/js/pp/search.js).

   Yalnızca öneri panelini tanımlar; arama alanının temel stili base.css'te
   (.header-search). Panel header'ın sticky katmanı içinde açılır: .site-header
   taşma kırpmaz (overflow yok), z-index 60 → panel 70 ile üstte kalır.
   Kaydırma/konum düzeltmesi JS'te yapılır: panel görünüm alanından taşarsa
   `.is-right` (sağa yasla) ve `.is-above` (üste aç) sınıfları eklenir.
   ========================================================================== */

.header-search{position:relative}

.search-suggest{
  position:absolute;top:calc(100% + 10px);left:0;z-index:70;
  width:min(420px,calc(100vw - 24px));max-height:min(72vh,440px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:7px;border:1px solid #1e2b45;border-radius:15px;
  background:#0a1320f5;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 28px 64px -22px #000d,0 1px 0 #ffffff0f inset;
}
.search-suggest[hidden]{display:none}
/* Yatay sıkıştırma JS'te (place) yapılır: panel dar ekranda görünüm alanına
   oturtulur, bu yüzden sabit sağ/sol yaslama sınıfı yoktur. */
.search-suggest.is-above{top:auto;bottom:calc(100% + 10px)}

/* Bölüm etiketi: "Öne çıkanlar" · "Öneriler" */
.search-label{
  display:block;padding:8px 11px 6px;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#7f90ad;
}

/* Satır: renkli ikon plakası · ad + alt satır · kategori/durum çipi */
.search-row{
  display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px;
  width:100%;padding:8px 10px;border:0;border-radius:11px;background:transparent;
  color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color .12s ease;
}
.search-row:hover,.search-row.is-active{background:#152340}
.search-row:focus-visible{outline:2px solid #7b6dff;outline-offset:-2px}

.header-search .search-ico{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  color:rgb(var(--sc,178,198,247));
  background:rgba(var(--sc,178,198,247),.15);
  border:1px solid rgba(var(--sc,178,198,247),.36);
}
.header-search .search-ico svg{width:20px;height:20px;flex:none;color:inherit}

.search-copy{display:block;min-width:0}
.search-copy strong{
  display:block;font-size:14.5px;font-weight:600;color:#eef3ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-copy span{
  display:block;margin-top:2px;font-size:12.5px;color:#93a4c2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.search-meta{
  flex:none;padding:3px 9px;border:1px solid #24324c;border-radius:999px;
  background:#0d1728;font-size:11.5px;color:#9fb0cf;white-space:nowrap;
}
.search-meta--beta{color:#a9d6ff;border-color:#1f3a54;background:#0b1a26}

/* Boş durum + yükleniyor */
.search-empty{padding:13px 12px 15px;font-size:13.5px;color:#9fb0cf;line-height:1.5}
.search-empty b{color:#e8eefc;font-weight:600}
.search-loading{padding:12px 11px;font-size:13px;color:#7f90ad}

/* Alt satır: tam arama sayfasına geçiş */
.search-all{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:5px;padding:9px 11px;border-radius:9px;
  font-size:12.5px;color:#a9b8d6;text-decoration:none;
}
.search-all:hover{color:#fff;background:#152340}
.header-search .search-all svg{width:15px;height:15px;flex:none;color:currentColor}

@media (max-width:700px){
  .search-suggest{width:min(420px,calc(100vw - 20px))}
  .search-row{grid-template-columns:32px minmax(0,1fr) auto;gap:9px}
  .header-search .search-ico{width:32px;height:32px;border-radius:9px}
  .header-search .search-ico svg{width:18px;height:18px}
  .search-copy strong{font-size:14px}
}