/** * NECOX K1 — Search Results * * Frontend CSS for the advert search results page (Ilan Arama). Shared * styles + 4 preset-based variants. K2 cascade compatible via var(). * * @file search-results.css * @component K1 * @since v4.1.0 */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SAYFA WRAPPER (v3.83.0 Faz 1.5 + v3.84.0 Faz 2.6/2.7/2.8) archive-advert.php'de
ile sarilir. single-advert ile birebir paralel: 1400px default + margin auto + padding 0 24px. K2 ayarlari: sr_max_width (genislik), sr_bg/transparent/gradient/glass (arka plan), sr_border_color (kenarlik), sr_shadow (golge). fonts.php K-04 efekt onceligi (Glass > Transparent > Gradient > Solid) ile --necox-sr-bg variable'i tek nokta uretir. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-page-search-results { max-width: var(--necox-sr-max-width, 1400px); margin: 24px auto; padding-left: 24px; padding-right: 24px; padding-top: var(--necox-sr-padding-y, 24px); padding-bottom: var(--necox-sr-padding-y, 24px); background: var(--necox-sr-bg, transparent); backdrop-filter: var(--necox-sr-glass-blur, none); -webkit-backdrop-filter: var(--necox-sr-glass-blur, none); border: 1px solid var(--necox-sr-border-color, transparent); box-shadow: var(--necox-sr-shadow, none); border-radius: var(--necox-sr-radius, 0); } @media (max-width: 768px) { .necox-page-search-results { margin: 16px auto; padding-left: 16px; padding-right: 16px; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FAZ 5a YENI K2 ALANLARI (v3.87.0) Bos sonuc ekrani + sayfalama + daha fazla yukle butonu K2 destekleri. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Bos sonuc ekrani */ .necox-empty-state { background: var(--necox-sr-empty-bg, transparent); color: var(--necox-sr-empty-text, var(--necox-muted, #6b7280)); padding: var(--necox-sr-empty-padding, 60px) 20px; text-align: center; border-radius: var(--necox-sr-result-header-radius, 0); } .necox-empty-state p { margin: 0; color: inherit; font-size: 15px; } /* v7.3.0: Sayfalama butonlari icin search-results override KALDIRILDI. Eski override sr_pag_bg/color/active_bg variablelarini kullaniyordu ama preset-k2-values.php'de bu key'ler HIC tanimli degildi (4 preset'in hicbirinde) -> fallback olarak --necox-white ve hardcoded #ffffff devreye giriyordu. Kullanici karari: beyaz YOK, tum renkler preset. filter.css'teki tek-kaynak kural artik sr_filter_btn_bg/color cascade'i kullaniyor. */ /* Daha Fazla Yukle butonu cift class override (ana selector .necox-btn--outline) */ .necox-search__pagination .necox-search__load-more, .necox-btn.necox-search__load-more { background: var(--necox-sr-loadmore-bg, transparent); color: var(--necox-sr-loadmore-color, var(--necox-primary, #2A3254)); } /* v7.2.9: hover'da bg<->color invert. Onceki filter:brightness(0.95) yetmiyordu; .necox-btn--outline'in hover'i bg=primary+color=#fff yaziyordu, koyu zeminde okunsa bile preset palet uyumsuzlugu. Simdi: hover bg=sr_loadmore_color (preset accent), color=sr_loadmore_bg (preset acik). 4 preset icin otomatik uyumlu. */ .necox-search__pagination .necox-search__load-more:hover, .necox-btn.necox-search__load-more:hover { background: var(--necox-sr-loadmore-color, var(--necox-primary, #2A3254)); color: var(--necox-sr-loadmore-bg, #ffffff); border-color: var(--necox-sr-loadmore-color, var(--necox-primary, #2A3254)); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FAZ 6 HARITA — Preset 3 (v3.89.0) Leaflet pin (custom divIcon), popup, empty state stilleri. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Pin container (Leaflet divIcon className) */ .necox-search__map-pin-wrap { background: transparent !important; border: none !important; } /* Pin - fiyat etiketi */ .necox-search__map-pin { display: inline-flex; align-items: center; justify-content: center; background: var(--necox-primary, #2A3254); color: #ffffff; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); white-space: nowrap; border: 2px solid #ffffff; cursor: pointer; transition: transform 0.15s, background-color 0.15s; } /* v7.11.3 — Pin hover preset cascade'e bagli (primary_hover) */ .necox-search__map-pin:hover { background: var(--necox-primary-hover, #3A4470); color: var(--necox-primary-fg, #fff); transform: scale(1.08); } /* Pin - sade nokta (fiyat yoksa) */ .necox-search__map-pin--dot { width: 16px; height: 16px; padding: 0; border-radius: 50%; } /* Pin popup */ .necox-search__map-popup { display: flex; flex-direction: column; min-width: 220px; } .necox-search__map-popup img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px 6px 0 0; } .necox-search__map-popup-body { padding: 10px 12px; } .necox-search__map-popup-title { display: block; font-size: 14px; font-weight: 600; color: var(--necox-heading, #1a1a2e); text-decoration: none; line-height: 1.3; margin-bottom: 4px; } .necox-search__map-popup-title:hover { color: var(--necox-primary, #2A3254); } .necox-search__map-popup-price { font-size: 16px; font-weight: 700; color: var(--necox-primary, #2A3254); } /* Leaflet popup container override - genel temaya uy */ .leaflet-popup-content-wrapper { border-radius: 8px !important; padding: 0 !important; overflow: hidden; } .leaflet-popup-content { margin: 0 !important; } /* Pin yok / hata durumu */ .necox-search__map-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 300px; color: var(--necox-muted, #6b7280); text-align: center; padding: 40px 20px; gap: 12px; } .necox-search__map-empty p { margin: 0; font-size: 14px; color: inherit; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AJAX FILTRE LOADING STATE (v3.85.0 Faz 3) doFilter sirasinda container'a is-loading class eklenir + spinner gosterilir. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-search__main.is-loading, .necox-search__cards.is-loading { opacity: 0.6; pointer-events: none; transition: opacity 0.2s; } .necox-filter-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--necox-muted, #6b7280); font-size: 14px; text-align: center; } .necox-filter-loading__spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--necox-border, #e5e7eb); border-top-color: var(--necox-primary, #2A3254); border-radius: 50%; animation: necox-filter-spin 0.7s linear infinite; } @keyframes necox-filter-spin { to { transform: rotate(360deg); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FAZ 4 UI STATE (v3.86.0) List view + chip aktif item + load-more loading + preview panel scale-in ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* List view modu (grid yerine yatay liste) */ .necox-search__cards.is-list-view { display: flex; flex-direction: column; gap: 12px; } .necox-search__cards.is-list-view .necox-ad-card { width: 100%; max-width: 100%; } /* Preset 2 / 3 list-item aktif state */ /* Daha Fazla Yukle butonu loading state */ .necox-search__load-more.is-loading { opacity: 0.65; cursor: wait; position: relative; pointer-events: none; } .necox-search__load-more.is-loading::after { content: ''; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: necox-filter-spin 0.7s linear infinite; } /* Preview panel content fade-in */ .necox-search__preview-content { animation: necox-preview-fade-in 0.18s ease-out; } @keyframes necox-preview-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ORTAK STILLER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* ── Sonuc Basligi ── */ /* v3.87.0 Faz 5a: Bg/padding/radius destegi - kutu seklinde gosterim icin */ .necox-search__result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; background: var(--necox-sr-result-header-bg, transparent); padding: var(--necox-sr-result-header-padding, 0); border-radius: var(--necox-sr-result-header-radius, 0); } .necox-search__result-count { font-size: var(--necox-sr-result-size, 14px); font-weight: 500; color: var(--necox-sr-result-color, var(--necox-heading)); } .necox-search__result-count strong { color: var(--necox-sr-result-strong, var(--necox-primary, #2A3254)); } /* ── Gorunum Toggle ── */ .necox-search__view-toggle { display: flex; gap: 4px; } /* v7.7.5 — Preset 2 zaten zorla liste gorunumu; grid/liste toggle gereksiz. v7.7.10 — Preset 3 de zengin liste + harita hibrit, grid secenegi anlamsiz. v7.7.13 — helper'a preset parametresi gectim (necox_search_result_header yeni 3. arguman), toggle PHP tarafinda kosullu render edilir. CSS'te yedek olarak class .necox-search__view-toggle--hidden gizler. */ .necox-search--preset-2 .necox-search__view-toggle, .necox-search--preset-3 .necox-search__view-toggle, .necox-search__view-toggle--hidden { display: none !important; } /* v7.16.62 — MOBILDE liste/grid toggle YOK + her zaman GRID. Tespit #94 (mobilde liste/grid ikonu olmamali) + #95 (tum mobil kartlar grid). Mobilde gorunum tek tip olmali; ikon gizlenir, kullanici daha once 'liste' sectiyse bile (is-list-view) mobilde GRID'e donulur. */ @media (max-width: 767px) { .necox-search__view-toggle { display: none !important; } /* Liste gorunumu mobilde grid'e zorla (cards grid kurali zaten gap+columns saglar) */ .necox-search__cards.is-list-view { display: grid; flex-direction: initial; } .necox-search__cards.is-list-view .necox-ad-card { max-width: none; } } .necox-search__view-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--necox-border, var(--necox-border)); border-radius: 6px; background: none; color: var(--necox-muted, var(--necox-muted)); cursor: pointer; transition: all 0.15s; } .necox-search__view-btn.is-active, .necox-search__view-btn:hover { background: var(--necox-primary, var(--necox-primary)); color: #ffffff; border-color: var(--necox-primary, var(--necox-primary)); } /* ── Kartlar Grid ── */ /* v3.84.0 Faz 2.1: Inline style="grid-template-columns:repeat(var(--necox-sr-columns,N),1fr)" helpers.php tarafindan basilir. Burada sadece gap. */ .necox-search__cards { display: grid; gap: var(--necox-sr-gap, 16px); } /* ── Yatay Filtre Bar ── */ .necox-search__hbar { margin-bottom: 16px; } .necox-search__hbar-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .necox-search__hbar-field { flex: 1; min-width: 140px; } .necox-search__hbar-field--price { display: flex; gap: 4px; align-items: center; } .necox-search__hbar-select, .necox-search__hbar-input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--necox-sr-filter-border, var(--necox-border, #e5e7eb)); border-radius: var(--necox-sr-filter-radius, 6px); background: var(--necox-sr-filter-bg, var(--necox-white)); color: var(--necox-sr-filter-color, var(--necox-text, #374151)); font-size: 13px; } .necox-search__hbar-sep { color: var(--necox-muted, var(--necox-muted)); font-size: 12px; flex-shrink: 0; } .necox-search__hbar-submit { flex-shrink: 0; height: 38px; /* v7.7.14 — Yatay filtre Ara butonu preset primary rengiyle DOLU. --necox-btn-bg cascade'i bazi preset'lerde transparent (glass/buton transparent toggle), o durumda Ara butonu kayboluyor — yukari cik fix'i ile ayni pattern: --necox-primary'ye direkt baglan, primary-hover'a duser. */ background: var(--necox-primary, #2A3254) !important; color: var(--necox-primary-fg, var(--necox-btn-text, #fff)) !important; border-color: var(--necox-primary, #2A3254) !important; } .necox-search__hbar-submit:hover { background: var(--necox-primary-hover, var(--necox-primary, #2A3254)) !important; border-color: var(--necox-primary-hover, var(--necox-primary, #2A3254)) !important; } /* ── Liste Ogeleri (Preset 2, 3) ── */ /* v3.88.0 Faz 5b: K2 variable destekli list-item (Preset 2 ve 3 ortak) */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ v7.5.4 — PRESET 2 ZENGİN LİSTE-ITEM (ad-card paritesi) ribbons, ad type badge, condition, ad no, kategori, tarih, görüntülenme, action butonları. Sadece Preset 2 scope'lu. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Thumb wrapper — overlay'ler icin position:relative v7.5.5: height kalktirildi, align-self:stretch ile kart yuksekligine kadar buyur. v7.5.6: 120 -> 140px (kullanici "biraz genislet"). v7.6.4: K2 sr_list_thumb_size'a baglandi. min-height oran sabit (4:3 ~0.78). */ /* Info kolonu */ /* v7.5.6: necox_render_ribbons('card') uretiyor: .necox-ad-card__ribbons (wrapper, position-class ile pozisyon) — Preset 2'de thumb-wrap icine basildigi icin ad-card'in kendi absolute pozisyonu ile dogru yere oturur. Tek mudahale: liste-item dar alan icin font-size + padding kompaktlasir. */ /* Baslik — multi-line allow + ellipsis 2 satir v7.6.4: font-size K2 sr_list_title_size'a baglandi. */ /* Fiyat — kendi satirinda v7.6.4: font-size K2 sr_list_price_size'a baglandi. */ /* Meta satiri — kategori/konum/tarih/views/adno v7.6.4: font-size K2 sr_list_meta_size'a baglandi. */ /* v7.7.9 — Meta ogeleri SVG ikon stillemesi (cat/loc/date/views + adno). Onizleme panelindeki .necox-search__preview-meta-row paterniyle gorsel paritesi. */ /* Action butonlari satiri */ /* v7.13.3 — Preset 1 action-pill paritesi + ekstra hareket. Cam efekt + blur + box-shadow (Preset 1 paritesi), hover'da lift + glow, aktif state'te puls, SVG hover'da scale (mikro animasyon). */ @keyframes necox-list-action-pulse { 0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 0 color-mix(in srgb, var(--necox-primary, #2A3254) 40%, transparent); } 50% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 6px color-mix(in srgb, var(--necox-primary, #2A3254) 0%, transparent); } } /* v7.7.1 — Action butonu "secili" state (favori/raporla/karsilastir). Preset bazli kullanici tercihli renkler: - editorial_light / super_light: preset'in KOYU rengi (primary) - ocean_deep: preset'in ACIK rengi (primary lighter) - midnight_blue: SARI #FFCC04 (kullanici tercihi) Compare butonu (.necox-cmp-btn.is-active) compare.css'te kendi rengini tasiyor (preset --necox-primary'ye baglanir); buradaki kural list-action ve preview-action butonlarinin favori/raporla state'i icin. Compare zaten bu cascade'e dahil — !important sirasi compare.css ile uyumlu. */ .necox-search__preview-action.is-active { background: var(--necox-primary, #111) !important; color: var(--necox-primary-fg, #fff) !important; border-color: var(--necox-primary, #111) !important; transform: scale(1.05); animation: necox-list-action-pulse 1.8s ease-in-out infinite; } /* Preset bazli override — body class'i uzerinden cascade */ .necox-preset-ocean-deep .necox-search__preview-action.is-active, .necox-preset-ocean-deep .necox-cmp-btn.is-active { background: #48cae4 !important; border-color: #48cae4 !important; color: #001525 !important; } .necox-preset-super-light .necox-search__preview-action.is-active, .necox-preset-super-light .necox-cmp-btn.is-active { background: #b37555 !important; border-color: #b37555 !important; color: #ffffff !important; } .necox-preset-editorial-light .necox-search__preview-action.is-active, .necox-preset-editorial-light .necox-cmp-btn.is-active { background: #2A3254 !important; border-color: #2A3254 !important; color: #ffffff !important; } .necox-preset-midnight-blue .necox-search__preview-action.is-active, .necox-preset-midnight-blue .necox-cmp-btn.is-active { background: var(--necox-primary) !important; border-color: var(--necox-primary) !important; color: #0a0e1a !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ v7.5.4 — ÖNİZLEME PANELİ ZENGİN FORMAT v7.5.5 — Media wrap overflow:hidden (ribbon tasma fix) + body esit padding ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-search__preview-media { position: relative; overflow: hidden; } .necox-search__preview-body { padding: var(--necox-sr-preview-padding, 20px); } .necox-search__preview-ribbons { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; flex-wrap: wrap; max-width: calc(100% - 20px); z-index: 2; } /* v7.5.7 — necox_render_ribbons wrapper'i (.necox-ad-card__ribbons) kendi pozisyon class'i (--top-left/--bottom-right vb) absolute uretiyor. Onizlemede bizim outer .necox-search__preview-ribbons absolute pozisyonu kullaniyoruz — inner wrapper'i static'e cevirip onun absolute'unu bastir, inner span'lar normal akista flex ile sirelansin. */ .necox-search__preview-ribbons .necox-ad-card__ribbons { position: static; display: flex; gap: 4px; flex-wrap: wrap; top: auto; left: auto; right: auto; bottom: auto; } .necox-search__preview-type-badge { position: absolute; top: 10px; right: 10px; } .necox-search__preview-condition { position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 1; } .necox-search__preview-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; padding: 10px; background: var(--necox-bg-soft, #f9fafb); border-radius: 6px; font-size: 12px; } .necox-search__preview-meta-row { display: flex; align-items: center; gap: 6px; color: var(--necox-text, #374151); } .necox-search__preview-meta-row svg { color: var(--necox-muted, #6b7280); flex-shrink: 0; } .necox-search__preview-meta-row span { color: var(--necox-heading, #1a1a2e); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .necox-search__preview-actions { display: flex; gap: 6px; margin-bottom: 12px; } .necox-search__preview-action { flex: 1; padding: 8px; border: 1px solid var(--necox-border, #e5e7eb); background: var(--necox-white, #fff); border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--necox-text, #374151); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; } .necox-search__preview-action:hover { border-color: var(--necox-primary, #2A3254); color: var(--necox-primary, #2A3254); } /* ── Onizleme Paneli (Preset 2) ── */ /* v3.84.0 Faz 2.9: K2 sr_preview_bg/border/radius */ /* v3.88.0 Faz 5b: K2 sr_preview_title_color + price_color + padding eklendi */ .necox-search__preview { border: 1px solid var(--necox-sr-preview-border, var(--necox-border, var(--necox-border))); border-radius: var(--necox-sr-preview-radius, 10px); background: var(--necox-sr-preview-bg, var(--necox-white)); overflow: hidden; } .necox-search__preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; color: var(--necox-muted, var(--necox-muted)); gap: 8px; text-align: center; padding: 20px; font-size: 13px; } .necox-search__preview-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } /* v7.5.5: padding kaldirildi — preview-media tam genislikte, preview-body kendi paddingiyle. Eski tek-katmanli yapida 20px her seyi sariyordu, media kenardan icerideydi. */ .necox-search__preview-content { padding: 0; } .necox-search__preview-title { font-size: 16px; font-weight: 600; color: var(--necox-sr-preview-title, var(--necox-heading, #1a1a2e)); margin: 0 0 8px; } .necox-search__preview-price { font-size: 20px; font-weight: 700; color: var(--necox-sr-preview-price, var(--necox-primary, var(--necox-primary))); margin-bottom: 8px; } .necox-search__preview-excerpt { font-size: 13px; color: var(--necox-text, var(--necox-text)); line-height: 1.5; margin-bottom: 12px; } .necox-search__preview-loc { font-size: 12px; color: var(--necox-muted, var(--necox-muted)); margin-bottom: 12px; } /* ── Harita Paneli (Preset 3) ── */ .necox-search__map { width: 100%; height: 100%; min-height: var(--necox-sr-map-height, 500px); border-radius: 10px; overflow: hidden; } /* ── Sayfalama ── */ .necox-search__pagination { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .necox-search__load-more { min-width: 200px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRESET 1 — Klasik 2 Kolon ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-search--preset-1 { display: grid; grid-template-columns: var(--necox-sr-sidebar-width, 260px) 1fr; gap: var(--necox-sr-gap, 24px); padding: 24px 0; align-items: start; } /* v5.15.0 — Preset 1 sticky: her iki taraf bagimsiz sticky. Desktop'ta JS hover-bazli swap ile aktif olmayan panel sticky kalir. */ .necox-search--preset-1 .necox-search__sidebar, .necox-search--preset-1 .necox-search__main { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; /* Scrollbar sade gostersin */ scrollbar-width: thin; } .necox-search--preset-1 .necox-search__sidebar::-webkit-scrollbar, .necox-search--preset-1 .necox-search__main::-webkit-scrollbar { width: 6px; } .necox-search--preset-1 .necox-search__sidebar::-webkit-scrollbar-thumb, .necox-search--preset-1 .necox-search__main::-webkit-scrollbar-thumb { background: var(--necox-border); border-radius: 3px; } /* Hover-bazli: aktif panel scroll edilir, digeri sabit kalir. JS .necox-search--hover-left / --hover-right class'i sayfaya ekler. */ .necox-search--hover-left.necox-search--preset-1 .necox-search__main { overflow-y: hidden; } .necox-search--hover-right.necox-search--preset-1 .necox-search__sidebar { overflow-y: hidden; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRESET 2 — 3 Kolon Panel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-search--preset-2 { display: grid; /* v7.5.4: 500px -> 460px (kullanici karari "bir tik dusurelim"). Onizleme zengin format ile daha kompakt gosterim (meta grid 2 kolon yine sigar). */ grid-template-columns: calc(var(--necox-sr-sidebar-width, 260px) - 60px) 1fr 460px; gap: var(--necox-sr-gap, 20px); padding: 24px 0; align-items: start; } .necox-search__sidebar--compact .necox-filter-sidebar { font-size: 12px; } /* v7.5.0 — Preset 2: tum 3 panel sticky + scroll-chain. Her panel kendi icinde scroll eder; sinira (en ust / en alt) gelince overscroll-behavior: auto sayesinde wheel/touch sayfa scroll'una gecer. Paneller sticky kaldigi icin sayfa kayarken yerinde gozukmeye devam eder. Hover-bazli swap (overflow:hidden ile aktif olmayan paneli kilitleme) Preset 2'de KALDIRILDI — scroll-chain ile celisiyor (kilitlenen panel sinira gelmis sayilmaz, zincir kopuyordu). Preset 1'de korunuyor. v5.15.0'da konulan eski mantik artik Preset 1 ozelinde. */ /* v7.4.13 — MOCK ILE BIREBIR. 10 deneme sonrasi anlasildi: tarayicinin dogal wheel/scroll motoru en akici olan; preventDefault + custom scroll mantigi her seferinde titreme/zorlama uretti. Mock'taki cozum: - position: sticky + max-height (klasik) - overscroll-behavior YOK (default auto, dogal chain) - JS passive:true, preventDefault YOK, sinirda sadece scrollBy sigorta */ .necox-search--preset-2 .necox-search__sidebar, .necox-search--preset-2 .necox-search__main { position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; /* v7.16.13 — kartin sol bosluk = sag bosluk (scroll bar HARIC, bar'in baslangicina kadar). scrollbar-gutter:stable bar'a kendi yerini verir; sol/sag esit kucuk pay ile kartin iki yanindaki GERCEK bos alan esitlenir (scroll bar payi sayilmaz). */ scrollbar-gutter: stable; padding-left: 6px; padding-right: 17px; /* v7.16.13 — kart scroll bar'dan uzak (kullanici tercihi, sol 6 / sag 17) */ } .necox-search--preset-2 .necox-search__preview { position: sticky; /* v7.5.6 — onizleme uste yakin durmasin (yukari kayarken kesik gozukmesin) */ top: 100px; align-self: start; max-height: calc(100vh - 130px); overflow-y: auto; } .necox-search--preset-2 .necox-search__sidebar::-webkit-scrollbar, .necox-search--preset-2 .necox-search__main::-webkit-scrollbar, .necox-search--preset-2 .necox-search__preview::-webkit-scrollbar { width: 6px; } .necox-search--preset-2 .necox-search__sidebar::-webkit-scrollbar-thumb, .necox-search--preset-2 .necox-search__main::-webkit-scrollbar-thumb, .necox-search--preset-2 .necox-search__preview::-webkit-scrollbar-thumb { background: var(--necox-border); border-radius: 3px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRESET 3 — Harita + Liste Split ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-search--preset-3 { display: grid; /* v7.11.1 — orta panel (liste) daha kompakt, sag harita daha genis (40%/60%) */ grid-template-columns: 2fr 3fr; gap: 20px; padding-bottom: 24px; align-items: start; } /* v7.16.7 (CLS) — DOM sirasi artik harita ONCE, liste SONRA (preset-3.php). Masaustu (>1024) grid'de liste SOL/1.kolon (2fr), harita SAG/2.kolon (3fr) kalsin diye order ile DOM tersini geri cevir. Mobil (<=1024) blogunda ikisi de order:0 (DOM dogal). NOT: min-width:1025 ile sinirli + spesifiklik mobil order:0 ile cakismaz. */ @media (min-width: 1025px) { .necox-search--preset-3 .necox-search__main { order: 1; } .necox-search--preset-3 .necox-search__map-panel { order: 2; } } /* v7.16.0/1 — Desktop'ta hover-resize ve kompakt kart KAPALI (kullanici karari). Desktop sabit zengin kart korunur, tam ekran btn zaten mevcut. */ /* v7.16.1 — Tablet (769-1024px) icin yan-yana layout + tap-driven panel resize + minimum-bozulmaz kompakt kart. Mobile (<=768) dokunulmaz, mevcut stacked davranis. */ @media (min-width: 769px) and (max-width: 1024px) { /* Tablet'te yan yana grid AC — DEFAULT: liste GENİŞ (kartlar tam acik), harita dar */ .necox-search--preset-3.necox-search--hover-resize { grid-template-columns: 3fr 2fr !important; transition: grid-template-columns 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* Map ust / list alt order'i kaldir, yan yana olsun */ .necox-search--preset-3.necox-search--hover-resize .necox-search__map-panel { order: 2 !important; } .necox-search--preset-3.necox-search--hover-resize .necox-search__main { order: 1 !important; } /* Harita sticky + viewport-height (yan yana scroll uyumu) */ .necox-search--preset-3.necox-search--hover-resize .necox-search__map-panel { position: sticky !important; top: 80px !important; height: calc(100vh - 100px) !important; } .necox-search--preset-3.necox-search--hover-resize .necox-search__map { height: 100% !important; min-height: auto !important; } .necox-search--preset-3.necox-search--hover-resize .necox-search__main--scroll { max-height: calc(100vh - 100px) !important; overflow-y: auto !important; } /* MAP FOCUS — yumusak swap (3fr/2fr -> 2fr/3fr), kart sigarli. */ .necox-search--preset-3.necox-search--hover-resize.is-map-focus { grid-template-columns: 2fr 3fr !important; } /* LIST FOCUS — liste daha genis (4fr/1fr cok agresif degil, sadece daha geniş) */ .necox-search--preset-3.necox-search--hover-resize.is-list-focus { grid-template-columns: 3fr 2fr !important; } /* Kart override KALDIRILDI — mevcut zengin gorunum, bilgi tam, sekil bozulmaz cunku grid 2fr (yeterli alan). */ } /* v7.16.0 — Map UI elements (search-here btn, counter) */ .necox-search__map-search-here { position: absolute; top: 14px; left: 50%; transform: translate(-50%, -12px); z-index: 500; background: var(--necox-primary, #00d4ff); color: var(--necox-primary-fg, #0a1530); border: none; padding: 9px 16px; border-radius: 22px; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--necox-primary, #00d4ff) 50%, transparent); display: flex; align-items: center; gap: 6px; opacity: 0; visibility: hidden; transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s; } .necox-search__map-search-here.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.3s, transform 0.3s, visibility 0s; } .necox-search__map-search-here:hover { transform: translate(-50%, -2px); } .necox-search__map-counter { position: absolute; bottom: 14px; left: 14px; z-index: 500; /* v7.16.7 — bg "color-mix(--necox-bg, transparent)" idi, ama --necox-bg preset'lerde gradient string (color-mix gradient'le calismaz, sonuc rgba(0,0,0,0) cikiyordu). Harita uzerinde counter seffaf duruyordu, text okunmuyordu. --necox-glass-bg solid renkli (preset cascade'i), toolbar butonlariyla ayni zemin paritesi. */ background: var(--necox-glass-bg, rgba(17, 24, 39, 0.92)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--necox-text, #fff) 8%, transparent); color: var(--necox-text, #fff); padding: 7px 13px; border-radius: 16px; font-size: 12px; pointer-events: none; } .necox-search__map-counter strong { color: var(--necox-primary, #00d4ff); font-weight: 800; } .necox-search__main--scroll { max-height: 600px; overflow-y: auto; /* v7.16.13 — preset 3 liste: scroll bar yer rezerve + kart sag scroll bar'dan uzak. scroll bar payi haric; sol 6 / sag 18 (kullanici tercihi). */ scrollbar-gutter: stable; scrollbar-width: thin; padding-left: 6px; padding-right: 24px; } .necox-search__map-panel { position: sticky; top: 80px; /* v7.8.0 — toolbar/locate/legend absolute pozisyon icin relative + radius */ border-radius: 8px; overflow: hidden; } .necox-search__map { position: relative; /* v7.14.1 — sr_map_height K2 cascade'i (eskiden hardcoded 500px K2'yi eziyordu, FD). */ min-height: var(--necox-sr-map-height, 500px); border-radius: 8px; overflow: hidden; /* v7.16.3 — Leaflet marker/pane z-index'leri (134/200/400/600) root stacking context'e kaciyor, search-drawer (z:99999) acikken drawer ICERIGI uzerine cikiyor (drawer arka plani altta ama marker'lar drawer text/link ustunde). isolation:isolate ile yeni stacking context olusturulur, Leaflet z'leri kapsayicida hapsedilir. */ isolation: isolate; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ v7.8.0 — HARITA MUCEVHER PAKETI (Preset 3) Toolbar (yogunluk/fiyat-isi + sort) + Locate buton + Legend ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Toolbar — harita ust sol */ .necox-search__map-toolbar { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 500; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; /* v7.11.1 — dikey hizalama: sort dropdown butonlarla ayni satirda */ pointer-events: none; } .necox-search__map-toolbar > * { pointer-events: auto; } /* v7.11.4 — Toolbar buton preset cascade: glass_bg + text + border */ .necox-search__map-toolbar-btn { background: var(--necox-glass-bg, rgba(17, 24, 39, 0.92)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--necox-border, rgba(255,255,255,0.15)); color: var(--necox-text, #2A3254); padding: 0 12px; height: 36px; /* v7.11.1 — Sort dropdown ile esit yukseklik (38px -> 36px kompakt) */ border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 500; line-height: 1; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); white-space: nowrap; } /* v7.8.1 — hidden attribute saygisi (display:flex override fix) */ .necox-search__map-toolbar-btn[hidden] { display: none !important; } /* v7.11.4 — Hover: primary border + primary text + primary-soft zemin */ .necox-search__map-toolbar-btn:hover { background: var(--necox-primary-soft, var(--necox-glass-bg)); border-color: var(--necox-primary, #2A3254); color: var(--necox-primary, #2A3254); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--necox-primary, #2A3254) 30%, transparent); } .necox-search__map-toolbar-btn--active { background: var(--necox-primary, #2A3254) !important; color: var(--necox-primary-fg, #fff) !important; border-color: var(--necox-primary, #2A3254) !important; } /* PERF (Adim 7): draw/heat lazy yuklenirken butonda bekleme geri bildirimi */ .necox-search__map-toolbar-btn--loading { opacity: 0.6; cursor: wait; pointer-events: none; } /* Sort dropdown — v7.11.4 preset cascade (toolbar btn ile ayni) */ .necox-search__map-sort { background: var(--necox-glass-bg, rgba(17, 24, 39, 0.92)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--necox-border, rgba(255,255,255,0.15)); color: var(--necox-text, #2A3254); padding: 0 28px 0 12px; /* sag tarafta select ok'u icin yer */ height: 36px; border-radius: 8px; cursor: pointer; font-size: 12.5px; margin-left: auto; outline: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); appearance: none; -webkit-appearance: none; /* v7.11.4 — Ok rengi cascade icin currentColor uyumlu (text rengiyle ayni) */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .necox-search__map-sort:focus { border-color: var(--necox-primary, #2A3254); } .necox-search__map-sort option { color: var(--necox-text, #2A3254); background: var(--necox-card-bg, #ffffff); } .necox-search__map-sort option[disabled] { color: var(--necox-muted, rgba(0,0,0,0.4)); } /* Locate buton (sag alt yuvarlak) */ .necox-search__map-locate { position: absolute; /* v7.16.8.2: Konumum butonu Leaflet zoom kontrolu (bottomright) ile cakisiyordu; zoom'un hemen USTUNE (1px bosluk) + YATAY TAM HIZALI alindi. bottom:91px (zoom'dan 1px ustte), right:6px (locate 42px / zoom 33px ortalanir -> +/- ikonlari ile ayni dikey eksen). */ bottom: 91px; right: 6px; z-index: 500; width: 42px; height: 42px; background: var(--necox-primary, #2A3254); color: var(--necox-primary-fg, #fff); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transition: background 0.2s, transform 0.2s; border: none; padding: 0; } .necox-search__map-locate:hover { background: var(--necox-primary-hover, var(--necox-primary, #2A3254)); transform: scale(1.1); } .necox-search__map-locate.is-loading { opacity: 0.6; pointer-events: none; } /* v7.16.8.2: Konum merkezi avatar (locate "Konumum" -> 5km halka ortasi) */ .necox-locate-avatar-wrap { background: transparent; border: none; } .necox-locate-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 3px solid var(--necox-primary, #2A3254); box-shadow: 0 2px 10px rgba(0,0,0,0.45); background: #fff; display: block; } /* Avatar yoksa (misafir/404) konum pini fallback */ .necox-locate-pin { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); } /* v7.16.8.2: Locate butonu tooltip'i — buton-OZEL (genel necox-tooltips-on body class'ina bagimli DEGIL, her zaman gorunur). "Konumum" butonunun ne yaptigini cogu kullanici bilmiyordu. Hover'da ust-sol'da acilir (sag-alt kosede oldugu icin ust-sol; ekran disina tasmaz). */ .necox-search__map-locate::after { content: attr(data-tt); position: absolute; bottom: 50%; right: calc(100% + 10px); transform: translateY(50%); background: var(--necox-tt-bg, rgba(28,28,30,0.95)); color: var(--necox-tt-color, #fff); padding: 6px 11px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0.18s ease; z-index: 1000; } .necox-search__map-locate:hover::after { opacity: 1; visibility: visible; } /* Legend (sag alt, fiyat-isi acikken) */ .necox-search__map-legend { position: absolute; bottom: 12px; left: 12px; z-index: 500; background: rgba(17, 24, 39, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 14px; border-radius: 8px; border: 1px solid var(--necox-border, rgba(255,255,255,0.15)); font-size: 11px; color: var(--necox-text, #fff); display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .necox-search__map-legend[hidden] { display: none !important; } .necox-search__map-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .necox-search__map-legend-dot--cheap { background: var(--necox-success); } .necox-search__map-legend-dot--mid { background: var(--necox-warning); } .necox-search__map-legend-dot--pricy { background: var(--necox-danger); } /* Pin renkleri (fiyat-isi modunda) */ .necox-search__map-pin--cheap { background: var(--necox-success) !important; color: #fff !important; } .necox-search__map-pin--mid { background: var(--necox-warning) !important; color: #fff !important; } .necox-search__map-pin--pricy { background: var(--necox-danger) !important; color: #fff !important; } .necox-search__map-pin--free { background: #9ca3af !important; color: #fff !important; } /* Floating card (popup icerigi — zengin) */ .leaflet-popup-content-wrapper { background: var(--necox-bg, #fff); color: var(--necox-text, #1a1a2e); border-radius: 12px; padding: 0; overflow: hidden; border: 1px solid var(--necox-primary, #2A3254); box-shadow: 0 10px 40px rgba(0,0,0,0.3); } .leaflet-popup-content { margin: 0; width: 280px !important; } .leaflet-popup-tip { background: var(--necox-bg, #fff); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Harita Popup — Tasarim 5 (masaustu >= 769px) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-map-fc5 { width: 280px; background: var(--necox-card-bg, #fff); border-radius: 14px; overflow: hidden; border: 1px solid var(--necox-border, #EAEAEA); display: flex; align-items: stretch; } .necox-map-fc5__thumb { flex: 0 0 104px; width: 104px; align-self: stretch; overflow: hidden; background: var(--necox-border, #EAEAEA); position: relative; } .necox-map-fc5__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .necox-map-fc5__badge { position: absolute; top: 7px; left: 7px; background: var(--necox-secondary, #FFCC04); color: var(--necox-primary, #2A3254); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; } /* Ocean Deep + Midnight Blue: badge preset primary rengiyle */ .necox-preset-ocean-deep .necox-map-fc5__badge { background: var(--necox-primary, #00b4d8); color: var(--necox-primary-fg, #001525); } .necox-preset-midnight-blue .necox-map-fc5__badge { background: var(--necox-primary, #f0b429); color: var(--necox-primary-fg, #0a0e1a); } .necox-preset-super-light .necox-map-fc5__badge { background: var(--necox-primary, #c8896b); color: var(--necox-primary-fg, #fff); } .necox-map-fc5__body { flex: 1; min-width: 0; padding: 9px 11px 10px; display: flex; flex-direction: column; justify-content: center; gap: 7px; } .necox-map-fc5__info { min-width: 0; } .necox-map-fc5__actions { display: flex; align-items: center; gap: 7px; } .necox-map-fc5__title { font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--necox-heading, #2A3254); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .necox-map-fc5__price { font-size: 14px; font-weight: 800; color: var(--necox-primary, #2A3254); letter-spacing: -.3px; } .leaflet-container a.necox-map-fc5__btn { flex: 1; background: var(--necox-primary, #2A3254); color: var(--necox-primary-fg, #fff); border: none; padding: 7px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background .18s; } .leaflet-container a.necox-map-fc5__btn:hover { background: var(--necox-primary-hover, #3A4470); color: var(--necox-primary-fg, #fff); } .necox-map-fc5__fav { flex-shrink: 0; background: transparent; border: 1.5px solid var(--necox-primary, #2A3254); width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--necox-primary, #2A3254); transition: background .18s, color .18s; } .necox-map-fc5__fav:hover { background: var(--necox-primary, #2A3254); color: var(--necox-primary-fg, #fff); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Harita Popup — Tasarim 2 (mobil <= 768px) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-map-fc2 { width: 240px; background: var(--necox-card-bg, #fff); border-radius: 14px; overflow: hidden; display: flex; border: 1px solid var(--necox-border, #EAEAEA); } .necox-map-fc2__thumb { flex: 0 0 88px; height: 88px; overflow: hidden; background: var(--necox-border, #EAEAEA); } .necox-map-fc2__thumb img { width:100%; height:100%; object-fit:contain; display:block; } .necox-map-fc2__body { flex: 1; padding: 10px 11px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; } .necox-map-fc2__title { font-size: 12px; font-weight: 700; color: var(--necox-heading, #2A3254); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .necox-map-fc2__price { font-size: 14px; font-weight: 800; color: var(--necox-primary, #2A3254); letter-spacing: -.3px; } .necox-map-fc2__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; gap: 6px; } .leaflet-container a.necox-map-fc2__link { font-size: 11px; font-weight: 700; color: var(--necox-primary-fg, #fff); background: var(--necox-primary, #2A3254); text-decoration: none; padding: 5px 10px; border-radius: 7px; display: inline-flex; align-items: center; gap: 3px; transition: background .18s; } .leaflet-container a.necox-map-fc2__link::after { content: '→'; } .leaflet-container a.necox-map-fc2__link:hover { background: var(--necox-primary-hover, #3A4470); color: var(--necox-primary-fg, #fff); } .necox-map-fc2__fav { background: transparent; border: 1.5px solid var(--necox-primary, #2A3254); width: 28px; height: 28px; border-radius: 7px; cursor: pointer; color: var(--necox-primary, #2A3254); display: flex; align-items: center; justify-content: center; transition: background .18s, color .18s; flex-shrink: 0; } .necox-map-fc2__fav:hover { background: var(--necox-primary, #2A3254); color: var(--necox-primary-fg, #fff); } /* Cluster customization — v7.11.3 outer halka + ic dolgu preset cascade */ .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: color-mix(in srgb, var(--necox-primary, #2A3254) 35%, transparent) !important; } .marker-cluster-small div { background: var(--necox-primary, #2A3254) !important; color: var(--necox-primary-fg, #fff) !important; font-weight: 700; } .marker-cluster-medium div { background: var(--necox-primary-hover, #3A4470) !important; color: var(--necox-primary-fg, #fff) !important; font-weight: 700; } .marker-cluster-large div { background: var(--necox-danger) !important; color: #fff !important; font-weight: 700; } /* v7.11.3 — Cluster hover'da primary'ye dogru parlama */ .marker-cluster:hover div { box-shadow: 0 0 0 4px color-mix(in srgb, var(--necox-primary, #2A3254) 30%, transparent); } /* Pulse animasyon (konumum halkasi) */ .necox-pulse { width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(240,180,41,0.4) 0%, rgba(240,180,41,0) 70%); animation: necox-pulse 2s infinite ease-out; pointer-events: none; } @keyframes necox-pulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ v7.8.1 — POLYGON CIZ + ANIMASYON CILASI (Faz 3) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Polygon mode aktif iken harita uzerinde "crosshair" cursor */ .necox-search__map--drawing, .necox-search__map--drawing .leaflet-container { cursor: crosshair !important; } /* Leaflet.draw varsayilan toolbar gizli (kendi toolbar'imizdan kontrol ediyoruz) */ .leaflet-draw-toolbar, .leaflet-draw-section { display: none !important; } /* Polygon stillemesi */ .leaflet-interactive[stroke="#f0b429"] { filter: drop-shadow(0 2px 6px rgba(240,180,41,0.4)); } /* "Temizle" butonu (--clear modifier) — kirmizi tonlu */ .necox-search__map-toolbar-btn--clear:not([hidden]) { background: rgba(239, 68, 68, 0.92) !important; color: #fff !important; border-color: rgba(239, 68, 68, 0.92) !important; } .necox-search__map-toolbar-btn--clear:hover { background: rgba(220, 38, 38, 0.95) !important; border-color: rgba(220, 38, 38, 0.95) !important; } /* ── Pin drop animasyonu (yukaridan inerek belirir) ── */ .necox-search__map-pin-wrap { animation: necox-pin-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } /* Stagger: ilk 20 pin icin sirayla gelir */ .necox-search__map-pin-wrap:nth-child(1) { animation-delay: 0.00s; } .necox-search__map-pin-wrap:nth-child(2) { animation-delay: 0.03s; } .necox-search__map-pin-wrap:nth-child(3) { animation-delay: 0.06s; } .necox-search__map-pin-wrap:nth-child(4) { animation-delay: 0.09s; } .necox-search__map-pin-wrap:nth-child(5) { animation-delay: 0.12s; } .necox-search__map-pin-wrap:nth-child(6) { animation-delay: 0.15s; } .necox-search__map-pin-wrap:nth-child(7) { animation-delay: 0.18s; } .necox-search__map-pin-wrap:nth-child(8) { animation-delay: 0.21s; } .necox-search__map-pin-wrap:nth-child(9) { animation-delay: 0.24s; } .necox-search__map-pin-wrap:nth-child(10) { animation-delay: 0.27s; } .necox-search__map-pin-wrap:nth-child(n+11) { animation-delay: 0.30s; } @keyframes necox-pin-drop { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Pin hover — glow + lift */ .necox-search__map-pin { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, filter 0.2s ease-out; } /* v7.11.3 — Glow preset primary'sinin yari saydam hali */ .necox-search__map-pin:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 6px 16px color-mix(in srgb, var(--necox-primary, #2A3254) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--necox-primary, #2A3254) 15%, transparent); z-index: 1000; } /* Heatmap fade (heat layer'in canvas'ina opacity transition) */ .leaflet-heatmap-layer { transition: opacity 0.3s ease-in-out; } /* Floating card fade-in (v7.16.8.2 Sivas fix 5): Eskiden animasyon transform: translateY kullaniyordu. AMA Leaflet popup'in KONUMUNU da transform:translate3d ile ayarlar -> animasyonun transform'u Leaflet'inkini EZER -> popup yanlis yerde (translateY) baslayip Leaflet'in gercek konumuna "kayar" (spiderfy'da pin merkezden uzak oldugu icin cok belirgin: "sol'dan kendi yerine kayma" BUG). COZUM: animasyonu transform'dan arindir, sadece OPACITY ile fade-in yap. Leaflet'in konum transform'una dokunma -> popup ILK seferde dogru yerde acilir, kayma YOK. .leaflet-popup-content-wrapper uzerine translateY uygulanir (popup konumunu degil, ic icerigi animeler). */ .leaflet-popup { animation: necox-popup-fade 0.25s ease-out; } @keyframes necox-popup-fade { from { opacity: 0; } to { opacity: 1; } } .leaflet-popup-content-wrapper { animation: necox-popup-rise 0.25s ease-out; } @keyframes necox-popup-rise { from { transform: translateY(15px); } to { transform: translateY(0); } } /* Cluster bubble — hover'da hafif buyur */ .marker-cluster { transition: transform 0.2s ease-out; } .marker-cluster:hover { transform: scale(1.1); } /* v7.9.2 — Pin popup aktifken pin'i pulse (canli "konusuyor" his) */ .necox-search__map-pin--talking { animation: necox-pin-talking 1.6s ease-out infinite; } @keyframes necox-pin-talking { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0.5), 0 3px 10px rgba(0,0,0,0.4); } 50% { box-shadow: 0 0 0 12px rgba(240, 180, 41, 0), 0 3px 10px rgba(0,0,0,0.4); } } /* v7.9.3 — Liste item hover sonrasi pin highlight (talking'den daha hafif) */ .necox-search__map-pin--hover { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(240, 180, 41, 0.25), 0 6px 16px rgba(240, 180, 41, 0.4) !important; z-index: 1000; animation: necox-pin-hover-glow 1.2s ease-in-out infinite alternate; } @keyframes necox-pin-hover-glow { from { box-shadow: 0 0 0 6px rgba(240, 180, 41, 0.2), 0 6px 16px rgba(240, 180, 41, 0.3); } to { box-shadow: 0 0 0 10px rgba(240, 180, 41, 0.1), 0 8px 20px rgba(240, 180, 41, 0.5); } } /* Mobilde polygon butonu gizle (touch input karmasik) */ @media (max-width: 768px) { .necox-search__map-toolbar-btn--draw, .necox-search__map-toolbar-btn--clear { display: none !important; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ v7.9.0 — TAM EKRAN HARITA MODU ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .necox-search__map-panel--fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 9999 !important; border-radius: 0 !important; animation: necox-map-fs-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .necox-search__map-panel--fullscreen .necox-search__map { height: 100vh !important; width: 100vw !important; border-radius: 0 !important; } .necox-search__map-panel--fullscreen .necox-search__map-toolbar { /* v7.12.4 — kullanici geri donusu: 20 -> 40px. Hem /ilan-ara/ Preset 3 hem Hero widget icin ayni kural - admin bar + estetik bosluk icin. */ top: 40px; left: 20px; right: 20px; } .necox-search__map-panel--fullscreen .necox-search__map-locate { /* v7.16.8.5: Tam ekranda locate, Leaflet zoom kontrolu (bottomright) ile cakisiyordu -> zoom'un USTUNE alindi (bottom:93px). Ikisi de sagdan 20px iceride (scrollbar/kenar payi). locate right:20px. Zoom dikey eksen hizalamasi icin zoom margin-right asagida override edilir. */ bottom: 93px; right: 20px; width: 52px; height: 52px; } /* Tam ekranda Leaflet zoom kontrolunu locate ile dikey eksende ortala + iceri al: locate(52px) merkezi sagdan 20+26=46px. zoom(33px) merkezi 46px icin margin-right = 46 - 33/2 = ~29.5px. .leaflet-right ekli: Leaflet'in kendi .leaflet-right .leaflet-control margin'ini (spec 0,2,0) yenmek icin spec 0,3,0. */ .necox-search__map-panel--fullscreen .leaflet-right .leaflet-control-zoom { margin-right: 30px; } .necox-search__map-panel--fullscreen .necox-search__map-legend { bottom: 20px; left: 20px; } @keyframes necox-map-fs-in { from { clip-path: inset(20% 20% 20% 20% round 12px); opacity: 0.7; } to { clip-path: inset(0% 0% 0% 0% round 0px); opacity: 1; } } /* Body class: fullscreen aktifken sayfa scroll'unu kilitle */ body.necox-map-fullscreen-active { overflow: hidden; } /* Tam ekran modunda fullscreen butonu kirmizi (cikis) */ .necox-search__map-panel--fullscreen .necox-search__map-toolbar-btn--fullscreen { background: rgba(239, 68, 68, 0.92); color: #fff; border-color: rgba(239, 68, 68, 0.92); } /* Klavye kisayolu ipucu (fullscreen modunda alt orta) */ .necox-search__map-panel--fullscreen::after { content: 'WASD: hareket · +/−: zoom · H: yoğunluk · F: fiyat ısısı · G: konumum · D: alan çiz · ESC: çıkış'; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(17, 24, 39, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,0.7); padding: 8px 16px; border-radius: 8px; font-size: 11px; z-index: 500; pointer-events: none; border: 1px solid rgba(255,255,255,0.1); white-space: nowrap; animation: necox-fs-hint-fade 4s ease-out 1s forwards; } @keyframes necox-fs-hint-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0.4; } } .necox-search__map-panel--fullscreen:hover::after { opacity: 0.8; } /* Mobilde fullscreen butonu olsun ama klavye ipucu gizli */ @media (max-width: 768px) { .necox-search__map-panel--fullscreen::after { display: none; } } /* CANLI AKTIVITE BUBBLE CSS — v7.16.8.25'te header.css'e tasindi. Sebep: search-results.css sadece /ilan-ara/'da yukleniyor; bubble tum sitede gorunur olmali. header.css her sayfada yukleniyor. */ /* Mobil: toolbar kompakt profesyonel hava — butun elemanlar esit gorsel agirlik. */ @media (max-width: 768px) { .necox-search__map-toolbar { gap: 5px; } /* v7.16.5 — Tipografi + padding inceltildi (12->10.5, 6/10 -> 4/8), yukseklik 36->28, SVG ikonlar 14->12. Profesyonel-kibar gorsel. */ .necox-search__map-toolbar-btn { font-size: 10.5px; padding: 4px 8px; height: 28px; gap: 4px; letter-spacing: 0.1px; } .necox-search__map-toolbar-btn svg { width: 12px; height: 12px; } /* Sirala SELECT — diger butonlarla esit yukseklik/font, dar padding. */ .necox-search__map-sort { margin-left: 0; width: auto; min-width: 0; font-size: 10.5px; padding: 0 20px 0 8px; height: 28px; background-position: right 6px center; } } /* v5.15.0 — Preset 3: ust yatay filtre bar her zaman sticky (klasik) */ .necox-search__hbar { position: sticky; top: 70px; z-index: 50; background: var(--necox-white, #fff); /* Bar arka planı page bg'den belli olsun ki scroll'da uste yapışınca yamali gozukmesin */ } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 1024px) { /* v6.5.6 (T1) — Tablette Preset 1 sidebar gizlenir (FAB drawer sistemi devreye girer). Eski 220px sikisik sidebar kullanilamiyordu (Select2/cascade sigmiyordu). Tek kolon grid + FAB ile filtre erisimi tutarli olur (mobil ile ayni UX). */ .necox-search--preset-1 { grid-template-columns: 1fr; } .necox-search--preset-1 .necox-search__sidebar { display: none; } /* v6.5.6 (T2) — Preset 2 sidebar zaten gizli, grid'i tek kolona indir. Sag preview paneli ayri kuralla mobilde de gizlenir (satir 881). */ .necox-search--preset-2 { grid-template-columns: 1fr 280px; } .necox-search--preset-2 .necox-search__sidebar { display: none; } .necox-search--preset-3 { /* v7.12.6 — !important: preset-3.php inline style "grid-template-columns: 40fr 60fr;" yaziyor (admin K2 sr_preset3_list_width/_layout_preset'ten), bu mobile'da CSS rule'unu yener. Bu eski bir bug, hem /ilan-ara/ hem widget'i etkiliyor. Mobile'da tek-kolon zorunlu — inline'i kirar. */ grid-template-columns: 1fr !important; } /* v7.16.7 (CLS) — Siralama artik DOM ile cozuldu (preset-3.php: harita ONCE, liste SONRA). Mobilde DOM dogal sirasi zaten harita-ust/liste-alt oldugu icin 'order'a GEREK YOK. Eski order:1/2 kurallari kaldirildi: order GEC gelen CSS ile uygulaninca liste ~300px asagi kayip CLS 0.358 uretiyordu (Playwright kaniti, 502->802). DOM sirasi ilk paint'te kesin oldugu icin shift sifir. order:0 ile her ihtimale karsi notr birakilir. */ .necox-search--preset-3 .necox-search__map-panel { order: 0; } .necox-search--preset-3 .necox-search__main { order: 0; } .necox-search__map-panel { /* v7.16.4 — sticky kapali (mobile/tablet tek-kolon scroll), ama toolbar/locate/legend absolute pozisyonlu child'lar icin anchor olusturmali. position:static iken absolute child viewport'a yapisip header altinda gozukuyordu (tespit Playwright). v7.16.6 — top:80px sticky default'undan miras kaldi, mobile'da panel'i 80px asagi kaydirip altindaki main (ilan listesi) ile cakistiriyordu. Sonuc: legend + locate + ilan-sayisi gibi panel dibindeki overlay'ler alttaki kart fotosu uzerinde gozukuyordu. top:0 ile cakisma cozulur, panel grid hucresinde dogru oturur. */ position: relative; top: 0; height: 350px; } .necox-search__map { min-height: 350px; } .necox-search__main--scroll { max-height: none; } /* v5.15.0 — Tablet: hover-bazli swap kapali, klasik sticky devam. Her panel kendi sticky'sini korur (her iki taraf bagimsiz scroll). v7.5.0: Preset 2 hover-swap'i tamamen kalktigi icin sadece Preset 1 override'lari kaldi. */ .necox-search--hover-left, .necox-search--hover-right { /* hover class'lari etkisiz */ } .necox-search--hover-left.necox-search--preset-1 .necox-search__main, .necox-search--hover-right.necox-search--preset-1 .necox-search__sidebar { overflow-y: auto; /* hover-bazli kisitlamayi iptal et */ } } @media (max-width: 767px) { /* v6.5.6 — Preset 1 grid + sidebar zaten ≤1024px blogunda gizlendi. Mobil burada sadece full-grid 1fr + map yukseklik + sticky kapatma. */ /* v7.12.6 — Preset 3 mobile tek-kolon (yedek defansif, ≤1024 zaten yapiyor) */ .necox-search--preset-3 { grid-template-columns: 1fr !important; } /* v7.12.8 — Pagination mobile sigmiyor + "Daha Fazla Yukle" yarisi gozukmuyor. Numara butonlari (1,2,3,..,7) 356px sigamiyordu, parent 302px - load-more 200px da parent disinda kaliyordu (margin/center hesabi yanlis). FIX: flex-wrap + center align, load-more full-width butonu kendi satirinda. */ .necox-pagination__list { flex-wrap: wrap; justify-content: center; } .necox-search__load-more { width: 100%; max-width: none; padding: 12px 24px; min-height: 44px; font-size: 14px; } /* v7.12.8 — Preset 2/3 liste item mobile = Preset 1 grid kart gorunumu. Desktop'ta yatay (sol resim + sag icerik) kaliyor. Mobile'da DUSEY (ust resim full + alt icerik). Tek degisiklik: flex-direction column + thumb full-width + aspect-ratio 4/3 (Preset 1 .necox-ad-card resim ile birebir paralel). HTML degismez, sadece CSS. Tum action butonlari, favori/raporla efektleri, hover davranislari aynen calismaya devam eder. */ .necox-search--preset-2 .necox-search__preview { display: none; } /* v7.14.4 — Mobile'da preview gizli AMA grid hala 1fr 280px'i miras aliyor (≤1024 kurali). Grid template'i tek kolon olarak override et, yoksa liste 255px'e sikisir, kart kucuk gozukur (Playwright audit'inde tespit edildi: searchGridTemplate "255.175px 280px"). */ .necox-search--preset-2 { grid-template-columns: 1fr !important; } /* v7.14.5 — Mobile'da Preset 2/3 ad-card list-view thumb full-width. sr_list_thumb_size K2 alani desktop'ta 160-280px arasi mantikli (yatay yapi), mobile'da flex-direction:column oldugu icin thumb ustte ve kucuk gozukur. Mobile'da thumb sayfa genisligini doldurmali (Preset 1 grid kart paritesi). */ .necox-search--preset-2 .necox-ad-card--list .necox-ad-card__media, .necox-search--preset-3 .necox-ad-card--list .necox-ad-card__media { width: 100% !important; } /* v7.16.63 — Tespit: mobilde Preset 2/3 ilan karti genisligi = Preset 1 (342px paritesi). Preset 2/3 main konteyneri kendi yan padding'ini birakir -> kartlar Preset 1'den dar kaliyordu (301/319 vs 342). Main padding'i sifirla + kart full-width -> ayni genislik. */ .necox-search--preset-2 .necox-search__main, .necox-search--preset-3 .necox-search__main { padding-left: 0; padding-right: 0; /* KOK NEDEN: __main overflow-y:auto + scrollbar-gutter:stable -> tarayici scrollbar icin 11px ayiriyordu, kartlar 342->331 daraliyordu. Mobilde panel-ici scroll GEREKSIZ (sayfa zaten dogal dikey scroll). Scrollbar payini kaldir -> kart Preset 1 ile tam 342px hizali. */ overflow: visible; scrollbar-gutter: auto; } /* .necox-search__list ic sarmalayicisi flex/grid item olarak shrink ediyor -> 11px dar kaliyordu (342 yerine 331). flex hesabini iptal + tam genislik zorla. */ .necox-search--preset-2 .necox-search__list, .necox-search--preset-3 .necox-search__list { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; flex: 1 1 100%; box-sizing: border-box; align-self: stretch; /* v7.16.63 — Kart arasi gap = Preset 1 (16px). __list gap'i K2 degiskeni --necox-sr-list-item-gap (DB'de 8px) ile satir ~2517'de set ediliyor; mobilde o degiskeni Preset 1 grid gap'i (16px) ile esitle. !important cunku ayni-ozgullukteki sonraki kural (2517) aksi halde ezerdi. */ gap: var(--necox-sr-gap, 16px) !important; } .necox-search--preset-2 .necox-sr-card--m, .necox-search--preset-3 .necox-sr-card--m { width: 100%; max-width: 100%; margin-bottom: 0; /* gap __list'ten gelir, cift bosluk olmasin */ } .necox-search__hbar-form { flex-direction: column; } .necox-search__hbar-field { min-width: 100%; } .necox-search__cards { grid-template-columns: 1fr !important; } /* v7.16.63 — Tespit: mobilde harita yuksekligi = en yuksek Preset 1 ilan karti (405px). Harita Preset 1 ilan kartiyla ayni yukseklikte dursun (kart paritesi). */ .necox-search__map-panel { height: 405px; } .necox-search__map { min-height: 405px; height: 405px; } /* v5.15.0 — Mobil: tum sticky kapali (tek-kolon scroll dogal akiş) */ .necox-search--preset-1 .necox-search__main, .necox-search--preset-2 .necox-search__main, .necox-search--preset-2 .necox-search__preview, .necox-search__hbar { position: static; max-height: none; overflow-y: visible; top: auto; } /* v6.3.0 — Eski .necox-search__mobile-filter-btn kaldirildi. Mobil filtre paneli artik bagimsiz #necox-mfp-fab + #necox-mfp-drawer sistemine devredildi (CSS bu dosyanin en altinda). */ } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* v6.3.0 — MOBIL FILTRE PANELI (Drawer + FAB Buton, ZIP 1) */ /* v6.4.0 — Gorsel zenginlestirme (gradient, cam, resim, golge,*/ /* overlay blur), drawer header/body, FAB hover/tipografi. */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* CSS variable defaults — admin K2'den override edilir */ :root { /* ZIP 1 — temel davranis + kabuk + FAB temel */ --necox-mfp-width: 85%; --necox-mfp-height: 80%; --necox-mfp-anim-duration: 300ms; --necox-mfp-overlay-color: #000000; --necox-mfp-overlay-opacity: 0.50; --necox-mfp-panel-bg: #ffffff; --necox-mfp-panel-border-color: transparent; --necox-mfp-panel-border-width: 0; --necox-mfp-panel-radius: 0; --necox-mfp-panel-padding: 16px; /* v6.5.9 - FAB CSS variables (--necox-mfp-fab-size, -bg, -color) KALDIRILDI. */ /* ZIP 2 — drawer kabuk gelismis */ --necox-mfp-panel-bg-alpha: 1; /* 0..1 — solid BG'ye alpha (cam KAPALI iken) */ --necox-mfp-glass-blur: blur(0); /* cam acikken backdrop-filter degeri */ --necox-mfp-glass-bg: transparent; /* cam acikken yarim saydam katman */ --necox-mfp-panel-gradient: none; /* gradient acikken linear-gradient(...) */ --necox-mfp-panel-bg-image: none; /* arka plan resmi acikken url(...) */ --necox-mfp-panel-bg-size: cover; --necox-mfp-panel-bg-repeat: no-repeat; --necox-mfp-panel-bg-position: center center; --necox-mfp-panel-shadow: 0 0 24px 0 rgba(0,0,0,0.15); --necox-mfp-overlay-blur: blur(0); /* ZIP 2 — drawer header */ --necox-mfp-header-bg: transparent; --necox-mfp-header-title-color: inherit; --necox-mfp-header-close-color: inherit; --necox-mfp-header-padding: 12px; --necox-mfp-header-border-color: rgba(0,0,0,0.08); --necox-mfp-header-font-family: inherit; --necox-mfp-header-font-size: 16px; --necox-mfp-header-font-weight: 600; /* ZIP 2 — drawer body */ --necox-mfp-body-bg: transparent; --necox-mfp-body-padding: 16px; --necox-mfp-body-label-font-family: inherit; --necox-mfp-body-label-font-size: 13px; --necox-mfp-body-label-font-weight: 500; --necox-mfp-body-label-color: inherit; /* v6.5.9 - FAB gelismis CSS variables (--necox-mfp-fab-hover-*, -border-*, -font-*, -letter-spacing) KALDIRILDI. ZIP 4B'de yerine --necox-mft-* gelecek. */ /* ZIP 3 — drawer footer + buton + sayac + easing */ --necox-mfp-anim-easing: ease-out; --necox-mfp-footer-bg: rgba(255, 255, 255, 0.96); --necox-mfp-footer-padding: 12px; --necox-mfp-footer-border-color: rgba(0, 0, 0, 0.08); --necox-mfp-footer-border-width: 1px; --necox-mfp-apply-bg: var(--necox-primary, #2271b1); --necox-mfp-apply-color: #ffffff; --necox-mfp-apply-radius: 6px; --necox-mfp-apply-padding-y: 12px; --necox-mfp-reset-bg: transparent; --necox-mfp-reset-color: inherit; --necox-mfp-reset-border-color: rgba(0, 0, 0, 0.15); --necox-mfp-counter-font-size: 14px; --necox-mfp-counter-color: inherit; } /* v6.5.6 — Sadece masaustu (≥1025px): drawer + trigger sistemi tamamen gizli */ /* v6.5.9 — .necox-mfp-fab cikarildi (FAB tamamen silindi) */ /* v6.6.0 — .necox-mft-wrap eklendi (mobil/tablet trigger butonu masaustunde gizli) */ .necox-mft-wrap, .necox-mfp-overlay, .necox-mfp-drawer { display: none; } /* v6.5.6 — Mobile + Tablet (≤1024px): drawer sistemi aktif. Eski breakpoint ≤767px idi; tablette sidebar 220px sikisik kaliyordu (T1) ve Preset 2'de tamamen kayboluyordu (T2). Tablette de FAB drawer ile filtre erisilir hale getirildi (mobil ile ayni UX). */ @media (max-width: 1024px) { /* v6.5.9 — FAB CSS BLOKLARI TAMAMEN KALDIRILDI. v6.6.0 ile yerini .necox-mft aldi. */ /* ─── v6.6.0 — Mobil/Tablet Trigger Buton (.necox-mft) ─── */ /* Wrapper (breadcrumb altinda, sayfa marginleri ile hizali) */ .necox-mft-wrap { display: block; /* masaustu display:none'i override eder */ margin: 12px 0 16px 0; padding: 0 16px; /* Mobilde sayfa kenarlarina yapismasin */ } /* Buton — preset uyumlu CSS variable cascade fallback: admin verirse mfp_trigger_*, vermezse sr_filter_btn_* (preset), o da yoksa --necox-primary, son care #2271b1 */ .necox-mft { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 0; cursor: pointer; line-height: 1; font-family: inherit; font-size: 14px; font-weight: 500; /* v7.14.10 — MFT cascade direkt primary'e bagli (sr-filter-btn-bg orphan'lardan kacar). Filtre form submit butonundan ayri kimlikte — preset karakteristik vurgu rengi. */ background: var(--necox-mft-bg, var(--necox-primary, #2271b1)); color: var(--necox-mft-color, var(--necox-primary-fg, #ffffff)); border-radius: var(--necox-mft-radius, 8px); transition: transform 0.15s ease, opacity 0.15s ease, background 0.18s ease, color 0.18s ease; } .necox-mft:active { transform: scale(0.98); } .necox-mft:hover { opacity: 0.92; } /* Tam genislik */ .necox-mft-wrap--full-width { padding: 0 16px; } .necox-mft--full-width { width: 100%; } /* Ikon ve metin */ .necox-mft__icon { display: inline-flex; align-items: center; justify-content: center; } .necox-mft__icon svg { width: 18px; height: 18px; } .necox-mft__text { white-space: nowrap; } /* ─── v6.6.1 — Inline Mode (Adifier mantigi - akordeon) ─── */ /* Mode = inline iken trigger butonun altinda sidebar form akordeon olarak acilir/kapanir. DOM tasima YOK, drawer hic acilmaz. JS sadece sidebar wrapper'a .is-open class swap yapar; CSS max-height transition ile slide. */ /* Inline mode aktifken: sidebar mobilde gozuksun (mevcut display:none override). Body'ye .necox-mft-inline-mode class JS tarafindan eklenir (sayfa yuklenince trigger data-mode="inline" ise). */ body.necox-mft-inline-mode .necox-search--preset-1 .necox-search__sidebar, body.necox-mft-inline-mode .necox-search--preset-2 .necox-search__sidebar { display: block; } /* Inline akordeon — kapali state (default) */ body.necox-mft-inline-mode .necox-filter-sidebar { max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; transition: max-height 0.32s ease-out, opacity 0.22s ease-out, padding 0.22s ease-out, margin 0.22s ease-out; } /* Inline akordeon — acik state */ body.necox-mft-inline-mode .necox-filter-sidebar.is-open { max-height: 9999px; opacity: 1; padding-top: 8px; padding-bottom: 8px; } /* Inline mode: sidebar wrapper margin'lari sayfa kenarlarina yapismayalim */ body.necox-mft-inline-mode .necox-search--preset-1 .necox-search__sidebar, body.necox-mft-inline-mode .necox-search--preset-2 .necox-search__sidebar { margin: 0 16px 16px 16px; } /* Inline mode trigger butonu acikken kucuk gorsel ipucu (icon dondurme istege bagli) */ .necox-mft--mode-inline[aria-expanded="true"] .necox-mft__icon svg { transform: rotate(180deg); transition: transform 0.22s ease-out; } .necox-mft--mode-inline .necox-mft__icon svg { transition: transform 0.22s ease-out; } /* ━━━ v7.15.1 INLINE MODE LAYOUT FIX ━━━ Sorun: search wrapper + sidebar/results paralel sticky kaliyor. Inline mode'da sidebar accordion acilinca ilanlar yan tarafta kalip cakisma yapiyor (kullanici raporlanan bug). Cozum: Inline mode aktifken sticky devre disi + block layout zorla. Sidebar accordion acilinca ilanlar dogal sekilde asagi itilir. */ body.necox-mft-inline-mode .necox-search, body.necox-mft-inline-mode .necox-search__sidebar, body.necox-mft-inline-mode .necox-search__main, body.necox-mft-inline-mode .necox-search__results, body.necox-mft-inline-mode .necox-search__wrap { position: static !important; top: auto !important; } /* Inline mode'da search wrapper artik flex/grid degil block — sidebar ust, ilanlar alt */ body.necox-mft-inline-mode .necox-search--preset-1, body.necox-mft-inline-mode .necox-search--preset-2 { display: block !important; grid-template-columns: none !important; } body.necox-mft-inline-mode .necox-search--preset-1 .necox-search__sidebar, body.necox-mft-inline-mode .necox-search--preset-2 .necox-search__sidebar { width: 100% !important; max-width: 100% !important; flex: none !important; } body.necox-mft-inline-mode .necox-search--preset-1 .necox-search__main, body.necox-mft-inline-mode .necox-search--preset-2 .necox-search__main { width: 100% !important; max-width: 100% !important; flex: none !important; margin-top: 0; } /* ─── Overlay (drawer arkasi) ─── */ .necox-mfp-overlay { position: fixed; inset: 0; z-index: 9998; background: var(--necox-mfp-overlay-color); opacity: 0; visibility: hidden; transition: opacity var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing), visibility var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing); display: block; /* v6.4.0 — Backdrop blur (admin'den ayarlanabilir, default blur(0)) */ backdrop-filter: var(--necox-mfp-overlay-blur); -webkit-backdrop-filter: var(--necox-mfp-overlay-blur); } .necox-mfp-overlay.is-open { opacity: var(--necox-mfp-overlay-opacity); visibility: visible; } /* v6.5.0 — Overlay animasyonu drawer'dan ayri tetiklensin (mfp_overlay_anim_separate). Acilirken: overlay once goruner (delay yok), drawer ~50ms sonra slide eder. Kapanirken: drawer once kayar, overlay ~80ms sonra fade eder. Kademeli efekt. */ body.necox-mfp-overlay-separate .necox-mfp-drawer { transition-delay: 50ms; /* acilirken drawer biraz geri */ } body.necox-mfp-overlay-separate .necox-mfp-overlay { transition-delay: 0ms; } /* Kapanirken (is-open YOK iken) tersine cevir: overlay geri, drawer once */ body.necox-mfp-overlay-separate .necox-mfp-drawer:not(.is-open) { transition-delay: 0ms; } body.necox-mfp-overlay-separate .necox-mfp-overlay:not(.is-open) { transition-delay: 80ms; } /* ─── Drawer Panel (kabuk) ─── */ .necox-mfp-drawer { position: fixed; z-index: 9999; background: var(--necox-mfp-panel-bg); border-color: var(--necox-mfp-panel-border-color); border-style: solid; border-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; visibility: hidden; /* v7.14.7 — WP admin bar varsa drawer onun altinda baslar ki kapat butonu ve baslik admin bar'in altina sigmasin. Admin bar mobile'da 46px, desktop'ta 32px. body.admin-bar selector ile kosullu (WP otomatik ekler login durumunda). */ } body.admin-bar .necox-mfp-drawer { top: 46px; height: calc(100% - 46px); } body.admin-bar .necox-mfp-overlay { top: 46px; height: calc(100% - 46px); } @media screen and (min-width: 783px) { body.admin-bar .necox-mfp-drawer { top: 32px; height: calc(100% - 32px); } body.admin-bar .necox-mfp-overlay { top: 32px; height: calc(100% - 32px); } } /* v6.4.0 — Drawer BG efekt onceligi: cam > resim > gradient > solid+alpha CSS K-43 patterni: state-class'lar sira ile soldan saga override eder. En genel solid BG en altta, en spesifik (cam) en ustte. */ /* 1. Solid + alpha (cam KAPALI, resim/gradient yokken) */ .necox-mfp-drawer { background-color: var(--necox-mfp-panel-bg); } /* 2. Gradient (cam KAPALI, resim YOK iken) — gradient solid BG'yi gizler */ .necox-mfp-drawer { background-image: var(--necox-mfp-panel-gradient); } /* 3. Arka plan resmi (cam KAPALI iken) — gradient ustune binebilir (kullanici hem gradient hem resim acarsa: resim ustte sari ozellikleri ile) */ .necox-mfp-drawer--has-bg-image { background-image: var(--necox-mfp-panel-bg-image), var(--necox-mfp-panel-gradient); background-size: var(--necox-mfp-panel-bg-size); background-repeat: var(--necox-mfp-panel-bg-repeat); background-position: var(--necox-mfp-panel-bg-position); } /* 4. Cam efekti (en yuksek oncelik — solid/gradient/resim'in ustune yarim saydam katman + backdrop-filter blur uygular) */ .necox-mfp-drawer--glass { background-color: var(--necox-mfp-glass-bg); background-image: none; /* gradient/resim cam aciksa gizlenir */ backdrop-filter: var(--necox-mfp-glass-blur); -webkit-backdrop-filter: var(--necox-mfp-glass-blur); } /* v6.4.0 — Solid BG icin alpha uygulamak icin trick: Modern tarayicilarda color-mix kullanilabilir, ama eski tarayicilara fallback icin once display'in opacity yontemi kullaniyoruz: panel BG solid renkken --necox-mfp-panel-bg-alpha 0..1 arasi olabilir. Cam / gradient / resim acilirsa bu kural gormezden gelinir. */ .necox-mfp-drawer:not(.necox-mfp-drawer--glass):not(.necox-mfp-drawer--has-bg-image) { background-color: color-mix(in srgb, var(--necox-mfp-panel-bg) calc(var(--necox-mfp-panel-bg-alpha) * 100%), transparent); } /* v6.4.0 — Drawer Golge (toggle ile aktif olur) */ .necox-mfp-drawer--shadow { box-shadow: var(--necox-mfp-panel-shadow); } /* Yon: Soldan acilan drawer */ .necox-mfp-drawer--left { top: 0; left: 0; bottom: 0; width: var(--necox-mfp-width); max-width: 100vw; border-right-width: var(--necox-mfp-panel-border-width); border-top-right-radius: var(--necox-mfp-panel-radius); border-bottom-right-radius: var(--necox-mfp-panel-radius); } /* Yon: Sagdan acilan drawer */ .necox-mfp-drawer--right { top: 0; right: 0; bottom: 0; width: var(--necox-mfp-width); max-width: 100vw; border-left-width: var(--necox-mfp-panel-border-width); border-top-left-radius: var(--necox-mfp-panel-radius); border-bottom-left-radius: var(--necox-mfp-panel-radius); } /* Yon: Alttan acilan drawer (bottom sheet) */ .necox-mfp-drawer--bottom { left: 0; right: 0; bottom: 0; height: var(--necox-mfp-height); max-height: 100vh; border-top-width: var(--necox-mfp-panel-border-width); border-top-left-radius: var(--necox-mfp-panel-radius); border-top-right-radius: var(--necox-mfp-panel-radius); } /* ─── Animasyon: Slide ─── */ .necox-mfp-drawer--anim-slide { transition: transform var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing), visibility var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing); } .necox-mfp-drawer--anim-slide.necox-mfp-drawer--left { transform: translateX(-100%); } .necox-mfp-drawer--anim-slide.necox-mfp-drawer--right { transform: translateX(100%); } .necox-mfp-drawer--anim-slide.necox-mfp-drawer--bottom { transform: translateY(100%); } .necox-mfp-drawer--anim-slide.is-open { transform: translate(0, 0); visibility: visible; } /* ─── Animasyon: Fade ─── */ .necox-mfp-drawer--anim-fade { opacity: 0; transition: opacity var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing), visibility var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing); } .necox-mfp-drawer--anim-fade.is-open { opacity: 1; visibility: visible; } /* ─── Drawer Header ─── */ .necox-mfp-drawer__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--necox-mfp-header-padding) var(--necox-mfp-panel-padding); background: var(--necox-mfp-header-bg); /* v6.4.0 — Border-bottom toggle ile aktif (default kapali) */ border-bottom: 0 solid var(--necox-mfp-header-border-color); } /* v6.4.0 — Header alt sinir cizgisi (toggle aktifken 1px) */ .necox-mfp-drawer__header--bordered { border-bottom-width: 1px; } .necox-mfp-drawer__title { margin: 0; font-family: var(--necox-mfp-header-font-family); font-size: var(--necox-mfp-header-font-size); font-weight: var(--necox-mfp-header-font-weight); color: var(--necox-mfp-header-title-color); line-height: 1.3; } /* v7.14.8 — Kapat butonu preset cascade'e tam bagli. Normal: 2px border primary + X icon primary, bg transparent (preset karakteristik). Hover: border + bg primary-hover + X icon primary-fg (beyaz) — dolu inverse. Tum presetlerde ayni mantik. */ .necox-mfp-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 2px solid var(--necox-primary, #2A3254); cursor: pointer; color: var(--necox-primary, #2A3254); border-radius: 50%; transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .necox-mfp-drawer__close svg { width: 18px; height: 18px; stroke-width: 2.5; stroke: currentColor; transition: transform 0.18s ease; } .necox-mfp-drawer__close:hover { background: var(--necox-primary-hover, var(--necox-primary, #2A3254)); border-color: var(--necox-primary-hover, var(--necox-primary, #2A3254)); color: var(--necox-primary-fg, #fff); } .necox-mfp-drawer__close:hover svg { transform: rotate(90deg); } .necox-mfp-drawer__close:active { transform: scale(0.92); } .necox-mfp-drawer__close:focus-visible { outline: 2px solid var(--necox-primary-hover, var(--necox-primary, #2A3254)); outline-offset: 2px; } /* ─── Drawer Body (sidebar buraya tasinacak) ─── */ .necox-mfp-drawer__body { flex: 1 1 auto; padding: var(--necox-mfp-body-padding); background: var(--necox-mfp-body-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Sidebar drawer ici icine tasindiginda fixed pozisyondan kurtar (filter.css mobile bloku eski full-screen davranisini kaldirdik) */ .necox-mfp-drawer__body .necox-filter-sidebar { position: static; inset: auto; z-index: auto; border-radius: 0; transform: none; overflow-y: visible; max-height: none; } /* v6.4.0 — Drawer body icindeki form etiketleri (necox_filter_render_sidebar cikti pattern: