/* HighFelt homepage hero — light intro replacing Ease dark cover/search */
/* px/vw (not rem): Ease sets html { font-size: 62.5% } so rem ≠ live site 16px root */

.hf-hero {
  --hf-hero-gap: max(20px, 5.5vw);
  --hf-hero-width: 1920px;
  --hf-hero-content: min(var(--hf-hero-width), 100% - var(--hf-hero-gap) * 2);
  --hf-mini-gap: max(14px, 1vw);
  --hf-pill-scale: 0.75;
  --hf-pill-h: max(45px, 4.05vw); /* was max(60px, 5.4vw) × 0.75 */
  --hf-pill-pad: calc(var(--hf-mini-gap) * var(--hf-pill-scale));
  --hf-font: "tiktoksans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  display: grid;
  width: 100%;
  grid-template-columns:
    [full-start] minmax(var(--hf-hero-gap), 1fr)
    [site-start] var(--hf-hero-content)
    [site-end] minmax(var(--hf-hero-gap), 1fr)
    [full-end];
  background: #fff;
  color: #120b14;
  font-family: var(--hf-font);
  box-sizing: border-box;
  overflow: visible;
}

.hf-hero *,
.hf-hero *::before,
.hf-hero *::after {
  box-sizing: border-box;
}

.hf-hero-inner {
  grid-column: site;
  padding: clamp(2.4rem, 4vw, 4.8rem) 0 clamp(3.2rem, 5vw, 5.6rem);
  container-type: inline-size;
  container-name: hf-hero;
  overflow: visible;
}

/*
  Headline ~28 chars ("Yolculuğunuz burada başlıyor.") ≈ 14.5em wide.
  Size from content column (cqw) so one line fits when possible;
  wrap allowed when the min clamp wins on narrow viewports — never clip.
*/
.hf-hero-title {
  margin: 0;
  max-width: 100%;
  width: 100%;
  font-family: var(--hf-font);
  font-size: clamp(40px, 6.5cqw, 118px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #120b14;
  white-space: normal;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Wide enough that 6.5cqw keeps the full phrase on one line */
@container hf-hero (min-width: 720px) {
  .hf-hero-title {
    white-space: nowrap;
  }
}

.hf-hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--hf-mini-gap) / 1.2 * var(--hf-pill-scale));
  margin-top: clamp(2rem, 3.2vw, 3.2rem);
}

/* Live pill height × 0.75: max(45px, 4.05vw) */
.hf-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: var(--hf-pill-h);
  min-height: var(--hf-pill-h);
  padding: 0;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hf-hero-pill:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.hf-hero-pill:focus-visible {
  outline: 2px solid #120b14;
  outline-offset: 3px;
}

.hf-hero-pill--color {
  background: var(--hf-pill-bg, #5050ff);
  color: #fff;
}

.hf-hero-pill--muted {
  background: #ededed;
  color: #120b14;
}

/* White circular badge — icon centered; sized × 0.75 */
.hf-hero-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  width: calc(var(--hf-pill-h) - var(--hf-pill-pad));
  height: calc(var(--hf-pill-h) - var(--hf-pill-pad));
  margin-left: calc(var(--hf-pill-pad) / 2);
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}

.hf-hero-pill-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Live text × 0.75: ~19.8px max */
.hf-hero-pill-text {
  font-family: var(--hf-font);
  font-size: clamp(14.85px, 1.134375vw, 21.78px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.01em;
  padding: var(--hf-pill-pad) calc(var(--hf-pill-pad) * 1.2);
}

.hf-hero-pill--color .hf-hero-pill-text {
  color: #fff;
  padding-left: calc(var(--hf-pill-pad) / 1.4);
}

.hf-hero-pill--muted .hf-hero-pill-text {
  color: #3a3a3a;
  padding-left: calc(var(--hf-pill-pad) * 1.2);
  padding-right: calc(var(--hf-pill-pad) * 1.2);
}

.hf-hero-intro {
  margin-top: clamp(2.4rem, 3.5vw, 3.6rem);
  max-width: 62rem;
}

.hf-hero-welcome {
  margin: 0 0 0.6rem;
  font-family: var(--hf-font);
  font-size: clamp(1.2rem, 1vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  color: #9a9a9a;
}

.hf-hero-desc {
  margin: 0;
  font-family: var(--hf-font);
  font-size: clamp(1.5rem, 1.35vw, 1.75rem);
  font-weight: 400;
  line-height: 1.55;
  color: #4a4a4a;
}

@media (max-width: 767px) {
  .hf-hero-inner {
    padding-top: 1.6rem;
    padding-bottom: 2.8rem;
  }

  .hf-hero-title {
    font-size: clamp(36px, 11vw, 56px);
    white-space: normal; /* wrap freely; never mid-word clip */
  }

  /* Homepage hero only — horizontal tag row; pills ~30% larger than prior mobile */
  .hf-hero .hf-hero-tags {
    gap: 10px;
    margin-top: 1.6rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: var(--hf-hero-gap);
    padding-right: var(--hf-hero-gap);
    scroll-padding-left: var(--hf-hero-gap);
    scroll-padding-right: var(--hf-hero-gap);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .hf-hero .hf-hero-tags::-webkit-scrollbar {
    display: none;
  }

  .hf-hero .hf-hero-pill {
    flex: 0 0 auto;
  }

  .hf-hero-pill {
    height: 51px;
    min-height: 51px;
  }

  .hf-hero-pill-icon {
    width: 39px;
    height: 39px;
    margin-left: 6px;
  }

  .hf-hero-pill-text {
    font-size: 17px;
    padding: 12px 16px;
  }

  .hf-hero-pill--color .hf-hero-pill-text {
    padding-left: 10px;
  }

  .hf-hero-intro {
    margin-top: 2rem;
  }

  .hf-hero-desc {
    font-size: 1.45rem;
  }
}

@media (max-width: 767px) and (any-pointer: coarse) {
  .hf-hero .hf-hero-tags {
    scroll-snap-type: x mandatory;
  }

  .hf-hero .hf-hero-pill {
    scroll-snap-align: start;
  }
}