/* ==============================================================
   .btn-overshoot — iç çizgili, tam transparan buton
   (arka plan/border hiçbir durumda görünmez)
   ============================================================== */

/* btn-overshoot — ayrı shrink kontrolü (H/D) */
.btn-overshoot{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; text-decoration:none; cursor:pointer;

  /* kutu boyutu (istersen override et) */
  --btn-pad-y: 18px; --btn-pad-x: 28px;
  padding: var(--btn-pad-y) var(--btn-pad-x);

  /* görünüm: her zaman şeffaf ve keskin köşe */
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; filter: none; backdrop-filter: none; color: inherit;

  position: relative; isolation: isolate; overflow: hidden;

  /* çizgi ayarları */
  --line-color: rgba(255,255,255,.45);
  --thick: 1px;
  --inset-x: 14px;   /* sol/sağdan içe mesafe  */
  --inset-y: 12px;   /* üst/alttan içe mesafe  */

  /* >>> kısalma miktarları (ayrı ayrı) <<< */
  /* varsayılan olarak --shrink verilirse onu kullanır; yoksa px değeri */
  --shrink-h: var(--shrink, 22px);  /* ÜST/ALT toplam kısalma  */
  --shrink-v: var(--shrink, 22px);  /* SOL/SAĞ toplam kısalma  */

  /* başlangıç uzunlukları */
  --h-len: 100%;
  --v-len: 100%;
}

/* yatay çizgiler */
.btn-overshoot::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--line-color), var(--line-color)),
    linear-gradient(var(--line-color), var(--line-color));
  background-size:
    var(--h-len) var(--thick),
    var(--h-len) var(--thick);
  background-position:
    50% var(--inset-y),
    50% calc(100% - var(--inset-y));
  transition: background-size .35s ease;
}

/* dikey çizgiler */
.btn-overshoot::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--line-color), var(--line-color)),
    linear-gradient(var(--line-color), var(--line-color));
  background-size:
    var(--thick) var(--v-len),
    var(--thick) var(--v-len);
  background-position:
    var(--inset-x) 50%,
    calc(100% - var(--inset-x)) 50%;
  transition: background-size .35s ease;
}

/* hover/focus/active — sadece çizgi boyları kısalır */
.btn-overshoot:hover,
.btn-overshoot:focus-visible,
.btn-overshoot:active{
  background: transparent; border: 0; box-shadow: none; filter: none;
  --h-len: calc(100% - clamp(0px, var(--shrink-h), 90%));
  --v-len: calc(100% - clamp(0px, var(--shrink-v), 90%));
}