Estudio de Diseño de Arquitectura | DIBUJO

1,424 Metehan

Abrir en el editor Publica tu código

Estudio de Diseño de Arquitectura | DIBUJO

Recomendado

19 January 2024

Botón de Cambio de Tema

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

19 December 2025

Ejemplo de tarjeta de producto HTML 3D de zapatillas Nike

HTML

<!DOCTYPE html>
<html lang="tr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DRAW - Mimarlık & Tasarım Stüdyosu</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        /* Özel Stiller ve Font Tanımlamaları */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111111;
            color: #E0E0E0;
        }
        h1, h2, h3, h4, h5, h6, .font-serif {
            font-family: 'Playfair Display', serif;
        }
        .hero-bg {
            background-image: linear-gradient(rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.8)), url('https://images.unsplash.com/photo-1604014237800-1c9102c219da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        .nav-link {
            position: relative;
            transition: color 0.3s;
            color: #A0A0A0;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #E6C081; /* Daha yumuşak altın rengi */
            transition: width 0.3s ease-in-out;
        }
        .nav-link:hover, .nav-link.active {
            color: #FFFFFF;
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        .gold-accent {
            color: #E6C081;
        }
        .btn-gold {
            background-color: #E6C081;
            color: #111111;
            transition: all 0.3s ease;
        }
        .btn-gold:hover {
            background-color: #FFFFFF;
            color: #111111;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(230, 192, 129, 0.2);
        }
        .section-bg-darker { background-color: #0A0A0A; }
        .section-bg { background-color: #111111; }
        .section-bg-lighter { background-color: #1A1A1A; }
        
        .project-card {
            position: relative;
            overflow: hidden;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .project-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        .project-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
            color: white;
            padding: 2rem;
            transform: translateY(101%);
            transition: transform 0.4s ease-in-out;
        }
        .project-card:hover .project-overlay {
            transform: translateY(0);
        }

.scroll-animation {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-animation.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .chatbot-modal {
            transform: scale(0.95); opacity: 0;
            transition: transform 0.3s ease, opacity 0.3s ease;
            pointer-events: none;
        }
        .chatbot-modal.active {
            transform: scale(1); opacity: 1;
            pointer-events: all;
        }
        .user-message { background-color: #E6C081; color: #111; align-self: flex-end; }
        .bot-message { background-color: #2D2D2D; color: #E0E0E0; align-self: flex-start; }
    </style>
</head>
<body class="antialiased">

<header id="header" class="bg-black bg-opacity-70 backdrop-blur-md shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <a href="#" class="flex items-center">
                    <img src="https://i.ibb.co/9v0d0bH/the-draw-logo.png" alt="DRAW Logo" class="h-10 md:h-12">
                </a>
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#hero" class="nav-link font-medium active">Ana Sayfa</a>
                    <a href="#services" class="nav-link font-medium">Hizmetler</a>
                    <a href="#projects" class="nav-link font-medium">Projeler</a>
                    <a href="#about" class="nav-link font-medium">Stüdyo</a>
                    <a href="#contact" class="nav-link font-medium">İletişim</a>
                </nav>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-white focus:outline-none"><i class="fas fa-bars fa-lg"></i></button>
                </div>
            </div>
        </div>
        <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-95">
            <a href="#hero" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">Ana Sayfa</a>
            <a href="#services" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">Hizmetler</a>
            <a href="#projects" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">Projeler</a>
            <a href="#about" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">Stüdyo</a>
            <a href="#contact" class="block py-3 px-6 text-gray-300 hover:bg-gray-800">İletişim</a>
        </div>
    </header>

<main>
        
        <section id="hero" class="hero-bg h-screen flex items-center justify-center text-white">
            <div class="text-center p-8">
                <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold mb-6 font-serif">Mekanın Şiirsel Yorumu</h1>
                <p class="text-lg md:text-xl mb-10 max-w-3xl mx-auto text-gray-200">Mimariyi, sanat ve mühendisliğin kesişim noktasında yeniden tanımlıyoruz.</p>
                <button id="open-chatbot" class="btn-gold font-bold py-4 px-12 rounded-sm text-lg uppercase tracking-wider">Proje Başlat</button>
            </div>
        </section>

<section id="services" class="py-24 section-bg-lighter">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold font-serif">Kabiliyetlerimiz</h2>
                    <p class="text-gray-400 mt-4 text-lg">Konseptten teslime, vizyonunuzu gerçeğe dönüştürüyoruz.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    
                    <div class="bg-gray-900 p-8 rounded-md text-center scroll-animation transition-all duration-300 hover:bg-gray-800 hover:-translate-y-2">
                        <div class="text-5xl gold-accent mb-5"><i class="fas fa-drafting-compass"></i></div>
                        <h3 class="text-2xl font-bold mb-3 font-serif">Mimari Tasarım</h3>
                        <p class="text-gray-400">İkonik ve işlevsel yapılar için özgün konseptler.</p>
                    </div>
                     <div class="bg-gray-900 p-8 rounded-md text-center scroll-animation transition-all duration-300 hover:bg-gray-800 hover:-translate-y-2" style="transition-delay: 100ms;">
                        <div class="text-5xl gold-accent mb-5"><i class="fas fa-couch"></i></div>
                        <h3 class="text-2xl font-bold mb-3 font-serif">İç Mekan Tasarımı</h3>
                        <p class="text-gray-400">Yaşam alanlarınıza kimlik ve ruh katan detaylar.</p>
                    </div>
                     <div class="bg-gray-900 p-8 rounded-md text-center scroll-animation transition-all duration-300 hover:bg-gray-800 hover:-translate-y-2" style="transition-delay: 200ms;">
                        <div class="text-5xl gold-accent mb-5"><i class="fas fa-city"></i></div>
                        <h3 class="text-2xl font-bold mb-3 font-serif">Kentsel Planlama</h3>
                        <p class="text-gray-400">Geleceğin şehirleri için sürdürülebilir master planlar.</p>
                    </div>
                     <div class="bg-gray-900 p-8 rounded-md text-center scroll-animation transition-all duration-300 hover:bg-gray-800 hover:-translate-y-2" style="transition-delay: 300ms;">
                        <div class="text-5xl gold-accent mb-5"><i class="fas fa-tools"></i></div>
                        <h3 class="text-2xl font-bold mb-3 font-serif">Proje Yönetimi</h3>
                        <p class="text-gray-400">Fikirden anahtar teslimine kadar titiz bir yönetim.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="projects" class="py-24 section-bg">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold font-serif">Seçilmiş İşler</h2>
                    <p class="text-gray-400 mt-4 text-lg">İmzamızı taşıyan, dikkat çeken projelerimiz.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    
                    <div class="project-card h-96 scroll-animation">
                        <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
                            <div class="project-overlay">
                                <h3 class="text-3xl font-bold mb-2 font-serif">Kıyı Villası</h3>
                                <p class="mb-4 text-gray-300">Marmaris, Türkiye</p>
                                <a href="#" class="font-semibold tracking-wider uppercase text-sm gold-accent hover:underline">Projeyi Keşfet →</a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="project-card h-96 scroll-animation" style="transition-delay: 200ms;">
                         <div class="h-full w-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2053&q=80')">
                             <div class="project-overlay">
                                <h3 class="text-3xl font-bold mb-2 font-serif">Galata Sanat Merkezi</h3>
                                <p class="mb-4 text-gray-300">İstanbul, Türkiye</p>
                                <a href="#" class="font-semibold tracking-wider uppercase text-sm gold-accent hover:underline">Projeyi Keşfet →</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <section id="about" class="py-24 section-bg-lighter">
            <div class="container mx-auto px-6">
                <div class="grid lg:grid-cols-2 gap-12 items-center">
                    <div class="scroll-animation">
                        <h2 class="text-4xl md:text-5xl font-bold font-serif mb-6">Tasarım Felsefemiz</h2>
                        <p class="text-gray-400 mb-6 text-lg leading-relaxed">DRAW, 2010 yılında kurulmuş, disiplinler arası çalışan bir mimarlık stüdyosudur. Biz, her projenin kendi hikayesini anlatması gerektiğine inanırız. Yaklaşımımız; bağlamı anlamak, malzeme ile deneyler yapmak ve insan deneyimini zenginleştirmek üzerine kuruludur.</p>
                        <a href="#" class="inline-block border-b-2 border-amber-400 pb-1 font-semibold text-amber-400 hover:text-white transition">Yaklaşımımız Hakkında Daha Fazla Bilgi Edinin</a>
                    </div>
                    <div class="grid grid-cols-2 gap-6 scroll-animation" style="transition-delay: 200ms;">
                        <div class="bg-gray-800 p-8 text-center rounded">
                            <h3 class="text-4xl lg:text-5xl font-bold gold-accent">14+</h3>
                            <p class="text-gray-400 mt-2">Yıllık Tecrübe</p>
                        </div>
                        <div class="bg-gray-800 p-8 text-center rounded">
                            <h3 class="text-4xl lg:text-5xl font-bold gold-accent">80+</h3>
                            <p class="text-gray-400 mt-2">Tamamlanan Proje</p>
                        </div>
                         <div class="bg-gray-800 p-8 text-center rounded">
                            <h3 class="text-4xl lg:text-5xl font-bold gold-accent">12</h3>
                            <p class="text-gray-400 mt-2">Uluslararası Ödül</p>
                        </div>
                         <div class="bg-gray-800 p-8 text-center rounded">
                            <h3 class="text-4xl lg:text-5xl font-bold gold-accent">25+</h3>
                            <p class="text-gray-400 mt-2">Tutkulu Ekip Üyesi</p>
                        </div>
                    </div>
                </div>
                 
                <div class="mt-24 scroll-animation">
                     <div class="aspect-w-16 aspect-h-9 rounded-lg shadow-2xl overflow-hidden">
                        <iframe src="https://www.youtube.com/embed/haCN6Fc5Qtw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen class="w-full h-full"></iframe>
                    </div>
                </div>
            </div>
        </section>

<section id="testimonials" class="py-24 section-bg">
            <div class="container mx-auto px-6">
                <div class="text-center mb-16">
                     <h2 class="text-4xl md:text-5xl font-bold font-serif">Müşteri Deneyimleri</h2>
                     <p class="text-gray-400 mt-4 text-lg">İş ortaklarımızın bizim hakkımızdaki düşünceleri.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-gray-800 p-8 rounded scroll-animation">
                        <p class="text-gray-300 italic mb-6 text-lg">"DRAW ekibi, vizyonumuzu anlamakla kalmadı, onu aştı. Süreç boyunca gösterdikleri profesyonellik ve yaratıcılık olağanüstüydü."</p>
                        <div class="flex items-center">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-amber-400">
                            <div>
                                <h4 class="font-bold text-white">Ahmet Yılmaz</h4>
                                <p class="text-sm text-gray-400">Yılmaz Holding CEO</p>
                            </div>
                        </div>
                    </div>
                     <div class="bg-gray-800 p-8 rounded scroll-animation" style="transition-delay: 200ms;">
                        <p class="text-gray-300 italic mb-6 text-lg">"Sürdürülebilir mimari konusundaki uzmanlıkları, projemize hem çevresel hem de ekonomik olarak büyük değer kattı. Kesinlikle tekrar çalışacağız."</p>
                        <div class="flex items-center">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4 border-2 border-amber-400">
                            <div>
                                <h4 class="font-bold text-white">Elif Kaya</h4>
                                <p class="text-sm text-gray-400">EkoTurizm A.Ş. Kurucusu</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" class="py-24 section-bg-lighter">
            <div class="container mx-auto px-6">
                 <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold font-serif">Bir Sohbet Başlatalım</h2>
                    <p class="text-gray-400 mt-4 text-lg">Projenizi hayata geçirmek için buradayız.</p>
                </div>
                <div class="max-w-3xl mx-auto bg-gray-900 p-8 md:p-12 rounded-lg shadow-2xl scroll-animation">
                   
                   <form action="#" method="POST">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <input type="text" placeholder="Adınız Soyadınız" class="w-full p-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-white">
                            <input type="email" placeholder="E-posta Adresiniz" class="w-full p-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-white">
                        </div>
                        <div class="mb-6">
                            <input type="text" placeholder="Konu" class="w-full p-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-white">
                        </div>
                        <div class="mb-6">
                            <input placeholder="Projenizden bahsedin..." rows="6" class="w-full p-4 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 text-white"/>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn-gold font-bold py-3 px-10 rounded-sm text-lg uppercase tracking-wider">Mesajı Gönder</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </main>
    
    
    <footer class="section-bg py-16">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12 text-gray-400">
                 <div class="mb-6 lg:mb-0 col-span-1 md:col-span-2 lg:col-span-1">
                    <a href="#" class="flex items-center mb-4">
                        <img src="https://i.ibb.co/9v0d0bH/the-draw-logo.png" alt="DRAW Logo" class="h-12">
                    </a>
                    <p class="text-sm mt-4">Mekanın şiirsel yorumu.</p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold text-white mb-4">Keşfet</h4>
                    <ul class="space-y-2">
                        <li><a href="#services" class="hover:text-amber-400 transition">Hizmetler</a></li>
                        <li><a href="#projects" class="hover:text-amber-400 transition">Projeler</a></li>
                        <li><a href="#about" class="hover:text-amber-400 transition">Stüdyo</a></li>
                    </ul>
                </div>
                 <div>
                    <h4 class="text-lg font-semibold text-white mb-4">İletişim</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start"><i class="fas fa-map-marker-alt mt-1 mr-3 w-4"></i><span>Maslak, İstanbul</span></li>
                        <li class="flex items-center"><i class="fas fa-phone-alt mr-3 w-4"></i><span>+90 212 555 1234</span></li>
                        <li class="flex items-center"><i class="fas fa-envelope mr-3 w-4"></i><span>iletisim@draw.com</span></li>
                    </ul>
                </div>
                 <div>
                    <h4 class="text-lg font-semibold text-white mb-4">Takip Edin</h4>
                    <div class="flex space-x-5 text-xl">
                        <a href="#" class="hover:text-amber-400 transition"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="hover:text-amber-400 transition"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="hover:text-amber-400 transition"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="hover:text-amber-400 transition"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-10 pt-8 text-center text-gray-500 text-sm">
                <p>© 2024 DRAW Mimarlık Stüdyosu. Tüm Hakları Saklıdır.</p>
            </div>
        </div>
    </footer>

<div id="chatbot-modal" class="chatbot-modal fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex items-end justify-center sm:items-center p-4 z-[100]">
        <div class="bg-gray-900 w-full max-w-lg h-[85vh] max-h-[700px] rounded-t-lg sm:rounded-lg shadow-2xl flex flex-col border border-gray-700">
            <div class="bg-gray-800 p-4 flex justify-between items-center rounded-t-lg border-b border-gray-700">
                <h3 class="text-lg font-bold text-white font-serif">DRAW Asistan</h3>
                <button id="close-chatbot" class="text-gray-400 hover:text-white text-2xl">×</button>
            </div>
            <div id="chat-window" class="flex-1 p-4 overflow-y-auto flex flex-col space-y-4">
                
            </div>
            <div class="p-4 bg-gray-800 rounded-b-lg border-t border-gray-700">
                <div class="flex">
                    <input type="text" id="chat-input" placeholder="Bir soru sorun..." class="w-full p-3 bg-gray-700 border border-gray-600 rounded-l-md focus:outline-none focus:ring-2 focus:ring-amber-500 text-white">
                    <button id="chat-send" class="bg-amber-500 text-black px-5 rounded-r-md font-bold hover:bg-amber-400"><i class="fas fa-paper-plane"></i></button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
       // Script remains the same as previous version
       document.addEventListener('DOMContentLoaded', () => {
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
            document.querySelectorAll('#mobile-menu a').forEach(link => {
                link.addEventListener('click', () => {
                    mobileMenu.classList.add('hidden');
                });
            });

const qaPairs = {
                "merhaba": "Merhaba! DRAW Mimarlık asistanına hoş geldiniz. Size nasıl yardımcı olabilirim?",
                "selam": "Merhaba! DRAW Mimarlık asistanına hoş geldiniz. Size nasıl yardımcı olabilirim?",
                "hizmetler": "Mimari tasarım, iç mimari, kentsel planlama ve proje yönetimi gibi geniş bir yelpazede hizmet sunuyoruz. Detaylı bilgi 'Kabiliyetlerimiz' bölümümüzde mevcuttur.",
                "hizmetleriniz nelerdir": "Mimari tasarım, iç mimari, kentsel planlama ve proje yönetimi gibi geniş bir yelpazede hizmet sunuyoruz. Detaylı bilgi 'Kabiliyetlerimiz' bölümümüzde mevcuttur.",
                "fiyat": "Her proje kendine özgüdür. Projenizin detaylarını (türü, büyüklüğü, konumu vb.) paylaşırsanız size özel bir teklif hazırlayabiliriz. İletişim formumuzu doldurabilir veya telefonla bize ulaşabilirsiniz.",
                "teklif": "Her proje kendine özgüdür. Projenizin detaylarını (türü, büyüklüğü, konumu vb.) paylaşırsanız size özel bir teklif hazırlayabiliriz. İletişim formumuzu doldurabilir veya telefonla bize ulaşabilirsiniz.",
                "neredesiniz": "Stüdyomuz Maslak, İstanbul'da bulunmaktadır. Detaylı adres ve harita için 'İletişim' bölümümüze göz atabilirsiniz.",
                "adres": "Stüdyomuz Maslak, İstanbul'da bulunmaktadır. Detaylı adres ve harita için 'İletişim' bölümümüze göz atabilirsiniz.",
                "projeler": "Elbette! Web sitemizin 'Seçilmiş İşler' bölümünde öne çıkan çalışmalarımızı inceleyebilirsiniz.",
                "teşekkürler": "Rica ederim! Başka bir sorunuz var mı?",
                "görüşürüz": "İyi günler dileriz!"
            };

const addMessage = (message, sender) => {
                const messageDiv = document.createElement('div');
                messageDiv.className = `p-3 rounded-lg max-w-[80%] ${sender === 'user' ? 'user-message' : 'bot-message'}`;
                messageDiv.textContent = message;
                chatWindow.appendChild(messageDiv);
                chatWindow.scrollTop = chatWindow.scrollHeight;
            };

const getBotResponse = (userInput) => {
                userInput = userInput.toLowerCase().trim();
                let bestMatch = null;
                let maxMatch = 0;

for (const key in qaPairs) {
                    if (userInput.includes(key) && key.length > maxMatch) {
                       maxMatch = key.length;
                       bestMatch = qaPairs[key];
                    }
                }
                return bestMatch || "Üzgünüm, sorunuzu anlayamadım. Lütfen farklı bir şekilde sormayı deneyin veya iletişim formumuzu kullanın.";
            };

const handleSend = () => {
                const userInput = chatInput.value;
                if (userInput.trim() === '') return;
                addMessage(userInput, 'user');
                chatInput.value = '';
                setTimeout(() => {
                    const botResponse = getBotResponse(userInput);
                    addMessage(botResponse, 'bot');
                }, 600);
            };

chatSendBtn.addEventListener('click', handleSend);
            chatInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSend(); });
            openChatbotBtn.addEventListener('click', () => chatbotModal.classList.add('active'));
            closeChatbotBtn.addEventListener('click', () => chatbotModal.classList.remove('active'));

addMessage("Merhaba! Ben DRAW Asistan. Projeleriniz hakkında bilgi almak veya hizmetlerimizi sormak için buradayım.", 'bot');
       });
    </script>
</body>
</html>

CSS