/* =========================================
   DEĞİŞKENLER, SIFIRLAMALAR VE SEÇİM RENGİ
========================================= */
:root {
    --bg-color: #040914; 
    --bg-darker: #02050b;
    --text-main: #ffffff;
    --text-muted: #8a94a6;
    --neon-blue: #00d2ff;
    --neon-yellow: #ffcc00;
    --card-bg: rgba(255, 255, 255, 0.02);
    --card-border: rgba(255, 255, 255, 0.1);
    --font-main: 'Poppins', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-main); overflow-x: hidden; position: relative; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

::selection { background-color: var(--neon-blue); color: var(--bg-color); }
::-moz-selection { background-color: var(--neon-blue); color: var(--bg-color); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-darker); }
::-webkit-scrollbar-thumb { background: rgba(0, 210, 255, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-blue); }

/* =========================================
   ARKA PLAN AMBİYANS (SÜZÜLME ANİMASYONLU)
========================================= */
.bg-glow { 
    position: absolute; width: 600px; height: 600px; border-radius: 50%; 
    filter: blur(250px); z-index: -1; opacity: 0.25; pointer-events: none; 
    animation: floatOrbs 12s ease-in-out infinite alternate;
}
.blue-glow-left { background: var(--neon-blue); top: 10%; left: -200px; animation-delay: 0s; }
.yellow-glow-right { background: var(--neon-yellow); top: 45%; right: -200px; animation-delay: -6s; }

@keyframes floatOrbs {
    0% { transform: translate(0px, 0px) scale(1); }
    50% { transform: translate(30px, -50px) scale(1.1); }
    100% { transform: translate(-40px, 40px) scale(0.9); }
}

/* =========================================
   HEADER & NAVBAR (ÇİZGİ ANİMASYONLU HOVER)
========================================= */
.header { padding: 30px 0; position: fixed; width: 100%; top: 0; left: 0; z-index: 100; transition: all 0.4s ease; will-change: background, padding; }
.header.sticky { padding: 15px 0; background: rgba(4, 9, 20, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.navbar { display: flex; justify-content: space-between; align-items: center; }

.logo a { text-decoration: none; color: var(--text-main); font-size: 26px; font-weight: 600; display: flex; align-items: center; letter-spacing: 0.5px; transition: 0.3s; }
.logo a:hover { text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); }
.logo svg { transition: transform 0.5s ease; }
.logo a:hover svg { transform: rotate(180deg); }

.text-neon-blue { color: var(--neon-blue); text-shadow: 0 0 15px rgba(0, 210, 255, 0.3); }
.text-neon-yellow { color: var(--neon-yellow); text-shadow: 0 0 15px rgba(255, 204, 0, 0.3); }

.nav-links { display: flex; gap: 35px; }
.nav-links a { 
    position: relative; text-decoration: none; color: var(--text-muted); 
    font-size: 13px; font-weight: 500; letter-spacing: 1px; transition: 0.3s ease; padding-bottom: 5px; 
}
/* Alttan kayarak gelen mavi çizgi */
.nav-links a::after {
    content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; 
    background-color: var(--neon-blue); transition: width 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--neon-blue); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-btn { display: block; }
.btn-outline-yellow { 
    position: relative; overflow: hidden; text-decoration: none; color: var(--text-main); 
    font-size: 13px; font-weight: 500; padding: 12px 26px; border: 1px solid var(--neon-yellow); 
    border-radius: 30px; transition: 0.3s ease; box-shadow: 0 0 10px rgba(255, 204, 0, 0.1); display: inline-block;
}

/* Tüm butonlar için ortak Parlama (Shine) Efekti */
.btn-outline-yellow::before, .btn-hero-start::before, .btn-submit::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg); transition: 0.5s ease;
}
.btn-outline-yellow:hover::before, .btn-hero-start:hover::before, .btn-submit:hover::before { left: 150%; }
.btn-outline-yellow:hover { box-shadow: 0 0 20px rgba(255, 204, 0, 0.4); background: rgba(255, 204, 0, 0.1); transform: translateY(-3px); }

