/* ==========================================================================
   RentDrive — ENHANCE LAYER  (enhance.css)
   Awwwards-grade enhancement styling. Loads AFTER style.css → may override.
   Owner: ENHANCE-CSS agent. Behaviour lives in enhance.js.
   Reuses tokens from style.css (--brand, --ink, --surface, --border-soft,
   --text-soft, --brand-rgb, --r-*, --shadow-*, --font-display, --t*, etc.).
   No remote fonts. Dark-mode + reduced-motion aware. Mobile-first.
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
     A.  Enhance-local tokens
     B.  Top loading / scroll-progress bar         (#67, #48)
     C.  Header hide/show on scroll                 (#9)
     D.  Custom cursor polish                       (#42)
     E.  Button ripple + sheen + tap-scale          (#40, #91)
     F.  Lazy image fade-in + photo grade           (#68, #61, #59, #60)
     G.  Image bottom gradient helper               (#65)
     H.  Back-to-top progress ring                  (#49)
     I.  Reveal stagger                             (#39, #43)
     J.  Theme transition smoothing                 (#100)
     K.  Favorite heart pop polish                  (#24)
     L.  Skeleton shimmer                           (#21, #71)
     M.  Command palette (Ctrl/Cmd+K)               (#13)
     N.  Mobile sticky action bar                   (#15, #86, #90)
     O.  Bottom-sheet                               (#87)
     P.  View toggle (grid/list)                    (#20)
     Q.  Signature slash motif + section rhythm     (#98, #54)
     R.  Section-head underline draw                (#46)
     S.  Tabular numerals on prices                 (#58)
     T.  Car-card 2nd image hover + fuel ribbon     (#16, #22, #23, #65)
     U.  Eyebrow token + secondary gold accent      (#56, #53)
     V.  Variable-font + display polish             (#51, #52, #55, #57)
     W.  Empty-state brand pattern                  (#63)
     X.  Filter chips / applied filters             (#19)
     Y.  Floating-label + form micro-polish         (#62)
     Z.  Social proof "N viewing"                   (#81)
     AA. Misc ideas: 18, 82, 85, 89(touch), 92-94(a11y)
     AB. Dark-mode tweaks
     AC. prefers-reduced-motion
   ========================================================================== */

/* ==========================================================================
   A. ENHANCE-LOCAL TOKENS
   ========================================================================== */
:root {
  --rdx-lux:        #C9A227;          /* secondary gold accent (#53) */
  --rdx-lux-soft:   #F3E7BE;
  --rdx-topbar-h:   3px;
  --rdx-skel-base:  #ECECF1;
  --rdx-skel-shine: #F7F7FB;
  --rdx-z-topbar:   1300;
  --rdx-z-cmdk:     1600;
  --rdx-z-sheet:    1450;
  --rdx-z-actionbar:910;
  --rdx-ease-out:   cubic-bezier(.16, 1, .3, 1);
}
[data-theme="dark"],
.dark {
  --rdx-skel-base:  #1C1C26;
  --rdx-skel-shine: #26262F;
  --rdx-lux:        #E3C25A;
  --rdx-lux-soft:   #3a3115;
}

/* ==========================================================================
   B. TOP LOADING / SCROLL-PROGRESS BAR  (#67 navigation, #48 reading)
   enhance.js injects <div class="rdx-topbar"><span></span></div>
   ========================================================================== */
.rdx-topbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--rdx-topbar-h);
  z-index: var(--rdx-z-topbar);
  pointer-events: none;
  background: transparent;
}
.rdx-topbar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 65%, #fff) 60%, var(--brand-700));
  box-shadow: 0 0 12px rgba(var(--brand-rgb), .65);
  border-radius: 0 3px 3px 0;
  transition: width .12s linear, opacity var(--t);
}
/* Indeterminate navigation pulse (enhance.js adds .is-loading) */
.rdx-topbar.is-loading > span {
  width: 75%;
  transition: width 1.4s var(--rdx-ease-out);
}
.rdx-topbar.is-done > span {
  width: 100% !important;
  opacity: 0;
  transition: width .2s ease, opacity .4s ease .15s;
}

/* ==========================================================================
   C. HEADER HIDE / SHOW ON SCROLL  (#9)
   enhance.js adds .rdx-hide on #rd-header when scrolling down.
   ========================================================================== */
