<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İletişim | ARTDEK | Yeni Nesil İnşaat & Dekorasyon</title>
    <!-- Font Awesome için CDN bağlantısı -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
        
        :root {
            --bg-color: #f5f1e9;
            --text-color: #3e2a1e;
            --accent-color: #9b6647;
            --accent-color-alt: #5a4130;
            --light-wood: #d7c0a0;
            --medium-wood: #b68d58;
            --dark-wood: #6e4c1e;
            --transition: cubic-bezier(0.76, 0, 0.24, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: default; /* Default cursor for all elements */
        }
        
        body {
            font-family: 'Cormorant Garamond', serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            /* cursor: none; */ /* Remove custom cursor style */
            overflow-x: hidden;
            background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
            background-blend-mode: overlay;
        }
        
        /* Add cursor styles for interactive elements */
        a, button, input[type="button"], input[type="submit"] {
            cursor: pointer;
        }
        
        input, textarea, select {
            cursor: text;
        }
        
        @keyframes reveal {
            0% { width: 0%; }
            100% { width: 100%; }
        }
        
        .letter {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.1s forwards;
            color: var(--dark-wood);
        }
        
        .letter:nth-child(2n) {
            color: var(--accent-color);
        }
        
        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Grid Background - Replaced with Wood Texture */
        .grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.1;
            pointer-events: none;
            background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
            background-repeat: repeat;
        }
        
        /* Noise Overlay - Changed to wood grain */
        .noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://www.transparenttextures.com/patterns/wood-grain.png');
            opacity: 0.2;
            z-index: 1;
            pointer-events: none;
        }
        
        .logo {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            text-decoration: none;
            color: white;
        }
        
        .logo span {
            color: white;
        }
        
        .nav-toggle {
            width: 40px;
            height: 24px;
            position: relative;
            background: transparent;
            border: none;
            cursor: pointer;
            z-index: 102;
        }
        
        .nav-toggle span {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #fff;
            transition: all 0.3s var(--transition);
            border-radius: 1px;
        }
        
        .nav-toggle span:nth-child(1) {
            top: 0;
        }
        
        .nav-toggle span:nth-child(2) {
            top: 50%;
            transform: translateY(-50%);
        }
        
        .nav-toggle span:nth-child(3) {
            bottom: 0;
        }
        
        .nav-toggle.active span:nth-child(1) {
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
        }
        
        .nav-toggle.active span:nth-child(2) {
            opacity: 0;
        }
        
        .nav-toggle.active span:nth-child(3) {
            bottom: 50%;
            transform: translateY(50%) rotate(-45deg);
        }
        
        /* Navigation */
        .navigation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--light-wood);
            background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
            background-blend-mode: overlay;
            z-index: 101;
            clip-path: circle(0% at calc(100% - 60px) 60px);
            transition: clip-path 1s var(--transition);
        }
        
        @media (max-width: 768px) {
            .navigation {
                clip-path: circle(0% at calc(100% - 45px) 50px);
            }
            
            .navigation.active {
                clip-path: circle(150% at calc(100% - 45px) 50px);
            }
        }
        
        .navigation.active {
            clip-path: circle(150% at calc(100% - 60px) 60px);
        }
        
        .nav-items {
            list-style: none;
            text-align: center;
        }
        
        .nav-item {
            margin: 20px 0;
            overflow: hidden;
        }
        
        .nav-link {
            display: inline-block;
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.5rem, 6vw, 4rem);
            font-weight: 700;
            text-transform: uppercase;
            color: var(--accent-color-alt);
            text-decoration: none;
            transform: translateY(100%);
            transition: transform 0.5s var(--transition), color 0.3s;
            opacity: 0;
            border-bottom: 2px solid transparent;
        }
        
        .navigation.active .nav-link {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.5s;
        }
        
        .navigation.active .nav-item:nth-child(2) .nav-link {
            transition-delay: 0.6s;
        }
        
        .navigation.active .nav-item:nth-child(3) .nav-link {
            transition-delay: 0.7s;
        }
        
        .navigation.active .nav-item:nth-child(4) .nav-link {
            transition-delay: 0.8s;
        }
        
        .nav-link:hover {
            color: var (--dark-wood);
            border-bottom: 2px solid var(--dark-wood);
        }
        /* Page Header */
        .page-header {
            position: relative;
            height: 60vh;
            min-height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 5vw;
            margin-top: 0;
            text-align: center;
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
                        url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80') center/cover;
            box-shadow: none;
            overflow: hidden;
        }
        
        .page-header::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 100px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%23f5f1e9'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%23f5f1e9'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23f5f1e9'/%3E%3C/svg%3E") center bottom/cover no-repeat;
            transform: scaleY(-1);
        }

          .page-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 8vw, 4.5rem);
            font-weight: 700;
            color: var(--bg-color);
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s, transform 1s;
        }
        
        .page-title.active {
            opacity: 1;
            transform: translateY(0);
        }
          .page-subtitle {
            font-size: clamp(1rem, 2vw, 1.5rem);
            max-width: 800px;
            margin: 0 auto;
            margin-bottom: 80px;
            color: var(--bg-color);
            opacity: 0;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            transform: translateY(30px);
            transition: opacity 1s, transform 1s;
            transition-delay: 0.3s;
        }
        
        .page-subtitle.active {
            opacity: 0.9;
            transform: translateY(0);
        }
        
        /* Updated Contact Section */
        .contact-section {
            padding: 80px 5vw;
            position: relative;
            background-color: var(--bg-color);
            background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
            background-blend-mode: overlay;
        }
        
        .contact-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(182, 141, 88, 0.1) 0%, rgba(245, 241, 233, 0.1) 100%);
            z-index: 1;
        }
        
        .container {
            position: relative;
            max-width: 1400px;
            margin: 0 auto;
            z-index: 2;
        }
        
        .contact-flex-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 2rem;
        }
        
        .contact-info-wrapper {
            flex: 1;
            min-width: 350px;
        }
        
        .map-wrapper {
            flex: 1.5;
            min-width: 350px;
        }
        
        @media (max-width: 992px) {
            .contact-flex-container {
                flex-direction: column;
            }
            
            .contact-info-wrapper,
            .map-wrapper {
                width: 100%;
            }
        }
        
        .contact-form-container {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s, transform 1s;
            background-color: rgba(245, 241, 233, 0.8);
            padding: 40px;
            border-left: 5px solid var(--accent-color);
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .contact-form-container.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .contact-title {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 700;
            color: var(--accent-color-alt);
            margin-bottom: 2rem;
            border-bottom: 2px solid var(--accent-color);
            display: inline-block;
            padding-bottom: 5px;
        }
        
        .form-group {
            margin-bottom: 2rem;
            position: relative;
        }
        
        .form-control {
            width: 100%;
            padding: 15px 10px;
            background: rgba(255, 255, 255, 0.5);
            border: none;
            border-bottom: 2px solid var(--medium-wood);
            color: var(--text-color);
            font-family: 'Cormorant Garamond', serif;
            font-size: 1rem;
            transition: border-color 0.3s;
            box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .form-control:focus {
            outline: none;
            border-bottom-color: var(--accent-color);
            background: rgba(255, 255, 255, 0.8);
        }
        
        .form-control::placeholder {
            color: rgba(62, 42, 30, 0.5);
        }
        
        textarea.form-control {
            min-height: 150px;
            resize: none;
        }
        
        .form-label {
            position: absolute;
            top: 15px;
            left: 10px;
            color: rgba(62, 42, 30, 0.6);
            font-size: 1rem;
            transition: all 0.3s;
            pointer-events: none;
        }
        
        .form-control:focus ~ .form-label,
        .form-control:not(:placeholder-shown) ~ .form-label {
            top: -20px;
            left: 0;
            font-size: 0.8rem;
            color: var(--accent-color);
        }
        
        .form-submit {
            padding: 15px 30px;
            background: var(--accent-color);
            border: none;
            color: var(--bg-color);
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            transition: background 0.3s;
            position: relative;
            z-index: 1;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
        }
        
        .form-submit:hover {
            background: var(--accent-color-alt);
        }
        
        .contact-info-container {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s, transform 1s;
            transition-delay: 0.3s;
            background-color: rgba(245, 241, 233, 0.8);
            padding: 40px;
            border-right: 5px solid var(--accent-color);
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .contact-info-container.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .contact-info-list {
            list-style: none;
            margin-top: 2rem;
        }
        
        .contact-info-item {
            margin-bottom: 2rem;
            display: flex;
            align-items: flex-start;
        }
        
        .contact-icon {
            width: 50px;
            height: 50px;
            background-color: var(--light-wood);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1rem;
            color: var(--accent-color-alt);
            font-size: 1.2rem;
            flex-shrink: 0;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .contact-info-content {
            flex-grow: 1;
        }
        
        .contact-info-label {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--accent-color-alt);
            margin-bottom: 0.5rem;
        }
        
        .contact-info-value {
            font-size: 1.2rem;
            line-height: 1.6;
            color: var(--text-color);
        }
        
        .contact-info-value a {
            color: var(--text-color);
            text-decoration: none;
            border-bottom: 1px dotted var(--accent-color);
            transition: color 0.3s;
        }
        
        .contact-info-value a:hover {
            color: var(--accent-color);
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        .social-link {
            width: 40px;
            height: 40px;
            background-color: var(--light-wood);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--accent-color-alt);
            font-size: 1rem;
            transition: all 0.3s;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
        }
        
        .social-link:hover {
            background-color: var(--accent-color);
            color: var(--bg-color);
            transform: translateY(-3px);
        }
        
        /* Map Section Güncellemesi */
        .map-container {
            position: relative;
            height: 500px;
            overflow: hidden;
            border: 8px solid var(--light-wood);
            box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s, transform 1s;
            border-radius: 10px;
        }
        
        .map-container.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }
        
        /* Harita yükleme durumu için stil */
        .map-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(245, 241, 233, 0.9);
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            z-index: 10;
        }
        
        /* Footer */
        footer {
            position: relative;
            padding: 120px 5vw 40px;
            background-color: var(--accent-color-alt);
            color: var(--light-wood);
            background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
            background-blend-mode: overlay;
            overflow: hidden;
        }

        /* Dalga Efekti - Detay İnşaat tarzı */
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: var(--bg-color);
            clip-path: polygon(0 0, 100% 0, 100% 30px, 0 100px);
            z-index: 1;
        }
        
        .footer-content {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            margin-bottom: 60px;
        }
        
        .footer-logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
            color: var(--light-wood);
        }
        
        .footer-logo span {
            color: var(--medium-wood);
        }
        
        .footer-text {
            max-width: 400px;
            margin-bottom: 30px;
            font-size: 1.1rem;
            line-height: 1.6;
            opacity: 0.7;
            color: #f5f5f0; /* Lighter color that's more white/ivory */
        }
        
        .footer-social {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        
        /* Footer Sosyal Medya İkonları */
        .footer-social-links {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .footer-social-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(182, 141, 88, 0.2);
            border: 1px solid rgba(182, 141, 88, 0.4);
            border-radius: 50%;
            color: var(--light-wood);
            font-size: 1.2rem;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .footer-social-icon:hover {
            background-color: var(--medium-wood);
            color: var(--bg-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .footer-social-icon i {
            transition: transform 0.3s ease;
        }
        
        .footer-social-icon:hover i {
            transform: scale(1.1);
        }
        
        /* Footer Servis Yazısı */
        .footer-service-text {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            padding: 0;
            background: none;
            border: none;
            border-radius: 0;
            color: #f5f5f0;
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.3rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            max-width: none;
        }
        
        .footer-service-text:hover {
            background: none;
            border: none;
            transform: none;
            box-shadow: none;
        }
        
        .footer-service-text i {
            color: rgba(245, 241, 233, 0.7);
            font-size: 1.4rem;
            animation: rotate-tools 3s ease-in-out infinite;
        }
        
        @keyframes rotate-tools {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-10deg); }
            75% { transform: rotate(10deg); }
        }
        
        .footer-service-text span {
            flex: 1;
        }
        
        .footer-social {
            list-style: none;
            display: flex;
            gap: 20px;
        }
        
        .footer-social-link {
            color: var(--light-wood);
            text-decoration: none;
            font-size: 1.2rem;
            transition: color 0.3s;
        }
        
        .footer-social-link:hover {
            color: var(--medium-wood);
        }
        
        .footer-nav {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }
        
        @media (max-width: 768px) {
            .footer-nav {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 576px) {
            .footer-nav {
                grid-template-columns: 1fr;
            }
        }
        
        .footer-nav-section {
            margin-bottom: 30px;
        }
        
        .footer-nav-title {
            font-weight: 600;
            margin-bottom: 20px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Playfair Display', serif;
            color: var (--medium-wood);
            border-bottom: 1px solid var(--medium-wood);
            padding-bottom: 5px;
        }
        
        .footer-nav-links {
            list-style: none;
        }
        
        .footer-nav-item {
            margin-bottom: 10px;
        }
        
        .footer-nav-link {
            color: rgba(245, 241, 233, 0.7);
            text-decoration: none;
            font-size: 1.3rem;
            transition: color 0.3s;
        }
        
        .footer-bottom {
            padding-top: 30px;
            border-top: 1px solid rgba(215, 192, 160, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .copyright {
            font-size: 1.1rem;
            opacity: 0.7;
            color: #f5f5f0; /* Lighter color that's more white/ivory */
        }
        
        .bottom-links {
            display: flex;
            gap: 20px;
        }
        
        .bottom-link {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 1.1rem;
            transition: color 0.3s;
        }
        
        .bottom-link:hover {
            color: var(--accent-color);
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s, transform 1s;
        }
        
        .fade-in.active {
            opacity: 1;
            transform: translateY(0);
        }
        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding-top: 50px;
            padding-left: 30px;
            padding-right: 30px;
            padding-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background: rgba(0, 0, 0, 0);
            backdrop-filter: blur(0px);
            box-shadow: none;
            transition: all 0.3s ease;
        }

        /* Header scroll ile belirginleşme efekti */
        header.scrolled {
            backdrop-filter: blur(15px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
            border-bottom: 1px solid rgba(155, 102, 71, 0.3);
            background: #5a4130
        }
        
        @media (max-width: 768px) {
            header {
                padding: 20px 15px;
                width: 100vw;
                box-sizing: border-box;
            }
            
            .nav-toggle {
                right: 15px;
            }
            
            .header-contact {
                top: 5px !important;
                left: 15px !important;
                gap: 10px !important;
                position: absolute !important;
            }
            
            .contact-item {
                font-size: 1rem !important;
                gap: 4px!important;
            
            }
            
            .contact-item i {
                font-size: 0.65rem;
                width: 8px;
            }
        }
        
        .header-nav {
            display: none;
        }
        
        @media (min-width: 992px) {
            .header-nav {
                display: flex;
                gap: 2rem;
                align-items: center;
                margin-left: auto;
                margin-right: 1rem;
            }
        }
        
        .header-nav-link {
            color: #ffffff;
            text-decoration: none;
            font-family: 'Playfair Display', serif;
            font-size: 0.9rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 0.3rem 0.5rem;
            position: relative;
            transition: color 0.3s ease;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        }
        
        .header-nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--accent-color);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s var(--transition);
        }
        
        .header-nav-link:hover {
            color: var(--accent-color);
        }
        
        .header-nav-link:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }
        
        .header-nav-link.active {
            color: #ffffff;
        }
        
        .header-nav-link.active::after {
            transform: scaleX(1);
        }
        
        /* Header Contact Info */
        .header-contact {
            display: flex;
            align-items: center;
            gap: 20px;
            position: absolute;
            top: 8px;
            left: 30px;
        }
    
        
        .contact-item i {
            font-size: 0.75rem;
            color: var(--accent-color);
            width: 12px;
            text-align: center;
        }
        
        .contact-item span {
            transition: color 0.3s ease;
        }
        
        .contact-item:hover span {
            color: var(--accent-color);
        }
        
        /* Mail tıklanabilir olması için */
        a.contact-item:hover {
            text-decoration: none;
        }
        
        .contact-item-header{
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 1.2rem;
            color: white;
            font-family: 'Cormorant Garamond', serif;
            font-weight: 500;
            text-decoration: none;
            margin-bottom: 1.5rem;
        }

        .section-heading {
            font-family: 'Playfair Display', serif;
            font-size: clamp(1.8rem, 5vw, 2.5rem);
            color: var(--accent-color-alt);
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
        }
        .section-heading::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-color);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        .section-heading:hover::after {
            transform: scaleX(1);
        }
        
        .header-service-text {
            color: #ffffff;
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin-right: 1rem;
            overflow: hidden;
            position: relative;
            height: 1.3em;
            display: flex;
            align-items: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        }
        
        .header-service-text .letter {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px) rotateX(90deg);
            animation: letterDrop 0.6s ease-out forwards;
            animation-delay: var(--delay);
            transition: all 0.3s ease;
            color: #ffffff !important;
        }
        
        .header-service-text .letter.space {
            width: 0.3em;
        }
        
        @keyframes letterDrop {
            0% {
                opacity: 0;
                transform: translateY(30px) rotateX(90deg) scale(0.8);
            }
            50% {
                opacity: 0.7;
                transform: translateY(-5px) rotateX(45deg) scale(1.1);
            }
            100% {
                opacity: 1;
                transform: translateY(0) rotateX(0deg) scale(1);
            }
        }
        
        /* Header Social Media Icons */
        .header-social {
            position: absolute;
            top: 8px;
            right: 90px;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        @media (max-width: 991px) {
            .header-social {
                display: none;
            }
        }
        
        .header-social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background-color: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        .header-social-icon:hover {
            background-color: var(--accent-color);
            color: #ffffff;
            border-color: var(--accent-color);
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(155, 102, 71, 0.5);
        }

        @media (max-width: 992px) {
                .header-service-text {
                    display: none;
                }
            }
    
        
        @keyframes containerGlow {
            0%, 100% {
                box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
            }
            50% {
                box-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.3);
            }
        }

            /* WhatsApp Button */
        .whatsapp-button {
            position: fixed;
            width: 60px;
            height: 60px;
            bottom: 30px;
            right: 30px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50%;
            text-align: center;
            font-size: 30px;
            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
            transform: scale(1);
            cursor: pointer;
            animation: whatsapp-pulse 2s infinite;
            text-decoration: none;
        }
        
        .whatsapp-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #25d366;
            opacity: 0.5;
            z-index: -1;
            animation: whatsapp-pulse-border 2s infinite;
        }
        
        @keyframes whatsapp-pulse {
            0% {
                transform: scale(1);
            }
            70% {
                transform: scale(1);
                box-shadow: 0px 0px 0px 8px rgba(37, 211, 102, 0);
            }
            80% {
                transform: scale(1.1);
                box-shadow: 0px 0px 0px 0px rgba(37, 211, 102, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0px 0px 0px 0px rgba(37, 211, 102, 0);
            }
        }
        
        @keyframes whatsapp-pulse-border {
            0% {
                transform: scale(1);
                opacity: 0.6;
            }
            70% {
                transform: scale(1.5);
                opacity: 0;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        
        .whatsapp-button:hover {
            background-color: #128c7e;
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.3);
        }
        
        .whatsapp-button i {
            color: white;
        }
        
        @media (max-width: 768px) {
            .whatsapp-button {
                width: 50px;
                height: 50px;
                font-size: 25px;
                bottom: 20px;
                right: 20px;
            }
        }

        .footer-quality-box {
            margin-top: 25px;
            display: flex;
            gap: 15px;
            align-items: center;
            transition: all 0.3s ease;
        }

        .footer-quality-box:hover {
            transform: translateY(-3px);
        }

        .footer-quality-icon {
            font-size: 1.8rem;
            color: rgba(245, 241, 233, 0.7);
            flex-shrink: 0;
            animation: pulse 3s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; transform: scale(1.1); }
        }

        .footer-quality-text {
            flex: 1;
        }

        .footer-quality-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            color: #f5f5f0;
            margin-bottom: 6px;
            border-bottom: 1px dotted rgba(245, 241, 233, 0.3);
            display: inline-block;
            padding-bottom: 3px;
        }

        .footer-quality-description {
            font-size: 1rem;
            line-height: 1.5;
            color: rgba(245, 241, 233, 0.8);
        }

        @media (max-width: 768px) {
            .footer-quality-box {
                gap: 10px;
            }
            
            .footer-quality-icon {
                font-size: 1.4rem;
            }
            
            .footer-quality-title {
                font-size: 1.1rem;
            }
            
            .footer-quality-description {
                font-size: 0.9rem;
            }
        }
        .header-nav-dropdown {
            position: relative;
            display: flex;
            align-items: center;
            gap: 2px;
        }

        .dropdown-arrow {
            background: none;
            border: none;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            padding: 0 4px;
            display: flex;
            align-items: center;
            transition: color 0.2s;
        }

        .dropdown-arrow:focus,
        .dropdown-arrow:hover {
            transform: translateY(-2px) scale(1.12);
            z-index: 4;
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 110%;
            left: 0;
            min-width: 180px;
            background: #fff;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            z-index: 999;
            border-radius: 16px;
            padding: 10px 0;
        }

        .header-nav-dropdown.open .dropdown-menu {
            display: block;
        }
        .dropdown-item {
            display: block;
            padding: 10px 20px;
            color: var(--accent-color-alt);
            text-decoration: none;
            font-family: 'Playfair Display', serif;
            font-size: 1rem;
            transition: background 0.2s, color 0.2s;
            border-radius: 8px;
        }

        .dropdown-item:hover {
            background: var(--accent-color);
            color: #fff;
        }
         /* ...style tag'ının sonuna ekle... */
        .mobile-lang-switcher {
            display: none;
            gap: 8px;
            position: absolute;
            top: 8px;
            right: 50px;
            z-index: 105;
        }
         @media (max-width: 991px) {
            .mobile-lang-switcher {
                display: flex;
                margin-right: 10px;
                margin-top: 30px;
            }
        }
        header.header-hidden .mobile-lang-switcher {
            display: none !important;
        }
        /* Hamburger menü açıkken header içindeki üst elemanları gizle */
        header.header-hidden .header-contact,
        header.header-hidden .logo,
        header.header-hidden .mobile-lang-switcher {
            display: none !important;
        }
        header.header-hidden .nav-toggle {
            position: fixed !important;
            top: 20px !important;
            right: 20px !important;
            z-index: 1100 !important;
            display: block !important;
        }
    </style>
    <style>
        /* Nav toggle sadece mobilde görünsün, masaüstünde gizlensin */
        @media (min-width: 992px) {
        .nav-toggle {
            display: none !important;
        }
        }
        </style>
