* {
            --tw-shadow-color: 
            --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
        }

        .bg-background {
            background-color: hsl(0 0% 98%);
        }

        .bg-effect {
            background-image: linear-gradient(rgba(64, 64, 64, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(64, 64, 64, 0.08) 1px, transparent 1px);
            opacity: 0.3;
            inset: 0px;
            position: absolute;
            background-size: 30px 30px;
            border-color: hsl(0 0% 85%);
        }

        body {
            font-family: Inter, sans-serif;
            background-color: hsl(0 0% 98%);
            color: hsl(0 0% 20%);
            -webkit-font-smoothing: antialiased;
            letter-spacing: -0.025em;
        }

        .button {
            background-color: hsl(0 0% 25%) !important;
            border: 2px solid hsl(0 0% 25%) !important;
            animation-duration: 200ms !important;
            transition-duration: 200ms !important;
            transition-property: all !important;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
            color: hsl(0 0% 98%) !important;
            font-weight: 500 !important;
            font-size: 1rem !important;
            line-height: 1.5rem !important;
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
            padding-left: 2rem !important;
            padding-right: 2rem !important;
            border-radius: calc(0.5rem - 2px) !important;
            display: inline-flex !important;
            height: 3rem !important;
            align-items: center !important;
            justify-content: center !important;
            white-space: nowrap !important;
            min-height: 48px !important;
        }

        .form-page__content {
            width: 100% !important;
        }

        #btn-tc.active, #btn-email.active {
            color: white;
        }

        .text-primary, .text-dark-1 {
            color: hsl(0 0% 25%) !important;
        }

        .bg-muted {
            background-color: hsl(0 0% 88%);
        }

        .inline-flex {
            display:inline-flex;
        }

        .spt-point {
            background-color: hsl(0 0% 25%);
            border-radius: 9999px;
            width: 0.5rem;
            height: 0.5rem;
            display: flex;

        }

        .backdrop-blur-sm {
            backdrop-filter: blur(4px) !important;
            box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
            background-color: hsl(0 0% 96%) !important;
            border-color: hsl(0 0% 85%) !important;
            border-radius: 0.75rem !important;
            position: relative;
            border-width: 1px !important;
            overflow: hidden;
        }

        .backdrop-blur-md {
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            background-color: hsl(0 0% 96%);
            width: 100%;
            border-color: hsl(0 0% 85%);
        }

        .backdrop-blur-sm::before {
            content: "";
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            background: radial-gradient(circle at center, rgba(64, 64, 64, 0.08) 0%, transparent 70%);
            z-index: -1;
            border-radius: inherit;
        }

            /* Loader Animasyonu */
        .loader {
            width: 20px;
            height: 20px;
            border: 2px solid #ffffff;
            border-top: 2px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 8px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Başarı mesajı için yeşil tema */
        .button.success {
            background-color: #22c55e !important;
            border-color: #22c55e !important;
        }

        .button.success:hover {
            background-color: #16a34a !important;
            border-color: #16a34a !important;
        }

        /* Hata mesajı için kırmızı tema */
        .button.error {
            background-color: #ef4444 !important;
            border-color: #ef4444 !important;
        }

        .button.error:hover {
            background-color: #dc2626 !important;
            border-color: #dc2626 !important;
        }

        /* Gizli sınıf */
        .hidden {
            display: none !important;
        }