@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..900;1,14..32,400..900&display=swap');

body,
body.font-sans {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Sayfa giriş animasyonu */
.page-enter {
    animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Makale kartları staggered animasyon */
.article-card {
    animation: cardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.article-card:nth-child(1)  { animation-delay: 0.04s; }
.article-card:nth-child(2)  { animation-delay: 0.09s; }
.article-card:nth-child(3)  { animation-delay: 0.14s; }
.article-card:nth-child(4)  { animation-delay: 0.19s; }
.article-card:nth-child(5)  { animation-delay: 0.24s; }
.article-card:nth-child(6)  { animation-delay: 0.29s; }
.article-card:nth-child(7)  { animation-delay: 0.33s; }
.article-card:nth-child(8)  { animation-delay: 0.37s; }
.article-card:nth-child(9)  { animation-delay: 0.41s; }
.article-card:nth-child(10) { animation-delay: 0.45s; }
.article-card:nth-child(11) { animation-delay: 0.48s; }
.article-card:nth-child(12) { animation-delay: 0.51s; }
.article-card:nth-child(13) { animation-delay: 0.54s; }
.article-card:nth-child(14) { animation-delay: 0.57s; }
.article-card:nth-child(15) { animation-delay: 0.59s; }
.article-card:nth-child(16) { animation-delay: 0.61s; }
.article-card:nth-child(17) { animation-delay: 0.63s; }
.article-card:nth-child(18) { animation-delay: 0.65s; }
.article-card:nth-child(n+19) { animation-delay: 0.65s; }

@keyframes cardIn {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(14px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Yukarı çık butonu */
#scroll-top-btn {
    position: fixed;
    bottom: 6rem;
    left: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 50;
}

#scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Skeleton yükleyici */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-light {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}