#rd-header {
  transition: background var(--t), box-shadow var(--t),
              backdrop-filter var(--t), height var(--t),
              transform var(--t-slow);
  will-change: transform;
}
#rd-header.rdx-hide {
  transform: translateY(-100%);
}

/* ==========================================================================
   D. CUSTOM CURSOR — disabled (native OS cursor used site-wide).
   ========================================================================== */

/* ==========================================================================
   E. BUTTON RIPPLE + SHEEN + TAP-SCALE  (#40 sheen, #91 tap-scale)
   enhance.js spawns .rdx-ripple spans inside .rd-btn / [data-ripple].
   ========================================================================== */
.rd-btn, [data-ripple] { position: relative; overflow: hidden; }
/* Never show ripple inside buttons — breaks full-width pill layout. */
.rd-btn .rdx-ripple {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}

.rdx-ripple {
  position: absolute !important;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, .45);
  pointer-events: none;
  animation: rdx-ripple .6s var(--rdx-ease-out) forwards;
  z-index: 0;
}
/* Ghost / light buttons need a darker ripple */
.rd-btn--ghost .rdx-ripple,
.rd-btn--call .rdx-ripple,
.rd-btn--white .rdx-ripple { background: rgba(var(--brand-rgb), .22); }
@keyframes rdx-ripple {
  to { transform: scale(2.6); opacity: 0; }
}
/* Haptic-feel tap scale disabled — caused visible button layout shift on click. */
/* ==========================================================================
   F. LAZY IMAGE FADE-IN + GLOBAL PHOTO GRADE  (#68, #61, #59, #60)
   enhance.js adds .rdx-loaded to img[loading=lazy] once decoded.
   ========================================================================== */
img[loading="lazy"]:not(.rdx-loaded) {
  opacity: 0;
}
img[loading="lazy"].rdx-loaded {
  opacity: 1;
  animation: rdx-img-in .7s var(--rdx-ease-out);
}
@keyframes rdx-img-in {
  from { opacity: 0; transform: scale(1.03); filter: blur(8px); }
  to   { opacity: 1; transform: none;        filter: blur(0); }
}

/* #59 — very light global photo grade on content imagery only.
   Scoped to card / gallery / hero media so logos & icons stay untouched. */
.rd-car-card__media img,
.rdx-grade,
.rd-gallery__thumb img {
  filter: saturate(1.04) contrast(1.02);
}

/* ==========================================================================
   G. IMAGE BOTTOM GRADIENT HELPER  (#65)
   Add .rdx-img-grad to a media wrapper for a legible dark foot.
   ========================================================================== */
.rdx-img-grad { position: relative; }
.rdx-img-grad::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(11, 11, 15, .55));
  pointer-events: none;
  z-index: 1;
  opacity: .9;
}

/* ==========================================================================
   H. BACK-TO-TOP PROGRESS RING  (#49)
   enhance.js injects an SVG ring inside [data-back-to-top]/.rd-totop.
   ========================================================================== */
.rd-totop { overflow: visible; }
.rdx-ring {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.rdx-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 2.5;
}
.rdx-ring__fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .1s linear;
}

/* ==========================================================================
   I. REVEAL STAGGER  (#39, #43)
   Children of [data-reveal-stagger] get incremental transition-delay.
   Pairs with style.css .rd-reveal initial state.
   ========================================================================== */
[data-reveal-stagger] > * { transition-delay: 0s; }
[data-reveal-stagger].is-revealed > *:nth-child(1),
[data-reveal-stagger].in-view   > *:nth-child(1) { transition-delay: .04s; }
[data-reveal-stagger].is-revealed > *:nth-child(2),
[data-reveal-stagger].in-view   > *:nth-child(2) { transition-delay: .10s; }
[data-reveal-stagger].is-revealed > *:nth-child(3),
[data-reveal-stagger].in-view   > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].is-revealed > *:nth-child(4),
[data-reveal-stagger].in-view   > *:nth-child(4) { transition-delay: .22s; }
[data-reveal-stagger].is-revealed > *:nth-child(5),
[data-reveal-stagger].in-view   > *:nth-child(5) { transition-delay: .28s; }
[data-reveal-stagger].is-revealed > *:nth-child(6),
[data-reveal-stagger].in-view   > *:nth-child(6) { transition-delay: .34s; }
[data-reveal-stagger].is-revealed > *:nth-child(7),
[data-reveal-stagger].in-view   > *:nth-child(7) { transition-delay: .40s; }
[data-reveal-stagger].is-revealed > *:nth-child(8),
[data-reveal-stagger].in-view   > *:nth-child(8) { transition-delay: .46s; }