.hamburger { display: none; cursor: pointer; z-index: 101; background: none; border: none; }
.hamburger span { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--text-main); transition: all 0.3s ease-in-out; }

/* =========================================
   HERO (ANA EKRAN) - GİRİŞ ANİMASYONLARI
========================================= */
.hero { display: flex; align-items: center; justify-content: space-between; margin-top: 120px; gap: 40px; padding-bottom: 40px; }
.hero-content { flex: 1; max-width: 550px; animation: slideInLeft 1s ease-out forwards; }
.subtitle { color: var(--neon-blue); font-size: 14px; font-weight: 600; letter-spacing: 2px; margin-bottom: 20px; }
.hero-content h1 { font-size: 56px; line-height: 1.2; font-weight: 700; margin-bottom: 25px; }
.description { color: var(--text-muted); font-size: 16px; line-height: 1.7; margin-bottom: 40px; }
.hero-actions { display: flex; align-items: center; gap: 35px; }

.btn-hero-start { 
    position: relative; overflow: hidden; text-decoration: none; color: var(--neon-yellow); 
    padding: 14px 32px; border: 1px solid var(--neon-yellow); border-radius: 30px; 
    font-size: 14px; font-weight: 500; box-shadow: 0 0 20px rgba(255, 204, 0, 0.15); transition: 0.3s ease; display: inline-block;
}
.btn-hero-start:hover { background: var(--neon-yellow); color: var(--bg-color); box-shadow: 0 0 25px rgba(255, 204, 0, 0.4); transform: translateY(-3px); }

