/* Shared CTA styles; button--contact preserves the header's original star CTA. */
:root {
  --hover-wave-duration: 650ms;
  --hover-wave-stagger: 180ms;
}
@property --button-line-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.button {
  --button-radius: var(--radius-button);
  --button-foreground: var(--color-heading);
  --button-text-hover: var(--green-700);
  --button-line-color: var(--color-primary);
  --button-line-glow: var(--color-heading-reveal-on-dark);
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  border: 0;
  border-radius: var(--button-radius);
  font-family: var(--font-family);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-button);
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.button:not(.button--control) {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  padding: 16px 24px;
}
.button--filled {
  --button-filled-background: var(--color-dark);
  --button-filled-hover-background: var(--button-filled-background);
  --button-filled-foreground: var(--color-white);
  --button-filled-hover-foreground: var(--button-filled-foreground);
  --button-light-duration: 2.4s;
  --button-light-opacity: 1;
  overflow: visible;
  color: var(--button-filled-foreground);
  background: var(--button-filled-background);
  transition: background-color .25s ease, color .25s ease;
}
.button--filled:not(.button--control) {
  --button-radius: var(--radius-button-filled);
  --button-filled-hover-foreground: var(--color-accent);
  min-height: 54px;
}
.button--control {
  --button-radius: var(--radius-control);
}
.button--on-dark {
  --button-filled-background: var(--color-header-navigation-hover-on-dark);
  --button-foreground: var(--color-white);
  --button-text-hover: var(--color-link-hover-on-dark);
}
.button--hero {
  --button-filled-background: var(--color-header-navigation-hover-on-dark);
  --button-filled-hover-background: var(--color-dark);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.button--hero.button--hero-dark {
  --button-filled-background: var(--color-dark);
}
.button--hero .button__icon { color: var(--color-primary); }
.button--filled.button--hero:not(.button--control) {
  --button-radius: var(--radius-button-hero);
}
.button--filled:is(:hover, :focus-visible):not(:disabled) {
  color: var(--button-filled-hover-foreground);
  background: var(--button-filled-hover-background);
  box-shadow: none;
}
.button--filled:active:not(:disabled) { background: var(--button-filled-hover-background); }
:is(.button--text, .button--contact) {
  color: var(--button-foreground);
  background: transparent;
  transition: color .25s ease;
}
:is(.button--text, .button--contact):not(.button--control) { padding-inline: 0; }
:is(.button--text, .button--contact):is(:hover, :focus-visible, :active):not(:disabled) {
  color: var(--button-text-hover);
  background: transparent;
}
.button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}
.button--on-dark:focus-visible { outline-color: var(--color-primary); }
.header:is(.is-on-light, .is-open) .button--control,
.uts-guide-page .header .button--control {
  --button-foreground: var(--color-heading);
  --button-text-hover: var(--green-700);
}
.button:disabled { opacity: .55; cursor: default; }
.button__icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}
/* The header contact keeps its star and rolling label independently of text CTAs. */
.button--contact .button__icon {
  color: var(--color-primary);
}
/* Opt-in cream star for dark surfaces; the green variant stays available. */
.button--cream {
  --button-text-hover: var(--color-accent);
  --button-line-color: var(--color-accent);
  --button-line-glow: var(--color-accent);
}
.button--cream .button__icon { color: var(--color-accent); }
.button--filled:not(.button--control):is(:hover, :focus-visible, :active):not(:disabled) .button__icon {
  color: var(--button-filled-hover-foreground);
}
:is(.button--filled, .button--contact) .button__icon,
.button--text[data-rail-item] .button__icon {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), color .25s ease;
}
:is(.button--filled, .button--contact):is(:hover, :focus-visible):not(:disabled) .button__icon,
.button--text[data-rail-item]:is(:hover, :focus-visible):not(:disabled) .button__icon {
  transform: rotate(360deg);
}

.button__wave-label { min-width: 0; }
.button__wave-word {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
}
.button__wave-layer { display: inline-block; }
.button__wave-layer--secondary { position: absolute; inset: 0 auto auto 0; }
.button__wave-char {
  display: inline-block;
  transition: transform var(--hover-wave-duration) cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--char-index) * var(--hover-wave-stagger) / var(--hover-wave-steps, 1));
}
.button__wave-layer--secondary .button__wave-char { transform: translateY(-112%); }
:is(.button--text, .button--contact):is(:hover, :focus-visible):not(:disabled)
  .button__wave-layer--primary .button__wave-char { transform: translateY(112%); }
:is(.button--text, .button--contact):is(:hover, :focus-visible):not(:disabled)
  .button__wave-layer--secondary .button__wave-char { transform: translateY(0); }

/* The resting line follows each variant's default text, never its hover color.
   One reversible progress value moves the variant's fill and its leading glow. */
