/* Homepage hero (14 Ekim 2026): the Wolverine Worldwide hero, full screen.
   Reference values (wolverineworldwide.com, c-hero-home):
   - title: three short lines, weight 700, line-height .79, letter-spacing -.05em;
     desktop (md, ≥1000px there, ≥1080px here) clamp(100px, 76.35px + 7.39vw, 168px),
     below clamp(44px, 14.78px + 9.13vw, 128px);
   - desktop: title bottom left, card bottom right, 48px from the bottom;
     below: title at 40% of the screen height, card at the bottom (16px);
   - card: 280px column on ≥700px (here 768px), full-width row on phones;
     4px padding, 12px radius, black 10% + 18px blur, 1.6:1 image (8px radius,
     scale 1.05 on hover), label + bold 24px title (phones: 14–19px) + icon.
   The horizontal margins follow the site's header gutter (logo / İletişim).
   Kept from the previous hero: the 01–02 progress and the “Aşağı kaydır” cue. */

.new-hero--slides {
  /* 19 Ekim 2026 (user): the size, weight, line height and tracking of
     rideradian.com's hero title (h1.heading-xl), measured at every width; the
     font stays Outfit. ≥992px 4.1667vw (60px at 1440, 80px at 1920, at most
     93.33px), 768–991px 6.458vw, 480–767px 7.3vw, ≤479px 10.02vw; weight 500,
     line height 1, letter spacing -.025em. */
  --hero-display-size: min(4.1667vw, 93.33px);
  /* One bottom space on every screen (user, 19 Ekim 2026): the timeline and
     the news card keep the desktop's 48px on tablets and phones too. */
  --hero-bottom: 48px;
  --hero-card-radius: 12px;
  --hero-card-image-radius: 8px;
  /* 15 Ekim 2026 (user): the hero uses the site font, Outfit, at the heading weight. */
  --hero-font: var(--font-family, 'Outfit', sans-serif);
  --hero-font-weight: 500;
  --hero-display-scale: 1;
  --hero-line-height: 1;
  --hero-tracking-adjust: -.0095em;
  --hero-title-tracking: -.025em;
  --hero-font-mono: var(--hero-font);
  align-items: stretch;
  justify-content: flex-start;
  height: 100svh;
  min-height: 0;
}
/* Phones: the title block sits above the middle (32%), leaving room for the subline and supporting sentence above the timeline. */
@media (max-width: 767px) {
  .new-hero--slides { --hero-title-middle: 32svh; }
}

/* Title size (19 Ekim 2026, user: it shrank too much on smaller screens):
   on laptops and desktops the long line of slide 1, "her adımda
   izlenebilirlik" (~9.9em), ends under the middle of the menu ("Ürünler"),
   at most 93.33px; tablets keep 52px and phones 52px or whatever still fits
   that line inside the gutters (~10.2em with the subpixel slack). */
/* 19 Ekim 2026 (user: small laptops, e.g. 1090–1199px, looked tiny): the
   title never goes below 64px on laptops, so it holds its size until the
   menu rule takes over at ~1350px; tablets and phones keep 64px too until
   the long line no longer fits the gutters, then shrink just enough. */
.new-hero--slides { --hero-display-size: clamp(64px, calc((50vw - var(--hero-gutter)) / 9.9), 93.33px); }
@media (max-width: 1079px) { .new-hero--slides { --hero-display-size: min(64px, calc((100vw - 2 * var(--hero-gutter)) / 10.2)); } }
/* Short laptop screens (≤760px tall): a 58px floor keeps the subline clear of the header. */
@media (min-width: 1080px) and (max-height: 760px) { .new-hero--slides { --hero-display-size: clamp(58px, calc((50vw - var(--hero-gutter)) / 9.9), 93.33px); } }

