/* ============================================================
   Aşkın Berber Sigorta — KVKK çerez onay katmanı
   Venüs Ajans Web Standardı v3.0 · § B10
   Renkler style.css içindeki :root değişkenlerinden gelir.
   ============================================================ */

#cerez-katman { position: fixed; inset: auto 0 0 0; z-index: 1090; font-family: var(--font-govde); }

.cerez-serit {
  display: none;
  max-width: 62rem;
  margin: 0 auto var(--bosluk-sm);
  padding: var(--bosluk-md);
  background: #fff;
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose-md);
  box-shadow: var(--golge-yukse);
}
.cerez-serit.acik { display: block; animation: cerez-yukari 350ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes cerez-yukari { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.cerez-serit h2 { font-size: 1.0625rem; margin-bottom: .375rem; }
.cerez-serit p { font-size: .875rem; line-height: 1.6; color: var(--renk-metin-ikincil); margin-bottom: var(--bosluk-sm); }
.cerez-serit p a { text-decoration: underline; text-underline-offset: .2em; }

.cerez-aksiyon { display: flex; flex-wrap: wrap; gap: .5rem; }
.cerez-dugme {
  appearance: none;
  min-height: 44px;
  padding: .625rem 1.25rem;
  font-family: var(--font-baslik);
  font-size: .875rem;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: var(--kose-sm);
  cursor: pointer;
  transition: background-color var(--gecis), color var(--gecis), border-color var(--gecis);
}
/* Kabul ve reddet eşit görünürlükte — KVKK ve GDPR iyi uygulaması */
.cerez-kabul  { background: var(--renk-cta); color: #fff; }
.cerez-kabul:hover { background: var(--renk-cta-koyu); }
.cerez-reddet { background: var(--renk-zemin-yumusak); color: var(--renk-lacivert-koyu); border-color: var(--renk-cizgi); }
.cerez-reddet:hover { border-color: var(--renk-lacivert); color: var(--renk-lacivert); }
.cerez-yonet  { background: transparent; color: var(--renk-lacivert); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Tercih penceresi ---------- */
.cerez-perde {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--bosluk-sm);
  background: rgba(0, 31, 63, .55);
}
.cerez-perde.acik { display: flex; }
.cerez-pencere {
  width: 100%;
  max-width: 36rem;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--bosluk-lg);
  background: #fff;
  border-radius: var(--kose-md);
  box-shadow: var(--golge-yukse);
}
.cerez-pencere h2 { font-size: 1.25rem; margin-bottom: .25rem; }
.cerez-pencere > p { font-size: .875rem; color: var(--renk-metin-ikincil); margin-bottom: var(--bosluk-md); }

.cerez-grup { border: 1px solid var(--renk-cizgi); border-radius: var(--kose-sm); padding: .875rem 1rem; margin-bottom: .625rem; }
.cerez-grup-ust { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cerez-grup-ust strong { font-family: var(--font-baslik); font-size: .9375rem; color: var(--renk-metin); }
.cerez-grup p { font-size: .8125rem; line-height: 1.6; color: var(--renk-metin-ikincil); margin: .5rem 0 0; }
.cerez-daima { font-size: .75rem; font-weight: 700; color: var(--renk-cta); white-space: nowrap; }

.cerez-anahtar { position: relative; width: 46px; height: 26px; flex: none; }
.cerez-anahtar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cerez-yol {
  position: absolute;
  inset: 0;
  background: #c3cfda;
  border-radius: 999px;
  transition: background-color var(--gecis);
  pointer-events: none;
}
.cerez-yol::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--gecis);
}
.cerez-anahtar input:checked + .cerez-yol { background: var(--renk-cta); }
.cerez-anahtar input:checked + .cerez-yol::before { transform: translateX(20px); }
.cerez-anahtar input:focus-visible + .cerez-yol { outline: 3px solid var(--renk-lacivert); outline-offset: 2px; }

.cerez-pencere-aksiyon { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--bosluk-md); }

@media (max-width: 575.98px) {
  .cerez-serit { margin-bottom: 0; border-radius: var(--kose-md) var(--kose-md) 0 0; }
  .cerez-aksiyon .cerez-dugme { flex: 1 1 100%; }
}