/* consent.css: cookie consent (server/modules/site/lib/consent-ui.js, public/assets/js/consent.js).
   Banner: a floating navy card at the bottom left from 768 px (580 px wide), a bottom sheet on phones.
   Fixed, so it never moves the page, also on the full screen map. Above the header, menus and sheets,
   under dialogs (mobile menu, popups) and toasts. Reject and accept share one style and one width.
   Preferences: a native <dialog> (modal with JavaScript; #cerez-tercihleri :target without it), centred
   on desktop and a bottom sheet on phones, with the site's switches.
   Short screens (up to 880 px tall, laptops with the browser bars) get a compact card with the links
   inline, so the home hero's headline and buttons stay visible above it.
   Motion only under html.motion (JavaScript on, reduced motion off): the card rises in once. */

/* ---------- Banner ---------- */
.consent {
  position: fixed;
  left: var(--gutter);
  bottom: var(--sp-6);
  z-index: calc(var(--z-modal) - 2);
  width: min(580px, calc(100vw - 2 * var(--gutter)));
}
.consent-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "mark copy"
    ".    actions"
    ".    error";
  column-gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  background: var(--band);
  color: var(--on-band-muted);
  box-shadow: 0 24px 48px -16px rgba(14, 19, 32, .55), 0 4px 12px rgba(14, 19, 32, .22);
}
.consent-card ::selection { background: rgba(255, 255, 255, .28); color: #FFFFFF; }
.consent-mark {
  grid-area: mark;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08);
  color: var(--on-band);
}
.consent-copy { grid-area: copy; min-width: 0; }
.consent-text {
  max-width: none;
  color: var(--on-band-muted);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.consent-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  max-width: none;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.consent-link {
  color: var(--on-band);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.consent-link:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.consent-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.consent-actions .btn { min-height: var(--tap); padding: 0 var(--sp-4); }
.consent-actions .btn[aria-disabled="true"] { cursor: progress; }
.consent-error {
  grid-area: error;
  max-width: none;
  margin-top: var(--sp-3);
  color: var(--accent-on-band, #FF6B76);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.consent-error:empty { display: none; }

/* Phones: a bottom sheet over the whole width, the two equal buttons side by side, "Tercihler" under them. */
@media (max-width: 767.98px) {
  .consent { left: 0; right: 0; bottom: 0; width: auto; }
  .consent-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "actions" "error";
    max-height: 80dvh;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--sp-5) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .consent-mark { display: none; }
  .consent-text { font-size: var(--fs-small); }
  .consent-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--sp-4); }
  .consent-actions > :nth-child(3) { grid-column: 1 / -1; }
  /* Never over the mobile quick action bar (site.js keeps that bar hidden while the banner is open). */
  body:has(.sticky-cta:not([hidden])) .consent { bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom, 0px)); }
}

/* Short screens from 768 px: one compact block, text and links in one flow, 40 px buttons. */
@media (min-width: 768px) and (max-height: 880px) {
  .consent { bottom: var(--sp-3); }
  .consent-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "actions" "error"; padding: var(--sp-3) var(--sp-4); }
  .consent-mark { display: none; }
  .consent-copy { font-size: var(--fs-small); line-height: var(--lh-small); }
  .consent-copy > p { display: inline; }
  .consent-text { font-size: inherit; line-height: inherit; }
  .consent-links { margin: 0; font-size: inherit; }
  .consent-links .consent-link + .consent-link { margin-left: var(--sp-3); }
  .consent-actions { margin-top: var(--sp-3); }
  .consent-actions .btn { min-height: var(--control-h-sm); }
}

