/* ===================================================================
   FX — Tekrar kullanılabilir efektler (overshoot çerçeve vb.)
   =================================================================== */

/* Taşan çizgi (overshoot) — .fx-overshoot sınıfını ekle */
.fx-overshoot{
  --os-color: rgba(255,255,255,.28);
  --os-thick: 1px;
  --os-inset: 8px;
  --os-overshoot: 28px;
  --os-tick-overshoot: 10px;
  position: relative; overflow: visible; isolation: isolate;
}
.fx-overshoot::before{
  content:""; position:absolute; left:50%; top:0; transform: translateX(-50%);
  width: calc(100% + var(--os-overshoot) * 2); height: 100%; pointer-events:none; z-index:1;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--os-color), var(--os-color)),
    linear-gradient(var(--os-color), var(--os-color)),
    linear-gradient(var(--os-color), var(--os-color)),
    linear-gradient(var(--os-color), var(--os-color));
  background-size:
    100% var(--os-thick),
    100% var(--os-thick),
    var(--os-thick) calc(100% - var(--os-inset)*2 + var(--os-tick-overshoot)*2),
    var(--os-thick) calc(100% - var(--os-inset)*2 + var(--os-tick-overshoot)*2);
  background-position:
    50% var(--os-inset),
    50% calc(100% - var(--os-inset)),
    var(--os-overshoot) 50%,
    calc(100% - var(--os-overshoot)) 50%;
}
.fx-overshoot--dark{ --os-color: rgba(0,0,0,.28); }

/* Servis kartlarında kullanmak için taşıyıcı */
.svc-frame{ position:relative; width:100%; }
.svc-frame .service-card{ position:relative; z-index:2; overflow:hidden; }
.svc-frame.fx-overshoot{ --os-inset:12px; --os-overshoot:26px; --os-tick-overshoot:10px; }
.svc-frame.fx-overshoot:hover{ --os-color: rgba(255,255,255,.38); }