.button--text > .button__underline {
  --button-line-progress: 0;
  position: absolute;
  right: 0;
  bottom: 9px;
  left: 0;
  height: 1px;
  background: var(--button-foreground);
  opacity: .5;
  pointer-events: none;
  clip-path: inset(-6px 0);
  transition: --button-line-progress 700ms cubic-bezier(.22, 1, .36, 1), opacity 250ms ease;
}
.button__underline::before,
.button__underline::after {
  position: absolute;
  content: '';
  pointer-events: none;
}
.button__underline::before {
  inset: 0;
  background: var(--button-line-color);
  transform: scaleX(var(--button-line-progress));
  transform-origin: left center;
}
.button__underline::after {
  top: -2px;
  left: calc(var(--button-line-progress) * 100%);
  width: 28px;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--button-line-color) 65%, var(--button-line-glow));
  filter: blur(2px);
  transform: translateX(-100%);
  opacity: min(1, calc(var(--button-line-progress) * 8), calc((1 - var(--button-line-progress)) * 8));
}
.button--text:is(:hover, :focus-visible):not(:disabled) > .button__underline {
  --button-line-progress: 1;
  opacity: 1;
}
/* The light follows the actual rounded perimeter, at any button width. */
.button__border-light {
  position: absolute;
  top: -32px;
  left: -32px;
  z-index: 2;
  width: calc(100% + 64px);
  height: calc(100% + 64px);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.button__border-light .button__border-trail {
  x: 31px;
  y: 31px;
  width: calc(100% - 62px);
  height: calc(100% - 62px);
  fill: none;
  rx: calc(var(--button-radius) + 1px);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.button__light-cutout {
  x: 32px;
  y: 32px;
  width: calc(100% - 64px);
  height: calc(100% - 64px);
  rx: var(--button-radius);
}
.button__border-trail {
  --button-border-offset: 0px;
  stroke: var(--color-button-comet-head);
  stroke-dashoffset: var(--button-border-offset);
  stroke-linecap: round;
  opacity: 1;
}
.button__comet-core { filter: blur(.45px); }
.button__border-light .button__comet-segment {
  stroke-dasharray: .8 99.2;
  stroke-width: 1.6;
  stroke-linecap: butt;
}
.button__border-light .button__comet-segment:last-child { stroke-linecap: round; }
.button__border-light .button__border-bloom {
  --button-border-offset: -12.2px;
  stroke-dasharray: 3.8 96.2;
  stroke-width: 4;
  opacity: .8;
  filter: blur(2.8px);
}
/* The rounded cutout keeps every glow band outside the button surface. */
.button__border-light .button__surface-glow {
  --button-border-offset: -13.2px;
  stroke-dasharray: 2.8 97.2;
  stroke-width: var(--button-reflection-width);
  opacity: var(--button-reflection-opacity);
  filter: blur(var(--button-reflection-blur));
}
.button__surface-glow--falloff {
  --button-reflection-width: 20;
  --button-reflection-opacity: .12;
  --button-reflection-blur: 5px;
}
.button__surface-glow--diffuse {
  --button-reflection-width: 12;
  --button-reflection-opacity: .24;
  --button-reflection-blur: 3px;
}
.button__surface-glow--reflection {
  --button-reflection-width: 7;
  --button-reflection-opacity: .44;
  --button-reflection-blur: 2px;
}
.button__surface-glow--edge {
  --button-reflection-width: 3;
  --button-reflection-opacity: .7;
  --button-reflection-blur: 1px;
}
.button--filled:is(:hover, :focus-visible):not(:disabled) .button__border-light {
  opacity: var(--button-light-opacity);
}
.button--filled:is(:hover, :focus-visible):not(:disabled) .button__border-trail {
  animation: button-border-orbit var(--button-light-duration) linear infinite;
}
@keyframes button-border-orbit {
  from { stroke-dashoffset: var(--button-border-offset); }
  to { stroke-dashoffset: calc(var(--button-border-offset) - 100px); }
}

/* Dolu butonların ortak metin geçişi hover rengiyle aynı tonu kullanır. */
.button--filled > :is(.about-button__track, .button__wave-label, .button__label, .button__icon) {
  position: relative;
  z-index: 3;
}
.button--filled .about-button__track {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  white-space: nowrap;
}
.button--filled .about-button__label { display: inline-flex; }
.button--filled .about-button__label--secondary {
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--button-filled-hover-foreground);
}
.button--filled .about-button__label .about-button__char {
  display: inline-block;
  transition: transform var(--hover-wave-duration) cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--char-index) * var(--hover-wave-stagger) / var(--hover-wave-steps, 1));
}
.button--filled .about-button__label--secondary .about-button__char {
  transform: translateY(-112%);
}
.button--filled:is(:hover, :focus-visible):not(:disabled)
  .about-button__label--primary .about-button__char { transform: translateY(112%); }
.button--filled:is(:hover, :focus-visible):not(:disabled)
  .about-button__label--secondary .about-button__char { transform: translateY(0); }

/* Yerleşim satırlarının mevcut düzeni korunur. */
.new-hero__actions { flex-wrap: wrap; align-items: center; gap: 24px 36px; }

@media (prefers-reduced-motion: reduce) {
  :is(.button--filled, .button--contact) .button__icon,
  .button--text[data-rail-item] .button__icon { transition: none; }
  :is(.button--filled, .button--contact):is(:hover, :focus-visible):not(:disabled) .button__icon,
  .button--text[data-rail-item]:is(:hover, :focus-visible):not(:disabled) .button__icon { transform: none; }
  .button--text > .button__underline { transition: none; }
  .button__underline::after { display: none; }
  .button__border-light { transition: none; }
  .button--filled:is(:hover, :focus-visible):not(:disabled) .button__border-trail {
    animation: none;
  }
  .button__border-trail { display: none; }
  .button__wave-char { transition: none; }
  .button__wave-layer--secondary { display: none; }
  :is(.button--text, .button--contact):is(:hover, :focus-visible):not(:disabled)
    .button__wave-layer--primary .button__wave-char {
    transform: none;
  }
  .button, .button--filled .about-button__label .about-button__char { transition: none; }
  .button--filled .about-button__label--secondary { display: none; }
  .button--filled:is(:hover, :focus-visible):not(:disabled) .about-button__label--primary .about-button__char {
    transform: none;
  }
}