<!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>
    <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;
        }
        
        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 30px;
            display: flex;
            justify-content: space-between;
            z-index: 100;
            background-color: rgba(245, 241, 233, 0.8);
            box-shadow: 0 2px 15px rgba(110, 76, 30, 0.1);
        }
        
        @media (max-width: 768px) {
            header {
                padding: 20px 15px;
                width: 100vw;
                box-sizing: border-box;
            }
            
            .nav-toggle {
                right: 15px;
            }
        }
        
        .logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.2rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            text-decoration: none;
            color: var(--accent-color-alt);
        }
        
        .logo span {
            color: var(--accent-color);
        }
        
        .nav-toggle {
            width: 60px;
            height: 30px;
            position: relative;
            background: transparent;
            border: none;
            cursor: pointer;
            z-index: 102;
        }
        
        .nav-toggle span {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: var(--accent-color-alt);
            transition: all 0.3s var(--transition);
        }
        
        .nav-toggle span:nth-child(1) {
            top: 0;
        }
        
        .nav-toggle span:nth-child(2) {
            top: 50%;
        }
        
        .nav-toggle span:nth-child(3) {
            bottom: 0;
        }
        
        .nav-toggle.active span:nth-child(1) {
            top: 50%;
            transform: rotate(45deg);
        }
        
        .nav-toggle.active span:nth-child(2) {
            opacity: 0;
        }
        
        .nav-toggle.active span:nth-child(3) {
            bottom: 50%;
            transform: 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: 40vh;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 150px 5vw 100px;
            text-align: center;
            background: linear-gradient(rgba(110, 76, 30, 0.5), rgba(110, 76, 30, 0.5)), 
                        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;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.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;
            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);
        }
        
        /* Contact Section */
        .contact-section {
            padding: 100px 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: 1200px;
            margin: 0 auto;
            z-index: 2;
        }
        
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            margin-top: 3rem;
        }
        
        @media (max-width: 992px) {
            .contact-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .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: 1rem;
            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 */
        .map-section {
            padding: 0 5vw 100px;
            position: relative;
            background-color: var(--bg-color);
            background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
            background-blend-mode: overlay;
        }
        
        .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;
        }
        
        .map-container.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* Footer */
        footer {
            padding: 80px 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;
            border-top: 5px solid var(--medium-wood);
        }
        
        .footer-content {
            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: 0.9rem;
            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-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.1rem;
            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: 0.8rem;
            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: 0.8rem;
            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);
        }
    </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>
        <a href="index.html" class="logo">ART<span>DEK</span></a>
        <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">Ana Sayfa</a></li>
            <li class="nav-item"><a href="projects.html" class="nav-link">Projeler</a></li>
            <li class="nav-item"><a href="aboutUs.html" class="nav-link">Hakkımızda</a></li>
            <li class="nav-item"><a href="team.html" class="nav-link">Ekibimiz</a></li>
            <li class="nav-item"><a href="referance.html" class="nav-link">Referanslar</a></li>
            <li class="nav-item"><a href="contact.html" class="nav-link">İletişim</a></li>
        </ul>
    </nav>
    
    <!-- Page Header -->
    <section class="page-header">
        <h1 class="page-title">İLETİŞİM</h1>
        <p class="page-subtitle">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>
    
    <!-- Contact Section -->
    <section class="contact-section" style="padding: 50px 0; background-color: #f9f7f2;">
        <div class="container">
            <div class="contact-info-container" style="margin: 0 auto; text-align: center; max-width: 800px; padding: 40px; background-color: #fff; border-radius: 10px; box-shadow: 0 5px 30px rgba(0,0,0,0.1); position: relative; border-right: 5px solid #a0816c;">
                
                <h2 class="contact-title" style="font-size: 36px; margin-bottom: 40px; color: #5c4535; border-bottom: 2px solid #a0816c; padding-bottom: 15px; font-weight: 700;">İletişim Bilgilerimiz</h2>
                
                <div class="contact-info-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-bottom: 40px;">
                    <div class="contact-info-item" style="display: flex; flex-direction: column; align-items: center;">
                        <div class="contact-icon" style="width: 80px; height: 80px; background-color: #f0e6d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                            <i class="fas fa-map-marker-alt" style="font-size: 32px; color: #a0816c;"></i>
                        </div>
                        <h3 class="contact-info-label" style="font-size: 24px; margin-bottom: 10px; color: #5c4535;">Adres</h3>
                        <p class="contact-info-value" style="font-size: 18px; line-height: 1.6; color: #666;">Ferah Mah. Mehmet Akif Ersoy Cad.<br>No:260/A-B Üsküdar, İstanbul</p>
                    </div>
                    
                    <div class="contact-info-item" style="display: flex; flex-direction: column; align-items: center;">
                        <div class="contact-icon" style="width: 80px; height: 80px; background-color: #f0e6d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                            <i class="fas fa-phone-volume" style="font-size: 32px; color: #a0816c;"></i>
                        </div>
                        <h3 class="contact-info-label" style="font-size: 24px; margin-bottom: 10px; color: #5c4535;">Telefon</h3>
                        <p class="contact-info-value" style="font-size: 18px; line-height: 1.6; color: #666;">0(216) 401 13 13</p>
                    </div>
                    
                    <div class="contact-info-item" style="display: flex; flex-direction: column; align-items: center;">
                        <div class="contact-icon" style="width: 80px; height: 80px; background-color: #f0e6d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                            <i class="fas fa-envelope-open-text" style="font-size: 32px; color: #a0816c;"></i>
                        </div>
                        <h3 class="contact-info-label" style="font-size: 24px; margin-bottom: 10px; color: #5c4535;">E-posta</h3>
                        <p class="contact-info-value" style="font-size: 18px; line-height: 1.6; color: #666;">info@artdek.com.tr</p>
                    </div>
                    
                    <div class="contact-info-item" style="display: flex; flex-direction: column; align-items: center;">
                        <div class="contact-icon" style="width: 80px; height: 80px; background-color: #f0e6d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                            <i class="fas fa-business-time" style="font-size: 32px; color: #a0816c;"></i>
                        </div>
                        <h3 class="contact-info-label" style="font-size: 24px; margin-bottom: 10px; color: #5c4535;">Çalışma Saatleri</h3>
                        <p class="contact-info-value" style="font-size: 18px; line-height: 1.6; color: #666;">Pazartesi - Cumartesi: 09:00 - 18:00</p>
                    </div>
                </div>
                
                <div class="social-links" style="margin-top: 30px;">
                    <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>
    </section>
    
    <!-- Map Section -->
    <section class="map-section">
        <div class="container">
            <div class="map-container">
                <iframe 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="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer>
        <div class="footer-content">
            <div>
                <div class="footer-logo">ART<span>DEK</span></div>
                <p class="footer-text">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>
            </div>
            <div class="footer-nav">
                <div class="footer-nav-section">
                    <h4 class="footer-nav-title">Projeler</h4>
                    <ul class="footer-nav-links">
                        <li class="footer-nav-item"><span class="footer-nav-link">Konut Projeleri</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link">Ticari Yapılar</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link">Ofis Tasarımları</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link">Peyzaj Çalışmaları</span></li>
                    </ul>
                </div>
                <div class="footer-nav-section">
                    <h4 class="footer-nav-title">Hizmetler</h4>
                    <ul class="footer-nav-links">
                        <li class="footer-nav-item"><span class="footer-nav-link">Mimari Tasarım</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link">İç Mimari</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link">Restorasyon</span></li>
                        <li class="footer-nav-item"><span class="footer-nav-link">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">Gizlilik Politikası</a>
                <a href="kullanim-sartlari.html" class="bottom-link">Kullanım Şartları</a>
                <a href="cerez-politikasi.html" class="bottom-link">Çerez Politikası</a>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        
        // Loading Overlay
        window.addEventListener('load', function() {
                document.querySelector('.page-title').classList.add('active');
                document.querySelector('.page-subtitle').classList.add('active');
        });
        
        // Remove Custom Cursor JS
        /*
        const cursor = document.querySelector('.cursor');
        
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
        });
        
        document.addEventListener('mousedown', () => {
            cursor.classList.add('active');
        });
        
        document.addEventListener('mouseup', () => {
            cursor.classList.remove('active');
        });
        */
        
        // 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');
        });
        
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                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');
        
        animatedElements.forEach(element => {
            observer.observe(element);
        });
    </script>
    
    <!-- Font Awesome for Icons - Güncellenmiş bağlantı -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>