/* ==============================================================
   .overshoot-lines — iç çizgiler (üst/alt/sol/sağ)
   - Çizgiler KUTU İÇİNDE, kenarlardan inset kadar içeride durur.
   - Hover/focus'ta sadece çizgi boyları kısalır; arkaplan/border değişmez.
   - Keskin köşeler için border-radius verilmez (0 varsayılır).
   ============================================================== */

.overshoot-lines{
  position: relative;
  isolation: isolate;
  overflow: hidden;            /* çizgiler kutu içinde kalır */
  border-radius: 0;            /* keskin hat */

  /* GENEL AYARLAR (kart başına override edebilirsin) */
  --line-color: rgba(255,255,255,.45);  /* çizgi rengi */
  --thick: 1px;                         /* çizgi kalınlığı */
  --inset-x: 22px;                      /* sol/sağdan içe mesafe  */
  --inset-y: 22px;                      /* üst/alttan içe mesafe  */

  /* shrink miktarları — yatay/dikey ayrı kontrol */
  --shrink-h: 45px;                     /* üst/alt çizgilerin kısalması */
  --shrink-v: 45px;                     /* sol/sağ çizgilerin kısalması */

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

/* ÜST & ALT çizgiler (yatay) */
.overshoot-lines::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;
}

/* SOL & SAĞ çizgiler (dikey) */
.overshoot-lines::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 — sadece çizgi boyları kısalır (merkezden simetrik) */
.overshoot-lines:hover,
.overshoot-lines:focus-visible{
  --h-len: calc(100% - clamp(0px, var(--shrink-h), 90%));
  --v-len: calc(100% - clamp(0px, var(--shrink-v), 90%));
}