/*
 * VİTRİN ARAÇLARI: fiyat kaydırıcısının mekaniği (iki range üst üste, iz).
 * Bkz. themes/shared/vitrin-araclari.js. Seçiciler :where() içinde (özgüllük
 * sıfır), tema kendi sınıfıyla rengi, kalınlığı, tutamacı değiştirir.
 * Renkler --et-* token sözleşmesinden (§15.2).
 *
 * Markup:
 *   <div class="et-fk" data-et-fiyat-kaydir style="--et-fk-alt:0%;--et-fk-ust:100%">
 *     <span class="et-fk__iz" aria-hidden="true"></span>
 *     <input type="range" data-et-fk="min" ...><input type="range" data-et-fk="max" ...>
 *   </div>
 */
:where(.et-fk) { position: relative; height: 22px; margin: 12px 8px 4px; --et-fk-dolu: var(--et-primary, #111); --et-fk-bos: var(--et-border, #e5e5e5); --et-fk-tutamac: var(--et-bg, #fff); }
:where(.et-fk__iz) { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: linear-gradient(to right, var(--et-fk-bos) var(--et-fk-alt, 0%), var(--et-fk-dolu) var(--et-fk-alt, 0%), var(--et-fk-dolu) var(--et-fk-ust, 100%), var(--et-fk-bos) var(--et-fk-ust, 100%)); }
:where(.et-fk) input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; background: none; border: 0; pointer-events: none; -webkit-appearance: none; appearance: none; }
:where(.et-fk) input[type="range"]::-webkit-slider-runnable-track { background: none; }
:where(.et-fk) input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--et-fk-dolu); background: var(--et-fk-tutamac); cursor: pointer; }
:where(.et-fk) input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--et-fk-dolu); background: var(--et-fk-tutamac); cursor: pointer; }
:where(.et-fk) input[type="range"]::-moz-range-track { background: none; }
:where(.et-fk) input[type="range"]:focus-visible { outline: none; }
:where(.et-fk) input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--et-fk-dolu) 25%, transparent); }
