/* GENEL SIFIRLAMA VE FONT */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    transition: background-color 0.4s, color 0.4s, border-color 0.4s; 
}

/* TEMA TANIMLAMALARI */
:root {
    --light-bg: #f5f5f5;
    --light-text: #333;
    --light-alt-bg: #fff;
    --dark-bg: #1a1a2e;
    --dark-text: #ffffff;
    --dark-alt-bg: #0f0f1d;
    --neon-color: #00dfff; /* Ana vurgu rengi (Cyan) */
    --glitch-color1: #ff00ff; /* Magenta */
    --glitch-color2: #00ffff; /* Aqua */
}

/* TEMA UYGULAMALARI */
.light-mode { background-color: var(--light-bg); color: var(--light-text); }
.light-mode .alt-section { background-color: var(--light-alt-bg); }
.dark-mode { background-color: var(--dark-bg); color: var(--dark-text); }
.dark-mode .alt-section { background-color: var(--dark-alt-bg); }
::-webkit-scrollbar { width: 0px; background: transparent; }

/* HEADER ve TYPOGRAPHY */
header {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 20px;
    background: url('https://picsum.photos/1920/1080?random=10') no-repeat center center/cover;
    position: relative; overflow: hidden;
}
header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}
.header-content { z-index: 10; }
h1 { font-size: 5rem; font-family: 'Orbitron', sans-serif; margin-bottom: 10px; }
h2 { font-size: 1.8rem; font-weight: 300; margin-bottom: 40px; }
.section { padding: 80px 5%; min-height: 50vh; }
.section-title {
    font-size: 2.5rem; text-align: center; margin-bottom: 50px;
    font-family: 'Orbitron', sans-serif; color: var(--neon-color);
    text-shadow: 0 0 5px var(--neon-color), 0 0 10px var(--neon-color);
}

/* NAVİGASYON VE BUTONLAR */
nav a {
    color: inherit; text-decoration: none; font-size: 1.1rem;
    padding: 10px 20px; margin: 0 10px; border: 1px solid; border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
.neon-button {
    background: none; border-color: var(--neon-color);
    box-shadow: 0 0 5px var(--neon-color), 0 0 10px var(--neon-color) inset;
    text-shadow: 0 0 3px var(--neon-color);
}
.dark-mode .neon-button:hover {
    background-color: var(--neon-color); color: var(--dark-bg);
    box-shadow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color);
    transform: scale(1.05);
}
.light-mode .neon-button:hover {
    background-color: var(--neon-color); color: var(--light-bg);
    box-shadow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color);
    transform: scale(1.05);
}