.play-section { display: flex; align-items: center; gap: 15px; cursor: pointer; transition: 0.3s; }
.play-section:hover { transform: translateX(5px); }
.play-btn { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border: 1px solid var(--neon-blue); border-radius: 50%; color: var(--neon-blue); text-decoration: none; font-size: 18px; padding-left: 3px; transition: 0.3s; box-shadow: 0 0 10px rgba(0, 210, 255, 0.1); }
.play-section:hover .play-btn { background: var(--neon-blue); color: var(--bg-color); box-shadow: 0 0 20px rgba(0, 210, 255, 0.5); transform: scale(1.1); }
.play-text { display: flex; flex-direction: column; }
.play-title { font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.play-desc { font-size: 12px; color: var(--text-muted); }

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* HERO GÖRSEL VE CSS MOCKUP */
.hero-image { flex: 1; position: relative; display: flex; justify-content: center; align-items: center; min-height: 400px; perspective: 1200px; animation: slideInRight 1s ease-out forwards; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

.laptop-ambient-glow { position: absolute; width: 80%; height: 80%; background: radial-gradient(circle, rgba(0, 210, 255, 0.15) 0%, rgba(4, 9, 20, 0) 70%); z-index: 1; filter: blur(40px); pointer-events: none; animation: pulseGlow 4s infinite alternate; }

@keyframes pulseGlow {
    from { opacity: 0.5; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.1); }
}

/* HeroBanner Resmi */
.hero-banner-image { 
    width: 100%; max-width: 600px; height: auto; border-radius: 20px;
    object-fit: cover; position: relative; z-index: 4; 
    box-shadow: 0 0 40px rgba(0, 210, 255, 0.3), 0 20px 40px rgba(0,0,0,0.5);
    border: 2px solid rgba(0, 210, 255, 0.2);
    animation: floatImage 6s ease-in-out infinite;
}

@keyframes floatImage {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

.neon-wave { position: absolute; width: 120%; height: 350px; border-radius: 50%; border: 2px solid transparent; z-index: 2; pointer-events: none; }
.wave-blue { --rot: -12deg; border-top-color: var(--neon-blue); top: 5%; left: -10%; transform: rotate(var(--rot)); filter: drop-shadow(0 -5px 15px rgba(0, 210, 255, 0.6)); animation: pulseWave 4s ease-in-out infinite; }
.wave-yellow { --rot: -8deg; border-bottom-color: var(--neon-yellow); bottom: 5%; left: -10%; transform: rotate(var(--rot)); filter: drop-shadow(0 5px 15px rgba(255, 204, 0, 0.6)); animation: pulseWave 5s ease-in-out infinite alternate; }

@keyframes pulseWave {
    0%, 100% { transform: scale(1) rotate(var(--rot)); }
    50% { transform: scale(1.05) rotate(calc(var(--rot) + 5deg)); }
}

.css-macbook { position: relative; z-index: 5; transform: rotateY(-15deg) rotateX(5deg); animation: floatAnimation 6s ease-in-out infinite; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.7)); will-change: transform; }
.macbook-screen { width: 480px; height: 300px; background: #060b14; border: 14px solid #111; border-radius: 16px 16px 0 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 20px rgba(0, 210, 255, 0.1); }
.macbook-camera { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: #333; border-radius: 50%; }
.macbook-content { width: 85%; text-align: left; }
.mockup-logo { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.macbook-content h2 { font-size: 28px; color: #fff; line-height: 1.3; margin-bottom: 20px; }

/* İmleç (Cursor) Animasyonu */
.mockup-line { width: 100px; height: 2px; background: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 210, 255, 0.5); position: relative; }
.mockup-line::after { content: ''; position: absolute; right: -10px; top: -10px; width: 3px; height: 20px; background-color: var(--neon-blue); animation: blinkCursor 1s step-end infinite; }

@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.macbook-base { width: 550px; height: 20px; background: linear-gradient(to bottom, #8a94a6, #4a5263); border-radius: 0 0 16px 16px; margin-left: -21px; position: relative; }
.macbook-notch { width: 90px; height: 8px; background: #333; margin: 0 auto; border-radius: 0 0 6px 6px; }

@keyframes floatAnimation { 
    0% { transform: translateY(0px) rotateY(-15deg) rotateX(5deg); } 
    50% { transform: translateY(-15px) rotateY(-15deg) rotateX(5deg); } 
    100% { transform: translateY(0px) rotateY(-15deg) rotateX(5deg); } 
}

/* =========================================
   SERVICES (YAYLANAN KARTLAR VE İKONLAR)
========================================= */
.services-section { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 80px; margin-bottom: 60px; }
.service-card { 
    background: var(--card-bg); border: 1px solid var(--card-border); padding: 40px 30px; 
    border-radius: 12px; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease, border-color 0.5s ease; 
    position: relative; overflow: hidden; will-change: transform; 
}
.service-card:hover { transform: translateY(-15px) scale(1.03); background: rgba(255, 255, 255, 0.04); z-index: 2; }
.border-blue:hover { border-color: var(--neon-blue); box-shadow: 0 15px 30px rgba(0, 210, 255, 0.2); }
.border-yellow:hover { border-color: var(--neon-yellow); box-shadow: 0 15px 30px rgba(255, 204, 0, 0.2); }

.icon { font-size: 32px; margin-bottom: 25px; display: inline-block; transition: 0.3s; }
.service-card:hover .icon { animation: bounceIcon 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes bounceIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px) scale(1.1); }
}

.icon-blue { color: var(--neon-blue); }
.icon-yellow { color: var(--neon-yellow); }
.service-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 15px; }
.service-card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 30px; }
.service-card a { text-decoration: none; font-size: 14px; font-weight: 500; transition: 0.3s ease; display: inline-block; }
.link-blue { color: var(--neon-blue); }
.link-yellow { color: var(--neon-yellow); }
.service-card a:hover { letter-spacing: 1px; transform: translateX(5px); }

/* =========================================
   PORTFOLYO VE MODAL (PÜRÜZSÜZ GEÇİŞLER)
========================================= */
.portfolio { padding: 60px 0; }
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-size: 42px; font-weight: 700; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
.project-card { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; border: 1px solid var(--card-border); transition: 0.4s ease; will-change: transform; }
.project-image { position: relative; height: 350px; width: 100%; overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.project-card:hover img, .project-card:focus img { transform: scale(1.15) rotate(2deg); filter: brightness(0.5); }

/* Hover durumunda sırayla beliren metinler */
.project-overlay { 
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; 
    background: linear-gradient(to top, rgba(4, 9, 20, 0.95), transparent); 
    transform: translateY(100%); opacity: 0; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
}
.project-card:hover .project-overlay, .project-card:focus .project-overlay { transform: translateY(0); opacity: 1; }
.project-card:hover, .project-card:focus { border-color: var(--neon-blue); box-shadow: 0 15px 35px rgba(0, 210, 255, 0.2); outline: none; }
.category { color: var(--neon-blue); font-size: 12px; font-weight: 600; letter-spacing: 2px; display: block; margin-bottom: 10px; transform: translateY(10px); transition: 0.5s 0.1s; opacity: 0; }
.project-overlay h3 { font-size: 22px; font-weight: 600; color: #fff; transform: translateY(10px); transition: 0.5s 0.2s; opacity: 0; }
.project-card:hover .category, .project-card:hover h3 { transform: translateY(0); opacity: 1; }

.portfolio-footer { text-align: center; }

/* Modal Animasyonları */
.modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(2, 5, 11, 0.9); align-items: center; justify-content: center; backdrop-filter: blur(8px); }
.modal-content { background-color: var(--bg-color); margin: auto; padding: 40px; border: 1px solid var(--neon-blue); border-radius: 15px; width: 80%; max-width: 600px; position: relative; box-shadow: 0 0 40px rgba(0, 210, 255, 0.3); animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); will-change: transform, opacity; }
.border-yellow-modal { border-color: var(--neon-yellow); box-shadow: 0 0 40px rgba(255, 204, 0, 0.3); }

@keyframes popIn { 
    from { transform: scale(0.8) translateY(50px); opacity: 0; } 
    to { transform: scale(1) translateY(0); opacity: 1; } 
}

.close-btn { color: var(--text-muted); position: absolute; top: 15px; right: 25px; font-size: 30px; font-weight: bold; cursor: pointer; transition: transform 0.3s, color 0.3s; background: none; border: none; }
.close-btn:hover { color: #fff; transform: rotate(90deg); }
.modal-tech { font-size: 13px; color: var(--text-muted); margin: 15px 0; padding-bottom: 15px; border-bottom: 1px solid var(--card-border); }
.modal-content p { line-height: 1.7; font-size: 15px; }

/* =========================================
   TEAM (EKİBİMİZ)
========================================= */
.team-section { padding: 60px 0; }
.team-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.team-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 40px 30px; width: 350px; max-width: 100%; text-align: center; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s; position: relative; overflow: hidden; will-change: transform; }
.team-card:hover { transform: translateY(-15px) scale(1.03); border-color: var(--neon-blue); box-shadow: 0 15px 35px rgba(0, 210, 255, 0.2); z-index: 2; }
.team-card:nth-child(2):hover { border-color: var(--neon-yellow); box-shadow: 0 15px 35px rgba(255, 204, 0, 0.2); }
.team-image { width: 110px; height: 110px; margin: 0 auto 25px auto; border-radius: 50%; background: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: center; border: 2px solid var(--card-border); transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.team-card:hover .team-image { border-color: var(--neon-blue); box-shadow: 0 0 20px rgba(0, 210, 255, 0.4); transform: scale(1.1); }
.team-card:nth-child(2):hover .team-image { border-color: var(--neon-yellow); box-shadow: 0 0 20px rgba(255, 204, 0, 0.4); transform: scale(1.1); }
.avatar-placeholder { font-size: 42px; font-weight: 700; }
.team-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 5px; }
.team-role { color: var(--neon-blue); font-size: 13px; font-weight: 600; letter-spacing: 1px; margin-bottom: 15px; }
.team-card:nth-child(2) .team-role { color: var(--neon-yellow); }
.team-desc { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

/* =========================================
   BLOG BÖLÜMÜ
========================================= */
.blog-section { padding: 60px 0 100px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; overflow: hidden; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s; will-change: transform; }
.blog-card:hover { transform: translateY(-10px) scale(1.02); border-color: var(--neon-blue); box-shadow: 0 15px 35px rgba(0, 210, 255, 0.15); z-index: 2; }
.blog-card:nth-child(2):hover { border-color: var(--neon-yellow); box-shadow: 0 15px 35px rgba(255, 204, 0, 0.15); }
.blog-image { width: 100%; height: 220px; overflow: hidden; }
.blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.blog-card:hover .blog-image img { transform: scale(1.1) rotate(1deg); filter: brightness(1.1); }
.blog-content { padding: 30px; }
.blog-date { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; font-weight: 500; letter-spacing: 1px; }
.blog-content h3 { font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 15px; color: var(--text-main); transition: 0.3s; }
.blog-card:hover .blog-content h3 { color: var(--neon-blue); }
.blog-card:nth-child(2):hover .blog-content h3 { color: var(--neon-yellow); }
.blog-content p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 25px; }
.blog-content a { font-size: 14px; font-weight: 600; text-decoration: none; transition: 0.3s ease; display: inline-block; }
.blog-card:hover a { transform: translateX(5px); }

/* =========================================
   İLETİŞİM (CONTACT) BÖLÜMÜ
========================================= */
.contact-section { padding: 80px 0; background: var(--bg-darker); border-top: 1px solid var(--card-border); }
.contact-container { display: flex; gap: 60px; align-items: center; }
.contact-info { flex: 1; }
.contact-info h2 { font-size: 42px; line-height: 1.2; font-weight: 700; margin-bottom: 20px; }
.contact-details { margin-top: 40px; }
.detail-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; font-size: 16px; color: var(--text-muted); transition: transform 0.3s ease; }
.detail-item:hover { transform: translateX(10px); color: #fff; }
.detail-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; color: var(--neon-blue); font-size: 18px; transition: 0.3s; }
.detail-item:hover .detail-icon { background: var(--neon-blue); color: var(--bg-color); box-shadow: 0 0 15px rgba(0,210,255,0.5); transform: rotate(15deg); }

.contact-form-wrapper { flex: 1; background: var(--card-bg); border: 1px solid var(--card-border); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: 0.4s; }
.contact-form-wrapper:hover { border-color: rgba(255,255,255,0.2); box-shadow: 0 15px 40px rgba(0,0,0,0.5); transform: translateY(-5px); }
.input-group { margin-bottom: 20px; }
.input-group input, .input-group textarea { width: 100%; padding: 15px 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-border); border-radius: 10px; color: var(--text-main); font-family: var(--font-main); font-size: 14px; transition: 0.3s; }
.input-group input:focus, .input-group textarea:focus { outline: none; border-color: var(--neon-blue); background: rgba(0, 210, 255, 0.05); box-shadow: 0 0 15px rgba(0,210,255,0.1); transform: scale(1.02); }
.btn-submit { 
    position: relative; overflow: hidden; width: 100%; padding: 16px; background: var(--neon-blue); 
    color: var(--bg-color); font-weight: 600; font-size: 15px; border: none; border-radius: 10px; 
    cursor: pointer; transition: 0.3s; letter-spacing: 1px; 
}
.btn-submit:hover { background: var(--text-main); box-shadow: 0 0 25px rgba(0, 210, 255, 0.5); transform: translateY(-3px); }