/* ==========================================================================
   J. THEME TRANSITION SMOOTHING  (#100)
   enhance.js adds .rdx-theme-anim to <html> briefly on theme switch.
   ========================================================================== */
html.rdx-theme-anim,
html.rdx-theme-anim body,
html.rdx-theme-anim .rd-card,
html.rdx-theme-anim .rd-car-card,
html.rdx-theme-anim .rd-input,
html.rdx-theme-anim .rd-select,
html.rdx-theme-anim .rd-textarea,
html.rdx-theme-anim .rd-chip,
html.rdx-theme-anim #rd-header.is-scrolled {
  transition: background-color .45s ease, color .45s ease,
              border-color .45s ease, box-shadow .45s ease !important;
}

/* ==========================================================================
   K. FAVORITE HEART POP POLISH  (#24)
   style.css already animates .is-active; add a radiating burst.
   ========================================================================== */
.rd-fav { overflow: visible; }
.rd-fav.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--brand);
  animation: rdx-fav-burst .55s var(--rdx-ease-out) forwards;
  pointer-events: none;
}
@keyframes rdx-fav-burst {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ==========================================================================
   L. SKELETON SHIMMER  (#21, #71)
   Utility .rdx-skel — apply to placeholder blocks before content loads.
   ========================================================================== */
.rdx-skel {
  position: relative;
  overflow: hidden;
  background: var(--rdx-skel-base);
  border-radius: var(--r-sm);
}
.rdx-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent, var(--rdx-skel-shine), transparent);
  animation: rdx-shimmer 1.4s infinite;
}
@keyframes rdx-shimmer {
  100% { transform: translateX(100%); }
}
.rdx-skel--text  { height: .8em; margin: .35em 0; border-radius: 4px; }
.rdx-skel--line  { height: 1em;  border-radius: 4px; }
.rdx-skel--title { height: 1.4em; width: 70%; border-radius: 6px; }
.rdx-skel--media { aspect-ratio: 16 / 10; border-radius: var(--r-lg); }
.rdx-skel--btn   { height: 44px; border-radius: var(--r-pill); }
.rdx-skel--avatar{ width: 46px; height: 46px; border-radius: 50%; }
/* A ready-made skeleton car card matching .rd-car-card metrics */
.rdx-skel-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.rdx-skel-card__body { padding: 1.1rem 1.15rem 1.25rem; }

/* ==========================================================================
   M. COMMAND PALETTE  (#13)  — enhance.js builds the DOM
   Trigger: [data-cmdk-open] + Ctrl/Cmd+K
   ========================================================================== */