/* HAKKIMDA BÖLÜMÜ */
.about-content {
    max-width: 800px; margin: 0 auto; line-height: 1.8; text-align: justify;
    padding: 20px; border-left: 5px solid var(--neon-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.dark-mode .about-content {
    box-shadow: 0 0 10px var(--neon-color); background-color: rgba(26, 26, 46, 0.5);
}

/* YETKİNLİKLER (SKILLS) */
.skills-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; padding: 20px;
}
.skill-card {
    padding: 30px; border-radius: 10px; border: 1px solid transparent;
    transition: all 0.5s ease-in-out;
}
.dark-mode .skill-card {
    background-color: var(--dark-alt-bg); border-color: var(--neon-color);
    box-shadow: 0 0 15px rgba(0, 223, 255, 0.5);
}
.light-mode .skill-card { background-color: var(--light-alt-bg); border-color: #ddd; }
.skill-card h3 {
    font-size: 1.5rem; margin-bottom: 15px; color: var(--neon-color);
    font-family: 'Orbitron', sans-serif; text-shadow: 0 0 3px var(--neon-color);
}
.neon-icon {
    color: var(--neon-color); margin-right: 10px; filter: drop-shadow(0 0 3px var(--neon-color));
}
.glitch-list { list-style: none; margin-top: 15px; }
.glitch-list li { padding: 5px 0; border-bottom: 1px dashed rgba(0, 223, 255, 0.3); }

/* PROJELER (PROJECTS) */
.projects-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px; padding: 20px;
}
.project-card {
    padding: 30px; border-radius: 10px; border: 2px solid; transition: all 0.5s ease;
}
.dark-mode .project-card {
    background-color: var(--dark-alt-bg); border-color: var(--glitch-color1);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
}
.light-mode .project-card {
    background-color: var(--light-alt-bg); border-color: #eee;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.project-card h3 {
    font-family: 'Orbitron', sans-serif; font-size: 1.3rem; margin-bottom: 15px;
}
.neon-text { color: var(--glitch-color2); text-shadow: 0 0 5px var(--glitch-color2); }
.project-tag {
    display: inline-block; padding: 5px 10px; border-radius: 5px;
    font-size: 0.8rem; font-weight: bold; margin-right: 10px; margin-top: 15px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Proje Etiket Renkleri (Genişletildi) */
.tag-security { border: 1px solid #ff7700; color: #ff7700; } 
.tag-network { border: 1px solid #77ff00; color: #77ff00; } 
.tag-electronic { border: 1px solid #ffff00; color: #ffff00; }
.tag-electric { border: 1px solid #00ff00; color: #00ff00; }
.tag-repair { border: 1px solid #ff00ff; color: #ff00ff; }
.tag-power { border: 1px solid #00ffff; color: #00ffff; }

/* İLETİŞİM (CONTACT) */
.contact-slogan { text-align: center; margin-bottom: 30px; font-style: italic; opacity: 0.8; }
.jotform-container {
    max-width: 800px; margin: 0 auto; border: 5px solid var(--neon-color);
    box-shadow: 0 0 25px var(--neon-color); border-radius: 10px; overflow: hidden;
}
#jotform-embed { width: 100%; min-height: 900px; display: block; }

/* FOOTER */
footer {
    padding: 30px 5%; background-color: rgba(0, 0, 0, 0.8); color: #fff;
    text-align: center; border-top: 3px solid var(--neon-color);
}
.footer-content {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1200px; margin: 0 auto;
}
.social-links a { margin-left: 20px; font-size: 1rem; }
.neon-link { color: var(--neon-color); text-shadow: 0 0 5px var(--neon-color); }

/* TEMA BUTONU */
#theme-toggle {
    position: fixed; top: 20px; right: 20px; z-index: 1000;
    width: 50px; height: 50px; border-radius: 50%; border: none;
    font-size: 1.5rem; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
.dark-mode #theme-toggle { background-color: var(--neon-color); color: var(--dark-bg); }
.light-mode #theme-toggle { background-color: var(--light-alt-bg); color: var(--light-text); }


/* ========================================= */
/* ANİMASYONLAR VE HOVER ETKİLERİ */
/* ========================================= */

/* Typing Text Effect */
.typing-text {
    overflow: hidden; border-right: .15em solid var(--neon-color); white-space: nowrap;
    margin: 0 auto; letter-spacing: .15em;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: var(--neon-color); } }

/* Glitch Text Effect */
.glitch-text { position: relative; text-shadow: 0 0 5px var(--glitch-color1); animation: glitch-anim 2s infinite alternate; }

/* Glitch Keyframes - (Önceki versiyonda olduğu gibi) */
.glitch-text::before, .glitch-text::after {
    content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; opacity: 0.8;
}
.glitch-text::before {
    left: 2px; text-shadow: -2px 0 var(--glitch-color2); clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-before 3s infinite alternate-reverse;
}
.glitch-text::after {
    left: -2px; text-shadow: -2px 0 var(--glitch-color1); clip: rect(85px, 450px, 100px, 0); animation: glitch-anim-after 4s infinite alternate;
}
@keyframes glitch-anim-before { 0% { clip: rect(24px, 9999px, 81px, 0) } 100% { clip: rect(40px, 9999px, 70px, 0) } }
@keyframes glitch-anim-after { 0% { clip: rect(70px, 9999px, 10px, 0) } 100% { clip: rect(65px, 9999px, 15px, 0) } }

/* Scroll Animasyonları için Temel Tanımlar (JS tarafından tetiklenecek) */
.fade-in { opacity: 0; animation: fadeIn 1s forwards; animation-play-state: paused; }
.fade-in-slow { opacity: 0; animation: fadeIn 2s forwards; animation-play-state: paused; }
.slide-in-left { opacity: 0; transform: translateX(-50px); animation: slideInLeft 1s forwards; animation-play-state: paused; }
.slide-in-right { opacity: 0; transform: translateX(50px); animation: slideInRight 1s forwards; animation-play-state: paused; }
.zoom-in { opacity: 0; transform: scale(0.9); animation: zoomIn 0.8s forwards; animation-play-state: paused; }
.zoom-in-slow { opacity: 0; transform: scale(0.8); animation: zoomIn 1.5s forwards; animation-play-state: paused; }

@keyframes fadeIn { to { opacity: 1; } }
@keyframes slideInLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { to { opacity: 1; transform: translateX(0); } }
@keyframes zoomIn { to { opacity: 1; transform: scale(1); } }

/* Hover Efektleri */
.grow-on-hover:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 223, 255, 0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Diğer Animasyonlar */
.dark-mode .neon-link { animation: neonPulse 1.5s infinite alternate; }
@keyframes neonPulse { from { text-shadow: 0 0 5px var(--neon-color); } to { text-shadow: 0 0 10px var(--neon-color), 0 0 20px var(--neon-color); } }

.dark-mode .section-title { animation: flicker 4s infinite alternate; }
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; text-shadow: 0 0 4px var(--neon-color); } 20%, 24%, 55% { opacity: 0.8; text-shadow: none; } }

.skill-card:hover .neon-icon { transform: rotate(360deg); transition: transform 0.8s ease; }
.glitch-button { animation: pulse 1s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 223, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(0, 223, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 223, 255, 0); } }

/* Mobil Uyarlama */
@media (max-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 1.4rem; }
    .section-title { font-size: 2rem; }
    nav a { margin: 5px; padding: 8px 15px; display: block; }
    .footer-content { flex-direction: column; }
    .social-links { margin-top: 15px; }
    .social-links a { margin: 0 10px; }
    .skills-grid, .projects-grid { grid-template-columns: 1fr; }
}