/* =========================================
   FOOTER (ALT BİLGİ)
========================================= */
.footer-area { background: #020408; padding-top: 60px; border-top: 1px solid var(--card-border); }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.footer-brand { max-width: 300px; }
.footer-brand .logo-text { font-size: 24px; font-weight: 700; color: #fff; text-decoration: none; display: inline-block; margin-bottom: 15px; transition: 0.3s; }
.footer-brand .logo-text:hover { text-shadow: 0 0 10px rgba(0,210,255,0.5); letter-spacing: 1px; }
.footer-brand p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.footer-links h4, .footer-social h4 { color: #fff; font-size: 16px; margin-bottom: 20px; font-weight: 600; }
.footer-links a { display: block; color: var(--text-muted); text-decoration: none; margin-bottom: 10px; font-size: 14px; transition: 0.3s; }
.footer-links a:hover { color: var(--neon-blue); padding-left: 10px; }
.social-icons { display: flex; gap: 15px; }
.social-icons a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: var(--text-main); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; font-weight: 600; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.social-icons a:hover { background: var(--neon-blue); color: var(--bg-color); transform: translateY(-5px) scale(1.1); box-shadow: 0 5px 15px rgba(0,210,255,0.4); }
.footer-bottom { text-align: center; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.05); color: var(--text-muted); font-size: 13px; }

/* =========================================
   SABİT İLETİŞİM BUTONLARI (WP & INSTAGRAM)
========================================= */
.whatsapp-btn, .instagram-btn {
    position: fixed; right: 30px; color: #fff; width: 60px; height: 60px; 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; 
    z-index: 999; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    text-decoration: none; will-change: box-shadow, transform;
}

.whatsapp-btn { 
    bottom: 30px; background: #25D366; 
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4); 
    animation: pulseWp 2s infinite; 
}
.whatsapp-btn:hover { transform: translateY(-10px) scale(1.1); box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6); animation: none; }