.rdx-cmdk {
  position: fixed;
  inset: 0;
  z-index: var(--rdx-z-cmdk);
  display: grid;
  place-items: start center;
  padding: clamp(4rem, 14vh, 9rem) 1rem 2rem;
  background: rgba(11, 11, 15, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t), visibility var(--t);
}
.rdx-cmdk.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.rdx-cmdk__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.rdx-cmdk__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 40rem);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-14px) scale(.98);
  opacity: 0;
  transition: transform var(--t-slow), opacity var(--t);
}
.rdx-cmdk.is-open .rdx-cmdk__panel { transform: none; opacity: 1; }
.rdx-cmdk__head,
.rdx-cmdk__search {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-soft);
}
.rdx-cmdk__head i, .rdx-cmdk__head svg,
.rdx-cmdk__search i, .rdx-cmdk__search svg,
.rdx-cmdk__icon {
  width: 20px; height: 20px; color: var(--brand); flex: none;
}
.rdx-cmdk__esc {
  flex: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  background: var(--bg-soft);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .25rem .45rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rdx-cmdk__esc:hover { color: var(--brand); border-color: var(--brand); background: rgba(var(--brand-rgb), .06); }
.rdx-cmdk__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text);
  outline: none;
}
.rdx-cmdk__input::placeholder { color: var(--text-muted); }
.rdx-cmdk__kbd {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xs);
  padding: .2rem .45rem;
}
.rdx-cmdk__results,
.rdx-cmdk__list {
  max-height: min(56vh, 28rem);
  overflow-y: auto;
  padding: .5rem;
  margin: 0;
  list-style: none;
}
.rdx-cmdk__status {
  padding: .45rem 1.2rem .75rem;
  font-size: .78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
}
.rdx-cmdk__link {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.rdx-cmdk__body { flex: 1; min-width: 0; }
.rdx-cmdk__loading {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.2rem;
}
.rdx-cmdk__empty,
.rdx-cmdk__hint {
  padding: 1.6rem 1.2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
}
.rdx-cmdk__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .6rem .7rem;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
.rdx-cmdk__item:hover,
.rdx-cmdk__item.is-active { background: var(--bg-soft); }
.rdx-cmdk__item.is-active { box-shadow: inset 0 0 0 1.5px rgba(var(--brand-rgb), .3); }
.rdx-cmdk__thumb {
  width: 56px; height: 40px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--bg-soft);
  flex: none;
}
.rdx-cmdk__meta { flex: 1; min-width: 0; }
.rdx-cmdk__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rdx-cmdk__cat { font-size: .8rem; color: var(--text-muted); }
.rdx-cmdk__price {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   N. MOBILE STICKY ACTION BAR  (#15, #86, #90)
   footer adds [data-action-bar]; enhance.js shows on mobile + scroll.
   ========================================================================== */
[data-action-bar] {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--rdx-z-actionbar);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .4rem;
  padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -10px 30px -18px rgba(11, 11, 15, .4);
  transform: translateY(120%);
  transition: transform var(--t-slow);
}
[data-action-bar].is-visible { transform: none; }
[data-action-bar] a,
[data-action-bar] button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 52px;                /* ≥44px touch (#89) */
  padding: .35rem .25rem;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .01em;
  color: var(--text-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
[data-action-bar] a i, [data-action-bar] a svg,
[data-action-bar] button i, [data-action-bar] button svg {
  width: 22px; height: 22px;
}
[data-action-bar] .rdx-ab--primary { color: var(--brand); }
[data-action-bar] .rdx-ab--wa { color: var(--wa); }
[data-action-bar] a:active,
[data-action-bar] button:active { background: var(--bg-soft); }
/* Only ever shown on small screens */
@media (min-width: 1024px) {
  [data-action-bar] { display: none !important; }
}
/* Keep page content clear of the bar when present */
body.rdx-has-actionbar { padding-bottom: 64px; }
@media (min-width: 1024px) {
  body.rdx-has-actionbar { padding-bottom: 0; }
}

/* ==========================================================================
   O. BOTTOM-SHEET  (#87)
   [data-bottomsheet="ID"]; openers [data-bottomsheet-open="ID"];
   closers [data-bottomsheet-close]. enhance.js toggles .is-open.
   ========================================================================== */
.rdx-sheet,
[data-bottomsheet] {
  position: fixed;
  inset: 0;
  z-index: var(--rdx-z-sheet);
  visibility: hidden;
  pointer-events: none;
}
.rdx-sheet.is-open,
[data-bottomsheet].is-open { visibility: visible; pointer-events: auto; }
.rdx-sheet__backdrop,
[data-bottomsheet] > .rdx-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 15, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t);
}
.rdx-sheet.is-open .rdx-sheet__backdrop,
[data-bottomsheet].is-open > .rdx-sheet__backdrop { opacity: 1; }
.rdx-sheet__panel,
[data-bottomsheet] > .rdx-sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: 0 -20px 50px -20px rgba(11, 11, 15, .5);
  padding: 1rem clamp(1rem, 4vw, 1.5rem)
           calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--t-slow);
}
.rdx-sheet.is-open .rdx-sheet__panel,
[data-bottomsheet].is-open > .rdx-sheet__panel { transform: none; }
/* Grab handle */
.rdx-sheet__handle {
  width: 42px; height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0 auto .85rem;
}
.rdx-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.rdx-sheet__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
}
/* Centered modal variant (KVKK #79 reuse) */
.rdx-sheet--center .rdx-sheet__panel {
  left: 50%; bottom: auto; top: 50%; right: auto;
  width: min(92%, 38rem);
  max-height: 84vh;
  border-radius: var(--r-xl);
  transform: translate(-50%, -46%);
  opacity: 0;
}
.rdx-sheet--center.is-open .rdx-sheet__panel {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* ==========================================================================
   P. VIEW TOGGLE — GRID / LIST  (#20)
   [data-view-toggle] buttons; target [data-view-target] gets .is-list.
   ========================================================================== */
.rdx-view-toggle {
  display: inline-flex;
  gap: .2rem;
  padding: .2rem;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
}
.rdx-view-toggle [data-view-toggle] {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast);
}
.rdx-view-toggle [data-view-toggle].is-active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-xs);
}
.rdx-view-toggle [data-view-toggle] i,
.rdx-view-toggle [data-view-toggle] svg { width: 18px; height: 18px; }