/* ---------- Preferences dialog ---------- */
.consent-dialog {
  width: min(600px, calc(100vw - 2 * var(--sp-4)));
  max-width: none;
  max-height: min(760px, calc(100dvh - 2 * var(--sp-6)));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: 0 24px 64px -16px rgba(14, 19, 32, .45), 0 0 0 1px rgba(var(--shadow-tint), .06);
  overflow: hidden;
}
.consent-dialog[open] { display: flex; flex-direction: column; }
.consent-dialog::backdrop { background: rgba(14, 19, 32, .5); }
.consent-dialog-in { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.consent-dialog-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-3) var(--sp-6);
}
.consent-dialog-title {
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  font-stretch: var(--stretch-heading);
  line-height: 1.2;
  letter-spacing: var(--ls-heading);
}
.consent-close {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color var(--dur-1) var(--ease);
}
.consent-close:hover { background: var(--bg-alt); }
.consent-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--sp-6);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-hover) transparent;
}
.consent-cats { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); }
.consent-cat { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.consent-cat-head { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); cursor: pointer; }
.consent-cat-name { flex: 1 1 auto; min-width: 0; color: var(--ink); font-weight: var(--fw-semibold); line-height: 1.35; }
.consent-cat-state { flex: none; color: var(--muted); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.consent-cat-text { max-width: none; margin-top: var(--sp-1); padding-right: 56px; color: var(--ink-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.consent-links--dialog { margin: 0; padding: var(--sp-4) 0 var(--sp-5); }
.consent-dialog .consent-link { color: var(--ink); text-decoration-color: rgba(var(--shadow-tint), .35); }
.consent-dialog .consent-link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.consent-dialog-foot { flex: none; padding: var(--sp-4) var(--sp-6) var(--sp-6); border-top: 1px solid var(--line); background: var(--surface); }
.consent-dialog .consent-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); margin: 0; }
.consent-dialog .consent-error { margin: 0 0 var(--sp-3); color: var(--form-error, #B80021); }

/* Switch: the site's switch (vehicles.css .vswitch), a real checkbox with role="switch" over the track. */
.consent-switch { position: relative; display: inline-flex; flex: none; width: 44px; height: 26px; }
.consent-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.consent-switch-track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color var(--dur-2) var(--ease);
}
.consent-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(var(--shadow-tint), .3);
  transition: transform var(--dur-2) var(--ease);
}
.consent-switch input:checked + .consent-switch-track { background: var(--ink); }
.consent-switch input:checked + .consent-switch-track::after { transform: translate3d(18px, 0, 0); }
.consent-cat-head:hover input:not(:disabled):not(:checked) + .consent-switch-track { background: var(--muted); }
.consent-cat-head:hover input:not(:disabled):checked + .consent-switch-track { background: var(--secondary-hover); }
.consent-switch input:focus-visible + .consent-switch-track { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
.consent-switch input:disabled { cursor: default; }
.consent-switch input:disabled + .consent-switch-track { opacity: .45; }
.consent-cat-head:has(input:disabled) { cursor: default; }

@media (max-width: 767.98px) {
  .consent-dialog {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .consent-dialog-head { padding: var(--sp-4) var(--sp-2) var(--sp-2) var(--gutter); }
  .consent-dialog-title { font-size: 1.25rem; }
  .consent-dialog-body { padding: 0 var(--gutter); }
  .consent-cat-text { padding-right: 0; }
  .consent-dialog-foot { padding: var(--sp-3) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  .consent-dialog .consent-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .consent-dialog .consent-actions > :nth-child(3) { grid-column: 1 / -1; }
}

/* Without JavaScript (or without <dialog> support) the dialog opens as the #cerez-tercihleri target. */
html:not(.consent-js) .consent-dialog:target {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) + 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 100vmax rgba(14, 19, 32, .5), 0 24px 64px -16px rgba(14, 19, 32, .45);
}

/* While the dialog is open the page behind it stays put (the gutter keeps the width when it scrolled). */
html.consent-open { overflow: hidden; }
html.consent-open--gutter { scrollbar-gutter: stable; }

/* ---------- Motion: one short entrance, an even shorter exit ---------- */
@keyframes consent-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes consent-sheet { from { transform: translate3d(0, 100%, 0); } }
@keyframes consent-out { to { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes consent-fade { from { opacity: 0; } }
@keyframes consent-pop { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); } }
html.motion .consent-card { animation: consent-rise 520ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)) 240ms both; }
html.motion .consent.is-leaving .consent-card { animation: consent-out 200ms var(--ease) forwards; }
html.motion .consent-dialog[open] { animation: consent-pop 280ms var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
html.motion .consent-dialog[open]::backdrop { animation: consent-fade 200ms var(--ease); }
@media (max-width: 767.98px) {
  html.motion .consent-card { animation-name: consent-sheet; animation-duration: 460ms; }
  html.motion .consent-dialog[open] { animation-name: consent-sheet; animation-duration: 360ms; }
}

@media (forced-colors: active) {
  .consent-card, .consent-dialog { border: 1px solid CanvasText; }
  .consent-switch-track { border: 1px solid CanvasText; background: Canvas; }
  .consent-switch-track::after { background: CanvasText; }
  .consent-switch input:checked + .consent-switch-track { background: Highlight; }
}

@media print {
  .consent, .consent-dialog { display: none !important; }
}