/* Layout ------------------------------------------------------------------ */
body.page-home .new-hero--slides .new-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 2 * var(--hero-gutter));
  height: 100%;
  min-height: 100svh;
  margin: 0 auto;
  padding: 40svh 0 var(--hero-bottom);
  align-items: flex-start;
  gap: 20px;
}
@media (min-width: 768px) {
  body.page-home .new-hero--slides .new-hero__content {
    flex-direction: row;
    align-items: flex-end;
    padding-top: 0;
  }
}
@media (max-width: 767px) {
  /* Phones (19 Ekim 2026, user: the phone hero looked busy): one tidy column
     at the bottom — text block, 40px, the timeline (~36px), 24px, the news
     card, 48px — on every phone height; the news bars are hidden here. */
  body.page-home .new-hero--slides .new-hero__content { padding-top: 96px; }
  /* No news card on phones (user, 19 Ekim 2026): the timeline takes its place
     at the bottom (48px up) and the text block is centred in the space
     between the header and the timeline (~36px + 40px). */
  body.page-home .new-hero--slides .new-hero__content { padding-bottom: calc(var(--hero-bottom) + 76px); }
  body.page-home .new-hero--slides .new-hero__slides { max-width: 100%; margin-block: auto; }
  body.page-home .new-hero--slides .new-hero__side { display: none; }
}


body.page-home .new-hero--slides .new-hero__slides { display: grid; align-items: end; justify-items: start; min-width: 0; max-width: 100%; }
/* 19 Ekim 2026 (user): the left block (subline, title, sentence, buttons)
   stands on the line of the news card's top edge: the buttons' bottom meets
   the card's top on every tablet/desktop width; the card keeps its size
   (--hero-card-height comes from hero-news-stack.js). */
@media (min-width: 768px) {
  body.page-home .new-hero--slides .new-hero__slides { align-self: flex-end; margin-bottom: var(--hero-card-height, 300px); }
}
body.page-home .new-hero--slides .new-hero__actions { display: flex; margin-top: 32px; }
body.page-home .new-hero--slides .new-hero__slide { grid-area: 1 / 1; }
/* The shared buttons sit under both slides (row 2), outside the fade, so
   they never blink when the slide changes. */
body.page-home .new-hero--slides .new-hero__slides > .new-hero__actions { grid-row: 2; grid-column: 1; }
/* The two buttons stay side by side with their gap (user, 19
   Ekim 2026); where they no longer fit the screen, hero-slider.js zooms the
   row down just enough (e.g. .8) instead of wrapping or tightening the gap. */
body.page-home .new-hero--slides .new-hero__slides > .new-hero__actions { flex-wrap: nowrap; }
/* Phones too keep them side by side, zoomed to fit (user, 19 Ekim 2026). */
/* Phones: a clearer gap between the two buttons (user, 19 Ekim 2026); with
   the .85 zoom it shows as ~24px. */
@media (max-width: 767px) { body.page-home .new-hero--slides .new-hero__slides > .new-hero__actions { gap: 28px; } }
/* Slide 2's sentence breaks before "saklanır" on phones only (user). */
.new-hero__lead-break { display: none; }
@media (min-width: 360px) and (max-width: 767px) { .new-hero__lead-break { display: inline; } }

/* Title ------------------------------------------------------------------- */
body.page-home .new-hero--slides .new-hero__headline {
  --fs-h1: var(--hero-display-size);
  --fs-h2: var(--hero-display-size);
  --fw-heading: var(--hero-font-weight);
  --lh-h1: var(--hero-line-height);
  --lh-h2: var(--hero-line-height);
  --ls-h1: var(--hero-title-tracking);
  --ls-h2: var(--hero-title-tracking);
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--color-white);
  font-family: var(--hero-font) !important;
  font-size: var(--hero-display-size) !important;
  font-weight: var(--hero-font-weight) !important;
  line-height: var(--hero-line-height) !important;
  letter-spacing: var(--hero-title-tracking) !important;
  text-align: left;
  text-transform: none;
}
body.page-home .new-hero--slides .new-hero__headline > .new-hero__line {
  display: block;
  white-space: nowrap;
  text-wrap: nowrap;
}
/* Accent word: the site's heading reveal ends it in the primary green (user). */
body.page-home .new-hero--slides .new-hero__accent { color: var(--color-primary); font-style: normal; }
/* Subline above and a short supporting sentence under each title (19 Ekim
   2026, user: like rideradian.com — 400 weight, ~30% of the title size,
   shorter than the title's long line). */
