.slider { display: flex; flex-direction: column; gap: var(--sp-2); }
.slider__head { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-2); }
.slider__value { font-weight: var(--w-medium); color: var(--text); font-variant-numeric: tabular-nums; }
.slider__input { -webkit-appearance: none; appearance: none; width: 100%; height: var(--size-6); border-radius: var(--r-pill); background: linear-gradient(to right, var(--primary) 0 var(--pct, 50%), var(--track) var(--pct, 50%) 100%); outline: none; }
.slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--size-22); height: var(--size-22); border-radius: 50%; background: var(--on-accent); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); cursor: pointer; }
.slider__input::-moz-range-thumb { width: var(--size-22); height: var(--size-22); border-radius: 50%; background: var(--on-accent); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); cursor: pointer; }
.slider__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.slider__ticks { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-3); }

/* − / + sayaç */
.stepper { display: inline-flex; align-items: center; gap: var(--sp-3); }
.stepper__value { min-width: var(--size-64); text-align: center; font-size: var(--text-h2); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.stepper--hero { justify-content: center; gap: var(--sp-6); }
.stepper--hero .stepper__value { min-width: var(--size-120); font-size: var(--text-hero); letter-spacing: -1px; line-height: 1; }
.stepper--hero .icon-btn { width: var(--tap); height: var(--tap); border-radius: 50%; }