/**
 * KS Arama (v2.458.0) — öneri paneli, pill'ler, kategori kutuları, başlık çipleri, son aramalar.
 * Renk/tipografi varsayılanları widget'ların Elementor kontrollerinden gelir; burada yalnız YAPI ve
 * panelin kendi görünümü (panel widget değil, her arama kutusuna JS ile eklenir).
 */

/* ── Öneri paneli ───────────────────────────────────────────────────────── */
.ks-search-host { position: relative; } /* form.e-search-form (input + düğme): panel çubuğun tamamına hizalanır */
.ks-search-panel {
	position: fixed; top: 0; left: 0; width: 0; z-index: 1000; /* konum/genişlik ks-search.js place(): form dikdörtgeni; header (z 100) ve mega menünün üstünde, Elementor popup'larının (9999) altında */
	box-sizing: border-box;
	background: #fff; border: 1px solid #e3e3e3; border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); padding: 8px;
	max-height: 560px; overflow-y: auto; overscroll-behavior: contain;
	font-family: var(--e-global-typography-text-font-family, 'Plus Jakarta Sans', sans-serif);
	font-size: 15px; line-height: 1.35; text-align: left; color: #111;
}
.ks-search-panel[hidden] { display: none; }
.ks-search-panel__group { padding: 4px 0; }
.ks-search-panel__group + .ks-search-panel__group { border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 8px; }
.ks-search-panel__label { font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: #727272; font-weight: 600; padding: 4px 12px 6px; }
.ks-search-panel__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: #111; text-decoration: none; cursor: pointer; }
.ks-search-panel__item:hover, .ks-search-panel__item.is-active { background: #f5f5f5; color: #111; text-decoration: none; }
.ks-search-panel__icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #727272; flex: 0 0 22px; font-size: 1.1em; }
.ks-search-panel__thumb { width: 44px; height: 44px; border: 1px solid #E3E3E3; border-radius: 6px; object-fit: cover; flex: 0 0 44px; background: #fff; box-sizing: border-box; } /* çerçeveli, hafif yuvarlak (operatör 3 Eki) */
.ks-search-panel__swatch { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); background-size: cover; background-position: center; }
.ks-search-panel__text { min-width: 0; flex: 1 1 auto; }
.ks-search-panel__sub { display: block; font-size: 0.82em; color: #727272; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-search-panel__count { font-size: 0.8em; color: #727272; margin-left: auto; white-space: nowrap; }
.ks-search-panel__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #eee; margin-top: 6px; padding: 10px 12px; font-size: 0.92em; font-weight: 600; color: #111; text-decoration: none; border-radius: 10px; }
.ks-search-panel__footer:hover, .ks-search-panel__footer.is-active { background: #f5f5f5; color: #111; text-decoration: none; }
.ks-search-panel__empty { padding: 12px; color: #727272; font-size: 0.9em; }
.ks-search-panel__clear { background: none; border: 0; padding: 0; margin-left: auto; font: inherit; font-size: 0.8em; color: #727272; cursor: pointer; text-decoration: underline; }
.ks-search-panel__clear:hover { color: #111; }
@media (max-width: 767px) {
	.ks-search-panel { font-size: 14px; }
	.ks-search-panel__thumb { width: 40px; height: 40px; flex-basis: 40px; }
}

/* ── Bütünleşik arama çubuğu (widget'a `_css_classes: ks-search-unified`) ─────────────────────────────────────
 * Operatör 3 Eki: input ve büyüteç bölümü odak dahil her durumda TEK hap gibi davranmalı (hover'da renk değişmez); ikon sağda içeride,
 * solunda ince ayraç. Çerçeve ve köşe FORM'a taşınır; input/düğmenin kendi çerçevesi kapatılır (Pro widget CSS'i
 * input/düğmeye ayrı çerçeve yazdığı için !important). Renkler kit globalleri: kenarlık Border, odak Primary. */
.ks-search-unified form.e-search-form { border: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1); border-radius: 999px; background: #fff; overflow: hidden; align-items: stretch; transition: border-color .15s ease, box-shadow .15s ease; }
.ks-search-unified form.e-search-form:focus-within { border-color: var(--e-global-color-primary, #000); } /* yalnız ODAKTA koyulaşır (operatör: hover değil focus) */
.ks-search-unified .e-search-input-wrapper { flex: 1 1 auto; min-width: 0; }
.ks-search-unified input.e-search-input, .ks-search-unified input.e-search-input:focus, .ks-search-unified input.e-search-input:hover { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; }
.ks-search-unified button.e-search-submit { border: 0 !important; border-left: 1px solid var(--e-global-color-dcb0b6a, #D1D1D1) !important; border-radius: 0 !important; margin: 0 !important; }
.ks-search-unified .ks-search-host { position: static; }
/* Düğme hover'ında ikon düğmenin hover metin rengini (Elementor 'submit_text_color_hover', beyaz) alır: ikonun kendi rengi (primary, siyah) siyah dolguda kayboluyordu (header'da da öyleydi). */
.ks-search-unified button.e-search-submit:hover i, .ks-search-unified button.e-search-submit:hover svg { color: inherit !important; fill: currentColor !important; }

/* ── Blok başlığı ───────────────────────────────────────────────────────── */
.ks-search-block__title { margin: 0 0 12px; }
.ks-search-block__title--tones { margin-top: 20px; }

/* ── Pill'ler (sık arananlar, son aramalar, ton grupları, çipler) ───────── */
.ks-search-pill-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ks-search-pill {
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
	border: 1px solid #ccc; border-radius: 999px; background: #f6f6f6; color: #212121;
	font-size: 0.9em; line-height: 1.4; text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ks-search-pill:hover { border-color: #212121; background: #fff; color: #212121; text-decoration: none; }
.ks-search-pill i { font-size: 1em; line-height: 1; color: var(--e-global-color-secondary, #F27A1A); }
.ks-search-tone__swatch { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); background-size: cover; background-position: center; }
/* × işareti (ks-landing.css .ks-chip__x ile aynı çizim) */
.ks-search-chip__x { position: relative; top: 1px; flex: 0 0 auto; width: 14px; height: 14px; opacity: .55; }
.ks-search-chip__x::before, .ks-search-chip__x::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; border-radius: 2px; background: currentColor; }
.ks-search-chip__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.ks-search-chip__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ks-search-chip:hover .ks-search-chip__x { opacity: 1; }

/* ── Kategori kutuları ──────────────────────────────────────────────────── */
.ks-search-boxes__grid { --ks-sb-cols: 6; --ks-sb-gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ks-sb-gap); }
.ks-search-boxes__grid > .ks-search-box { flex: 0 0 calc((100% - (var(--ks-sb-cols) - 1) * var(--ks-sb-gap)) / var(--ks-sb-cols)); min-width: 0; }
.ks-search-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 12px; border: 1px solid #e6e6e6; border-radius: 16px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ks-search-box:hover { border-color: #212121; text-decoration: none; transform: translateY(-2px); }
.ks-search-box__img { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; background: #f3f3f3 center / cover no-repeat; }
.ks-search-box__title { font-weight: 600; font-size: 0.95em; line-height: 1.25; text-align: center; }
.ks-search-box__count { font-size: 0.8em; color: #727272; margin-top: -4px; }
@media (max-width: 1024px) { .ks-search-boxes__grid { --ks-sb-cols: 4; } }
@media (max-width: 767px) { .ks-search-boxes__grid { --ks-sb-cols: 2; } }

/* ── Başlık widget'ı ────────────────────────────────────────────────────── */
.ks-search-title__h { margin: 0; }
.ks-search-title__q { font-weight: inherit; }
.ks-search-title__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ks-search-title__shop { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; margin-left: 4px; }
.ks-search-title__shop:hover { text-decoration: underline; }
.ks-search-title__all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; margin-left: 6px; padding: 9px 18px; border: 1px solid currentColor; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.ks-search-title__all:hover { text-decoration: none; background: var(--e-global-color-primary, #000); border-color: var(--e-global-color-primary, #000); color: #fff !important; }
.ks-search-title__icon { width: 64px; height: 64px; border-radius: 50%; background: #F3F3F3; color: #727272; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 0 14px; }
/* Sonuç yokken: başlık bloğu kutu gibi ortalı (operatör 3 Eki) */
body.ks-search-page.ks-search-no-results .ks-search-title { text-align: center; max-width: 640px; margin: 8px auto 24px; }
body.ks-search-page.ks-search-no-results .ks-search-title__icon { margin-left: auto; margin-right: auto; }
body.ks-search-page.ks-search-no-results .ks-search-title__meta, body.ks-search-page.ks-search-no-results .ks-search-title__pages { justify-content: center; }
body.ks-search-page.ks-search-no-results .ks-search-title__help { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }
body.ks-search-page.ks-search-no-results .ks-search-title__all { margin-left: 0; }
.ks-search-title__fix, .ks-search-title__help, .ks-search-title__pages { margin: 10px 0 0; }
.ks-search-title__pages { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ks-search-title__pages a { text-decoration: underline; }

/* ── Son aramalar ───────────────────────────────────────────────────────── */
.ks-search-recent[hidden] { display: none; }
.ks-search-recent__clear { background: none; border: 0; padding: 0; margin-top: 10px; font: inherit; font-size: 0.82em; color: #727272; cursor: pointer; text-decoration: underline; }
.ks-search-recent__clear:hover { color: #111; }

/* Botiga `.entry-content a { text-decoration: underline }` (0,1,1) pill/kutu/bağlantı kurallarını eziyordu → aynı kapsamda sıfırla */
.entry-content .ks-search-pill, .entry-content .ks-search-pill:hover, .entry-content .ks-search-box, .entry-content .ks-search-box:hover,
.entry-content .ks-search-title__shop, .entry-content .ks-search-panel__item, .entry-content .ks-search-panel__footer { text-decoration: none; }
.entry-content .ks-search-title__shop:hover { text-decoration: underline; }
.entry-content .ks-search-title__all, .entry-content .ks-search-title__all:hover { text-decoration: none; }
/* Başlık satırındaki sıralama kutusu: içeriği kadar geniş (konteyner css_classes ks-search-sortbox), dar ekranda tam satır */
.ks-search-results .ks-search-sortbox { width: auto; flex: 0 0 auto; }
@media (max-width: 1024px) { .ks-search-results .ks-search-sortbox { width: 100%; } }

/* ── Sayfa durumları ─────────────────────────────────────────────────────── */
body.ks-search-page:not(.ks-search-has-query):not(.elementor-editor-active):not(.elementor-editor-preview) .ks-search-results { display: none; } /* editörde/önizlemede daima görünür */
body.ks-search-page.ks-search-no-results .ks-search-sortbox { display: none; } /* sonuç yokken sıralama kutusu anlamsız */
/* Mobil alt çubukta arama sayfasındayken büyüteç vurgulu (Elementor ikon rengini özgüllükle geçer, !important yok) */
body.ks-search-page #mobile-nav .ks-nav-search .elementor-icon i,
body.ks-search-page #mobile-nav .ks-nav-search .elementor-icon svg { color: var(--e-global-color-secondary, #F27A1A); fill: var(--e-global-color-secondary, #F27A1A); }
/* 5 Eki (operatör): hero'daki kutu + boş durum blokları ayrı konteynerlerde (editör css_classes `src_input` = Arama kutusu, `src_subs` = son aramalar/sık arananlar/kutular).
   Masaüstü + laptopta (viewport_lg 1025+) ikisi de gizli; tablet/mobilde kutu daima, alt bloklar yalnız sorgu yokken (sorguyla widget'lar basılmıyordu ama konteyner boşluğu kalıyordu). Editörde daima görünür. */
@media (min-width: 1025px) { body.ks-search-page:not(.elementor-editor-active):not(.elementor-editor-preview) .src_input, body.ks-search-page:not(.elementor-editor-active):not(.elementor-editor-preview) .src_subs { display: none; } }
body.ks-search-page.ks-search-has-query:not(.elementor-editor-active):not(.elementor-editor-preview) .src_subs { display: none; }