body.page-home .new-hero--slides .new-hero__eyebrow { --heading-on-surface: var(--color-white); }
body.page-home .new-hero--slides .new-hero__lead {
  max-width: 30em;
  margin: 12px 0 0;
  color: var(--color-white);
  font-family: var(--hero-font);
  font-size: max(15px, calc(var(--hero-display-size) * .3)) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;
}
/* One line on tablets and desktops (user): it grows with the title and would
   otherwise wrap inside the title column on large screens. */
@media (min-width: 768px) { body.page-home .new-hero--slides .new-hero__lead { max-width: none; white-space: nowrap; } }
/* The filled hero CTA gets the news card's glass: 10% black and an 18px blur
   (user, 19 Ekim 2026); hover keeps the dark background. */
body.page-home .new-hero--slides .button--hero {
  --button-filled-background: color-mix(in srgb, var(--color-black) 10%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Card -------------------------------------------------------------------- */
.hero-news-card-wrap { position: relative; z-index: 3; flex: none; width: 100%; min-width: 0; }
/* Three stories share one card: they are stacked, only the active one shows. */
.hero-news-card__stack { display: grid; }
.hero-news-card__stack > .hero-news-card { grid-area: 1 / 1; }
.hero-news-card__stack > .hero-news-card:not(.is-active) { opacity: 0; visibility: hidden; }
.hero-news-card__stack > .hero-news-card { transition: opacity .5s ease, visibility 0s linear .5s; }
.hero-news-card__stack > .hero-news-card.is-active { transition: opacity .5s ease, visibility 0s; }

/* Story bars (user, 14 Ekim 2026): the scroll indicator of
   regecorp.com/biorivolumetria (.rg-scroll-item) without its white frame:
   5 × 10px rounded bars 8px apart, the active one 30px tall (.35s); grey track,
   dark green fill (user). Here the active bar fills over time, not scroll
   (--fill from hero-news-stack.js); when it is full the next story shows.
   Beside the card, 5px above its bottom edge; phones: above the card, horizontal. */
.hero-news-card__bars {
  position: absolute;
  right: calc(100% + 20px);
  bottom: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-news-card__bar {
  --fill: 0;
  position: relative;
  display: block;
  flex: none;
  width: 5px;
  height: 10px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-white) 45%, transparent);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1);
}
.hero-news-card__bar.is-active { height: 30px; }
.hero-news-card__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform: scaleY(var(--fill));
  transform-origin: center top;
}
.hero-news-card__bar:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
/* Phones: the bars are hidden to keep the bottom of the hero calm; the card
   still changes story on its own (user, 19 Ekim 2026). */
