Çerez ve Tercihler

<style>
.cookie-modal {
  background: #fff;
  padding: 24px;
  max-width: 600px;
  margin: 30px auto;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.08);
  font-family: Arial, sans-serif;
}
.cookie-group {
  margin-bottom: 15px;
}
.cookie-group label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cookie-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.cookie-buttons button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}
</style>

<div class="cookie-modal">
  <h2>Çerez Tercihleri</h2>

  <div class="cookie-group">
    <label><input type="checkbox" checked disabled> <strong>Gerekli</strong> – Site işlevselliği için zorunlu</label>
  </div>
  <div class="cookie-group">
    <label><input type="checkbox" class="cookie-toggle" data-type="personal"> <strong>Kişiselleştirme</strong></label>
  </div>
  <div class="cookie-group">
    <label><input type="checkbox" class="cookie-toggle" data-type="marketing"> <strong>Pazarlama</strong></label>
  </div>
  <div class="cookie-group">
    <label><input type="checkbox" class="cookie-toggle" data-type="analytics"> <strong>Analitik</strong></label>
  </div>

  <div class="cookie-buttons">
    <button onclick="handleCookies('accept')">Hepsini Kabul Et</button>
    <button onclick="handleCookies('reject')">Tümünü Reddet</button>
    <button onclick="handleCookies('save')">Kaydet</button>
  </div>
</div>

<script>
function handleCookies(action) {
  const toggles = document.querySelectorAll('.cookie-toggle');
  if (action === 'accept') {
    toggles.forEach(el => el.checked = true);
  } else if (action === 'reject') {
    toggles.forEach(el => el.checked = false);
  } else if (action === 'save') {
    toggles.forEach(el => {
      console.log(`Çerez tipi: ${el.dataset.type}, Durum: ${el.checked}`);
    });
    alert('Tercihleriniz kaydedildi.');
  }
}
</script>