/* Temel Sıfırlama ve Font */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    /* Koyu Tema Değişkenleri */

    --bg-color: #1a1a2e; /* Koyu arka plan */

    --text-color: #e4e4e6; /* Açık yazı */

    --primary-color: #ff6a9a; /* Vurgu rengi (canlı pembe) */

    --secondary-color: #0f3460; /* Koyu ikincil renk */

    --card-bg: #282846; /* Kart arka planı */

    --transition-speed: 0.3s;

    --font-family: 'Poppins', sans-serif;

}




/* Açık Tema Değişkenleri (JS ile eklenecek) */

body.light-mode {

    --bg-color: #f7f7f7;

    --text-color: #333;

    --primary-color: #007bff; /* Mavi vurgu */

    --secondary-color: #e9ecef;

    --card-bg: #fff;

}



body {

    background-color: var(--bg-color);

    color: var(--text-color);

    font-family: var(--font-family);

    line-height: 1.6;

    transition: background-color var(--transition-speed), color var(--transition-speed);

}



/* GLOBAL STYLES */

.section-padding {

    padding: 100px 5%;

    max-width: 1200px;

    margin: 0 auto;

}



h1, h2, h3 {

    margin-bottom: 20px;

    font-weight: 700;

}



h2 {

    font-size: 2.5em;

    border-bottom: 3px solid var(--primary-color);

    display: inline-block;

    padding-bottom: 5px;

    margin-bottom: 40px;

}



/* Buton Stilleri */

.primary-button, .secondary-button, .cta-button {

    display: inline-block;

    padding: 12px 25px;

    border-radius: 5px;

    text-decoration: none;

    font-weight: 600;

    transition: all var(--transition-speed);

    margin-top: 15px;

    cursor: pointer;

    border: 2px solid var(--primary-color);

}

.primary-button { background-color: var(--primary-color); color: var(--bg-color); }

.primary-button:hover { background-color: transparent; color: var(--primary-color); }

.secondary-button { background-color: transparent; color: var(--primary-color); }

.secondary-button:hover { background-color: var(--primary-color); color: var(--bg-color); }



/* HEADER */

header {

    display: flex; justify-content: space-between; align-items: center; padding: 20px 5%; 

    background-color: rgba(26, 26, 46, 0.95);

    position: sticky; top: 0; z-index: 1000;

    backdrop-filter: blur(5px);

}

.logo { font-size: 1.8em; font-weight: 700; color: var(--primary-color); }

nav a { color: var(--text-color); text-decoration: none; margin-left: 30px; transition: color var(--transition-speed); }

nav a:hover { color: var(--primary-color); }

#dark-mode-toggle { background: var(--card-bg); color: var(--text-color); border: none; padding: 10px; border-radius: 50%; cursor: pointer; font-size: 1.2em; transition: background var(--transition-speed); }





/* HERO BÖLÜMÜ */

#hero {

    min-height: 80vh; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; max-width: 1200px; margin: 0 auto;

}

.hero-content .greeting { color: var(--primary-color); font-size: 1.2em; margin-bottom: 5px; }

.hero-content h1 {

    font-size: 4em; margin-top: 0; margin-bottom: 10px;

    border-right: 3px solid var(--primary-color);

    white-space: nowrap;

    overflow: hidden; 

    width: 0;

}

@keyframes blink-caret {

    from, to { border-color: transparent }

    50% { border-color: var(--primary-color); }

}

.hero-content .role { font-size: 1.5em; color: #a0a0b8; margin-bottom: 30px; }



/* YETENEK VE PROJE KARTLARI */

.skills-grid, .project-list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

}



.skill-card, .project-card {

    background-color: var(--card-bg);

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

    transform-style: preserve-3d; 

    position: relative;

    overflow: hidden; 

    transition: all 0.5s ease;

    border-left: 5px solid var(--primary-color);

}



.project-card.hidden {

    transform: scale(0.8);

    opacity: 0;

    transition: transform 0.4s ease, opacity 0.4s ease;

    width: 0;

    padding: 0;

    margin: 0;

    overflow: hidden;

}



.skill-card:hover, .project-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(255, 106, 154, 0.4); 

}



/* Manyetik Işık Efekti */

.project-card::before {

    content: '';

    position: absolute;

    top: var(--mouse-y);

    left: var(--mouse-x);

    width: 200px;

    height: 200px;

    background: radial-gradient(circle, var(--primary-color), transparent 60%);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

    transition: opacity 0.4s;

    pointer-events: none; /* Işığın fare etkileşimini engellememesi için */

}



.project-card:hover::before {

    opacity: 0.1;

}



.project-card h3 { color: var(--primary-color); margin-top: 0; }

.tags span { display: inline-block; background-color: var(--secondary-color); padding: 5px 10px; border-radius: 3px; font-size: 0.8em; margin-right: 5px; margin-bottom: 10px; color: var(--text-color); }



/* PROJE FİLTRELEME BUTONLARI */

#project-filters {

    margin-bottom: 40px;

    display: flex;

    justify-content: center;

    gap: 15px;

}

.filter-btn {

    background: transparent;

    color: var(--text-color);

    border: 2px solid var(--secondary-color);

    padding: 10px 20px;

    border-radius: 5px;

    cursor: pointer;

    font-weight: 600;

    transition: all var(--transition-speed);

}

.filter-btn:hover {

    border-color: var(--primary-color);

    color: var(--primary-color);

}

.filter-btn.active {

    background-color: var(--primary-color);

    color: var(--bg-color);

    border-color: var(--primary-color);

}



/* MODAL STİLLERİ */

#project-modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.8);

    z-index: 2000;

    transition: opacity 0.3s ease;

}

#project-modal {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.95);

    max-width: 800px;

    width: 90%;

    max-height: 90vh;

    overflow-y: auto;

    background-color: var(--card-bg);

    padding: 40px;

    border-radius: 10px;

    z-index: 2001;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

    transition: opacity 0.3s ease, transform 0.3s ease;

}

#project-modal-backdrop.hidden, #project-modal.hidden {

    opacity: 0;

    pointer-events: none;

}

#project-modal.hidden {

    transform: translate(-50%, -50%) scale(0.9);

}



#modal-close-btn {

    position: absolute;

    top: 15px;

    right: 20px;

    background: none;

    border: none;

    color: var(--text-color);

    font-size: 2.5em;

    cursor: pointer;

    line-height: 1;

}



#modal-content h2 {

    color: var(--primary-color);

}

#modal-content img {

    width: 100%;

    border-radius: 5px;

    margin-bottom: 20px;

}

#modal-content p {

    margin-bottom: 15px;

}



/* İLETİŞİM VE FOOTER */

#iletisim { text-align: center; }

.email-link { font-size: 1.5em; color: var(--primary-color); text-decoration: none; font-weight: 600; transition: color var(--transition-speed); }

.email-link:hover { text-decoration: underline; }

.social-links a { color: var(--text-color); margin: 30px 15px 0; font-size: 1.2em; text-decoration: none; transition: color var(--transition-speed); display: inline-block; }

.social-links a:hover { color: var(--primary-color); }





footer {
  background: #2c3e50;
  color: #ecf0f1;
  text-align: center;
  padding: 30px 20px;
  font-size: 0.95rem;
}


/* ANİMASYONLAR */

.animate-on-load, .animate-on-scroll {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), 

                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.animate-on-load.is-visible, .animate-on-scroll.is-visible {

    opacity: 1;

    transform: translateY(0);

}