</head>
<body>

    <!-- Remove Custom Cursor -->
    <!-- <div class="cursor"></div> -->
    
    <!-- Grid Background (changed to wood texture) -->
    <div class="grid-bg"></div>
    
    <!-- Noise Overlay (changed to wood grain) -->
    <div class="noise"></div>
     <!-- Header -->
    <header>
        <div class="header-contact">
            <a href="tel:+905465209400" class="contact-item-header">
                <i class="fas fa-phone"></i>
                <span>+905465209400</span>
            </a>
            <a href="mailto:info@artdek.com.tr" class="contact-item-header">
                <i class="fas fa-envelope"></i>
                <span>info@artdek.com.tr</span>
            </a>
        </div>
        <div class="logo">ART<span>DEK</span></div>
        <div class="header-nav">
            <a href="index.html" class="header-nav-link" aria-label="Ana Sayfa">
                <i class="fas fa-home"></i>
            </a>
            <a href="aboutUs.html" class="header-nav-link" data-i18n="headerNavAboutUs">kurumsal</a>
            <div class="header-nav-dropdown">
                <a href="projects.html" class="header-nav-link" id="projects-link" data-i18n="headerNavProjects">Projeler</a>
                <button class="dropdown-arrow" id="dropdown-arrow" aria-label="Projeler Menüsü">
                    <i class="fas fa-caret-down"></i>
                </button>
                <div class="dropdown-menu" id="projects-dropdown">
                    <a href="projects.html?category=all" class="dropdown-item" data-i18n="dropdownItemAll">Tümü</a>
                    <a href="projects.html?category=mağaza" class="dropdown-item" data-i18n="dropdownItemStore">Mağaza</a>
                    <a href="projects.html?category=konut" class="dropdown-item" data-i18n="dropdownItemResidential">Konut</a>
                    <a href="projects.html?category=ofis" class="dropdown-item" data-i18n="dropdownItemOffice">Ofis</a>
                    <a href="projects.html?category=restoran" class="dropdown-item" data-i18n="dropdownItemRestaurant">Restoran</a>
                </div>
            </div>
            <a href="referance.html" class="header-nav-link" data-i18n="headerNavReferences">Referanslar</a>
            <a href="activity.html" class="header-nav-link" data-i18n="headerNavActivities">Faaliyet Alanlarımız</a>
            <a href="contact.html" class="header-nav-link active" data-i18n="headerNavContact">İletişim</a>
        </div>
        <div class="header-social">
            <div class="header-service-text" id="animated-service-text" data-i18n="headerServiceText">7/24 Bakım ve Onarım hizmetimiz vardır</div>
            <a href="https://www.facebook.com/artdekcomtr" class="header-social-icon" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="https://www.instagram.com/artdekdekorasyon/" class="header-social-icon" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <i class="fab fa-instagram"></i>
            </a>
            <div style="display: flex; gap: 8px; margin-left: 16px;">
                <button id="lang-tr" style="background: var(--accent-color); color: #fff; border: none; border-radius: 8px; padding: 4px 12px; cursor: pointer;">TR</button>
                <button id="lang-en" style="background: var(--accent-color-alt); color: #fff; border: none; border-radius: 8px; padding: 4px 12px; cursor: pointer;">EN</button>
            </div>
        </div>
        <div class="mobile-lang-switcher">
            <button id="lang-tr-mobile" style="background: var(--accent-color); color: #fff; border: none; border-radius: 8px; padding: 4px 12px; cursor: pointer;">TR</button>
            <button id="lang-en-mobile" style="background: var(--accent-color-alt); color: #fff; border: none; border-radius: 8px; padding: 4px 12px; cursor: pointer;">EN</button>
        </div>
        <button class="nav-toggle" type="button" aria-label="Toggle navigation menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </header>
    
    <!-- Navigation -->
    <nav class="navigation">
        <ul class="nav-items">
            <li class="nav-item"><a href="index.html" class="nav-link" data-i18n="headerNavHome">Ana Sayfa</a></li>
            <li class="nav-item"><a href="aboutUs.html" class="nav-link" data-i18n="headerNavAboutUs">kurumsal</a></li>
            <li class="nav-item"><a href="projects.html" class="nav-link" data-i18n="headerNavProjects">Projeler</a></li>
            <li class="nav-item"><a href="referance.html" class="nav-link" data-i18n="headerNavReferences">Referanslar</a></li>
            <li class="nav-item"><a href="activity.html" class="nav-link" data-i18n="headerNavActivities">Faaliyet Alanlarımız</a></li>
            <li class="nav-item"><a href="contact.html" class="nav-link" data-i18n="headerNavContact">İletişim</a></li>
        </ul>
    </nav>
    
    <!-- Page Header -->
    <section class="page-header">
        <h1 class="page-title" data-i18n="pageTitle">İLETİŞİM</h1>
        <p class="page-subtitle" data-i18n="pageSubtitle">Modern tasarım anlayışımız ve profesyonel ekibimizle hayalinizdeki yaşam alanlarını gerçeğe dönüştürmek için sizinle çalışmak istiyoruz.</p>
    </section>
    
    <!-- Updated Contact Section -->
    <section class="contact-section">
        <div class="container">
            <h2 class="section-heading" style="text-align: center; margin-bottom: 40px;" data-i18n="contactSectionTitle">BİZE ULAŞIN</h2>

            <div class="contact-flex-container">
                <!-- Contact Info Container -->
                <div class="contact-info-wrapper">
                    <div class="contact-info-container" style="height: 100%; margin: 0; background-color: #fff; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,0.1); border-left: 5px solid #a0816c; border-right: none;">
                        
                        <h2 class="contact-title" style="font-size: 28px; margin-bottom: 30px; color: #5c4535; border-bottom: 2px solid #a0816c; padding-bottom: 10px; font-weight: 700;" data-i18n="contactInfoTitle">İletişim Bilgilerimiz</h2>
                        
                        <div class="contact-info-item" style="display: flex; align-items: flex-start; margin-bottom: 25px;">
                            <div class="contact-icon" style="width: 50px; height: 50px; background-color: #f0e6d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fas fa-map-marker-alt" style="font-size: 20px; color: #a0816c;"></i>
                            </div>
                            <div>
                                <h3 class="contact-info-label" style="font-size: 20px; margin-bottom: 5px; color: #5c4535;" data-i18n="contactInfoAddressLabel">Adres</h3>
                                <p class="contact-info-value" style="font-size: 20px; line-height: 1.6; color: #666;">Ferah Mah. Mehmet Akif Ersoy Cad.<br>No:260/A-B Üsküdar, İstanbul</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item" style="display: flex; align-items: flex-start; margin-bottom: 25px;">
                            <div class="contact-icon" style="width: 50px; height: 50px; background-color: #f0e6d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fas fa-phone-volume" style="font-size: 20px; color: #a0816c;"></i>
                            </div>
                            <div>
                                <h3 class="contact-info-label" style="font-size: 20px; margin-bottom: 5px; color: #5c4535;" data-i18n="contactInfoPhoneLabel">Telefon</h3>
                                <p class="contact-info-value" style="font-size: 20px; line-height: 1.6; color: #666;">0(216) 401 13 13</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item" style="display: flex; align-items: flex-start; margin-bottom: 25px;">
                            <div class="contact-icon" style="width: 50px; height: 50px; background-color: #f0e6d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fas fa-envelope-open-text" style="font-size: 20px; color: #a0816c;"></i>
                            </div>
                            <div>
                                <h3 class="contact-info-label" style="font-size: 20px; margin-bottom: 5px; color: #5c4535;" data-i18n="contactInfoEmailLabel">E-posta</h3>
                                <p class="contact-info-value" style="font-size: 20px; line-height: 1.6; color: #666;">info@artdek.com.tr</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item" style="display: flex; align-items: flex-start; margin-bottom: 25px;">
                            <div class="contact-icon" style="width: 50px; height: 50px; background-color: #f0e6d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
                                <i class="fas fa-business-time" style="font-size: 20px; color: #a0816c;"></i>
                            </div>
                            <div>
                                <h3 class="contact-info-label" style="font-size: 20px; margin-bottom: 5px; color: #5c4535;" data-i18n="contactInfoHoursLabel">Çalışma Saatleri</h3>
                                <p class="contact-info-value" style="font-size: 20px; line-height: 1.6; color: #666;" data-i18n="contactInfoHoursValue1">Pazartesi - Cuma: 08:00 - 18:00</p>
                                <p class="contact-info-value" style="font-size: 20px; line-height: 1.6; color: #666;" data-i18n="contactInfoHoursValue2">Cumartesi: 08:00 - 12:00</p>
                            </div>
                        </div>
                        
                        <div class="social-links" style="margin-top: 30px; display: flex; justify-content: center;">
                            <a href="https://www.instagram.com/artdekdekorasyon/" class="social-link" style="display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #f0e6d9; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease;">
                                <i class="fab fa-instagram" style="font-size: 20px; color: #a0816c;"></i>
                            </a>
                            <a href="https://www.facebook.com/artdekcomtr" class="social-link" style="display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #f0e6d9; border-radius: 50%; margin: 0 10px; transition: all 0.3s ease;">
                                <i class="fab fa-facebook-f" style="font-size: 20px; color: #a0816c;"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Map Container - Güncellendi -->
                <div class="map-wrapper">
                    <div class="map-container" style="height: 100%; margin: 0; opacity: 1; transform: none; border-radius: 10px;">
                        <div class="map-loading" id="map-loading">
                            <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: var(--accent-color); margin-bottom: 1rem;"></i>
                            <p data-i18n="mapLoading">Harita yükleniyor...</p>
                        </div>
                        <iframe 
                            id="google-map"
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3010.8995051558795!2d29.068174676171873!3d41.023851271341046!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac8d64184c11f%3A0xc9a5ef7ee81abe81!2sFerah%2C%20Mehmet%20Akif%20Ersoy%20Cd.%20No%3A260%2C%2034692%20%C3%9Csk%C3%BCdar%2F%C4%B0stanbul!5e0!3m2!1str!2str!4v1694609023457!5m2!1str!2str" 
                            width="100%" 
                            height="100%" 
                            style="border:0;" 
                            allowfullscreen="" 
                            loading="lazy" 
                            referrerpolicy="no-referrer-when-downgrade"
                            onload="hideMapLoading()"
                            onerror="showMapError()">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div>
                <div class="footer-logo">ART<span>DEK</span></div>
                <p class="footer-text" data-i18n="footerText">Yenilikçi mimari çözümler ve modern tasarım anlayışıyla hayalinizdeki yaşam alanlarını gerçeğe dönüştürüyoruz.</p>
                
                <!-- 7/24 Servis Yazısı -->
                <div class="footer-service-text">
                    <i class="fas fa-tools"></i>
                    <span id="animated-service-text" data-i18n="footerServiceText">7/24 Bakım ve Onarım hizmetimiz vardır</span>
                </div>
                
                <!-- Sosyal Medya İkonları -->
                <div class="footer-social-links">
                    <a href="https://www.instagram.com/artdekdekorasyon/" class="footer-social-icon" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.facebook.com/artdekcomtr" class="footer-social-icon" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                </div>

                <div class="footer-quality-box">
                    <div class="footer-quality-icon">
                        <i class="fas fa-gem"></i>
                    </div>
                    <div class="footer-quality-text">
                        <h4 class="footer-quality-title" data-i18n="footerQualityTitle">Kalite Detaylarda Gizlidir</h4>
                        <p class="footer-quality-description" data-i18n="footerQualityDescription">Her projemizde en ince ayrıntıya kadar özenle çalışıyor, kusursuz sonuçlar için titizlikle uğraşıyoruz.</p>
                    </div>
                </div>
            </div>
            <div class="footer-nav">
                <div class="footer-nav-section">
                    <h4 class="footer-nav-title" data-i18n="footerNavProjectsTitle">Projeler</h4>
                    <ul class="footer-nav-links">
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavResidentialProjects">Konut Projeleri</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavCommercialStructures">Ticari Yapılar</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavOfficeDesigns">Ofis Tasarımları</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavStoreDesigns">Mağaza Tasarımları</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavRestaurantDesigns">Restoran Tasarımları</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavVillaProjects">Villa Projeleri</span></li>
                    </ul>
                </div>
                <div class="footer-nav-section">
                    <h4 class="footer-nav-title" data-i18n="footerNavServicesTitle">Hizmetler</h4>
                    <ul class="footer-nav-links">
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavArchitecturalDesign">Mimari Tasarım</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavInteriorArchitecture">İç Mimari</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link" data-i18n="footerNavConsultancy">Danışmanlık</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p class="copyright">&copy; 2025 ARTDEK. Tüm hakları saklıdır.</p>
            <div class="bottom-links">
                <a href="gizlilik-politikasi.html" class="bottom-link" data-i18n="footerPrivacyPolicy">Gizlilik Politikası</a>
                <a href="kullanim-sartlari.html" class="bottom-link" data-i18n="footerTermsOfUse">Kullanım Şartları</a>
                <a href="cerez-politikasi.html" class="bottom-link" data-i18n="footerCookiePolicy">Çerez Politikası</a>
            </div>
        </div>
    </footer>
     <!-- WhatsApp Button -->
    <a href="https://wa.me/905465209400" class="whatsapp-button" target="__blank" rel="noopener noreferrer" aria-label="WhatsApp ile İletişime Geçin">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- JavaScript - Güncellenmiş ve optimize edilmiş -->
    <script>
        // Initialize animated service text when page loads
        window.addEventListener('load', function() {
            initAnimatedServiceText();
        });
        
        // Animated Service Text Function
        function initAnimatedServiceText() {
            const serviceText = document.getElementById('animated-service-text');
            if (!serviceText) return;
            
            const text = serviceText.textContent;
            serviceText.innerHTML = '';
            
            // Her harfi span elementi ile sar
            text.split('').forEach((char, index) => {
                const span = document.createElement('span');
                span.classList.add('letter');
                
                if (char === ' ') {
                    span.classList.add('space');
                    span.innerHTML = '&nbsp;';
                } else {
                    span.textContent = char;
                }
                
                // Her harf için farklı delay
                span.style.setProperty('--delay', `${index * 0.05}s`);
                serviceText.appendChild(span);
            });
            
            // Tekrar animasyon için interval
            setInterval(() => {
                restartAnimation();
            }, 8000); // 8 saniyede bir tekrar
        }
        
        function restartAnimation() {
            const letters = document.querySelectorAll('#animated-service-text .letter');
            letters.forEach((letter, index) => {
                letter.style.animation = 'none';
                letter.offsetHeight; // Reflow trigger
                letter.style.animation = null;
                letter.style.setProperty('--delay', `${index * 0.05}s`);
            });
        }
        
        // Harita yükleme fonksiyonları
        function hideMapLoading() {
            const loadingElement = document.getElementById('map-loading');
            if (loadingElement) {
                loadingElement.style.display = 'none';
            }
        }
        
        function showMapError() {
            const loadingElement = document.getElementById('map-loading');
            if (loadingElement) {
                loadingElement.innerHTML = `
                    <i class="fas fa-exclamation-triangle" style="font-size: 2rem; color: #e74c3c; margin-bottom: 1rem;"></i>
                    <p>Harita yüklenirken bir hata oluştu.</p>
                    <p style="font-size: 0.9rem; margin-top: 0.5rem;">Lütfen sayfayı yenileyin veya daha sonra tekrar deneyin.</p>
                `;
            }
        }
        
        // Loading Overlay
        window.addEventListener('load', function() {
            const pageTitle = document.querySelector('.page-title');
            const pageSubtitle = document.querySelector('.page-subtitle');
            
            if (pageTitle) {
                pageTitle.classList.add('active');
            }
            if (pageSubtitle) {
                pageSubtitle.classList.add('active');
            }
            
            // Harita yükleme kontrolü
            setTimeout(() => {
                const mapFrame = document.getElementById('google-map');
                if (mapFrame && mapFrame.contentDocument) {
                    hideMapLoading();
                }
            }, 3000); // 3 saniye sonra yükleme mesajını gizle
        });
        
        // Navigation Toggle
        const navToggle = document.querySelector('.nav-toggle');
        const navigation = document.querySelector('.navigation');
        const navLinks = document.querySelectorAll('.nav-link');
        
        navToggle.addEventListener('click', () => {
            navToggle.classList.toggle('active');
            navigation.classList.toggle('active');
            // Hamburger menü açıkken header'a .header-hidden ekle
            const header = document.querySelector('header');
            if (navigation.classList.contains('active')) {
                header.classList.add('header-hidden');
            } else {
                header.classList.remove('header-hidden');
            }
        });
        
        if (navLinks.length > 0) {
            navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    if (navToggle && navigation) {
                        navToggle.classList.remove('active');
                        navigation.classList.remove('active');
                    }
                });
            });
        }
        
        // Scroll Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px"
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                }
            });
        }, observerOptions);
        
        const animatedElements = document.querySelectorAll('.contact-form-container, .contact-info-container, .map-container, .fade-in');
        
        if (animatedElements.length > 0) {
            animatedElements.forEach(element => {
                if (element) {
                    observer.observe(element);
                }
            });
        }
        
        // Console hatalarını yakalama
        window.addEventListener('error', function(e) {
            console.log('Yakalanan hata:', e.error);
            // Google Maps hatalarını görmezden gel
            if (e.error && e.error.message && e.error.message.includes('main.js')) {
                e.preventDefault();
                return false;
            }
        });

        // Header Scroll Effect - Ana sayfadaki gibi blur efekti
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        document.addEventListener('DOMContentLoaded', function() {
    const dropdownWrapper = document.querySelector('.header-nav-dropdown');
    const dropdownArrow = document.getElementById('dropdown-arrow');
    const projectsLink = document.getElementById('projects-link');
    const dropdownMenu = document.getElementById('projects-dropdown');
    
    if (dropdownArrow && dropdownWrapper && dropdownMenu && projectsLink) {
        
        // Hem ok hem de projeler linkine tıklama eventi
        function toggleDropdown(e) {
            e.preventDefault();
            e.stopPropagation();
            dropdownWrapper.classList.toggle('open');
        }
        
        // Ok butonuna tıklama
        dropdownArrow.addEventListener('click', toggleDropdown);
        
        // Projeler linkine tıklama
        projectsLink.addEventListener('click', toggleDropdown);
        
        // Hover ile açma/kapama - delay ile
        let hoverTimeout;
        
        dropdownWrapper.addEventListener('mouseenter', function() {
            clearTimeout(hoverTimeout);
            dropdownWrapper.classList.add('open');
        });
        
        dropdownWrapper.addEventListener('mouseleave', function() {
            // Kısa bir delay ekleyerek menüye geçiş için zaman tanı
            hoverTimeout = setTimeout(function() {
                dropdownWrapper.classList.remove('open');
            }, 100); // 100ms delay
        });
        
        // Menü dışına tıklanınca kapat
        document.addEventListener('click', function(e) {
            if (!dropdownWrapper.contains(e.target)) {
                dropdownWrapper.classList.remove('open');
            }
        });
        
        // Escape tuşu ile kapat
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                dropdownWrapper.classList.remove('open');
            }
        });
        
        // Dropdown item'lara tıklandığında menüyü kapat
        const dropdownItems = dropdownMenu.querySelectorAll('.dropdown-item');
        dropdownItems.forEach(item => {
            item.addEventListener('click', function() {
                dropdownWrapper.classList.remove('open');
            });
        });
    }
});
        const translations = {
            tr: {
                pageTitle: "İletişim",
                pageSubtitle: "Modern tasarım anlayışımız ve profesyonel ekibimizle hayalinizdeki yaşam alanlarını gerçeğe dönüştürmek için sizinle çalışmak istiyoruz.",
                contactSectionTitle: "BİZE ULAŞIN",
                contactInfoTitle: "İletişim Bilgilerimiz",
                contactInfoAddressLabel: "Adres",
                contactInfoPhoneLabel: "Telefon",
                contactInfoEmailLabel: "E-posta",
                contactInfoHoursLabel: "Çalışma Saatleri",
                contactInfoHoursValue1: "Pazartesi - Cuma: 08:00 - 18:00",
                contactInfoHoursValue2: "Cumartesi: 08:00 - 12:00",
                mapLoading: "Harita yükleniyor...",
                storeProject: "Mağaza Projesi",
                locationLabel: "Konum",
                completionLabel: "Tamamlanma",
                areaLabel: "Alan",
                project: "Proje",
                projectValue: "Restaurant",
                client: "Müşteri",
                clientValue: "Mürver Restaurant",
                team: "Ekip",
                teamValue: "Artdek Dekorasyon",
                location: "Konum",
                locationValue: "Karaköy, İstanbul",
                date: "Tarih",
                dateValue: "2025",
                area: "Metraj",
                areaValue: "600m²",
                footerText: "Yenilikçi mimari çözümler ve modern tasarım anlayışıyla hayalinizdeki yaşam alanlarını gerçeğe dönüştürüyoruz.",
                footerServiceText: "7/24 Bakım ve Onarım hizmetimiz vardır",
                footerQualityTitle: "Kalite Detaylarda Gizlidir",
                footerQualityDescription: "Her projemizde en ince ayrıntıya kadar özenle çalışıyor, kusursuz sonuçlar için titizlikle uğraşıyoruz.",
                footerNavProjectsTitle: "Projeler",
                footerNavResidentialProjects: "Konut Projeleri",
                footerNavCommercialStructures: "Ticari Yapılar",
                footerNavOfficeDesigns: "Ofis Tasarımları",
                footerNavStoreDesigns: "Mağaza Tasarımları",
                footerNavRestaurantDesigns: "Restoran Tasarımları",
                footerNavVillaProjects: "Villa Projeleri",
                footerNavServicesTitle: "Hizmetler",
                footerNavArchitecturalDesign: "Mimari Tasarım",
                footerNavInteriorArchitecture: "İç Mimari",
                footerNavConsultancy: "Danışmanlık",
                footerPrivacyPolicy: "Gizlilik Politikası",
                footerTermsOfUse: "Kullanım Şartları",
                footerCookiePolicy: "Çerez Politikası",
                headerNavHome: "Ana Sayfa",
                headerNavAboutUs: "Kurumsal",
                headerNavProjects: "Projeler",
                headerNavReferences: "Referanslar",
                headerNavActivities: "Faaliyet Alanlarımız",
                headerNavContact: "İletişim",
                headerServiceText: "7/24 Bakım ve Onarım hizmetimiz vardır",
                dropdownItemAll: "Tümü",
                dropdownItemStore: "Mağaza",
                dropdownItemResidential: "Konut",
                dropdownItemOffice: "Ofis",
                dropdownItemRestaurant: "Restoran"
                
            },
            en: {
                pageTitle: "Contact",
                pageSubtitle: "We want to work with you to turn your dream living spaces into reality with our modern design approach and professional team.",
                contactSectionTitle: "GET IN TOUCH",
                contactInfoTitle: "Contact Information",
                contactInfoAddressLabel: "Address",
                contactInfoPhoneLabel: "Phone",
                contactInfoEmailLabel: "Email",
                contactInfoHoursLabel: "Working Hours",
                contactInfoHoursValue1: "Monday - Friday: 08:00 - 18:00",
                contactInfoHoursValue2: "Saturday: 08:00 - 12:00",
                mapLoading: "Map is loading...",
                storeProject: "Store Project",
                locationLabel: "Location",
                completionLabel: "Completion",
                areaLabel: "Area",
                footerText: "Transforming your dream living spaces into reality with innovative architectural solutions and modern design approach.",
                footerServiceText: "We offer 24/7 Maintenance and Repair services",
                footerQualityTitle: "Quality is in the Details",
                footerQualityDescription: "We meticulously work on every detail in our projects, striving for flawless results.",
                footerNavProjectsTitle: "Projects",
                footerNavResidentialProjects: "Residential Projects",
                footerNavCommercialStructures: "Commercial Structures",
                footerNavOfficeDesigns: "Office Designs",
                footerNavStoreDesigns: "Store Designs",
                footerNavRestaurantDesigns: "Restaurant Designs",
                footerNavVillaProjects: "Villa Projects",
                footerNavServicesTitle: "Services",
                footerNavArchitecturalDesign: "Architectural Design",
                footerNavInteriorArchitecture: "Interior Architecture",
                footerNavConsultancy: "Consultancy",
                footerPrivacyPolicy: "Privacy Policy",
                footerTermsOfUse: "Terms of Use",
                footerCookiePolicy: "Cookie Policy",
                headerNavHome: "Home",
                headerNavAboutUs: "About Us",
                headerNavProjects: "Projects",
                headerNavReferences: "References",
                headerNavActivities: "Our Actıvıtıes",
                headerNavContact: "Contact",
                headerServiceText: "We offer 24/7 Maintenance and Repair services",
                dropdownItemAll: "All",
                dropdownItemStore: "Store",
                dropdownItemResidential: "Residential",
                dropdownItemOffice: "Office",
                dropdownItemRestaurant: "Restaurant"

            }
        };
        // Initialize animated service text when page loads
        window.addEventListener('load', function() {
            initAnimatedServiceText();
        });
        
        // Animated Service Text Function
        function initAnimatedServiceText() {
            const serviceText = document.getElementById('animated-service-text');
            if (!serviceText) return;
            
            const text = serviceText.textContent;
            serviceText.innerHTML = '';
            
            // Her harfi span elementi ile sar
            text.split('').forEach((char, index) => {
                const span = document.createElement('span');
                span.classList.add('letter');
                
                if (char === ' ') {
                    span.classList.add('space');
                    span.innerHTML = '&nbsp;';
                } else {
                    span.textContent = char;
                }
                
                // Her harf için farklı delay
                span.style.setProperty('--delay', `${index * 0.05}s`);
                serviceText.appendChild(span);
            });
            
            // Tekrar animasyon için interval
            setInterval(() => {
                restartAnimation();
            }, 8000); // 8 saniyede bir tekrar
        }
        
        function restartAnimation() {
            const letters = document.querySelectorAll('#animated-service-text .letter');
            letters.forEach((letter, index) => {
                letter.style.animation = 'none';
                letter.offsetHeight; // Reflow trigger
                letter.style.animation = null;
                letter.style.setProperty('--delay', `${index * 0.05}s`);
            });
        }
        function setLanguage(lang) {
            localStorage.setItem('selectedLanguage', lang);
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                if (translations[lang][key]) {
                    el.textContent = translations[lang][key];
                }
            });
            // Masaüstü butonları
            if (document.getElementById('lang-tr')) document.getElementById('lang-tr').style.opacity = lang === 'tr' ? '1' : '0.6';
            if (document.getElementById('lang-en')) document.getElementById('lang-en').style.opacity = lang === 'en' ? '1' : '0.6';
            // Mobil butonlar
            if (document.getElementById('lang-tr-mobile')) document.getElementById('lang-tr-mobile').style.opacity = lang === 'tr' ? '1' : '0.6';
            if (document.getElementById('lang-en-mobile')) document.getElementById('lang-en-mobile').style.opacity = lang === 'en' ? '1' : '0.6';

            // Animasyonlu servis metni için tekrar başlat
            if (document.getElementById('animated-service-text')) {
                initAnimatedServiceText();
            }
        }
        document.getElementById('lang-tr-mobile').addEventListener('click', () => setLanguage('tr'));
        document.getElementById('lang-en-mobile').addEventListener('click', () => setLanguage('en'));

        // Butonlara tıklama olayını ekle
        document.getElementById('lang-tr').addEventListener('click', () => setLanguage('tr'));
        document.getElementById('lang-en').addEventListener('click', () => setLanguage('en'));

        // Sayfa ilk açıldığında localStorage'dan dil tercihini kontrol et
const savedLang = localStorage.getItem('selectedLanguage');
if (savedLang === 'tr' || savedLang === 'en') {
    setLanguage(savedLang);
} else {
    setLanguage('tr');
}

        // ...existing code...
        function initAnimatedServiceText() {
            const serviceText = document.getElementById('animated-service-text');
            if (!serviceText) return;

            // Metni her seferinde güncel olarak al
            const text = serviceText.textContent;
            serviceText.innerHTML = '';

            text.split('').forEach((char, index) => {
                const span = document.createElement('span');
                span.classList.add('letter');
                if (char === ' ') {
                    span.classList.add('space');
                    span.innerHTML = '&nbsp;';
                } else {
                    span.textContent = char;
                }
                span.style.setProperty('--delay', `${index * 0.05}s`);
                serviceText.appendChild(span);
            });

            setInterval(() => {
                restartAnimation();
            }, 8000);
        }
    </script>
</body>
</html>