<!-- wp:code -->
<pre class="wp-block-code"><code><!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>Türkiye Dil ve Edebiyat Derneği | Manisa Şubesi</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<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=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<!-- Tailwind Config for Custom Fonts and Colors -->
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Playfair Display', 'serif'],
},
colors: {
brand: {
50: '#fdf8f6',
100: '#f2e8e5',
500: '#8b2c2c', // Dernek kırmızısına yakın klasik bir renk
600: '#732222',
900: '#3d1212',
}
}
}
}
}
</script>
<style>
/* Custom Styles for extra polish */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hero-pattern {
background-color: #3d1212;
background-image: linear-gradient(rgba(61, 18, 18, 0.8), rgba(61, 18, 18, 0.9)), url('https://images.unsplash.com/photo-1481627834876-b7833e8f5570?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="font-sans text-gray-800 bg-brand-50 flex flex-col min-h-screen">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm transition-all duration-300" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20">
<!-- Logo -->
<div class="flex items-center">
<a href="#" class="flex flex-col justify-center">
<span class="font-serif font-bold text-2xl text-brand-900 leading-tight">TDED</span>
<span class="text-xs font-medium text-brand-600 tracking-wider">MANİSA ŞUBESİ</span>
</a>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-8">
<a href="#ana-sayfa" class="text-gray-600 hover:text-brand-600 font-medium transition-colors">Ana Sayfa</a>
<a href="#hakkimizda" class="text-gray-600 hover:text-brand-600 font-medium transition-colors">Hakkımızda</a>
<a href="#dergi" class="text-gray-600 hover:text-brand-600 font-medium transition-colors">Yayınlarımız</a>
<a href="#faaliyetler" class="text-gray-600 hover:text-brand-600 font-medium transition-colors">Faaliyetler</a>
<a href="#yonetim" class="text-gray-600 hover:text-brand-600 font-medium transition-colors">Yönetim Kurulu</a>
<a href="#iletisim" class="bg-brand-600 text-white px-5 py-2.5 rounded-md hover:bg-brand-500 font-medium transition-colors shadow-sm">İletişim</a>
</div>
<!-- Mobile menu button -->
<div class="flex items-center md:hidden">
<button type="button" id="mobile-menu-btn" class="text-gray-600 hover:text-brand-600 focus:outline-none p-2">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden bg-white border-t border-gray-100 shadow-lg absolute w-full" id="mobile-menu">
<div class="px-4 pt-2 pb-4 space-y-1">
<a href="#ana-sayfa" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50 rounded-md mobile-link">Ana Sayfa</a>
<a href="#hakkimizda" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50 rounded-md mobile-link">Hakkımızda</a>
<a href="#dergi" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50 rounded-md mobile-link">Yayınlarımız</a>
<a href="#faaliyetler" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50 rounded-md mobile-link">Faaliyetler</a>
<a href="#yonetim" class="block px-3 py-3 text-base font-medium text-gray-700 hover:text-brand-600 hover:bg-brand-50 rounded-md mobile-link">Yönetim Kurulu</a>
<a href="#iletisim" class="block px-3 py-3 text-base font-medium text-brand-600 hover:bg-brand-50 rounded-md mobile-link">İletişim</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="ana-sayfa" class="hero-pattern min-h-screen flex items-center justify-center pt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-serif font-bold text-white mb-6 leading-tight drop-shadow-lg">
Dilimiz Kimliğimizdir
</h1>
<p class="mt-4 text-xl md:text-2xl text-brand-50 max-w-3xl mx-auto font-light mb-10 drop-shadow-md">
Manisa'da Türk dilinin zenginliğini yaşatmak, edebiyatımızı gelecek nesillere aktarmak için çalışıyoruz.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#faaliyetler" class="bg-white text-brand-900 px-8 py-3.5 rounded-md font-medium text-lg hover:bg-gray-100 transition-colors shadow-lg">
Çalışmalarımızı İnceleyin
</a>
<a href="#iletisim" class="border border-white text-white px-8 py-3.5 rounded-md font-medium text-lg hover:bg-white hover:text-brand-900 transition-colors shadow-lg">
Bizimle İletişime Geçin
</a>
</div>
</div>
</section>
<!-- Hakkımızda Section -->
<section id="hakkimizda" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2">
<img src="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Kütüphane" class="rounded-lg shadow-xl w-full h-auto object-cover aspect-[4/3]">
</div>
<div class="lg:w-1/2">
<div class="flex items-center gap-3 mb-4">
<span class="h-px w-12 bg-brand-500"></span>
<h2 class="text-brand-600 font-semibold tracking-wider uppercase text-sm">Hakkımızda</h2>
</div>
<h3 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-6">Manisa'nın Edebi Hafızası</h3>
<p class="text-gray-600 leading-relaxed mb-6">
Türkiye Dil ve Edebiyat Derneği (TDED), Türk dilini korumak, geliştirmek ve edebiyatımızı yaşatmak amacıyla kurulan köklü bir sivil toplum kuruluşudur. TDED Manisa Şubesi olarak bizler, şehrimizin zengin kültürel ve tarihi mirasından aldığımız ilhamla çalışmalarımızı sürdürüyoruz.
</p>
<p class="text-gray-600 leading-relaxed">
Şehzadeler şehri Manisa'da okuma alışkanlığını yaygınlaştırmak, gençlerimizi edebiyatla buluşturmak, Türkçe kullanımında bilinci artırmak en temel gayemizdir. Seminerler, şiir dinletileri, yazarlık atölyeleri ve okuma gruplarımızla edebiyatseverleri bir araya getiriyoruz.
</p>
</div>
</div>
</div>
</section>
<!-- Dijital Dergi Section -->
<section id="dergi" class="py-16 bg-brand-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div class="flex items-center justify-center gap-3 mb-4">
<span class="h-px w-12 bg-brand-500"></span>
<h2 class="text-brand-100 font-semibold tracking-wider uppercase text-sm">Yayınlarımız</h2>
<span class="h-px w-12 bg-brand-500"></span>
</div>
<h2 class="text-3xl md:text-4xl font-serif font-bold text-white mb-12">Dijital Manisa Dergisi</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center justify-center">
<!-- Sayı 1 -->
<div class="flex flex-col items-center w-full">
<h3 class="text-xl font-serif font-semibold text-brand-100 mb-4">1. Sayı</h3>
<div class="bg-white p-2 rounded-xl shadow-2xl w-full" style="height: 450px;">
<iframe src="https://online.fliphtml5.com/fyqyu/zjnb/" class="w-full h-full border-0 rounded-lg" allowfullscreen="allowfullscreen" title="DİJİTAL MANİSA DERGİSİ"></iframe>
</div>
</div>
<!-- Sayı 2 -->
<div class="flex flex-col items-center w-full">
<h3 class="text-xl font-serif font-semibold text-brand-100 mb-4">2. Sayı</h3>
<div class="bg-white p-2 rounded-xl shadow-2xl w-full" style="height: 450px;">
<iframe src="https://online.fliphtml5.com/fyqyu/aiqq/" class="w-full h-full border-0 rounded-lg" allowfullscreen="allowfullscreen" title="MANİSA DERGİSİ 2. SAYI"></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Faaliyetler Section -->
<section id="faaliyetler" class="py-20 bg-brand-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<div class="flex items-center justify-center gap-3 mb-4">
<span class="h-px w-8 bg-brand-500"></span>
<h2 class="text-brand-600 font-semibold tracking-wider uppercase text-sm">Neler Yapıyoruz?</h2>
<span class="h-px w-8 bg-brand-500"></span>
</div>
<h3 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-6">Faaliyet Alanlarımız</h3>
<p class="text-gray-600 text-lg">Dilimizi ve edebiyatımızı yaşatmak için Manisa genelinde düzenlediğimiz düzenli etkinliklerimiz.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100 card-hover">
<div class="w-14 h-14 bg-brand-100 rounded-lg flex items-center justify-center mb-6 text-brand-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
</div>
<h4 class="text-xl font-serif font-bold text-gray-900 mb-3">Okuma Grupları</h4>
<p class="text-gray-600 line-clamp-3">Her ay belirlediğimiz seçkin eserleri üyelerimizle birlikte okuyor, değerlendiriyor ve yazarın dünyasına iniyoruz.</p>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100 card-hover">
<div class="w-14 h-14 bg-brand-100 rounded-lg flex items-center justify-center mb-6 text-brand-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</div>
<h4 class="text-xl font-serif font-bold text-gray-900 mb-3">Yazarlık Atölyeleri</h4>
<p class="text-gray-600 line-clamp-3">Genç kalemleri keşfetmek ve yazma becerilerini geliştirmek için uzman yazar ve akademisyenler eşliğinde atölyeler düzenliyoruz.</p>
</div>
<!-- Card 3 -->
<div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100 card-hover">
<div class="w-14 h-14 bg-brand-100 rounded-lg flex items-center justify-center mb-6 text-brand-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
</div>
<h4 class="text-xl font-serif font-bold text-gray-900 mb-3">Şiir ve Musiki Dinletileri</h4>
<p class="text-gray-600 line-clamp-3">Manisa'nın tarihi mekanlarında şairlerimizi anıyor, şiirlerimizi klasik Türk musikisi eşliğinde dinleyicilerle buluşturuyoruz.</p>
</div>
<!-- Card 4 (Haber Bağlantısı) -->
<a href="https://edebiyat360.com.tr/dilimiz-kimligimizdir-soylesisi-manisada-gerceklestirildi/" target="_blank" rel="noopener noreferrer" class="block bg-white rounded-lg p-8 shadow-sm border border-gray-100 card-hover group transition-all relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-brand-500"></div>
<div class="w-14 h-14 bg-brand-100 rounded-lg flex items-center justify-center mb-6 text-brand-600 group-hover:bg-brand-600 group-hover:text-white transition-colors">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
</div>
<div class="inline-block px-2 py-1 bg-red-100 text-brand-600 text-xs font-bold rounded mb-3 uppercase tracking-wide">Basında Biz</div>
<h4 class="text-xl font-serif font-bold text-gray-900 mb-3 group-hover:text-brand-600 transition-colors">"Dilimiz Kimliğimizdir" Söyleşisi</h4>
<p class="text-gray-600 line-clamp-2 mb-4">Manisa'da geniş bir katılımla gerçekleştirdiğimiz söyleşimizin detaylarına ve haber yansımalarına buradan ulaşabilirsiniz.</p>
<span class="text-brand-600 font-medium text-sm flex items-center gap-1">
Haberi Oku
<svg class="w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</span>
</a>
<!-- Card 5 -->
<div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100 card-hover">
<div class="w-14 h-14 bg-brand-100 rounded-lg flex items-center justify-center mb-6 text-brand-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path></svg>
</div>
<h4 class="text-xl font-serif font-bold text-gray-900 mb-3">Osmanlıca Kursları</h4>
<p class="text-gray-600 line-clamp-3">Kültürel mirasımızı doğru anlamak ve tarihi metinleri okuyabilmek adına çeşitli seviyelerde Osmanlı Türkçesi eğitimleri veriyoruz.</p>
</div>
<!-- Card 6 -->
<div class="bg-white rounded-lg p-8 shadow-sm border border-gray-100 card-hover">
<div class="w-14 h-14 bg-brand-100 rounded-lg flex items-center justify-center mb-6 text-brand-600">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<h4 class="text-xl font-serif font-bold text-gray-900 mb-3">Yarışmalar</h4>
<p class="text-gray-600 line-clamp-3">İl genelinde ilk, orta ve lise düzeyinde öğrencilerimize yönelik kompozisyon ve şiir okuma yarışmaları düzenliyoruz.</p>
</div>
</div>
</div>
</section>
<!-- Yönetim Kurulu -->
<section id="yonetim" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16">
<div class="flex items-center justify-center gap-3 mb-4">
<span class="h-px w-8 bg-brand-500"></span>
<h2 class="text-brand-600 font-semibold tracking-wider uppercase text-sm">Dernek Yönetimi</h2>
<span class="h-px w-8 bg-brand-500"></span>
</div>
<h3 class="text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-6">Yönetim Kurulumuz</h3>
</div>
<!-- Yakında Mesajı -->
<div class="text-center py-20 bg-brand-50 border border-brand-100 rounded-3xl shadow-inner max-w-4xl mx-auto">
<h4 class="text-5xl md:text-6xl font-serif font-bold text-brand-600 tracking-widest uppercase opacity-80">YAKINDA</h4>
</div>
</div>
</section>
<!-- İletişim Section -->
<section id="iletisim" class="py-20 bg-brand-900 text-white relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
<!-- Info -->
<div>
<div class="flex items-center gap-3 mb-4">
<span class="h-px w-8 bg-brand-500"></span>
<h2 class="text-brand-100 font-semibold tracking-wider uppercase text-sm">Bize Ulaşın</h2>
</div>
<h3 class="text-3xl md:text-4xl font-serif font-bold text-white mb-6">İletişim Bilgileri</h3>
<p class="text-brand-100 mb-10 leading-relaxed">
Derneğimizin faaliyetleri hakkında bilgi almak, etkinliklerimize katılmak veya üye olmak için bizimle iletişime geçebilirsiniz. Manisa'daki dernek binamızda sizleri ağırlamaktan mutluluk duyarız.
</p>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="mt-1 bg-brand-600/50 p-3 rounded-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</div>
<div>
<h4 class="text-lg font-bold">Adres</h4>
<p class="text-brand-100 mt-1">1. Anafartalar Mah. Mustafa Kemal Paşa Cad. No: 123<br>Şehzadeler / MANİSA</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="mt-1 bg-brand-600/50 p-3 rounded-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
</div>
<div>
<h4 class="text-lg font-bold">Telefon</h4>
<p class="text-brand-100 mt-1">+90 (236) 231 00 00</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="mt-1 bg-brand-600/50 p-3 rounded-lg">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<div>
<h4 class="text-lg font-bold">E-Posta</h4>
<p class="text-brand-100 mt-1">[email protected]</p>
</div>
</div>
</div>
</div>
<!-- Form -->
<div class="bg-white rounded-xl p-8 shadow-2xl text-gray-800">
<h3 class="text-2xl font-serif font-bold text-gray-900 mb-6">Mesaj Gönderin</h3>
<form id="contact-form" class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Adınız Soyadınız</label>
<input type="text" id="name" required class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-brand-500 focus:border-brand-500 outline-none transition-colors" placeholder="Ahmet Yılmaz">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-Posta Adresiniz</label>
<input type="email" id="email" required class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-brand-500 focus:border-brand-500 outline-none transition-colors" placeholder="[email protected]">
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Konu</label>
<select id="subject" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-brand-500 focus:border-brand-500 outline-none transition-colors bg-white">
<option>Genel Bilgi Talebi</option>
<option>Üyelik İşlemleri</option>
<option>Etkinlikler Hakkında</option>
<option>Öneri / Şikayet</option>
</select>
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Mesajınız</label>
<textarea id="message" rows="4" required class="w-full px-4 py-3 rounded-md border border-gray-300 focus:ring-brand-500 focus:border-brand-500 outline-none transition-colors resize-none" placeholder="Mesajınızı buraya yazınız..."></textarea>
</div>
<button type="submit" class="w-full bg-brand-600 text-white font-bold py-3 px-4 rounded-md hover:bg-brand-500 transition-colors duration-300">
Mesajı Gönder
</button>
</form>
<!-- Success Message Box (Hidden by default) -->
<div id="form-success" class="hidden mt-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded-md flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
<span>Mesajınız başarıyla iletildi. En kısa sürede dönüş yapacağız.</span>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-300 py-12 mt-auto border-t border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
<!-- Brand -->
<div class="text-center md:text-left">
<h4 class="font-serif font-bold text-2xl text-white mb-2">TDED Manisa</h4>
<p class="text-sm text-gray-400">Türkiye Dil ve Edebiyat Derneği Manisa Şubesi</p>
</div>
<!-- Socials -->
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-brand-600 hover:text-white transition-colors">
<span class="sr-only">Facebook</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" /></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-brand-600 hover:text-white transition-colors">
<span class="sr-only">Instagram</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" /></svg>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-brand-600 hover:text-white transition-colors">
<span class="sr-only">Twitter</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" /></svg>
</a>
</div>
</div>
<div class="pt-8 border-t border-gray-800 text-sm text-center text-gray-500">
<p>&copy; 2026 Türkiye Dil ve Edebiyat Derneği Manisa Şubesi. Tüm hakları saklıdır.</p>
</div>
</div>
</footer>
<!-- Interactive Scripts -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// Mobile Menu Toggle
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
const mobileLinks = document.querySelectorAll('.mobile-link');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
// Close mobile menu on link click
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
});
});
// Navbar Scrolled State
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 20) {
navbar.classList.add('shadow-md');
} else {
navbar.classList.remove('shadow-md');
}
});
// Contact Form Handle
const form = document.getElementById('contact-form');
const successMsg = document.getElementById('form-success');
form.addEventListener('submit', (e) => {
e.preventDefault(); // Prevent page reload
// Show success message
successMsg.classList.remove('hidden');
// Reset form fields
form.reset();
// Hide message after 5 seconds
setTimeout(() => {
successMsg.classList.add('hidden');
}, 5000);
});
});
</script>
</body>
</html></code></pre>
<!-- /wp:code -->