/* List layout: convert card grid → horizontal rows */
[data-view-target].is-list { display: flex; flex-direction: column; gap: 1rem; }
[data-view-target].is-list .rd-car-card {
  flex-direction: row;
  align-items: stretch;
}
[data-view-target].is-list .rd-car-card__media {
  width: 38%;
  max-width: 320px;
  aspect-ratio: auto;
}
[data-view-target].is-list .rd-car-card__body { flex: 1; }
[data-view-target].is-list .rd-car-card__footer {
  grid-template-columns: 1fr auto auto;
  align-content: end;
}
@media (max-width: 640px) {
  /* On tiny screens list rows stack media on top to stay usable */
  [data-view-target].is-list .rd-car-card { flex-direction: column; }
  [data-view-target].is-list .rd-car-card__media { width: 100%; max-width: none; aspect-ratio: 16/10; }
}

/* ==========================================================================
   Q. SIGNATURE SLASH MOTIF + SECTION COLOUR RHYTHM  (#98, #54)
   ========================================================================== */
/* #98 — diagonal brand slash; place on a section/figure for a signature cut */
.rdx-slash { position: relative; overflow: hidden; }
.rdx-slash::before {
  content: "";
  position: absolute;
  top: -10%; left: -6%;
  width: 4px; height: 130%;
  background: linear-gradient(var(--brand), var(--brand-700));
  transform: skewX(-18deg);
  box-shadow: 0 0 24px rgba(var(--brand-rgb), .45);
  pointer-events: none;
}
.rdx-slash--lux::before { background: linear-gradient(var(--rdx-lux), #9a7a16); box-shadow: 0 0 24px rgba(201,162,39,.4); }
/* a stripe band variant */
.rdx-slash-band {
  background-image: repeating-linear-gradient(-45deg,
    rgba(var(--brand-rgb), .12) 0 10px,
    transparent 10px 22px);
}

/* #54 — section colour-rhythm helpers (alternate moods without per-page CSS) */
.rdx-rhythm--soft  { background: var(--bg-soft); }
.rdx-rhythm--tint  { background: linear-gradient(180deg, var(--brand-50), var(--bg)); }
[data-theme="dark"] .rdx-rhythm--tint { background: linear-gradient(180deg, rgba(var(--brand-rgb), .08), var(--bg)); }
.rdx-rhythm--ink   { background: var(--ink); color: #fff; }
.rdx-rhythm--ink .rd-section-head h2,
.rdx-rhythm--ink .rd-h2,
.rdx-rhythm--ink .rd-display { color: #fff; }

/* ==========================================================================
   R. SECTION-HEAD UNDERLINE DRAW  (#46)
   Draws a brand underline left→right when the heading enters view.
   Works on .rd-section-head h2 and any [data-underline].
   ========================================================================== */
.rd-section-head h2,
[data-underline] { position: relative; display: inline-block; }
.rd-section-head h2::after,
[data-underline]::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.18em;
  height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #fff));
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--rdx-ease-out);
}
/* Reveal when the head (or its reveal wrapper) is in view */
.rd-section-head.is-revealed h2::after,
.rd-section-head.in-view h2::after,
[data-underline].is-revealed::after,
[data-underline].in-view::after,
.is-revealed [data-underline]::after,
.in-view [data-underline]::after { transform: scaleX(1); }
/* Centered heads draw from the middle */
.rd-section-head--center h2::after {
  left: 50%; width: 56px; transform: translateX(-50%) scaleX(0); transform-origin: center;
}
.rd-section-head--center.is-revealed h2::after,
.rd-section-head--center.in-view h2::after { transform: translateX(-50%) scaleX(1); }

/* ==========================================================================
   S. TABULAR NUMERALS ON PRICES  (#58)
   ========================================================================== */
.rd-car-card__price-now,
.rd-car-card__price-old,
.rd-sticky-reserve__price strong,
.rd-summary__row span:last-child,
.rd-stat__num,
.rdx-tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ==========================================================================
   T. CAR-CARD: 2nd IMAGE HOVER CROSS-FADE + FUEL RIBBON + POPULARITY (#16,#22,#23,#65)
   car-card markup may add a 2nd <img class="rdx-card-img2"> + ribbon spans.
   ========================================================================== */
/* #16 — second gallery image cross-fades in on hover */
.rd-car-card__media .rdx-card-img2 {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--t-slow), transform var(--t-slow);
  z-index: 1;
}
.rd-car-card:hover .rdx-card-img2 { opacity: 1; transform: scale(1.08); }
/* keep overlay UI above the swap images */
.rd-car-card__tags,
.rd-car-card__fav { z-index: 4; }

/* #65 — subtle bottom gradient inside every card media for legible badges */
.rd-car-card__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(11, 11, 15, .32));
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
  z-index: 2;
}
.rd-car-card:hover .rd-car-card__media::after { opacity: 1; }

