/* Cerez onay paneli — tasinabilir.
 *
 * Panel KENDI renklerini tasir; sitenin CSS degiskenlerine bagli degildir.
 * Boylece iki farkli urun sitesine de degistirmeden konabiliyor ve site
 * temasi degisse bile panel okunur kaliyor. */

.cerez-panel {
  position: fixed;
  inset: auto 16px 16px;
  z-index: 9999;
  max-width: 760px;
  margin-inline: auto;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: #14161d;
  color: #f3f5f8;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  font: 400 14px/1.6 "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.cerez-panel[hidden] { display: none; }

.cerez-metin h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.cerez-metin p { margin: 0; color: rgba(243, 245, 248, .74); }
.cerez-panel a { color: #9ed7ff; }

/* Kategoriler ve dugmeler AYNI satirda durur; ayrac yalnizca ayar katmani
   acikken gorunur. Ayri satir panel yuksekligini gereksiz buyutuyordu. */
.cerez-alt {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.cerez-panel.acik .cerez-alt {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.cerez-secim { display: grid; gap: 10px; flex: 1 1 320px; }
.cerez-secim[hidden] { display: none; }

.cerez-satir {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.cerez-satir input { margin-top: 3px; accent-color: #6aa9ff; flex: none; }
.cerez-satir input:disabled { cursor: not-allowed; opacity: .6; }
.cerez-satir span { display: block; font-size: 13px; color: rgba(243, 245, 248, .66); }
.cerez-satir strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #f3f5f8;
}

.cerez-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.cerez-dugmeler button {
  min-height: 40px;                    /* dokunma hedefi */
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: transparent;
  color: #f3f5f8;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.cerez-dugmeler button:hover { border-color: rgba(255, 255, 255, .4); }
.cerez-dugmeler button:focus-visible { outline: 2px solid #6aa9ff; outline-offset: 2px; }
.cerez-dugmeler button[hidden] { display: none; }
/* Birincil eylem: kabul. */
.cerez-dugmeler button[data-onay="kabul"],
.cerez-dugmeler button[data-onay="kaydet"] {
  border-color: transparent;
  background: #2f6fed;
  color: #fff;
}
.cerez-dugmeler button[data-onay="kabul"]:hover,
.cerez-dugmeler button[data-onay="kaydet"]:hover { background: #2a63d4; }

/* Altbilgideki kalici tercih dugmesi — onayi geri almanin yolu her zaman
   gorunur olmali. */
.cerez-tercih {
  display: block;
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: .6;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cerez-tercih:hover { opacity: 1; }

@media (max-width: 640px) {
  .cerez-panel { inset: auto 10px 10px; padding: 16px; }
  .cerez-alt { flex-direction: column; align-items: stretch; }
  .cerez-dugmeler button { flex: 1 1 140px; }
}