Hugging Face's logo

Spaces:
ziffir
/
websitesi
Running

App Files Community
ziffir commited on
Commit
7a8bcd6
·
verified ·
1 Parent(s): a67931b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +956 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Websitesi
3
- emoji: ⚡
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: websitesi
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,956 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PATSO IN Cankaya | Lezzetin Adresi</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #FF5722;
14
+ --secondary: #FFC107;
15
+ --accent: #4CAF50;
16
+ --dark: #212121;
17
+ --light: #F5F5F5;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: var(--light);
23
+ color: var(--dark);
24
+ scroll-behavior: smooth;
25
+ }
26
+
27
+ .hero-section {
28
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center;
29
+ background-size: cover;
30
+ height: 100vh;
31
+ min-height: 600px;
32
+ }
33
+
34
+ .menu-item {
35
+ transition: all 0.3s ease;
36
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
37
+ border-left: 4px solid var(--primary);
38
+ }
39
+
40
+ .menu-item:hover {
41
+ transform: translateY(-5px);
42
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
43
+ border-left: 4px solid var(--secondary);
44
+ }
45
+
46
+ .category-title {
47
+ position: relative;
48
+ display: inline-block;
49
+ color: white;
50
+ }
51
+
52
+ .category-title::after {
53
+ content: '';
54
+ position: absolute;
55
+ width: 50%;
56
+ height: 3px;
57
+ background-color: var(--secondary);
58
+ bottom: -5px;
59
+ left: 25%;
60
+ border-radius: 3px;
61
+ }
62
+
63
+ .map-container {
64
+ position: relative;
65
+ overflow: hidden;
66
+ border-radius: 15px;
67
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
68
+ }
69
+
70
+ .map-marker {
71
+ position: absolute;
72
+ top: 50%;
73
+ left: 50%;
74
+ transform: translate(-50%, -100%);
75
+ color: var(--primary);
76
+ font-size: 2.5rem;
77
+ text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
78
+ animation: pulse 2s infinite;
79
+ }
80
+
81
+ @keyframes pulse {
82
+ 0% { transform: translate(-50%, -100%) scale(1); }
83
+ 50% { transform: translate(-50%, -100%) scale(1.1); }
84
+ 100% { transform: translate(-50%, -100%) scale(1); }
85
+ }
86
+
87
+ .nav-link {
88
+ position: relative;
89
+ }
90
+
91
+ .nav-link::after {
92
+ content: '';
93
+ position: absolute;
94
+ width: 0;
95
+ height: 2px;
96
+ background-color: var(--secondary);
97
+ bottom: 0;
98
+ left: 0;
99
+ transition: width 0.3s ease;
100
+ }
101
+
102
+ .nav-link:hover::after {
103
+ width: 100%;
104
+ }
105
+
106
+ .active-nav::after {
107
+ width: 100%;
108
+ }
109
+
110
+ .floating-btn {
111
+ animation: float 3s ease-in-out infinite;
112
+ }
113
+
114
+ @keyframes float {
115
+ 0% { transform: translateY(0px); }
116
+ 50% { transform: translateY(-10px); }
117
+ 100% { transform: translateY(0px); }
118
+ }
119
+
120
+ .scroll-top {
121
+ opacity: 0;
122
+ visibility: hidden;
123
+ transition: all 0.3s ease;
124
+ }
125
+
126
+ .scroll-top.active {
127
+ opacity: 1;
128
+ visibility: visible;
129
+ }
130
+
131
+ .food-card {
132
+ transition: all 0.3s ease;
133
+ overflow: hidden;
134
+ }
135
+
136
+ .food-card:hover .food-img {
137
+ transform: scale(1.05);
138
+ }
139
+
140
+ .food-img {
141
+ transition: all 0.5s ease;
142
+ }
143
+
144
+ .price-tag {
145
+ background-color: var(--primary);
146
+ color: white;
147
+ padding: 0.25rem 0.75rem;
148
+ border-radius: 20px;
149
+ font-weight: bold;
150
+ position: absolute;
151
+ top: 1rem;
152
+ right: 1rem;
153
+ }
154
+
155
+ .section-title {
156
+ position: relative;
157
+ display: inline-block;
158
+ }
159
+
160
+ .section-title::after {
161
+ content: '';
162
+ position: absolute;
163
+ width: 70%;
164
+ height: 4px;
165
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
166
+ bottom: -8px;
167
+ left: 15%;
168
+ border-radius: 4px;
169
+ }
170
+ </style>
171
+ </head>
172
+ <body>
173
+ <!-- Scroll to Top Button -->
174
+ <button id="scrollTop" class="scroll-top fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg z-50">
175
+ <i class="fas fa-arrow-up text-xl"></i>
176
+ </button>
177
+
178
+ <!-- Navigation -->
179
+ <nav class="bg-white shadow-md sticky top-0 z-40">
180
+ <div class="container mx-auto px-4 py-3">
181
+ <div class="flex justify-between items-center">
182
+ <div class="flex items-center">
183
+ <a href="#" class="flex items-center">
184
+ <img src="https://i.imgur.com/JqYeZ0P.png" alt="PATSO IN Cankaya Logo" class="h-10 mr-3">
185
+ <span class="text-xl font-bold text-primary">PATSO IN <span class="text-secondary">Çankaya</span></span>
186
+ </a>
187
+ </div>
188
+
189
+ <div class="hidden md:flex space-x-8">
190
+ <a href="#home" class="nav-link active-nav text-dark font-medium">Ana Sayfa</a>
191
+ <a href="#menu" class="nav-link text-dark font-medium">Menü</a>
192
+ <a href="#about" class="nav-link text-dark font-medium">Hakkımızda</a>
193
+ <a href="#contact" class="nav-link text-dark font-medium">İletişim</a>
194
+ </div>
195
+
196
+ <div class="md:hidden">
197
+ <button id="mobileMenuButton" class="text-dark focus:outline-none">
198
+ <i class="fas fa-bars text-2xl"></i>
199
+ </button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Mobile Menu -->
205
+ <div id="mobileMenu" class="hidden md:hidden bg-white shadow-lg">
206
+ <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
207
+ <a href="#home" class="nav-link active-nav text-dark font-medium py-2">Ana Sayfa</a>
208
+ <a href="#menu" class="nav-link text-dark font-medium py-2">Menü</a>
209
+ <a href="#about" class="nav-link text-dark font-medium py-2">Hakkımızda</a>
210
+ <a href="#contact" class="nav-link text-dark font-medium py-2">İletişim</a>
211
+ </div>
212
+ </div>
213
+ </nav>
214
+
215
+ <!-- Hero Section -->
216
+ <section id="home" class="hero-section flex items-center justify-center text-center text-white">
217
+ <div class="container mx-auto px-4">
218
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Çankaya'nın <span class="text-secondary">En Lezzetli</span> Patso'su</h1>
219
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">2009'dan beri Ankara'nın en özel patso lezzetlerini sunuyoruz!</p>
220
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
221
+ <a href="#menu" class="bg-primary hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
222
+ <i class="fas fa-utensils mr-2"></i> Menüyü Gör
223
+ </a>
224
+ <a href="#contact" class="bg-secondary hover:bg-yellow-500 text-dark font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
225
+ <i class="fas fa-phone-alt mr-2"></i> Sipariş Ver
226
+ </a>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2">
231
+ <a href="#menu" class="text-white text-2xl floating-btn">
232
+ <i class="fas fa-chevron-down"></i>
233
+ </a>
234
+ </div>
235
+ </section>
236
+
237
+ <!-- Features Section -->
238
+ <section class="py-16 bg-white">
239
+ <div class="container mx-auto px-4">
240
+ <h2 class="text-3xl font-bold text-center mb-12 section-title">Neden <span class="text-primary">Biz?</span></h2>
241
+
242
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
243
+ <div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100">
244
+ <div class="bg-primary text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
245
+ <i class="fas fa-award text-2xl"></i>
246
+ </div>
247
+ <h3 class="text-xl font-semibold mb-3">Kaliteli Malzemeler</h3>
248
+ <p class="text-gray-600">Tüm ürünlerimizde en taze ve kaliteli malzemeleri kullanıyoruz. Günlük taze ekmek ve özenle seçilmi�� etler.</p>
249
+ </div>
250
+
251
+ <div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100">
252
+ <div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
253
+ <i class="fas fa-clock text-2xl"></i>
254
+ </div>
255
+ <h3 class="text-xl font-semibold mb-3">Hızlı Servis</h3>
256
+ <p class="text-gray-600">Siparişleriniz en kısa sürede hazırlanır ve sıcak bir şekilde size ulaştırılır. Ortalama 10 dakika!</p>
257
+ </div>
258
+
259
+ <div class="text-center p-6 rounded-lg bg-gradient-to-b from-gray-50 to-white hover:shadow-xl transition duration-300 border border-gray-100">
260
+ <div class="bg-secondary text-dark w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
261
+ <i class="fas fa-heart text-2xl"></i>
262
+ </div>
263
+ <h3 class="text-xl font-semibold mb-3">Özel Tarifler</h3>
264
+ <p class="text-gray-600">15 yıllık tecrübemizle geliştirdiğimiz özel soslar ve tariflerle benzersiz lezzetler sunuyoruz.</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- Popular Items -->
271
+ <section class="py-16 bg-gray-50">
272
+ <div class="container mx-auto px-4">
273
+ <h2 class="text-3xl font-bold text-center mb-12 section-title">Öne Çıkan <span class="text-primary">Lezzetler</span></h2>
274
+
275
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
276
+ <!-- Item 1 -->
277
+ <div class="food-card bg-white rounded-lg overflow-hidden shadow-md">
278
+ <div class="relative h-48 overflow-hidden">
279
+ <img src="https://i.imgur.com/5X8Q2Zr.jpg" alt="Karışık Patso" class="food-img w-full h-full object-cover">
280
+ <span class="price-tag">70₺</span>
281
+ </div>
282
+ <div class="p-4">
283
+ <h3 class="font-bold text-lg mb-2">Karışık Patso</h3>
284
+ <p class="text-gray-600 text-sm">Sucuk, sosis, kaşar ve özel soslarımızla hazırlanan nefis patso</p>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Item 2 -->
289
+ <div class="food-card bg-white rounded-lg overflow-hidden shadow-md">
290
+ <div class="relative h-48 overflow-hidden">
291
+ <img src="https://i.imgur.com/9zJbWQq.jpg" alt="Dana Burger Menü" class="food-img w-full h-full object-cover">
292
+ <span class="price-tag">200₺</span>
293
+ </div>
294
+ <div class="p-4">
295
+ <h3 class="font-bold text-lg mb-2">Dana Burger Menü</h3>
296
+ <p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu ve İçecek</p>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Item 3 -->
301
+ <div class="food-card bg-white rounded-lg overflow-hidden shadow-md">
302
+ <div class="relative h-48 overflow-hidden">
303
+ <img src="https://i.imgur.com/3QvV7tT.jpg" alt="Karışık Çıtır Pizza" class="food-img w-full h-full object-cover">
304
+ <span class="price-tag">220₺</span>
305
+ </div>
306
+ <div class="p-4">
307
+ <h3 class="font-bold text-lg mb-2">Karışık Çıtır Pizza</h3>
308
+ <p class="text-gray-600 text-sm">İnce ve çıtır hamur üzerinde zengin malzemeler</p>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Item 4 -->
313
+ <div class="food-card bg-white rounded-lg overflow-hidden shadow-md">
314
+ <div class="relative h-48 overflow-hidden">
315
+ <img src="https://i.imgur.com/7KjYV9p.jpg" alt="Ayvalık Tost" class="food-img w-full h-full object-cover">
316
+ <span class="price-tag">80₺</span>
317
+ </div>
318
+ <div class="p-4">
319
+ <h3 class="font-bold text-lg mb-2">Ayvalık Tost</h3>
320
+ <p class="text-gray-600 text-sm">Ayvalık usulü özel tostumuz</p>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="text-center mt-10">
326
+ <a href="#menu" class="inline-block bg-primary hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg">
327
+ Tüm Menüyü Gör <i class="fas fa-arrow-right ml-2"></i>
328
+ </a>
329
+ </div>
330
+ </div>
331
+ </section>
332
+
333
+ <!-- Menu Section -->
334
+ <section id="menu" class="py-16 bg-white">
335
+ <div class="container mx-auto px-4">
336
+ <h2 class="text-3xl font-bold text-center mb-4 section-title">Menümüz</h2>
337
+ <p class="text-center text-gray-600 mb-12">150'den fazla çeşit ile Ankara'nın en geniş patso ve fast food menüsü</p>
338
+
339
+ <!-- Menu Categories -->
340
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
341
+ <!-- Patso Category -->
342
+ <div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
343
+ <div class="bg-primary text-white py-3 px-4">
344
+ <h3 class="text-xl font-bold category-title">Patso Çeşitleri</h3>
345
+ </div>
346
+ <div class="p-4">
347
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
348
+ <div class="flex justify-between items-start">
349
+ <div>
350
+ <h4 class="font-bold text-lg">Klasik Patso</h4>
351
+ <p class="text-gray-600 text-sm">Özel soslarımızla hazırlanan nefis patso</p>
352
+ </div>
353
+ <span class="font-bold text-primary">50₺</span>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
358
+ <div class="flex justify-between items-start">
359
+ <div>
360
+ <h4 class="font-bold text-lg">Sucuklu Patso</h4>
361
+ <p class="text-gray-600 text-sm">Bol sucuklu özel patso</p>
362
+ </div>
363
+ <span class="font-bold text-primary">70₺</span>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
368
+ <div class="flex justify-between items-start">
369
+ <div>
370
+ <h4 class="font-bold text-lg">Kaşarlı Patso</h4>
371
+ <p class="text-gray-600 text-sm">Bol kaşarlı özel patso</p>
372
+ </div>
373
+ <span class="font-bold text-primary">70₺</span>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
378
+ <div class="flex justify-between items-start">
379
+ <div>
380
+ <h4 class="font-bold text-lg">Sosisli Patso</h4>
381
+ <p class="text-gray-600 text-sm">Sosis ve patso birlikte</p>
382
+ </div>
383
+ <span class="font-bold text-primary">70₺</span>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="menu-item bg-white rounded-lg p-4">
388
+ <div class="flex justify-between items-start">
389
+ <div>
390
+ <h4 class="font-bold text-lg">Karışık Patso</h4>
391
+ <p class="text-gray-600 text-sm">Sucuk, sosis, kaşar hepsi bir arada</p>
392
+ </div>
393
+ <span class="font-bold text-primary">70₺</span>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Tabak Patso Category -->
400
+ <div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
401
+ <div class="bg-accent text-white py-3 px-4">
402
+ <h3 class="text-xl font-bold category-title">Tabak Patso</h3>
403
+ </div>
404
+ <div class="p-4">
405
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
406
+ <div class="flex justify-between items-start">
407
+ <div>
408
+ <h4 class="font-bold text-lg">Tabak Patso</h4>
409
+ <p class="text-gray-600 text-sm">Tabakta servis edilen patso</p>
410
+ </div>
411
+ <span class="font-bold text-primary">60₺</span>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
416
+ <div class="flex justify-between items-start">
417
+ <div>
418
+ <h4 class="font-bold text-lg">Kaşarlı Tabak Patso</h4>
419
+ <p class="text-gray-600 text-sm">Tabakta bol kaşarlı</p>
420
+ </div>
421
+ <span class="font-bold text-primary">80₺</span>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
426
+ <div class="flex justify-between items-start">
427
+ <div>
428
+ <h4 class="font-bold text-lg">Sosisli Tabak Patso</h4>
429
+ <p class="text-gray-600 text-sm">Tabakta sosisli</p>
430
+ </div>
431
+ <span class="font-bold text-primary">80₺</span>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="menu-item bg-white rounded-lg p-4">
436
+ <div class="flex justify-between items-start">
437
+ <div>
438
+ <h4 class="font-bold text-lg">Sucuklu Tabak Patso</h4>
439
+ <p class="text-gray-600 text-sm">Tabakta sucuklu</p>
440
+ </div>
441
+ <span class="font-bold text-primary">80₺</span>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Burger Category -->
448
+ <div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
449
+ <div class="bg-secondary text-dark py-3 px-4">
450
+ <h3 class="text-xl font-bold category-title">Burger Çeşitleri</h3>
451
+ </div>
452
+ <div class="p-4">
453
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
454
+ <div class="flex justify-between items-start">
455
+ <div>
456
+ <h4 class="font-bold text-lg">Tavuk Burger</h4>
457
+ <p class="text-gray-600 text-sm">Nefis tavuk burger</p>
458
+ </div>
459
+ <span class="font-bold text-primary">70₺</span>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
464
+ <div class="flex justify-between items-start">
465
+ <div>
466
+ <h4 class="font-bold text-lg">Tavuk Burger Double</h4>
467
+ <p class="text-gray-600 text-sm">Çift kat tavuk burger</p>
468
+ </div>
469
+ <span class="font-bold text-primary">100₺</span>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
474
+ <div class="flex justify-between items-start">
475
+ <div>
476
+ <h4 class="font-bold text-lg">Tavuk Burger Menü</h4>
477
+ <p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu, İçecek</p>
478
+ </div>
479
+ <span class="font-bold text-primary">100₺</span>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
484
+ <div class="flex justify-between items-start">
485
+ <div>
486
+ <h4 class="font-bold text-lg">Köfte Burger</h4>
487
+ <p class="text-gray-600 text-sm">Özel köfteli burger</p>
488
+ </div>
489
+ <span class="font-bold text-primary">80₺</span>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="menu-item bg-white rounded-lg p-4">
494
+ <div class="flex justify-between items-start">
495
+ <div>
496
+ <h4 class="font-bold text-lg">Dana Burger Menü</h4>
497
+ <p class="text-gray-600 text-sm">Yanında Soğan Halkası, Patates, Turşu, İçecek</p>
498
+ </div>
499
+ <span class="font-bold text-primary">200₺</span>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Pizza Category -->
506
+ <div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
507
+ <div class="bg-primary text-white py-3 px-4">
508
+ <h3 class="text-xl font-bold category-title">Pizza Çeşitleri</h3>
509
+ </div>
510
+ <div class="p-4">
511
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
512
+ <div class="flex justify-between items-start">
513
+ <div>
514
+ <h4 class="font-bold text-lg">Karışık Çıtır Pizza</h4>
515
+ <p class="text-gray-600 text-sm">İnce ve çıtır hamur üzerinde karışık malzemeler</p>
516
+ </div>
517
+ <span class="font-bold text-primary">220₺</span>
518
+ </div>
519
+ </div>
520
+
521
+ <div class="menu-item bg-white rounded-lg p-4">
522
+ <div class="flex justify-between items-start">
523
+ <div>
524
+ <h4 class="font-bold text-lg">Karışık Pizza</h4>
525
+ <p class="text-gray-600 text-sm">Klasik karışık pizza</p>
526
+ </div>
527
+ <span class="font-bold text-primary">200₺</span>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <!-- Tost Category -->
534
+ <div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
535
+ <div class="bg-accent text-white py-3 px-4">
536
+ <h3 class="text-xl font-bold category-title">Tost Çeşitleri</h3>
537
+ </div>
538
+ <div class="p-4">
539
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
540
+ <div class="flex justify-between items-start">
541
+ <div>
542
+ <h4 class="font-bold text-lg">Karışık Tost</h4>
543
+ <p class="text-gray-600 text-sm">Öğrenci dostu karışık tost</p>
544
+ </div>
545
+ <span class="font-bold text-primary">60₺</span>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
550
+ <div class="flex justify-between items-start">
551
+ <div>
552
+ <h4 class="font-bold text-lg">Kaşarlı Tost</h4>
553
+ <p class="text-gray-600 text-sm">Bol kaşarlı tost</p>
554
+ </div>
555
+ <span class="font-bold text-primary">60₺</span>
556
+ </div>
557
+ </div>
558
+
559
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
560
+ <div class="flex justify-between items-start">
561
+ <div>
562
+ <h4 class="font-bold text-lg">Sucuklu Tost</h4>
563
+ <p class="text-gray-600 text-sm">Sucuklu tost</p>
564
+ </div>
565
+ <span class="font-bold text-primary">60₺</span>
566
+ </div>
567
+ </div>
568
+
569
+ <div class="menu-item bg-white rounded-lg p-4">
570
+ <div class="flex justify-between items-start">
571
+ <div>
572
+ <h4 class="font-bold text-lg">Ayvalık Tost</h4>
573
+ <p class="text-gray-600 text-sm">Ayvalık usulü özel tost</p>
574
+ </div>
575
+ <span class="font-bold text-primary">80₺</span>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+
581
+ <!-- İçecek Category -->
582
+ <div class="bg-gradient-to-b from-gray-50 to-white rounded-lg overflow-hidden shadow-lg">
583
+ <div class="bg-secondary text-dark py-3 px-4">
584
+ <h3 class="text-xl font-bold category-title">İçecekler</h3>
585
+ </div>
586
+ <div class="p-4">
587
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
588
+ <div class="flex justify-between items-start">
589
+ <div>
590
+ <h4 class="font-bold text-lg">Kutu Kola</h4>
591
+ <p class="text-gray-600 text-sm">330ml kutu kola</p>
592
+ </div>
593
+ <span class="font-bold text-primary">40₺</span>
594
+ </div>
595
+ </div>
596
+
597
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
598
+ <div class="flex justify-between items-start">
599
+ <div>
600
+ <h4 class="font-bold text-lg">Şişe Kola</h4>
601
+ <p class="text-gray-600 text-sm">250ml şişe kola</p>
602
+ </div>
603
+ <span class="font-bold text-primary">36₺</span>
604
+ </div>
605
+ </div>
606
+
607
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
608
+ <div class="flex justify-between items-start">
609
+ <div>
610
+ <h4 class="font-bold text-lg">Litre Kola</h4>
611
+ <p class="text-gray-600 text-sm">1lt kola</p>
612
+ </div>
613
+ <span class="font-bold text-primary">60₺</span>
614
+ </div>
615
+ </div>
616
+
617
+ <div class="menu-item bg-white rounded-lg p-4 mb-4">
618
+ <div class="flex justify-between items-start">
619
+ <div>
620
+ <h4 class="font-bold text-lg">Çamlıca</h4>
621
+ <p class="text-gray-600 text-sm">Meyveli soda</p>
622
+ </div>
623
+ <span class="font-bold text-primary">30₺</span>
624
+ </div>
625
+ </div>
626
+
627
+ <div class="menu-item bg-white rounded-lg p-4">
628
+ <div class="flex justify-between items-start">
629
+ <div>
630
+ <h4 class="font-bold text-lg">Çay</h4>
631
+ <p class="text-gray-600 text-sm">Sıcak çay</p>
632
+ </div>
633
+ <span class="font-bold text-primary">10₺</span>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </section>
641
+
642
+ <!-- About Section -->
643
+ <section id="about" class="py-16 bg-gray-50">
644
+ <div class="container mx-auto px-4">
645
+ <div class="flex flex-col lg:flex-row items-center">
646
+ <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
647
+ <h2 class="text-3xl font-bold mb-6 section-title">PATSO IN <span class="text-primary">Çankaya</span></h2>
648
+ <p class="text-gray-600 mb-4">2009 yılında Çankaya'da küçük bir dükkan olarak başlayan yolculuğumuz, bugün Ankara'nın en sevilen patso ve fast food mekanlarından biri haline geldi.</p>
649
+ <p class="text-gray-600 mb-4">Kurulduğumuz günden bu yana, geleneksel lezzetleri modern sunumlarla birleştirerek müşterilerimize unutulmaz bir deneyim yaşatmayı hedefledik. Özellikle öğrenciler tarafından çok sevilen mekanımız, uygun fiyat politikası ve bol porsiyonlarıyla ünlüdür.</p>
650
+ <p class="text-gray-600 mb-4">Tüm ürünlerimizde günlük taze ekmek, özenle seçilmiş etler ve kendimize özgü soslar kullanıyoruz. Menümüzde patsodan burgerlere, tostlardan pizzalara kadar geniş bir yelpazede lezzetler bulabilirsiniz.</p>
651
+ <p class="text-gray-600">2022 yılında yapılan "Ankara'nın En İyi Patso'su" anketinde birinci seçildik. Bu başarıyı müşteri memnuniyetine verdiğimiz öneme ve kaliteden ödün vermeyen anlayışımıza borçluyuz.</p>
652
+
653
+ <div class="mt-8 grid grid-cols-2 gap-4">
654
+ <div class="bg-white p-4 rounded-lg shadow-sm">
655
+ <div class="text-primary text-2xl mb-2">
656
+ <i class="fas fa-users"></i>
657
+ </div>
658
+ <h4 class="font-bold">15.000+</h4>
659
+ <p class="text-gray-600 text-sm">Mutlu Müşteri</p>
660
+ </div>
661
+ <div class="bg-white p-4 rounded-lg shadow-sm">
662
+ <div class="text-primary text-2xl mb-2">
663
+ <i class="fas fa-utensils"></i>
664
+ </div>
665
+ <h4 class="font-bold">150+</h4>
666
+ <p class="text-gray-600 text-sm">Menü Çeşidi</p>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ <div class="lg:w-1/2">
671
+ <div class="grid grid-cols-2 gap-4">
672
+ <div class="rounded-lg overflow-hidden shadow-lg h-48">
673
+ <img src="https://i.imgur.com/8zJqX9a.jpg" alt="Restoran İçi" class="w-full h-full object-cover">
674
+ </div>
675
+ <div class="rounded-lg overflow-hidden shadow-lg h-48">
676
+ <img src="https://i.imgur.com/3kLmJ9T.jpg" alt="Patso Hazırlık" class="w-full h-full object-cover">
677
+ </div>
678
+ <div class="rounded-lg overflow-hidden shadow-lg h-48">
679
+ <img src="https://i.imgur.com/5X8Q2Zr.jpg" alt="Patso Çeşitleri" class="w-full h-full object-cover">
680
+ </div>
681
+ <div class="rounded-lg overflow-hidden shadow-lg h-48">
682
+ <img src="https://i.imgur.com/9zJbWQq.jpg" alt="Burger Çeşitleri" class="w-full h-full object-cover">
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </section>
689
+
690
+ <!-- Testimonials -->
691
+ <section class="py-16 bg-white">
692
+ <div class="container mx-auto px-4">
693
+ <h2 class="text-3xl font-bold text-center mb-12 section-title">Müşteri <span class="text-primary">Yorumları</span></h2>
694
+
695
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
696
+ <!-- Testimonial 1 -->
697
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
698
+ <div class="flex items-center mb-4">
699
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Ayşe K." class="w-12 h-12 rounded-full mr-4">
700
+ <div>
701
+ <h4 class="font-bold">Ayşe K.</h4>
702
+ <div class="flex text-yellow-400">
703
+ <i class="fas fa-star"></i>
704
+ <i class="fas fa-star"></i>
705
+ <i class="fas fa-star"></i>
706
+ <i class="fas fa-star"></i>
707
+ <i class="fas fa-star"></i>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ <p class="text-gray-600">"Ankara'da yediğim en lezzetli patso! Özellikle karışık patso ve ayran ikilisi muhteşem. Fiyat/performans oranı çok iyi."</p>
712
+ </div>
713
+
714
+ <!-- Testimonial 2 -->
715
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
716
+ <div class="flex items-center mb-4">
717
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Mehmet T." class="w-12 h-12 rounded-full mr-4">
718
+ <div>
719
+ <h4 class="font-bold">Mehmet T.</h4>
720
+ <div class="flex text-yellow-400">
721
+ <i class="fas fa-star"></i>
722
+ <i class="fas fa-star"></i>
723
+ <i class="fas fa-star"></i>
724
+ <i class="fas fa-star"></i>
725
+ <i class="fas fa-star-half-alt"></i>
726
+ </div>
727
+ </div>
728
+ </div>
729
+ <p class="text-gray-600">"Öğrenci dostu fiyatlar ve bol porsiyonlar. Tavuk burger menü favorim, yanındaki patatesler de çok lezzetli."</p>
730
+ </div>
731
+
732
+ <!-- Testimonial 3 -->
733
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
734
+ <div class="flex items-center mb-4">
735
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Zeynep A." class="w-12 h-12 rounded-full mr-4">
736
+ <div>
737
+ <h4 class="font-bold">Zeynep A.</h4>
738
+ <div class="flex text-yellow-400">
739
+ <i class="fas fa-star"></i>
740
+ <i class="fas fa-star"></i>
741
+ <i class="fas fa-star"></i>
742
+ <i class="fas fa-star"></i>
743
+ <i class="fas fa-star"></i>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ <p class="text-gray-600">"Çalışanlar çok ilgili ve güler yüzlü. Karışık çıtır pizza inanılmaz lezzetli, mutlaka denemelisiniz!"</p>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ </section>
752
+
753
+ <!-- Contact Section -->
754
+ <section id="contact" class="py-16 bg-primary text-white">
755
+ <div class="container mx-auto px-4">
756
+ <h2 class="text-3xl font-bold text-center mb-12 section-title">Bize <span class="text-secondary">Ulaşın</span></h2>
757
+
758
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
759
+ <div>
760
+ <h3 class="text-xl font-semibold mb-6">İletişim Bilgileri</h3>
761
+
762
+ <div class="space-y-6">
763
+ <div class="flex items-start">
764
+ <div class="bg-secondary text-dark p-3 rounded-full mr-4">
765
+ <i class="fas fa-map-marker-alt"></i>
766
+ </div>
767
+ <div>
768
+ <h4 class="font-semibold">Adres</h4>
769
+ <p class="text-gray-200">Kızılay Mahallesi, Atatürk Bulvarı No:154/A, Çankaya/Ankara</p>
770
+ </div>
771
+ </div>
772
+
773
+ <div class="flex items-start">
774
+ <div class="bg-secondary text-dark p-3 rounded-full mr-4">
775
+ <i class="fas fa-phone-alt"></i>
776
+ </div>
777
+ <div>
778
+ <h4 class="font-semibold">Telefon</h4>
779
+ <p class="text-gray-200">0312 123 45 67</p>
780
+ <p class="text-gray-200">0555 123 45 67 (WhatsApp)</p>
781
+ </div>
782
+ </div>
783
+
784
+ <div class="flex items-start">
785
+ <div class="bg-secondary text-dark p-3 rounded-full mr-4">
786
+ <i class="fas fa-envelope"></i>
787
+ </div>
788
+ <div>
789
+ <h4 class="font-semibold">Email</h4>
790
+ <p class="text-gray-200">info@patsocankaya.com</p>
791
+ </div>
792
+ </div>
793
+
794
+ <div class="flex items-start">
795
+ <div class="bg-secondary text-dark p-3 rounded-full mr-4">
796
+ <i class="fas fa-clock"></i>
797
+ </div>
798
+ <div>
799
+ <h4 class="font-semibold">Çalışma Saatleri</h4>
800
+ <p class="text-gray-200">Pazartesi - Cumartesi: 09:00 - 23:00</p>
801
+ <p class="text-gray-200">Pazar: 10:00 - 22:00</p>
802
+ </div>
803
+ </div>
804
+ </div>
805
+
806
+ <div class="mt-8">
807
+ <h4 class="font-semibold mb-4">Sosyal Medya</h4>
808
+ <div class="flex space-x-4">
809
+ <a href="#" class="bg-secondary text-dark p-3 rounded-full hover:bg-yellow-500 transition duration-300">
810
+ <i class="fab fa-facebook-f"></i>
811
+ </a>
812
+ <a href="#" class="bg-secondary text-dark p-3 rounded-full hover:bg-yellow-500 transition duration-300">
813
+ <i class="fab fa-instagram"></i>
814
+ </a>
815
+ <a href="#" class="bg-secondary text-dark p-3 rounded-full hover:bg-yellow-500 transition duration-300">
816
+ <i class="fab fa-twitter"></i>
817
+ </a>
818
+ <a href="#" class="bg-secondary text-dark p-3 rounded-full hover:bg-yellow-500 transition duration-300">
819
+ <i class="fab fa-youtube"></i>
820
+ </a>
821
+ </div>
822
+ </div>
823
+ </div>
824
+
825
+ <div>
826
+ <h3 class="text-xl font-semibold mb-6">Konumumuz</h3>
827
+
828
+ <div class="map-container h-96 bg-gray-200 relative">
829
+ <img src="https://maps.googleapis.com/maps/api/staticmap?center=Kızılay,Ankara&zoom=15&size=800x400&maptype=roadmap&markers=color:red%7CKızılay,Ankara&key=YOUR_API_KEY" alt="Harita" class="w-full h-full object-cover">
830
+ <div class="map-marker">
831
+ <i class="fas fa-map-pin"></i>
832
+ </div>
833
+ </div>
834
+
835
+ <div class="mt-6">
836
+ <h4 class="font-semibold mb-4">Hızlı Sipariş</h4>
837
+ <form class="space-y-4">
838
+ <div>
839
+ <input type="text" placeholder="Adınız" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent">
840
+ </div>
841
+ <div>
842
+ <input type="tel" placeholder="Telefon Numaranız" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent">
843
+ </div>
844
+ <div>
845
+ <textarea placeholder="Siparişiniz ve Adres Bilgileriniz" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent"></textarea>
846
+ </div>
847
+ <button type="submit" class="bg-secondary hover:bg-yellow-500 text-dark font-bold py-3 px-6 rounded-lg transition duration-300 w-full">
848
+ <i class="fas fa-paper-plane mr-2"></i> Sipariş Gönder
849
+ </button>
850
+ </form>
851
+ </div>
852
+ </div>
853
+ </div>
854
+ </div>
855
+ </section>
856
+
857
+ <!-- Footer -->
858
+ <footer class="bg-dark text-white py-8">
859
+ <div class="container mx-auto px-4">
860
+ <div class="flex flex-col md:flex-row justify-between items-center">
861
+ <div class="mb-6 md:mb-0">
862
+ <a href="#" class="flex items-center">
863
+ <img src="https://i.imgur.com/JqYeZ0P.png" alt="PATSO IN Cankaya Logo" class="h-10 mr-3">
864
+ <span class="text-xl font-bold text-white">PATSO IN <span class="text-secondary">Çankaya</span></span>
865
+ </a>
866
+ <p class="mt-2 text-gray-400">Lezzetin Adresi</p>
867
+ </div>
868
+
869
+ <div class="flex flex-col items-center md:items-end">
870
+ <p class="text-gray-400 mb-2">© 2023 PATSO IN Çankaya. Tüm hakları saklıdır.</p>
871
+ <div class="flex space-x-4">
872
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Gizlilik Politikası</a>
873
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Kullanım Şartları</a>
874
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">Çerez Politikası</a>
875
+ </div>
876
+ </div>
877
+ </div>
878
+ </div>
879
+ </footer>
880
+
881
+ <script>
882
+ // Mobile Menu Toggle
883
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
884
+ const mobileMenu = document.getElementById('mobileMenu');
885
+
886
+ mobileMenuButton.addEventListener('click', () => {
887
+ mobileMenu.classList.toggle('hidden');
888
+ });
889
+
890
+ // Smooth Scrolling for Navigation Links
891
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
892
+ anchor.addEventListener('click', function (e) {
893
+ e.preventDefault();
894
+
895
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
896
+ behavior: 'smooth'
897
+ });
898
+
899
+ // Close mobile menu if open
900
+ if (!mobileMenu.classList.contains('hidden')) {
901
+ mobileMenu.classList.add('hidden');
902
+ }
903
+ });
904
+ });
905
+
906
+ // Update active navigation link on scroll
907
+ const sections = document.querySelectorAll('section');
908
+ const navLinks = document.querySelectorAll('.nav-link');
909
+
910
+ window.addEventListener('scroll', () => {
911
+ let current = '';
912
+
913
+ sections.forEach(section => {
914
+ const sectionTop = section.offsetTop;
915
+ const sectionHeight = section.clientHeight;
916
+
917
+ if (pageYOffset >= sectionTop - 300) {
918
+ current = section.getAttribute('id');
919
+ }
920
+ });
921
+
922
+ navLinks.forEach(link => {
923
+ link.classList.remove('active-nav');
924
+ if (link.getAttribute('href') === `#${current}`) {
925
+ link.classList.add('active-nav');
926
+ }
927
+ });
928
+
929
+ // Show/hide scroll to top button
930
+ const scrollTopBtn = document.getElementById('scrollTop');
931
+ if (window.pageYOffset > 300) {
932
+ scrollTopBtn.classList.add('active');
933
+ } else {
934
+ scrollTopBtn.classList.remove('active');
935
+ }
936
+ });
937
+
938
+ // Scroll to top functionality
939
+ document.getElementById('scrollTop').addEventListener('click', () => {
940
+ window.scrollTo({
941
+ top: 0,
942
+ behavior: 'smooth'
943
+ });
944
+ });
945
+
946
+ // Form submission (prevent default for demo)
947
+ const forms = document.querySelectorAll('form');
948
+ forms.forEach(form => {
949
+ form.addEventListener('submit', (e) => {
950
+ e.preventDefault();
951
+ alert('Teşekkür ederiz! Siparişiniz alınmıştır. En kısa sürede sizinle iletişime geçilecektir.');
952
+ });
953
+ });
954
+ </script>
955
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ziffir/websitesi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
956
+ </html>