:root {
    --bg: #0d0d0e;
    /* Glassmorphism için şeffaf arka planlar */
    --card-bg: rgba(255, 255, 255, 0.03); 
    --glass-border: rgba(255, 255, 255, 0.08);
    --accent: #00e676;
    --text-main: #e0e0e0;
    --text-dim: #a0a0a0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg);
    color: var(--text-main);
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
}

/* PARTICLES ARKA PLAN */
#particles-js {
    position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -10;
    background-color: var(--bg);
}

.glow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -11; pointer-events: none; overflow: hidden; }
.glow-spot {
    position: absolute; top: -15%; left: 50%; transform: translateX(-50%);
    width: 80vw; max-width: 1200px; aspect-ratio: 1/1;
    background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
    filter: blur(80px) brightness(0.8); opacity: 0.2;
}

.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 40px 0; position: relative; z-index: 1; }

/* Animasyonlar */
.fade-in { animation: fadeInAnim 0.6s ease-out forwards; }
@keyframes fadeInAnim { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.page-enter { animation: pageEnter 0.5s ease-out forwards; }
.page-exit { animation: pageExit 0.4s ease-in forwards; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageExit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }

/* ANA SAYFA */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; padding: 60px 0 80px; }
@media (min-width: 768px) {
    .hero-grid { grid-template-columns: 250px 1fr; text-align: left; }
    .hero-info-text { text-align: left; }
    .hero-profile-area { text-align: right; }
}
.hero-profile-area { text-align: center; }
.profile-img-lg {
    width: 180px; height: 180px; border-radius: 50%;
    border: 3px solid var(--accent); box-shadow: 0 0 25px rgba(0, 230, 118, 0.4);
    object-fit: cover; display: block; margin: 0 auto;
    animation: float 8s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-15px) scale(1.02); } }
.hero-info-text h1 { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 10px; line-height: 1.2; }
.hero-info-text .job-title { color: var(--accent); font-size: clamp(0.9rem, 2vw, 1.2rem); margin-bottom: 20px; }
.hero-info-text .bio-text { color: var(--text-dim); max-width: 600px; }

/* FİLTRELER */
.filter-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 40px 0; }
@media (min-width: 768px) { .filter-container { justify-content: flex-start; } }
.filter-btn {
    background: transparent; border: 1px solid var(--glass-border); color: var(--text-dim);
    padding: 8px 18px; border-radius: 50px; cursor: pointer; transition: all 0.3s ease-out; font-family: inherit;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0, 230, 118, 0.08); transform: translateY(-3px); }
.filter-btn.active { 
    border-color: var(--accent); color: var(--accent); background: rgba(0, 230, 118, 0.15);
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.3);
}

/* KARTLAR (Glassmorphism) */
.projects-section-title { font-size: 1rem; color: var(--accent); margin-bottom: 30px; letter-spacing: 1.5px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 25px; }
.card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Buzlu cam */
    padding: 30px; border-radius: 15px; cursor: pointer;
    transition: all 0.4s ease-out; opacity: 0; transform: translateY(20px);
}
.card.visible { opacity: 1; transform: translateY(0); }
.card:hover { 
    transform: translateY(-10px) scale(1.02); 
    border-color: var(--accent); 
    background: rgba(0, 230, 118, 0.08); 
    box-shadow: 0 8px 25px rgba(0, 230, 118, 0.1); 
}
.card h3 { font-size: 1.2rem; margin-top: 10px; margin-bottom: 8px; }
.card small { color: var(--accent); font-family: monospace; }
.card p { color: var(--text-dim); font-size: 0.9rem; }

/* DETAY SAYFASI */
.detail-container h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 20px; }
.detail-container .project-description { color: var(--text-dim); margin-bottom: 40px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin: 40px 0; }
.gallery img { 
    width: 100%; height: 200px; object-fit: cover; border-radius: 10px; 
    border: 1px solid var(--glass-border); transition: transform 0.3s;
}
.gallery img:hover { transform: scale(1.03); border-color: var(--accent); }

.project-info-box {
    background: var(--card-bg); border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 30px; border-radius: 15px;
}
.project-info-box p { margin-bottom: 10px; }
.project-info-box strong { color: var(--text-main); }
.project-info-box a { color: var(--accent); text-decoration: none; }
.back-btn {
    background: var(--accent); color: var(--bg); border: none; padding: 12px 25px; border-radius: 50px;
    cursor: pointer; font-weight: bold; margin-bottom: 40px; transition: all 0.3s;
}
.back-btn:hover { transform: translateX(-5px); box-shadow: 0 5px 15px var(--accent); }

@media (max-width: 767px) {
    .container { padding: 30px 0; }
    .hero-grid { padding: 40px 0 60px; }
    .hero-profile-area { margin-bottom: 30px; }
    .filter-container { justify-content: center; }
}