:root {
    /* Varsayılan (Dark Mode) */
    --bg-color: #000000;
    --text-color: #ffffff;
    --card-bg: #111111;
    --accent-color: #38bdf8; /* Mavi */
    --hover-bg: #1a1a1a;
    --border-color: #333;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.light-mode {
    /* Light Mode */
    --bg-color: #ffe5b4; /* Şeftali */
    --text-color: #2d2d2d;
    --card-bg: #fffbf2;
    --accent-color: #ff6b6b; /* Mercan */
    --hover-bg: #fff0db;
    --border-color: #e6cea0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-main);
    transition: background-color 0.3s, color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
/* --- global.css EKLEMELERİ --- */

/* 1. Tüm site genelinde yumuşak sayfa geçişini açıyoruz */
@view-transition {
    navigation: auto;
}

/* 2. Profil Resmine "Ruh" Veriyoruz */
/* Bu ismi taşıyan resimler sayfalar arası ışınlanır */
.hero-container img,     /* Ana Menüdeki Resim */
.left-pane img,          /* Deneyim/Yetenekler Sayfasındaki Resim */
.header-profile img {    /* Header'daki Resim */
    view-transition-name: profil-avatar;
    contain: layout paint;
}

/* 3. İsmin de kayarak gitmesini istersen bunu ekle */
.hero-container h1,
.left-pane h1 {
    view-transition-name: profil-ismi;
    width: fit-content;
}
/* --- SAYFA GİRİŞ ANİMASYONLARI --- */

/* 1. Sol Panel (Profil) Soldan Kayan Animasyon */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 2. Sağ Panel (İçerik) Aşağıdan Süzülen Animasyon */
@keyframes fadeInUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 3. Bu animasyonları elemanlara uygula */

/* Sol Panele Uygula */
.left-pane {
    animation: slideInLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Sağ Panele Uygula (Biraz gecikmeli gelsin, daha şık durur) */
.right-pane {
    opacity: 0; /* Başlangıçta gizli olsun ki animasyonla gelsin */
    animation: fadeInUp 0.8s ease-out 0.3s forwards; /* 0.3 saniye bekle sonra gel */
}

/* Resim ayrıca kendi içinde hafifçe büyüsün */
.left-pane img {
    animation: popIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
    opacity: 0; 
    transform: scale(0.5);
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}