first commit

app/composables/useTurnstileScale.ts

@@ -0,0 +1,38 @@
+import { onBeforeUnmount, onMounted, type Ref } from 'vue'
+
+/** Cloudflare Turnstile varsayılan genişliği (px) */
+const TURNSTILE_WIDTH = 300
+
+/**
+ * Turnstile widget'ı sarmalayan elementin genişliğine göre --turnstile-scale CSS değişkenini günceller.
+ * Böylece widget form alanı genişliğinde görünür.
+ */
+export function useTurnstileScale(wrapperRef: Ref<HTMLElement | null>) {
+  function updateScale() {
+    const el = wrapperRef.value
+    if (!el) return
+    const w = el.offsetWidth
+    if (w > 0) {
+      const scale = w / TURNSTILE_WIDTH
+      el.style.setProperty('--turnstile-scale', String(scale))
+    }
+  }
+
+  let observer: ResizeObserver | null = null
+
+  onMounted(() => {
+    updateScale()
+    const el = wrapperRef.value
+    if (el && typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(updateScale)
+      observer.observe(el)
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (observer && wrapperRef.value) {
+      observer.unobserve(wrapperRef.value)
+      observer = null
+    }
+  })
+}