@media (max-width: 767px) { .hero-news-card__bars { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-news-card__bar { transition: none; }
}

/* Brand star at the image's top right: white, accent and a half turn on
   hover/focus (as on the site's cards); the title turns bright green. */
.hero-news-card__image { position: relative; }
.hero-news-card__star {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  background: var(--color-white);
  -webkit-mask: url('../brand/logos/yildiz-01-transparent.svg') center / contain no-repeat;
  mask: url('../brand/logos/yildiz-01-transparent.svg') center / contain no-repeat;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1), background-color 250ms ease;
}
.hero-news-card:is(:hover, :focus-visible) .hero-news-card__star { background: var(--color-accent); transform: rotate(180deg); }
.hero-news-card__title { transition: color .25s ease; }
.hero-news-card:is(:hover, :focus-visible) .hero-news-card__title { color: var(--color-heading-reveal-on-dark); }
.hero-news-card, .hero-news-card * { font-family: var(--hero-font); }
.hero-news-card {
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: 100%;
  padding: 4px;
  color: var(--color-white);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-black) 10%, transparent);
  border-radius: var(--hero-card-radius);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hero-news-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hero-news-card__image {
  display: block;
  flex: none;
  /* Phones: as the reference, image and text share the card equally. */
  width: calc(50% - 10px);
  aspect-ratio: 1.6;
  overflow: hidden;
  border-radius: var(--hero-card-image-radius);
}
.hero-news-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.19, 1, .22, 1);
}
.hero-news-card:is(:hover, :focus-visible) .hero-news-card__image img { transform: scale(1.05); }
.hero-news-card__copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding-block: 4px;
}
.hero-news-card__label {
  font-family: var(--hero-font-mono) !important;
  /* Outfit label in the site's subline style (uppercase, 600, opened tracking). */
  font-weight: 600 !important;
  font-size: clamp(.625rem, calc(.6033rem + .1087vw), .6875rem);
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-news-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hero-news-card__title {
  display: -webkit-box;
  flex: 0 1 auto;
  min-width: 0;
  /* 18 Ekim 2026 (user): at most 70% of the row on every screen; a longer title
     ends in “…” after two lines. */
  max-width: 70%;
  overflow: hidden;
  /* Phones: the reference size (body-md) and width (70%); longer titles end
     in “…” after two lines. Tablets/desktop: see below. */
  font-size: clamp(.875rem, calc(.7663rem + .5435vw), 1.1875rem);
  font-weight: var(--hero-font-weight);
  line-height: 1.2;
  letter-spacing: calc(-.02em + var(--hero-tracking-adjust));
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (min-width: 768px) {
  .hero-news-card-wrap { width: 280px; }
  .hero-news-card { flex-direction: column; gap: 4px; }
  .hero-news-card__image { width: 100%; }
  .hero-news-card__copy { gap: 40px; padding: 8px; }
  /* Tablets/desktop (user): every title at the same 24px, at most 70% of the
     row and two lines; a longer title ends in “…”. */
  /* 15 Ekim 2026 (user): the title may use the whole row up to the icon, and
     a 1.15 line height keeps descenders (ç, ğ, y) from being clipped. */
  /* 18 Ekim 2026 (user): 24px → 20px, still 70% wide and two lines. */
  .hero-news-card__title { font-size: 1.25rem; line-height: 1.15; letter-spacing: calc(-.03em + var(--hero-tracking-adjust)); }
}

/* Card column (the “Aşağı kaydır” cue was removed at the user's request). */
.new-hero__side { display: flex; flex: none; flex-direction: column; align-items: stretch; width: 100%; }
@media (min-width: 768px) { .new-hero__side { width: 280px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-news-card__image img, .hero-news-card__icon, .hero-news-card__stack > .hero-news-card { transition: none; }
  .hero-news-card__star { transition: background-color 250ms ease; }
  .hero-news-card:is(:hover, :focus-visible) .hero-news-card__star { transform: none; }
}

/* Timeline (19 Ekim 2026, user: the v17 tab row with v15's turning star): one tab
   per video, bottom left. The active tab's line fills with its video
   (--hero-tab-fill, hero-slider.js) and the star rides the end of the fill,
   turning as it goes; finished tabs stay full. Tabs switch the video. */
body.page-home .new-hero--slides .hero-timeline {
  position: absolute;
  bottom: var(--hero-bottom);
  left: var(--hero-gutter);
  display: grid;
  /* One column per slide; the WordPress hero element sets the count when it is not 2. */
  grid-template-columns: repeat(var(--hero-tab-count, 2), minmax(0, 1fr));
  gap: 24px;
  width: min(520px, calc(100% - 2 * var(--hero-gutter) - 280px - 64px));
  pointer-events: auto;
  /* Readable over bright frames (white boxes): a soft dark halo under the
     line, the star and the labels. */
  filter: drop-shadow(0 1px 3px var(--color-hero-timeline-halo));
}
body.page-home .new-hero--slides .hero-timeline__tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-on-dark-muted);
  font: 500 15px/1.3 var(--hero-font);
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
body.page-home .new-hero--slides .hero-timeline__tab.is-active { color: var(--color-white); }
/* Hover/focus turns the tab title brand green (user, 19 Ekim 2026). */
body.page-home .new-hero--slides .hero-timeline__tab:is(:hover, :focus-visible) { color: var(--color-primary); }
body.page-home .new-hero--slides .hero-timeline__tab:focus-visible { outline: 2px solid var(--color-white); outline-offset: 6px; border-radius: 4px; }
body.page-home .new-hero--slides .hero-timeline__label { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
/* Tab titles stay on one line; where they no longer fit their column,
   hero-slider.js zooms both titles down by the same amount. */
body.page-home .new-hero--slides .hero-timeline__label b { font-size: 11px; font-weight: 600; letter-spacing: .08em; }
/* Line and star (19 Ekim 2026, user): the old live hero's progress — a 1px
   line fading at both ends and a 12px brand star (turning once across the line) with a soft glow and a
   120px mint wake behind it, like a shooting star (old assets/css/hero-slider.css). */
body.page-home .new-hero--slides .hero-timeline__track { position: relative; display: block; height: 1px; }
body.page-home .new-hero--slides .hero-timeline__track::before {
  position: absolute;
  inset: 0;
  background: var(--color-hero-timeline-track);
  mask-image: linear-gradient(90deg, transparent, var(--color-white) 6%, var(--color-white) 94%, transparent);
  content: '';
}
body.page-home .new-hero--slides .hero-timeline__fill {
  position: absolute;
  top: 0;
  left: calc(var(--hero-tab-fill, 0) * 100%);
  /* A longer wake (user, 19 Ekim 2026: 44px did not show the travelled part). */
  width: min(120px, calc(var(--hero-tab-fill, 0) * 100%));
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--color-primary) 20%, transparent) 45%,
    color-mix(in srgb, var(--color-primary) 75%, transparent));
  transform: translateX(-100%);
}
body.page-home .new-hero--slides .hero-timeline__fill::before {
  position: absolute;
  inset: -2px 0;
  background: inherit;
  filter: blur(2px);
  mask-image:
    linear-gradient(90deg, transparent, var(--color-white) 40%, var(--color-white) 82%, transparent),
    linear-gradient(180deg, transparent, var(--color-white) 45%, var(--color-white) 55%, transparent);
  mask-composite: intersect;
  opacity: .35;
  content: '';
}
body.page-home .new-hero--slides .hero-timeline__tab.is-active .hero-timeline__fill { opacity: clamp(0, calc(var(--hero-tab-fill, 0) * 12), 1); }
body.page-home .new-hero--slides .hero-timeline__star {
  position: absolute;
  top: 50%;
  left: calc(var(--hero-tab-fill, 0) * 100%);
  z-index: 1;
  width: 12px;
  height: 12px;
  fill: var(--color-primary);
  opacity: 0;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-primary) 60%, transparent));
  /* A gentle turn while it travels: one full turn across the whole line. */
  transform: translate(-50%, -50%) rotate(calc(var(--hero-tab-fill, 0) * 360deg));
}
body.page-home .new-hero--slides .hero-timeline__tab.is-active .hero-timeline__star { opacity: 1; }
/* Phones: full width, at the bottom where the news card was (no card on phones). */
@media (max-width: 767px) {
  body.page-home .new-hero--slides .hero-timeline {
    right: var(--hero-gutter);
    bottom: var(--hero-bottom);
    gap: 16px;
    width: auto;
  }
  body.page-home .new-hero--slides .hero-timeline__tab { gap: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-home .new-hero--slides .hero-timeline__star { transform: translate(-50%, -50%); }
  body.page-home .new-hero--slides .hero-timeline__tab { transition: none; }
}

/* Tablets (768–1079px, user, 19 Ekim 2026): a smaller news card (236px) and
   the text block above the middle of the screen instead of standing on the
   card's top line. Last in the file so it wins over the desktop rules. */
@media (min-width: 768px) and (max-width: 1079px) {
  body.page-home .new-hero--slides .new-hero__slides { align-self: flex-start; margin-top: max(120px, 26svh); margin-bottom: 0; }
  body.page-home .new-hero--slides .new-hero__side,
  body.page-home .new-hero--slides .hero-news-card-wrap { width: 236px; }
}