/* style.css */

/* Kök değişkenler: Aydınlık mod varsayılan */
:root {
    --bg-color-light: #f8f9fa;
    --text-color-light: #212529;
    --card-bg-light: #ffffff;
    --card-text-light: #343a40;
    --header-bg-light: #e9ecef;
    --header-text-light: #212529;
    --footer-bg-light: #e9ecef;
    --footer-text-light: #6c757d;
    --toggle-bg-light: #dee2e6;
    --toggle-text-light: #495057;
    --tag-bg-light: #e0f7fa;
    --tag-text-light: #00796b;
    --tag-active-bg-light: #3b82f6; /* Aktif etiket arka planı */
    --tag-active-text-light: #ffffff; /* Aktif etiket metin rengi */
}

/* Karanlık mod değişkenleri */
.dark {
    --bg-color-dark: #1a202c; /* Tailwind gray-900'a yakın */
    --text-color-dark: #e2e8f0; /* Tailwind gray-200'a yakın */
    --card-bg-dark: #2d3748; /* Tailwind gray-800'a yakın */
    --card-text-dark: #e2e8f0;
    --header-bg-dark: #1a202c;
    --header-text-dark: #e2e8f0;
    --footer-bg-dark: #1a202c;
    --footer-text-dark: #a0aec0; /* Tailwind gray-400'a yakın */
    --toggle-bg-dark: #4a5568; /* Tailwind gray-700'a yakın */
    --toggle-text-dark: #e2e8f0;
    --tag-bg-dark: #2c5282; /* Mavi tonu */
    --tag-text-dark: #bee3f8; /* Açık mavi */
    --tag-active-bg-dark: #2563eb; /* Aktif etiket arka planı */
    --tag-active-text-dark: #ffffff; /* Aktif etiket metin rengi */
}

/* Genel body stilleri */
body {
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
}

/* Karanlık modda body stilleri */
.dark body {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
}

/* Header stilleri */
header {
    background-color: var(--header-bg-light);
    color: var(--header-text-light);
}

.dark header {
    background-color: var(--header-bg-dark);
    color: var(--header-text-dark);
}

/* Footer stilleri */
footer {
    background-color: var(--footer-bg-light);
    color: var(--footer-text-light);
}

.dark footer {
    background-color: var(--footer-bg-dark);
    color: var(--footer-text-dark);
}

/* Kart stilleri */
.work-card {
    background-color: var(--card-bg-light);
    color: var(--card-text-light);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.dark .work-card {
    background-color: var(--card-bg-dark);
    color: var(--card-text-dark);
}

.work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.dark .work-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Tema değiştirme butonu stilleri */
#theme-toggle {
    background-color: var(--toggle-bg-light);
    color: var(--toggle-text-light);
}

.dark #theme-toggle {
    background-color: var(--toggle-bg-dark);
    color: var(--toggle-text-dark);
}

/* Etiket stilleri */
.tag {
    background-color: var(--tag-bg-light);
    color: var(--tag-text-light);
    transition: background-color 0.3s ease, color 0.3s ease; /* Geçiş süresi eklendi */
}

.dark .tag {
    background-color: var(--tag-bg-dark);
    color: var(--tag-text-dark);
}

/* Aktif etiket stili */
.tag.tag-active {
    background-color: var(--tag-active-bg-light);
    color: var(--tag-active-text-light);
}

.dark .tag.tag-active {
    background-color: var(--tag-active-bg-dark);
    color: var(--tag-active-text-dark);
}


/* Genel geçişler */
body, header, footer, .work-card, #theme-toggle { /* .tag buradan kaldırıldı, kendi geçişi var */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Resimlerin duyarlı olması için */
.markdown-content img { /* .work-card img yerine markdown-content img kullanıldı */
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem; /* rounded-lg */
    object-fit: cover; /* Resmin kutuyu doldurmasını sağlar */
}

/* Yükleme animasyonu (index.html'deki animate-pulse için) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}