.instagram-btn { 
    bottom: 105px; /* WhatsApp butonunun hemen üstünde */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    box-shadow: 0 10px 20px rgba(220, 39, 67, 0.4); 
    animation: pulseIg 2s infinite; animation-delay: 1s; 
}
.instagram-btn:hover { transform: translateY(-10px) scale(1.1); box-shadow: 0 15px 30px rgba(220, 39, 67, 0.6); animation: none; }

@keyframes pulseWp { 
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); } 
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } 
}
@keyframes pulseIg { 
    0% { box-shadow: 0 0 0 0 rgba(220, 39, 67, 0.6); } 
    70% { box-shadow: 0 0 0 15px rgba(220, 39, 67, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(220, 39, 67, 0); } 
}

/* =========================================
   GELİŞMİŞ SCROLL (KAYDIRMA) ANİMASYONLARI
========================================= */
.reveal { 
    opacity: 0; 
    /* Aşağıdan ve biraz küçükten başlar */
    transform: translateY(60px) scale(0.95); 
    /* cubic-bezier ile çok pürüzsüz ve hafif yaylanarak yerine oturur */
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    will-change: opacity, transform; 
}
.reveal.active { opacity: 1; transform: translateY(0) scale(1); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* =========================================
   RESPONSIVE (MOBİL VE TABLET)
========================================= */
@media (max-width: 1024px) {
    .hero { flex-direction: column; text-align: center; gap: 50px; margin-top: 100px; }
    .hero-content { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
    .hero-actions { justify-content: center; }
    .hero-image { min-height: auto; width: 100%; padding: 40px 0; }
    .css-macbook { transform: scale(0.8); animation: none; }
    .neon-wave { display: none; }
    .services-section { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-container { flex-direction: column; }
}

@media (max-width: 768px) {
    .hamburger { display: block; }
    .nav-btn { display: none; }
    .nav-links { position: absolute; top: 100%; left: -100%; width: 100%; background: rgba(4, 9, 20, 0.98); backdrop-filter: blur(10px); flex-direction: column; text-align: center; padding: 40px 0; transition: 0.4s ease; border-bottom: 1px solid var(--card-border); }
    .nav-links.active { left: 0; }
    .toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .toggle span:nth-child(2) { opacity: 0; }
    .toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .hero-content h1 { font-size: 36px; }
    .hero-actions { flex-direction: column; gap: 20px; }
    .css-macbook { transform: scale(0.65); }
    .services-section { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .section-header h2 { font-size: 32px; }
    .bg-glow { width: 300px; height: 300px; filter: blur(150px); }
    .contact-info h2 { font-size: 32px; }
    .footer-content { flex-direction: column; text-align: center; }
    .footer-brand { max-width: 100%; margin: 0 auto; }
    .social-icons { justify-content: center; }
    
    /* Mobil Sabit İletişim Butonları */
    .whatsapp-btn, .instagram-btn { right: 20px; width: 50px; height: 50px; }
    .whatsapp-btn { bottom: 20px; }
    .instagram-btn { bottom: 85px; } 
    .whatsapp-btn svg, .instagram-btn svg { width: 24px; height: 24px; }
    
    .modal-content { width: 95%; padding: 25px; }
}

@media (max-width: 480px) {
    .header { padding: 15px 0; }
    .hero-content h1 { font-size: 30px; }
    .css-macbook { transform: scale(0.55); }
    .btn-outline-yellow { display: block; text-align: center; width: 100%; }
    .contact-form-wrapper { padding: 25px; }
}