/* === WRAPPER === */
.ysm-clip-fix {
  display: inline-block;
  font-family: 'Kalam', cursive;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: lowercase;
  line-height: 0.6;
  color: #B1B3A6;
}

/* === TEXT === */
.ysm-clip-fix p {
  position: relative;
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
}

/* === ÜST KATMAN (PERFECT CLIP) */
.ysm-clip-fix p::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #DB8834;

  /* ? TAM KESİM */
  clip-path: inset(0 0 45% 0);

  transition: clip-path 0.3s ease;
  pointer-events: none;
}

/* === UNDERLINE === */
.ysm-clip-fix span {
  position: relative;
}

.ysm-clip-fix span::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 6px;
  background: #DB8834; /* ? istediğin renk */

  transform: translateY(0);
  transition: transform 0.3s ease;
}

/* === HOVER / TAP === */
.ysm-clip-fix p:hover::after,
.ysm-clip-fix p:active::after {
  clip-path: inset(0 0 100% 0); /* tamamen kaybolur */
}

.ysm-clip-fix span:hover::before,
.ysm-clip-fix span:active::before {
  transform: translateY(6px);
}