/* #22 — colour-coded fuel / transmission ribbon badge.
   Use .rd-badge with a fuel modifier, set by car-card markup. */
.rd-badge--fuel-benzin   { background: #B45309; }
.rd-badge--fuel-dizel    { background: #334155; }
.rd-badge--fuel-hibrit   { background: #0F766E; }
.rd-badge--fuel-elektrik { background: #15803D; }
.rd-badge--fuel-lpg      { background: #7C3AED; }
.rd-badge--trans-otomatik { background: var(--info); }
.rd-badge--trans-manuel   { background: #475569; }

/* #23 — deterministic popularity badge with a tiny flame pulse */
.rd-badge--popular {
  background: linear-gradient(135deg, var(--brand-600), var(--brand));
}
.rd-badge--popular i, .rd-badge--popular svg {
  width: 12px; height: 12px;
  animation: rdx-flame 1.8s ease-in-out infinite;
}
@keyframes rdx-flame {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.18) rotate(-4deg); }
}

/* #18 — weekly-discount mini tag (car-card adds .rdx-weekly) */
.rdx-weekly {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--success);
  background: rgba(22, 163, 74, .12);
  border-radius: var(--r-xs);
  padding: .15rem .4rem;
}
.rdx-weekly i, .rdx-weekly svg { width: 12px; height: 12px; }

/* ==========================================================================
   U. EYEBROW TOKEN + SECONDARY GOLD ACCENT  (#56, #53)
   ========================================================================== */
/* #56 — alternative eyebrow style token (boxed) reusing .rd-eyebrow base */
.rd-eyebrow--boxed {
  padding: .3rem .7rem;
  background: var(--brand-50);
  border-radius: var(--r-pill);
}
.rd-eyebrow--boxed::before { display: none; }
[data-theme="dark"] .rd-eyebrow--boxed { background: rgba(var(--brand-rgb), .14); }

/* #53 — premium secondary gold accent layer */
.rdx-lux { color: var(--rdx-lux) !important; }
.rdx-lux-text {
  background: linear-gradient(100deg, var(--rdx-lux), #fff2c2 50%, #9a7a16);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rdx-lux-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  color: #2a2208;
  background: linear-gradient(135deg, var(--rdx-lux), var(--rdx-lux-soft));
  box-shadow: 0 6px 16px -8px rgba(201, 162, 39, .6);
}
.rdx-lux-ring { box-shadow: 0 0 0 1.5px var(--rdx-lux), var(--shadow-sm); }

/* ==========================================================================
   V. VARIABLE-FONT + DISPLAY POLISH  (#51, #52, #55, #57)
   ========================================================================== */
/* #51 — exploit variable-font weight axis where available */
@supports (font-variation-settings: normal) {
  .rd-display, .rd-h1, .rd-h2 {
    font-variation-settings: "wght" 800;
    font-weight: 800;
  }
  .rd-display { font-variation-settings: "wght" 820; }
}
/* #52 — optical balance: tighter tracking + balanced wrap on big display */
.rd-display, .rd-h1 {
  text-wrap: balance;
}
.rd-lead, .rd-section-head p { text-wrap: pretty; }

/* #55 — refined display kerning + hanging punctuation feel */
.rd-display, .rd-h1, .rd-h2, .rd-h3 {
  font-kerning: normal;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* #57 — word-by-word reveal helper for [data-words] (index hero) */
[data-words] .rdx-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(2deg);
  transition: opacity .6s ease, transform .6s var(--ease-spring);
}
[data-words].is-revealed .rdx-word,
[data-words].in-view .rdx-word { opacity: 1; transform: none; }
[data-words] .rdx-word:nth-child(1) { transition-delay: .05s; }
[data-words] .rdx-word:nth-child(2) { transition-delay: .12s; }
[data-words] .rdx-word:nth-child(3) { transition-delay: .19s; }
[data-words] .rdx-word:nth-child(4) { transition-delay: .26s; }
[data-words] .rdx-word:nth-child(5) { transition-delay: .33s; }
[data-words] .rdx-word:nth-child(6) { transition-delay: .40s; }
[data-words] .rdx-word:nth-child(7) { transition-delay: .47s; }
[data-words] .rdx-word:nth-child(8) { transition-delay: .54s; }

/* ==========================================================================
   W. EMPTY-STATE BRAND PATTERN  (#63)
   .rdx-empty wraps an empty result/area with a soft branded backdrop.
   ========================================================================== */
.rdx-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(var(--brand-rgb), .06), transparent 70%),
    repeating-linear-gradient(45deg,
      rgba(var(--brand-rgb), .04) 0 14px,
      transparent 14px 28px);
  color: var(--text-soft);
}
.rdx-empty__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-lg);
  background: var(--brand-50);
  color: var(--brand);
}
[data-theme="dark"] .rdx-empty__icon { background: rgba(var(--brand-rgb), .14); }
.rdx-empty__icon i, .rdx-empty__icon svg { width: 30px; height: 30px; }
.rdx-empty h3 { font-family: var(--font-display); color: var(--text); }

