h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

button {
    cursor: pointer !important;
}

.error-alidation {
    color: #EF4444;
}
/* API'den gelen HTML için tipografi */
.blog-content {
    color: var(--app-text);
    line-height: 1.75;
    font-size: 1rem;
}

    .blog-content > * {
        margin-top: 1rem;
    }

        .blog-content > *:first-child {
            margin-top: 0;
        }

    .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 {
        font-family: var(--font-display, inherit);
        font-weight: 700;
        line-height: 1.25;
        margin-top: 2rem;
        margin-bottom: .75rem;
    }

    .blog-content h2 {
        font-size: 1.5rem;
    }

    .blog-content h3 {
        font-size: 1.25rem;
    }

    .blog-content p {
        color: var(--app-text);
    }

    .blog-content a {
        color: #14B8A6;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

        .blog-content a:hover {
            opacity: .9;
        }

    .blog-content ul, .blog-content ol {
        padding-left: 1.25rem;
        color: var(--app-text);
    }

    .blog-content li {
        margin: .35rem 0;
    }

    .blog-content blockquote {
        border-left: 3px solid rgba(20, 184, 166, .6);
        padding-left: 1rem;
        color: var(--app-muted);
        margin: 1.25rem 0;
    }

    .blog-content pre {
        background: rgba(0,0,0,.25);
        border: 1px solid var(--app-border);
        border-radius: 14px;
        padding: 1rem;
        overflow-x: auto;
    }

    .blog-content code {
        background: rgba(0,0,0,.18);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 10px;
        padding: .15rem .4rem;
    }

    .blog-content img {
        max-width: 100%;
        height: auto;
        border-radius: 16px;
        border: 1px solid var(--app-border);
    }

    .blog-content iframe,
    .blog-content video,
    .blog-content embed,
    .blog-content object {
        max-width: 100%;
        width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid var(--app-border);
    }

    .blog-content iframe {
        aspect-ratio: 16 / 9;
    }

    .blog-content .video-embed {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        border-radius: 14px;
        border: 1px solid var(--app-border);
        overflow: hidden;
        background: rgba(0,0,0,.2);
    }

        .blog-content .video-embed iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 0;
        }

    .blog-content table {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid var(--app-border);
        border-radius: 12px;
        overflow: hidden;
        display: block;
        max-width: 100%;
    }

    .blog-content .table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--app-border);
        border-radius: 12px;
        background: rgba(255,255,255,.02);
    }

        .blog-content .table-wrap table {
            border: none;
            border-radius: 0;
            margin: 0;
        }

    .blog-content thead {
        background: rgba(255,255,255,.04);
    }

    .blog-content th,
    .blog-content td {
        padding: .5rem .75rem;
        border-bottom: 1px solid var(--app-border);
        text-align: left;
        vertical-align: top;
    }

    .blog-content tbody tr:last-child td {
        border-bottom: none;
    }

@media (max-width: 640px) {
    .blog-content .table-wrap table {
        display: block;
        white-space: nowrap;
    }

    .blog-content pre {
        font-size: .9rem;
    }
}

.blog-content hr {
    border: none;
    border-top: 1px solid var(--app-border);
    margin: 2rem 0;
}




/* From Uiverse.io by dovatgabriel */
.three-body {
    --uib-size: 35px;
    --uib-speed: 0.8s;
    --uib-color: #5D3FD3;
    position: relative;
    display: inline-block;
    height: var(--uib-size);
    width: var(--uib-size);
    animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
    position: absolute;
    height: 100%;
    width: 30%;
}

    .three-body__dot:after {
        content: '';
        position: absolute;
        height: 0%;
        width: 100%;
        padding-bottom: 100%;
        background-color: var(--uib-color);
        border-radius: 50%;
    }

    .three-body__dot:nth-child(1) {
        bottom: 5%;
        left: 0;
        transform: rotate(60deg);
        transform-origin: 50% 85%;
    }

        .three-body__dot:nth-child(1)::after {
            bottom: 0;
            left: 0;
            animation: wobble1 var(--uib-speed) infinite ease-in-out;
            animation-delay: calc(var(--uib-speed) * -0.3);
        }

    .three-body__dot:nth-child(2) {
        bottom: 5%;
        right: 0;
        transform: rotate(-60deg);
        transform-origin: 50% 85%;
    }

        .three-body__dot:nth-child(2)::after {
            bottom: 0;
            left: 0;
            animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out;
        }

    .three-body__dot:nth-child(3) {
        bottom: -5%;
        left: 0;
        transform: translateX(116.666%);
    }

        .three-body__dot:nth-child(3)::after {
            top: 0;
            left: 0;
            animation: wobble2 var(--uib-speed) infinite ease-in-out;
        }

@keyframes spin78236 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes wobble1 {
    0%, 100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(-66%) scale(0.65);
        opacity: 0.8;
    }
}

@keyframes wobble2 {
    0%, 100% {
        transform: translateY(0%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateY(66%) scale(0.65);
        opacity: 0.8;
    }
}