/* Cookie consent banner.
   Shared by index.html and the legal pages, so it declares literal colours
   rather than depending on either stylesheet's tokens.

   The two categories shown here mirror the cookie policy exactly:
   Zorunlu (strictly necessary, always on) and Analitik (opt-in, off until
   the visitor accepts). */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above the deck chrome (statusbar 40, sidebar 91) so it is always
     actionable, but below the loading screen (1000). */
  z-index: 950;
  display: none;
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 6vw, 64px);
  background: #0b0b0d;
  border-top: 1px solid rgba(214, 210, 207, 0.18);
  color: #d6d2cf;
  font-family: Manrope, system-ui, sans-serif;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.55);
  max-height: 88dvh;
  overflow-y: auto;
}

.consent[data-open="true"] { display: block; }

.consent__text {
  max-width: 78ch;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(214, 210, 207, 0.82);
}

.consent__text a { color: #ff5a00; text-decoration: none; }
.consent__text a.is-lit { text-decoration: underline; }
@media (hover: hover) { .consent__text a:hover { text-decoration: underline; } }

/* ---------- categories ---------- */

.consent__cats {
  max-width: 78ch;
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
}

.consent__cats[hidden] { display: none; }

.consent__cat {
  display: grid;
  grid-template-columns: 12ch 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(214, 210, 207, 0.12);
}

.consent__cat-name {
  font: 500 12px/1.5 Manrope, sans-serif;
  color: #ebe8e5;
}

.consent__cat-state {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.consent__cat-state--always { cursor: default; }

.consent__cat-state input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.consent__switch-ui {
  position: relative;
  width: 34px;
  height: 18px;
  border: 1px solid rgba(214, 210, 207, 0.45);
  border-radius: 999px;
  background: rgba(214, 210, 207, 0.12);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.consent__switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d6d2cf;
  transition: transform 150ms ease;
}

.consent__cat-state input:checked + .consent__switch-ui {
  border-color: #ff5a00;
  background: #ff5a00;
}

.consent__cat-state input:checked + .consent__switch-ui::after {
  transform: translateX(16px);
  background: #0b0b0d;
}

.consent__cat-state input:focus-visible + .consent__switch-ui {
  outline: 2px solid #ff5a00;
  outline-offset: 3px;
}

.consent__cat-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(214, 210, 207, 0.68);
}

/* ---------- actions ---------- */

.consent__actions {
  max-width: 78ch;
  margin: 18px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.consent__btn {
  flex: 0 1 auto;
  min-width: 148px;
  padding: 12px 22px;
  border: 1px solid rgba(235, 232, 229, 0.5);
  background: transparent;
  color: #d6d2cf;
  cursor: pointer;
  font: 600 11px/1 Manrope, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.consent__btn.is-lit { background: #d6d2cf; color: #0b0b0d; }
@media (hover: hover) { .consent__btn:hover { background: #d6d2cf; color: #0b0b0d; } }
.consent__btn:focus-visible { outline: 2px solid #ff5a00; outline-offset: 3px; }

/* Accept and reject are deliberately identical in weight: refusing has to be
   as easy as accepting. Do not restyle one as the primary action. */
.consent__btn--accept,
.consent__btn--reject { border-color: rgba(235, 232, 229, 0.5); }

@media (max-width: 700px) {
  /* Mobilde bant ekranın üçte birini kaplamasın: dar dolgu, tek satır metin, üç düğme yan yana (44 px yükseklik) */
  .consent { padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .consent__text { font-size: 13px; line-height: 1.45; }
  .consent__cat { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .consent__cat-desc { grid-column: 1 / -1; }
  .consent__actions { margin-top: 12px; gap: 8px; flex-wrap: nowrap; }
  .consent__btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 12px 6px; font-size: 12px; letter-spacing: 0.03em; white-space: normal; }   /* 11 px düğme yazısı telefonda zayıf */
}

  html.motion-reduced .consent__btn, html.motion-reduced .consent__switch-ui, html.motion-reduced .consent__switch-ui::after { transition: none; }

/* Masaüstünde tam genişlik bant yerine köşe kartı: siteyi kapatmaz, okunur, aynı üç eşit düğme */
@media (min-width: 701px) {
  .consent { left: auto; right: 24px; bottom: 24px; max-width: 560px; padding: 20px 22px; border: 1px solid rgba(214, 210, 207, 0.18); background: rgba(11, 11, 13, 0.96); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9); }
  .consent__text, .consent__cats, .consent__actions { max-width: none; margin-left: 0; margin-right: 0; }
  .consent__actions { justify-content: flex-start; flex-wrap: nowrap; }
  .consent__actions .consent__btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
}