/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./styles/persona-switch.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/* ---------------------------------------------------------------------------
 * Persona switcher ("Öğrenci / Veli / Öğretmen / …" pill row). Shared by the
 * persona heroes and the landing hero, so it lives outside persona.css.
 * Left-aligning the track on wide screens is up to each hero.
 * ------------------------------------------------------------------------- */

.ps-switch {
  width: 100%;
  min-width: 0;
}
.ps-switch__scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ps-switch__scroll::-webkit-scrollbar {
  display: none;
}
.ps-switch__scroll--fade {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
/* max-content + auto margins: centred when it fits, starts at the left edge
   (so every pill can be scrolled to) when it doesn't. */
.ps-switch__track {
  display: flex;
  gap: 6px;
  width: max-content;
  margin-inline: auto;
  padding: 2px 1px;
}
.ps-switch__pill {
  flex: none;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--v2-line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--v2-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ps-switch__pill:hover {
  border-color: var(--v2-red);
  color: var(--v2-red);
}
.ps-switch__pill--on,
.ps-switch__pill--on:hover {
  background: var(--v2-red);
  border-color: var(--v2-red);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .ps-switch__pill {
    transition: none;
  }
}