/* ==========================================================================
   X. FILTER CHIPS / APPLIED FILTERS  (#19)
   .rdx-filterchips holds dismissible chips with an × inside.
   ========================================================================== */
.rdx-filterchips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.rdx-filterchip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .35rem .35rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: var(--r-pill);
  animation: rdx-chip-in .3s var(--ease-spring);
}
@keyframes rdx-chip-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.rdx-filterchip__x {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.rdx-filterchip__x:hover { background: var(--brand); color: #fff; }
[data-theme="dark"] .rdx-filterchip__x { background: rgba(var(--brand-rgb), .16); }
.rdx-filterchips__clear {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-muted);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.rdx-filterchips__clear:hover { color: var(--brand); }

/* ==========================================================================
   Y. FLOATING-LABEL + FORM MICRO-POLISH  (#62)
   .rdx-float wraps an input/select + label; label floats up on focus/filled.
   ========================================================================== */
.rdx-float { position: relative; }
.rdx-float > .rd-input,
.rdx-float > .rd-select,
.rdx-float > .rd-textarea { padding-top: 1.35rem; padding-bottom: .5rem; }
.rdx-float > label {
  position: absolute;
  left: 1rem; top: .95rem;
  font-size: .95rem;
  color: var(--text-muted);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--t-fast), color var(--t-fast);
  margin: 0;
}
.rdx-float > .rd-input:focus + label,
.rdx-float > .rd-input:not(:placeholder-shown) + label,
.rdx-float > .rd-textarea:focus + label,
.rdx-float > .rd-textarea:not(:placeholder-shown) + label,
.rdx-float.is-filled > label,
.rdx-float:focus-within > label {
  transform: translateY(-.7rem) scale(.78);
  color: var(--brand);
}
/* with leading icon, push the floating label right */
.rdx-float.rd-input-group > label { left: 2.6rem; }

/* #62 — input loading→tick state (forms idea 78 reuse) */
.rdx-btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.rdx-btn-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rdx-spin .7s linear infinite;
}
@keyframes rdx-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Z. SOCIAL PROOF "N kişi inceliyor"  (#81)
   enhance.js writes text into [data-viewers].
   ========================================================================== */
[data-viewers] {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-soft);
}
[data-viewers]::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .5);
  animation: rdx-live 2s infinite;
  flex: none;
}
@keyframes rdx-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

