body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f7f6; color: #333; line-height: 1.6; padding: 20px;
    box-sizing: border-box; 
}
*, *:before, *:after {
    box-sizing: inherit; 
}

.container { max-width: 900px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
h1, h2, h3 { color: #2c3e50; text-align: center; }
h4 { color: #34495e; text-align: left; margin-top: 25px; border-bottom: 1px solid #ecf0f1; padding-bottom: 8px; }

/* Giriş ve Onay stilleri */
.introduction { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #eee; }
.introduction h4 { text-align: center; }
.consent-container { margin-top: 20px; background: #f8f9f9; padding: 15px; border-radius: 5px; text-align: center; }
.consent-container label { font-size: 1.1em; cursor: pointer; }
.hidden { display: none; }

fieldset { border: 1px solid #ddd; border-radius: 5px; padding: 20px; margin-bottom: 25px; }

legend { 
    padding: 0 10px; 
    font-weight: bold; 
    font-size: 1.5em;
    color: #3498db;
    width: auto; 
    text-align: center; 
    border-bottom: none;
}

.swara-explanation { background-color: #eaf2f8; border-left: 5px solid #3498db; padding: 15px; margin-bottom: 25px; border-radius: 5px; }
.swara-explanation h4 { margin-top: 0; color: #2c3e50; border-bottom: none; text-align: left; }

.instructions { font-style: italic; color: #7f8c8d; text-align: center; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: 500; }
input[type="text"], select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
.radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.radio-group label, .checkbox-group label { display: flex; align-items: center; cursor: pointer; font-weight: normal; }
.radio-group input, .checkbox-group input { margin-right: 8px; }
.section-divider { margin: 30px 0; border: 0; border-top: 1px solid #eee; }

/* Sıralama Alanı stilleri */
.ranking-container { display: flex; gap: 20px; align-items: flex-start; }
.ranking-slots, .criteria-pool { flex: 1; }
.ranking-slots h3, .criteria-pool h3 { text-align: center; margin-top: 0; }

/* TUTARLILIK İÇİN DÜZENLEME: Her iki liste de flex ve gap kullanacak */
.ranking-list, .pool-list {
    list-style: none;
    background-color: #ecf0f1;
    border-radius: 5px;
    padding: 8px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Öğeler arasına boşluk eklemenin modern yolu */
    min-height: 250px; /* Sürükleme kolaylığı için minimum yükseklik */
}

.ranking-list li { display: flex; align-items: stretch; }
.rank-number { flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; padding: 0 15px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; transition: background-color 0.3s, color 0.3s; }

.drop-zone { flex-grow: 1; min-height: 42px; border: 2px dashed #bdc3c7; background-color: #f8f9f9; border-top-right-radius: 4px; border-bottom-right-radius: 4px; transition: background-color 0.2s; display: flex; align-items: stretch; padding: 0; }
.drop-zone:empty::after { content: "Buraya Sürükleyin"; display: flex; align-items: center; justify-content: center; width: 100%; color: #95a5a6; font-style: italic; font-size: 0.9em; }

/* Sürüklenen öğe ve hayalet öğe stilleri */
.drop-zone .sortable-ghost, .pool-list .sortable-ghost { background: #d9eaf7 !important; border-color: #3498db; }
li.sortable-drag { opacity: 0; } /* Orijinal öğeyi tamamen gizle */
.sortable-chosen { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }

.criterion-item { 
    width: 100%; 
    padding: 10px 15px; 
    background: #fff; 
    border: 1px solid #bdc3c7; 
    cursor: grab; 
    border-radius: 4px; 
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.criterion-item:hover { border-color: #3498db; }

/* .pool-list .criterion-item için özel margin kaldırıldı, gap ile yönetiliyor */

.ranking-list li:nth-child(1) .rank-number { background-color: #2ecc71; color: white; }
.ranking-list li:nth-child(2) .rank-number { background-color: #a9dfbf; color: #145a32; }
.ranking-list li:nth-child(3) .rank-number { background-color: #f7dc6f; color: #7d6608; }
.ranking-list li:nth-child(4) .rank-number { background-color: #f5b7b1; color: #78281f; }
.ranking-list li:nth-child(5) .rank-number { background-color: #e74c3c; color: white; }

/* SLIDER'LAR VE BUTONLAR */
.sliders-container { margin-top: 20px; }
.slider-group { margin-bottom: 20px; }

.slider-group label { font-size: 0.9em; margin-bottom: 8px; text-align: center; }

.slider-output-container { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; padding: 0 5px; }
.slider-label { font-style: italic; color: #7f8c8d; font-size: 0.9em; flex: 1 1 0; }
.slider-label.left { text-align: left; }
.slider-label.right { text-align: right; }
.slider-output-container output { font-weight: bold; padding: 2px 8px; border-radius: 4px; min-width: 45px; text-align: center; flex-shrink: 0; margin: 0 10px; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #ddd; border-radius: 5px; outline: none; transition: opacity .2s; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #3498db; cursor: pointer; border: 3px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #3498db; cursor: pointer; border: 3px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.2); }

.sub-criteria-main-list { padding-left: 0; list-style-type: none; margin: 0; }
.sub-criteria-block { margin-top: 30px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
.sub-criteria-block-wrapper { margin-bottom: 20px; list-style-type: none; }

.button-container { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
button { flex-grow: 1; display: block; max-width: 300px; padding: 15px; color: white; border: none; border-radius: 5px; font-size: 1.2em; cursor: pointer; transition: background-color 0.3s; }
#submit-btn { background-color: #2ecc71; } #submit-btn:hover { background-color: #27ae60; }
#reset-btn { background-color: #e67e22; } #reset-btn:hover { background-color: #d35400; }

#form-message { text-align: center; margin-top: 15px; padding: 10px; border-radius: 5px; font-weight: bold; }
.success { color: #27ae60; background-color: #d4efdf; } 
.error { color: #c0392b; background-color: #f9ebea; }
.info { color: #2980b9; background-color: #d6eaf8; }

#success-screen { text-align: center; padding: 40px; }
.success-box { display: inline-block; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-top: 5px solid #2ecc71; }

/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
    body { padding: 10px; }
    .container { padding: 15px; }
    .ranking-container { flex-direction: column-reverse; gap: 30px; }
    .ranking-slots, .criteria-pool { width: 100%; }
    fieldset { padding-left: 10px; padding-right: 10px; }
    #sub-criteria-container { padding-left: 0; margin-left: 0; }
    h2 { font-size: 1.6em; }
    .form-group { margin-bottom: 20px; }
    .radio-group, .checkbox-group { flex-direction: column; align-items: flex-start; gap: 15px; }
    .button-container { flex-direction: column; align-items: center; }
    button { width: 100%; }
    .slider-output-container { flex-wrap: wrap; justify-content: center; }
    .slider-label { flex-basis: 100%; text-align: center; margin-top: 5px; }
    .slider-label.left { order: 1; }
    .slider-output-container output { order: 2; }
    .slider-label.right { order: 3; }
    .ranking-list, .pool-list { padding-left: 8px; padding-right: 8px; }
}```

---

### Adım 2: `script.js` Dosyasını Güncelleyin

Bu, en önemli değişikliktir. Lütfen mevcut `script.js` dosyanızın içeriğini **tamamen silip** aşağıdaki yeni ve geliştirilmiş kodla değiştirin.

```javascript
document.addEventListener('DOMContentLoaded', () => {
    console.log("Sayfa yüklendi. Script başlıyor.");

    // --- TEMEL FORM ELEMANLARI ---
    const consentCheckbox = document.getElementById('consent-checkbox');
    const form = document.getElementById('swara-form');
    const messageEl = document.getElementById('form-message');
    const submitBtn = document.getElementById('submit-btn');

    // --- ONAY KUTUSU İŞLEVİ ---
    if (consentCheckbox && form) {
        consentCheckbox.addEventListener('change', function() {
            form.classList.toggle('hidden', !this.checked);
        });
    }

    form.addEventListener('reset', () => { window.location.reload(); });

    // --- SWARA SİSTEMİ İŞLEVLERİ ---

    const getGradientColor = (value) => {
        const val = parseFloat(value);
        const red = Math.floor(255 * (val < 0.5 ? (val * 2) : 1));
        const green = Math.floor(255 * (val > 0.5 ? (2 - val * 2) : 1));
        return `rgb(${red}, ${green}, 0)`;
    };

    const updateSliderColor = (slider) => {
        const value = slider.value; const max = slider.max || 1;
        const percentage = (value / max) * 100; const color = getGradientColor(value);
        slider.style.background = `linear-gradient(to right, ${color} ${percentage}%, #ddd ${percentage}%)`;
        const outputEl = slider.nextElementSibling.querySelector('output');
        if (outputEl) {
            outputEl.style.backgroundColor = color;
            outputEl.style.color = (value > 0.25 && value < 0.75) ? 'black' : 'white';
        }
    };

    const createSliderGroup = (id, labelText) => `
        <div class="slider-group">
            <label for="${id}">${labelText}</label>
            <input type="range" id="${id}" name="${id}" min="0" max="1" step="0.05" value="0.5" data-interacted="false">
            <div class="slider-output-container">
                <span class="slider-label left">Eşit Önemde</span>
                <output for="${id}">0.5</output>
                <span class="slider-label right">Aşırı Derecede Daha Az</span>
            </div>
        </div>
    `;

    const updateSliders = (orderedItems, containerEl, contextText = '') => {
        containerEl.innerHTML = '';
        if (orderedItems.length < 2) return;
        for (let i = 0; i < orderedItems.length - 1; i++) {
            const moreImportant = orderedItems[i].textContent.trim();
            const lessImportant = orderedItems[i + 1].textContent.trim();
            const sliderId = `${containerEl.id}-sj-${i}`;
            let labelText;
            if (contextText) {
                const contextPrefix = `<strong>${contextText} ana kriteri</strong> bakımından `;
                labelText = `${contextPrefix}<strong>"${lessImportant}" alternatifi</strong>, <em>"${moreImportant}" alternatifine</em> göre ne kadar daha az önemli?`;
            } else {
                labelText = `<strong>"${lessImportant}"</strong>, <em>"${moreImportant}"</em> kriterine göre ne kadar daha az önemli?`;
            }
            containerEl.innerHTML += createSliderGroup(sliderId, labelText);
        }
        containerEl.querySelectorAll('input[type="range"]').forEach(updateSliderColor);
    };

    // YENİ VE GELİŞTİRİLMİŞ SIRALAMA SİSTEMİ BAŞLATICISI
    const initializeRankingSystem = (poolEl, slotsListEl, onUpdateCallback) => {
        const sharedGroupName = `ranking-${poolEl.id}`;
        
        // Sağdaki Kriter Havuzu
        new Sortable(poolEl, {
            group: { name: sharedGroupName, pull: 'clone', put: false }, // Klonlayarak çek, yeni öğe koyma
            animation: 150,
            sort: false // Havuz içinde sıralama yapma
        });

        // Soldaki Sıralama Listesi (Tüm liste tek bir birim)
        new Sortable(slotsListEl, {
            group: { name: sharedGroupName, pull: true, put: true },
            animation: 150,
            filter: '.rank-number', // Sıra numaralarının sürüklenmesini engelle
            // Bir öğe eklendiğinde veya sıralama değiştiğinde
            onSort: () => {
                // Her sıralama değiştiğinde, bırakma alanlarındaki öğeleri kontrol et
                slotsListEl.querySelectorAll('.drop-zone').forEach(zone => {
                    // Eğer bir alanda birden fazla öğe varsa (klonlamadan kaynaklı)
                    while (zone.children.length > 1) {
                        // Fazla olanı havuza geri gönder
                        poolEl.appendChild(zone.children[0]);
                    }
                });
                onUpdateCallback(); // Slider'ları ve diğerlerini güncelle
            }
        });
    };

    const mainCriteriaPoolEl = document.getElementById('main-criteria-pool');
    const mainCriteriaSlotsEl = document.getElementById('main-criteria-slots'); // Bu artık <ul>'nin kendisi
    const mainCriteriaSlidersEl = document.getElementById('main-criteria-sliders');
    const subCriteriaContainerEl = document.getElementById('sub-criteria-container');
    const subCriteria = [ { id: 'A1', text: 'Organik İçerik Pazarlaması' }, { id: 'A2', text: 'Influencer Pazarlaması' }, { id: 'A3', text: 'Ücretli Reklam Kampanyaları' }, { id: 'A4', text: 'Topluluk Yönetimi & Etkileşim' } ];

    const updateSubCriteriaOrder = () => {
        const orderedMainCriteria = Array.from(mainCriteriaSlotsEl.querySelectorAll('.criterion-item'));
        const orderedIds = orderedMainCriteria.map(item => `sub-block-wrapper-${item.dataset.id}`);
        const allSubBlocks = Array.from(subCriteriaContainerEl.children);
        
        allSubBlocks.forEach(block => block.style.display = 'none');
        
        orderedIds.forEach(id => {
            const blockToAppend = allSubBlocks.find(block => block.id === id);
            if (blockToAppend) {
                blockToAppend.style.display = 'block';
                subCriteriaContainerEl.appendChild(blockToAppend);
            }
        });
    };

    // ANA KRİTER SİSTEMİNİ BAŞLAT
    initializeRankingSystem(mainCriteriaPoolEl, mainCriteriaSlotsEl, () => {
        const orderedItems = Array.from(mainCriteriaSlotsEl.querySelectorAll('.criterion-item'));
        updateSliders(orderedItems, mainCriteriaSlidersEl);
        updateSubCriteriaOrder();
        const rankedCount = orderedItems.length;
        subCriteriaContainerEl.parentElement.style.display = rankedCount > 0 ? 'block' : 'none';
    });
    
    // ALT KRİTER BLOKLARINI OLUŞTUR VE BAŞLAT
    const createSubCriteriaBlock = (mainCriterion) => {
        const mainCriterionId = mainCriterion.dataset.id;
        const mainCriterionText = mainCriterion.textContent.trim();
        const wrapper = document.createElement('li');
        wrapper.id = `sub-block-wrapper-${mainCriterionId}`;
        wrapper.className = 'sub-criteria-block-wrapper';
        if (document.getElementById(wrapper.id)) return;
        
        let poolItems = subCriteria.map(sc => `<li data-id="${sc.id}" class="criterion-item">${sc.text}</li>`).join('');
        
        const instructions = `Lütfen aşağıdaki pazarlama alternatiflerini <strong>${mainCriterionText}</strong> kriteri bakımından önem derecesine göre 1'den 4'e doğru sıralayın.`;
        wrapper.innerHTML = `
            <div class="sub-criteria-block" data-main-criterion-id="${mainCriterionId}" data-main-criterion-text="${mainCriterionText}">
                <h3>Değerlendirme: <span>${mainCriterionText}</span></h3>
                <p class="instructions">${instructions}</p>
                <div class="ranking-container">
                    <div class="ranking-slots">
                        <ul class="ranking-list">
                            <li><span class="rank-number">1.</span><div class="drop-zone"></div></li>
                            <li><span class="rank-number">2.</span><div class="drop-zone"></div></li>
                            <li><span class="rank-number">3.</span><div class="drop-zone"></div></li>
                            <li><span class="rank-number">4.</span><div class="drop-zone"></div></li>
                        </ul>
                    </div>
                    <div class="criteria-pool"><ul class="pool-list">${poolItems}</ul></div>
                </div>
                <div class="sliders-container"></div>
            </div>`;
        subCriteriaContainerEl.appendChild(wrapper);
        
        const poolEl = wrapper.querySelector('.pool-list');
        const slotsEl = wrapper.querySelector('.ranking-list');
        const slidersEl = wrapper.querySelector('.sliders-container');
        
        initializeRankingSystem(poolEl, slotsEl, () => {
            const orderedItems = Array.from(slotsEl.querySelectorAll('.criterion-item'));
            updateSliders(orderedItems, slidersEl, mainCriterionText);
        });
    };

    Array.from(document.querySelectorAll('#main-criteria-pool .criterion-item')).forEach(mc => createSubCriteriaBlock(mc));
    subCriteriaContainerEl.parentElement.style.display = 'none';
    updateSubCriteriaOrder();

    // --- GENEL OLAY DİNLEYİCİLERİ ---
    document.body.addEventListener('input', (e) => {
        if (e.target.type === 'range') {
            const container = e.target.nextElementSibling;
            if (container) { container.querySelector('output').textContent = e.target.value; updateSliderColor(e.target); }
        }
    });

    document.body.addEventListener('change', (e) => {
        if (e.target.type === 'range') e.target.dataset.interacted = 'true';
    });

    // --- FORM GÖNDERME İŞLEVİ ---
    form.addEventListener('submit', async (e) => {
        // (Bu kısımda değişiklik yapılmadı, önceki haliyle çalışır durumda)
        e.preventDefault();
        messageEl.textContent = '';
        messageEl.className = '';
        let isFormValid = true;
        let firstInvalidElement = null;
        const setInvalid = (element, message) => {
            if (isFormValid) { isFormValid = false; firstInvalidElement = element; messageEl.textContent = message; }
        };

        if (!form.checkValidity()) setInvalid(form.querySelector(':invalid'), 'Lütfen Bölüm B\'deki tüm gerekli kişisel ve işletme bilgi alanlarını doldurun.');
        
        const mainRankedItems = mainCriteriaSlotsEl.querySelectorAll('.criterion-item');
        if (isFormValid && mainRankedItems.length < 5) setInvalid(mainCriteriaSlotsEl, 'Lütfen Bölüm C\'deki 5 ana kriterin tamamını sıralayın.');
        
        if (isFormValid) {
            const subCriteriaBlocks = document.querySelectorAll('#sub-criteria-container > li[style*="display: block"] .sub-criteria-block');
            for (const block of subCriteriaBlocks) {
                if (block.querySelectorAll('.ranking-list .criterion-item').length < 4) {
                    const blockTitle = block.querySelector('h3 span').textContent;
                    setInvalid(block, `Lütfen Bölüm D'deki "${blockTitle}" değerlendirmesi için 4 alternatifin tamamını sıralayın.`);
                    break;
                }
            }
        }

        if (isFormValid) {
            for (const slider of form.querySelectorAll('.sliders-container input[type="range"]')) {
                if (slider.offsetParent !== null && slider.value === '0.5' && slider.dataset.interacted === 'false') {
                    const parentBlock = slider.closest('.sub-criteria-block');
                    let blockTitle = parentBlock ? `"${parentBlock.querySelector('h3 span').textContent}" (Bölüm D)` : 'Ana Kriterler (Bölüm C)';
                    setInvalid(slider.closest('.slider-group'), `Lütfen ${blockTitle} bölümündeki bir kaydırma çubuğunu değerlendirin. 'Eşit Önemde' bırakmak için çubuğu hafifçe oynatmanız yeterlidir.`);
                    break;
                }
            }
        }

        if (!isFormValid) {
            messageEl.className = 'error';
            if (firstInvalidElement) firstInvalidElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
            return;
        }

        submitBtn.disabled = true;
        messageEl.textContent = 'Veriler gönderiliyor...';
        messageEl.className = 'info';
        try {
            const getCheckboxValues = (name) => Array.from(form.elements[name]).filter(cb => cb.checked).map(cb => cb.value);
            const participant_data = {
                consent: consentCheckbox.checked ? 'Evet, Onaylıyorum' : 'Onaylanmadı',
                personal_info: { position: form.elements.position.value, position_relation: form.elements.position_relation.value },
                business_info: {
                    center_type: form.elements.center_type.value, location: form.elements.location.value, member_count: form.elements.member_count.value,
                    operation_time: form.elements.operation_time.value, target_audience: getCheckboxValues('target_audience'), service_scope: getCheckboxValues('service_scope'),
                    pricing_policy: form.elements.pricing_policy.value, competitor_count: form.elements.competitor_count.value, budget: form.elements.budget.value,
                    platforms: getCheckboxValues('platforms'), content_frequency: form.elements.content_frequency.value, content_type: form.elements.content_type.value,
                    goals: getCheckboxValues('goals'), management: form.elements.management.value, digital_infra: getCheckboxValues('digital_infra'),
                    biggest_challenge: form.elements.biggest_challenge.value
                }
            };
            const swara_data = {
                main_criteria_data: {
                    order: Array.from(mainRankedItems).map(li => li.dataset.id),
                    sj_values: Array.from(mainCriteriaSlidersEl.querySelectorAll('input[type="range"]')).map(input => input.value)
                },
                sub_criteria_data: {}
            };
            document.querySelectorAll('.sub-criteria-block').forEach(block => {
                const mainCriterionId = block.dataset.mainCriterionId;
                swara_data.sub_criteria_data[mainCriterionId] = {
                    order: Array.from(block.querySelectorAll('.ranking-list .criterion-item')).map(li => li.dataset.id),
                    sj_values: Array.from(block.querySelector('.sliders-container').querySelectorAll('input[type="range"]')).map(input => input.value)
                };
            });
            const final_data_to_send = { participant_data, swara_data };
            console.log("Gönderilecek Veri:", JSON.stringify(final_data_to_send, null, 2));
            const response = await fetch('save_response.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(final_data_to_send) });
            if (!response.ok) throw new Error(`Sunucu hatası: ${response.statusText}`);
            const result = await response.json();
            if (result.status === 'success') {
                document.querySelector('.container').style.display = 'none';
                document.getElementById('success-screen').classList.remove('hidden');
            } else { throw new Error(result.message || 'Bilinmeyen bir sunucu hatası.'); }
        } catch (error) {
            messageEl.textContent = `Bir hata oluştu: ${error.message}`;
            messageEl.className = 'error';
        } finally {
            submitBtn.disabled = false;
        }
    });
});