{{-- Tanım seçicisinin stili + davranışı (bir kez bağlanır).

     Chip'e tıklama → tanımın açıklaması (anahtar kapalıysa yalnızca adı)
     Quill editörüne eklenir → alanın kendi blur-kayıt akışı (_qv-inline-blocks)
     tetiklenir. Ayrı bir kayıt ucu yoktur; içerik yine update-field'e gider.

     Mod farkı:
       item  → tek satır madde olarak eklenir (gezilecek yerler)
       block → HTML bloğu olarak eklenir (hazır şablonlar) --}}
@once
<style>
    /* ── Açma düğmesi: kesikli pill, açıkken dolu ── */
    .qdef { margin: 0 0 .5rem; }
    .qdef-bar { display: flex; align-items: center; gap: 8px; }
    .qdef-open {
        display: inline-flex; align-items: center; gap: 7px;
        border: 1.5px dashed #cbd5e1; background: #f8fafc; color: #475569;
        border-radius: 999px; padding: 6px 14px; cursor: pointer;
        font: inherit; font-size: .76rem; font-weight: 700;
        transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
    }
    .qdef-open:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; box-shadow: 0 4px 12px -6px rgba(37,99,235,.5); }
    .qdef-open > i:first-child { font-size: .76rem; }
    .qdef-open b {
        min-width: 18px; padding: 1px 6px; border-radius: 999px;
        background: #e2e8f0; color: #475569; font-size: .64rem; font-weight: 800;
    }
    .qdef-caret { font-size: .6rem; color: #94a3b8; transition: transform .2s; }
    .qdef.on .qdef-open { border-style: solid; border-color: #2563eb; background: #2563eb; color: #fff; }
    .qdef.on .qdef-open b { background: rgba(255,255,255,.22); color: #fff; }
    .qdef.on .qdef-caret { color: #bfdbfe; transform: rotate(180deg); }

    /* ── Panel ── */
    .qdef-panel {
        margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 14px;
        background: linear-gradient(180deg, #fdfeff, #f6f9fd);
        box-shadow: 0 6px 18px -14px rgba(15,23,42,.5);
        animation: qdefIn .18s ease;
    }
    @keyframes qdefIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

    .qdef-head { display: flex; align-items: center; gap: 6px; padding: 9px 10px 0; }
    .qdef-search {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
        background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0 11px;
        transition: border-color .15s, box-shadow .15s;
    }
    .qdef-search:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
    .qdef-search > i { color: #b6c2d2; font-size: .74rem; flex: none; }
    .qdef-search input {
        flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
        padding: 8px 0; font-size: .8rem; font-weight: 600; color: #0f172a;
    }
    .qdef-search input::placeholder { color: #b6c2d2; font-weight: 400; }

    /* ── "Açıklamalı" anahtarı ── */
    .qdef-sw { display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer; margin: 0; user-select: none; }
    .qdef-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
    .qdef-sw-track {
        position: relative; width: 32px; height: 18px; border-radius: 999px;
        background: #cbd5e1; flex: none; transition: background .2s;
    }
    .qdef-sw-thumb {
        position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
        background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s;
    }
    .qdef-sw input:checked + .qdef-sw-track { background: #2563eb; }
    .qdef-sw input:checked + .qdef-sw-track .qdef-sw-thumb { transform: translateX(14px); }
    .qdef-sw input:focus-visible + .qdef-sw-track { box-shadow: 0 0 0 3px rgba(37,99,235,.25); }
    .qdef-sw-t { font-size: .7rem; font-weight: 700; color: #94a3b8; transition: color .15s; }
    .qdef-sw input:checked ~ .qdef-sw-t { color: #1d4ed8; }

    .qdef-manage {
        flex: none; width: 32px; height: 32px; border-radius: 10px;
        display: grid; place-items: center; color: #9aa7bb; background: #fff;
        border: 1px solid #e2e8f0; font-size: .7rem; text-decoration: none;
        transition: color .15s, border-color .15s;
    }
    .qdef-manage:hover { color: #2563eb; border-color: #93c5fd; }

    /* ── Chip bulutu ── */
    .qdef-cloud {
        display: flex; flex-wrap: wrap; gap: 6px;
        padding: 9px 10px; max-height: 168px; overflow-y: auto; overscroll-behavior: contain;
    }
    .qdef-cloud::-webkit-scrollbar { width: 6px; }
    .qdef-cloud::-webkit-scrollbar-thumb { background: #dbe3ee; border-radius: 3px; }

    .qdef-chip {
        display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
        border: 1px solid #e2e8f0; background: #fff; color: #334155;
        border-radius: 999px; padding: 5px 12px 5px 9px; cursor: pointer;
        font: inherit; font-size: .765rem; font-weight: 650; line-height: 1.2;
        transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s;
    }
    .qdef-chip:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; transform: translateY(-1px); box-shadow: 0 5px 12px -7px rgba(37,99,235,.6); }
    .qdef-ico { font-size: .58rem; color: #b6c2d2; transition: color .15s, transform .18s; }
    .qdef-chip:hover .qdef-ico { color: #2563eb; transform: rotate(90deg); }
    .qdef-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .qdef-meta {
        font-style: normal; font-size: .655rem; font-weight: 700; color: #b6c2d2;
        letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
    }
    /* Açıklaması olan tanım (anahtar açıkken içeriği gelecek olan) */
    .qdef-hasdesc { font-size: .56rem; color: #cbd5e1; }
    .qdef-chip:hover .qdef-hasdesc { color: #93c5fd; }
    .qdef-chip.no-desc .qdef-nm { color: #64748b; }

    /* Alanda zaten geçen tanım (yalnızca madde modunda işaretlenir) */
    .qdef-chip.is-in { background: #dcfce7; border-color: #bbf7d0; color: #15803d; cursor: default; }
    .qdef-chip.is-in:hover { transform: none; box-shadow: none; }
    .qdef-chip.is-in .qdef-ico { color: #16a34a; transform: none; }
    .qdef-chip.is-in .qdef-meta, .qdef-chip.is-in .qdef-hasdesc { color: #86c69b; }

    @keyframes qdefPop { 0% { transform: scale(.9); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }
    .qdef-chip.just { animation: qdefPop .3s cubic-bezier(.34,1.4,.5,1); }

    .qdef-none, .qdef-foot {
        display: flex; align-items: center; gap: 6px;
        padding: 0 12px 9px; font-size: .68rem; font-weight: 600; color: #b6c2d2;
    }
    .qdef-none { padding-top: 4px; }
    .qdef-foot i { color: #93c5fd; font-size: .64rem; }
</style>

<script>
(function () {
    if (window.__qdefBound) return;
    window.__qdefBound = true;

    var low = function (s) { return String(s || '').toLocaleLowerCase('tr-TR'); };

    /** HTML açıklamayı tek satırlık düz metne indirger (madde modu için). */
    function plain(html) {
        var d = document.createElement('div');
        d.innerHTML = String(html || '');
        return (d.textContent || '').replace(/\s+/g, ' ').trim();
    }

    function esc(s) {
        return String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    function looksHtml(s) { return /<[a-z][\s\S]*>/i.test(String(s || '')); }

    function quillOf(box) {
        var wrap = box.closest('.qv-quill-wrap');
        var el = wrap && wrap.querySelector('.qv-quill');
        return el && el.__quill ? el.__quill : null;
    }

    function wantsDesc(box) {
        var cb = box.querySelector('[data-qdef-desc]');
        return !cb || cb.checked;
    }

    /** Madde modunda, alanda zaten geçen tanımları işaretler. */
    function refresh(box) {
        if (box.dataset.mode !== 'item') return;
        var q = quillOf(box);
        var text = low(q ? q.getText() : '');
        box.querySelectorAll('[data-qdef-add]').forEach(function (chip) {
            var has = text.indexOf(low(chip.dataset.name)) !== -1;
            chip.classList.toggle('is-in', has);
            chip.querySelector('.qdef-ico').className = 'fas ' + (has ? 'fa-check' : 'fa-plus') + ' qdef-ico';
        });
    }

    function add(chip) {
        var box = chip.closest('[data-qv-defs]');
        var q = quillOf(box);
        if (!q || chip.classList.contains('is-in')) return;

        var name = chip.dataset.name || '';
        var desc = chip.dataset.desc || '';
        var useDesc = wantsDesc(box) && plain(desc) !== '';

        if (box.dataset.mode === 'item') {
            // Madde: "Ad" ya da "Ad — açıklama" tek satır
            var line = useDesc ? (name + ' — ' + plain(desc)) : name;
            if (!line) return;
            var pos;
            if (q.getText().trim() === '') {
                q.insertText(0, line, 'user');
                pos = 0;
            } else {
                pos = q.getLength() - 1;
                q.insertText(pos, '\n' + line, 'user');
                pos += 1;
            }
            q.formatLine(pos, 1, 'list', 'bullet', 'user');
            q.setSelection(pos + line.length, 0, 'silent');
        } else {
            // Blok: açıklamanın HTML'i (düz metinse paragrafa sarılır), yoksa ad
            var html = useDesc
                ? (looksHtml(desc) ? desc : '<p>' + esc(plain(desc)) + '</p>')
                : '<p>' + esc(name) + '</p>';
            var cur = q.root.innerHTML;
            var next = q.getText().trim() === '' ? html : (cur + html);
            q.setContents([]);
            if (q.clipboard && typeof q.clipboard.dangerouslyPasteHTML === 'function') {
                q.clipboard.dangerouslyPasteHTML(next);
            } else {
                q.root.innerHTML = next;
            }
        }

        // Alanın kendi blur-kayıt bağlaması tek istek atar
        q.root.dispatchEvent(new Event('blur'));

        chip.classList.add('just');
        setTimeout(function () { chip.classList.remove('just'); }, 320);
        refresh(box);
    }

    function filter(box, term) {
        var t = low(term).trim();
        var shown = 0;
        box.querySelectorAll('[data-qdef-add]').forEach(function (chip) {
            var ok = !t || (chip.dataset.find || '').indexOf(t) !== -1;
            chip.hidden = !ok;
            if (ok) shown++;
        });
        var none = box.querySelector('.qdef-none');
        if (none) none.hidden = shown > 0;
    }

    document.addEventListener('click', function (e) {
        var open = e.target.closest('[data-qdef-open]');
        if (open) {
            e.preventDefault();
            var box = open.closest('[data-qv-defs]');
            var panel = box.querySelector('.qdef-panel');
            var willOpen = panel.hidden;
            panel.hidden = !willOpen;
            box.classList.toggle('on', willOpen);
            if (willOpen) {
                refresh(box);
                var s = box.querySelector('[data-qdef-search]');
                if (s) setTimeout(function () { s.focus(); }, 0);
            }
            return;
        }

        // Anahtarın kendi tıklaması chip eklemesini tetiklemesin
        if (e.target.closest('.qdef-sw')) return;

        var chip = e.target.closest('[data-qdef-add]');
        if (chip) { e.preventDefault(); add(chip); }
    });

    document.addEventListener('input', function (e) {
        var s = e.target.closest('[data-qdef-search]');
        if (s) filter(s.closest('[data-qv-defs]'), s.value);
    });

    document.addEventListener('keydown', function (e) {
        var s = e.target.closest('[data-qdef-search]');
        if (!s) return;
        var box = s.closest('[data-qv-defs]');
        if (e.key === 'Escape') {
            e.preventDefault();
            box.querySelector('.qdef-panel').hidden = true;
            box.classList.remove('on');
            return;
        }
        if (e.key !== 'Enter') return;
        // Aramada Enter: ilk uygun tanımı ekler (arka arkaya hızlı ekleme)
        e.preventDefault();
        var first = [].slice.call(box.querySelectorAll('[data-qdef-add]'))
            .filter(function (c) { return !c.hidden && !c.classList.contains('is-in'); })[0];
        if (first) { add(first); s.value = ''; filter(box, ''); }
    });
})();
</script>
@endonce