/* ==========================================================================
   AA. MISC: #82 payment badges, #85 award badges, #89 touch, #92-94 a11y
   ========================================================================== */
/* #82 — payment method badges (footer adds inline SVG/markup) */
.rdx-pay {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.rdx-pay__item {
  display: inline-grid;
  place-items: center;
  height: 30px;
  min-width: 46px;
  padding: 0 .5rem;
  border-radius: var(--r-xs);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow-xs);
}
.rdx-pay__item img,
.rdx-pay__item svg { height: 18px; width: auto; }

/* #85 — award / certification badges row */
.rdx-awards { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.rdx-award {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: .76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}
.rdx-award i, .rdx-award svg { width: 18px; height: 18px; color: var(--rdx-lux); }
/* On light surfaces */
.rdx-award--light {
  background: var(--bg-soft);
  border-color: var(--border-soft);
  color: var(--text-soft);
}

/* #89 — guarantee ≥44px touch targets for any small interactive hooks */
.rd-fav,
[data-compare],
.rdx-view-toggle [data-view-toggle],
.rd-icon-btn { min-width: 44px; min-height: 44px; }
@media (pointer: coarse) {
  .rd-nav a, .rd-footer__links a { padding-block: .6rem; }
}

/* #92-94 — accessibility polish: stronger focus, reduced-data, contrast */
:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 3px solid rgba(var(--brand-rgb), .6);
  outline-offset: 2px;
  border-radius: 6px;
}
/* #93 — respect prefers-contrast: more */
@media (prefers-contrast: more) {
  :root { --text-soft: #2c2c34; --text-muted: #44444f; --border: #b9b9c4; }
  [data-theme="dark"] { --text-soft: #e7e7ee; --text-muted: #c2c2cd; }
  .rd-btn--ghost, .rd-chip, .rd-input, .rd-select, .rd-textarea { border-width: 2px; }
}
/* #94 — visually-hidden helper that becomes visible on focus (skip-style) */
.rdx-vh-focusable {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.rdx-vh-focusable:focus {
  position: static;
  width: auto; height: auto;
  clip: auto;
  white-space: normal;
}

/* ==========================================================================
   AB. DARK-MODE TWEAKS for enhance components
   ========================================================================== */
[data-theme="dark"] .rdx-cmdk { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] [data-action-bar] { box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .7); }
[data-theme="dark"] .rdx-img-grad::after { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .65)); }
[data-theme="dark"] .rdx-pay__item { background: rgba(255, 255, 255, .92); }
[data-theme="dark"] .rdx-filterchip { background: var(--surface); }
/* ==========================================================================
   AC. PREFERS-REDUCED-MOTION  (#50)
   Disable enhance-layer motion; keep components usable & visible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rdx-ripple,
  .rd-fav.is-active::after,
  .rd-badge--popular i, .rd-badge--popular svg,
  [data-viewers]::before,
  .rdx-skel::after,
  .rdx-btn-loading::after { animation: none !important; }

  .rdx-skel::after { display: none; }

  img[loading="lazy"] { opacity: 1 !important; animation: none !important; }
  img[loading="lazy"]:not(.rdx-loaded) { opacity: 1; }

  .rd-section-head h2::after,
  [data-underline]::after { transform: scaleX(1) !important; }
  .rd-section-head--center h2::after { transform: translateX(-50%) scaleX(1) !important; }

  [data-words] .rdx-word { opacity: 1 !important; transform: none !important; }
  [data-reveal-stagger] > * { transition-delay: 0s !important; }

  .rd-car-card__media .rdx-card-img2 { transition: opacity var(--t-fast); transform: none; }
  .rd-car-card:hover .rdx-card-img2 { transform: none; }

  #rd-header.rdx-hide { transform: translateY(-100%); transition: none; }

  .rdx-topbar.is-loading > span { transition: width .2s linear; }

  html.rdx-theme-anim,
  html.rdx-theme-anim * { transition: none !important; }
}

/* ==========================================================================
   END enhance.css
   ========================================================================== */