feat: 30 günlük havuz referansı (kalıcı erime) + 25 sektör, çoklu sektör seçimi ve sunucudan gelen tek kaynaklı liste

src/components/DetailedSearchModal.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useApp } from '../context/AppContext';
-import { SECTORS_LIST, CITIES_LIST, INSTITUTION_TYPES_LIST } from '../data/constants';
+import { CITIES_LIST, INSTITUTION_TYPES_LIST } from '../data/constants';
 import { SlidersHorizontal, Search, RotateCcw, X } from 'lucide-react';
 
 export const DetailedSearchModal = () => {
@@ -13,8 +13,10 @@ export const DetailedSearchModal = () => {
     setSelectedCity,
     selectedAlimTuru,
     setSelectedAlimTuru,
-    selectedSektor,
-    setSelectedSektor,
+    selectedSektorler,
+    setSelectedSektorler,
+    toggleSektor,
+    sektorListesi,
     selectedKurumTipi,
     setSelectedKurumTipi,
     onlyValidOnly,
@@ -40,7 +42,7 @@ export const DetailedSearchModal = () => {
     setSearchQuery('');
     setSelectedCity('');
     setSelectedAlimTuru('');
-    setSelectedSektor('');
+    setSelectedSektorler([]);
     setSelectedKurumTipi('');
     setIknQuery('');
     setKurumQuery('');
@@ -116,16 +118,32 @@ export const DetailedSearchModal = () => {
               />
             </div>
 
-            <div>
-              <label className="block font-bold text-slate-700 mb-1">Sektör / Kategori</label>
-              <select
-                value={selectedSektor}
-                onChange={(e) => setSelectedSektor(e.target.value)}
-                className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-800"
-              >
-                <option value="">Tümü</option>
-                {SECTORS_LIST.map(s => <option key={s} value={s}>{s}</option>)}
-              </select>
+            <div className="md:col-span-2">
+              <label className="block font-bold text-slate-700 mb-1">
+                Sektör / Kategori
+                <span className="font-normal text-slate-400 ml-1">
+                  (birden fazla seçebilirsiniz{selectedSektorler.length > 0 ? ` — ${selectedSektorler.length} seçili` : ''})
+                </span>
+              </label>
+              <div className="flex flex-wrap gap-1.5 max-h-40 overflow-y-auto bg-slate-50 border border-slate-300 rounded-lg p-2">
+                {sektorListesi.map((s) => {
+                  const secili = selectedSektorler.includes(s);
+                  return (
+                    <button
+                      type="button"
+                      key={s}
+                      onClick={() => toggleSektor(s)}
+                      className={`px-2.5 py-1 rounded-full border text-[11px] font-semibold transition-colors ${
+                        secili
+                          ? 'bg-blue-600 border-blue-600 text-white'
+                          : 'bg-white border-slate-300 text-slate-600 hover:border-blue-400 hover:text-blue-700'
+                      }`}
+                    >
+                      {s}
+                    </button>
+                  );
+                })}
+              </div>
             </div>
 
             <div>