{{--
    Stiller Tailwind Play CDN ile tarayıcıda üretilir; Vite CSS build'i kullanılmaz.
    resources/css/app.css içindeki @layer components sınıfları burada düz CSS olarak
    tekrar yazılmıştır (CDN, @apply işlemez).
--}}
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>
    tailwind.config = {
        theme: {
            extend: {
                fontFamily: {
                    sans: ['Figtree', 'ui-sans-serif', 'system-ui', 'sans-serif'],
                },
            },
        },
    };
</script>
<style>
    [x-cloak] {
        display: none;
    }

    .process-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        border-radius: 0.5rem;
        border: 1px solid #e7e5e4;
        background-color: #ffffff;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 600;
        color: #44403c;
        cursor: pointer;
    }

    .process-button:hover {
        background-color: #f5f5f4;
    }

    .process-button:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }

    .process-primary {
        border-color: #0369a1;
        background-color: #0284c7;
        color: #ffffff;
    }

    .process-primary:hover {
        background-color: #0369a1;
    }

    .process-label {
        display: grid;
        gap: 0.25rem;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 500;
        color: #57534e;
    }

    .process-input {
        width: 100%;
        min-width: 0;
        border-radius: 0.5rem;
        border: 1px solid #d6d3d1;
        background-color: #ffffff;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: #292524;
    }

    .process-input:focus {
        outline: none;
        border-color: #0ea5e9;
        box-shadow: 0 0 0 2px #0ea5e9;
    }
</style>