:root {
  
 
  --primary-color: #7C5A3E;
  --primary-dark: #5C3F2A; 
  --primary-light: #9D7A5F;
  --secondary-color: #B8956A; 
  --accent-color: #D4A574; 
  --accent-light: #E8C5A0; 
  
  --coffee-brown: #6B4E3D; 
  --cream: #F5E6D3; 
  --cream-light: #FAF5EF; 
  --cream-dark: #E8DCC6; 
 
  --bg-dark: #4a2b15;
  --bg-card: #3A2E24; 
  --bg-card-light: #4A3E32; 
  --bg-overlay: rgba(42, 31, 23, 0.8); 
  
 
  --text-primary: #F5E6D3; 
  --text-secondary: #D4BFA0; 
  --text-muted: #B8A68A;
  
  /* Gradient'ler - Uyumlu Geçişler */
  --gradient-1: linear-gradient(135deg, #7C5A3E 0%, #B8956A 50%, #D4A574 100%); /* Ana gradient */
  --gradient-2: linear-gradient(135deg, #B8956A 0%, #D4A574 50%, #E8C5A0 100%); /* İkincil gradient */
  --gradient-3: linear-gradient(180deg, #2A1F17 0%, #3A2E24 100%); /* Dikey gradient */
  --gradient-4: linear-gradient(135deg, rgba(124, 90, 62, 0.1) 0%, rgba(212, 165, 116, 0.1) 100%); /* Şeffaf gradient */
  
  /* Gölgeler */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); /* Küçük gölge */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); /* Orta gölge */
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); /* Büyük gölge */
  --shadow-colored: 0 4px 20px rgba(124, 90, 62, 0.3); /* Renkli gölge */
  
  /* Geçişler */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Standart geçiş efekti */
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Yavaş geçiş efekti */
}

/* ============================================
   RESET & BASE STYLES
   Tüm elementler için temel stil ayarları
   ============================================ */

/* Reset & Base Styles */
/* Tüm elementlerin varsayılan margin ve padding'ini sıfırlar */
* {
  margin: 0; /* Dış boşluk sıfırla */
  padding: 0; /* İç boşluk sıfırla */
  box-sizing: border-box; /* Border dahil kutu modeli */
}

/* Body Stilleri */
/* Ana sayfa gövdesi için stil tanımlamaları */
body {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; /* Font ailesi */
  background: var(--bg-dark); /* Arka plan rengi */
  color: var(--text-primary); /* Metin rengi */
  line-height: 1.6; /* Satır yüksekliği */
  overflow-x: hidden; /* Yatay kaydırmayı gizle */
  min-height: 100vh; /* Minimum yükseklik - viewport yüksekliği */
}

/* Smooth Scrolling */
/* Sayfa içi linklerde yumuşak kaydırma efekti */
html {
  scroll-behavior: smooth; /* Yumuşak kaydırma */
}

/* ============================================
   HEADER STYLES
   Üst menü ve navigasyon stilleri
   ============================================ */

/* Header Styles */
/* Üst menü çubuğu için stil tanımlamaları */
.header {
  display: flex; /* Flexbox düzeni */
  justify-content: space-between; /* Elemanları arasında boşluk */
  align-items: center; /* Dikey hizalama - ortala */
  padding: 1.5rem 3rem; /* İç boşluk - üst-alt: 1.5rem, sağ-sol: 3rem */
  background: var(--gradient-1); /* Gradient arka plan */
  backdrop-filter: blur(10px); /* Arka plan bulanıklığı */
  position: sticky; /* Yapışkan pozisyon */
  top: 0; /* Üstten 0px */
  z-index: 1000; /* Katman sırası - en üstte */
  box-shadow: var(--shadow-md); /* Orta gölge */
  transition: var(--transition); /* Geçiş efekti */
}

/* Header Hover Efekti */
/* Fare üzerine geldiğinde gölge artar */
.header:hover {
  box-shadow: var(--shadow-lg); /* Büyük gölge */
}

/* Logo Stilleri */
/* Site logosu için stil tanımlamaları */
.header .logo {
  font-size: 1.75rem; /* Font boyutu */
  font-weight: 700; /* Kalın yazı */
  background: linear-gradient(135deg, var(--cream) 0%, var(--accent-light) 100%); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
  letter-spacing: -0.5px; /* Harf aralığı */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Metin gölgesi */
}

/* Navigation Container */
/* Navigasyon menüsü için container */
.nav {
  display: flex; /* Flexbox düzeni */
  gap: 2rem; /* Elemanlar arası boşluk */
}

/* Navigation Link Stilleri */
/* Menü linkleri için stil tanımlamaları */
.nav a {
  color: var(--cream); /* Link rengi */
  text-decoration: none; /* Alt çizgiyi kaldır */
  font-weight: 500; /* Orta kalınlık */
  position: relative; /* Pozisyon - alt çizgi için */
  padding: 0.5rem 0; /* İç boşluk - üst-alt */
  transition: var(--transition); /* Geçiş efekti */
}

/* Navigation Link Alt Çizgisi */
/* Link altında animasyonlu çizgi */
.nav a::after {
  content: ''; /* Boş içerik */
  position: absolute; /* Mutlak pozisyon */
  bottom: 0; /* Alttan 0px */
  left: 0; /* Soldan 0px */
  width: 0; /* Başlangıç genişliği - 0 */
  height: 2px; /* Çizgi yüksekliği */
  background: var(--accent-light); /* Çizgi rengi */
  transition: var(--transition); /* Geçiş efekti */
}

/* Navigation Link Hover - Alt Çizgi */
/* Fare üzerine geldiğinde çizgi genişler */
.nav a:hover::after {
  width: 100%; /* Tam genişlik */
}

/* Navigation Link Hover */
/* Fare üzerine geldiğinde yukarı kayar */
.nav a:hover {
  transform: translateY(-2px); /* Yukarı kaydır */
}

/* ============================================
   HERO SECTION
   Ana sayfa hero bölümü stilleri
   ============================================ */

/* Hero Section */
/* Ana sayfa üst bölümü için stil tanımlamaları */
.hero {
  display: flex; /* Flexbox düzeni */
  justify-content: center; /* Yatay ortala */
  align-items: center; /* Dikey ortala */
  padding: 6rem 2rem; /* İç boşluk */
  gap: 3rem; /* Elemanlar arası boşluk */
  flex-wrap: wrap; /* Taşma durumunda alt satıra geç */
  max-width: 1200px; /* Maksimum genişlik */
  margin: 0 auto; /* Ortala */
  animation: fadeInUp 0.8s ease-out; /* Yukarıdan belirme animasyonu */
  background: var(--gradient-4); /* Şeffaf gradient arka plan */
  border-radius: 20px; /* Yuvarlatılmış köşeler */
  margin-top: 2rem; /* Üstten boşluk */
  margin-bottom: 2rem; /* Alttan boşluk */
  border: 1px solid rgba(212, 165, 116, 0.2); /* İnce border */
  box-shadow: var(--shadow-md); /* Orta gölge */
}

/* Fade In Up Animation */
/* Yukarıdan belirme animasyonu tanımı */
@keyframes fadeInUp {
  from {
    opacity: 0; /* Başlangıç - görünmez */
    transform: translateY(30px); /* Başlangıç - aşağıda */
  }
  to {
    opacity: 1; /* Bitiş - görünür */
    transform: translateY(0); /* Bitiş - normal pozisyon */
  }
}

/* Hero Profil Resmi */
/* Hero bölümündeki profil resmi için stiller */
.hero img.profil {
  width: 200px; /* Genişlik */
  height: 200px; /* Yükseklik */
  border-radius: 50%; /* Yuvarlak */
  object-fit: cover; /* Resmi kırp - kapa */
  border: 4px solid var(--primary-color); /* Border - ana renk */
  box-shadow: var(--shadow-lg); /* Büyük gölge */
  transition: var(--transition); /* Geçiş efekti */
  animation: float 3s ease-in-out infinite; /* Sürekli yüzme animasyonu */
}

/* Float Animation */
/* Yüzme animasyonu tanımı */
@keyframes float {
  0%, 100% {
    transform: translateY(0px); /* Başlangıç ve bitiş - normal */
  }
  50% {
    transform: translateY(-10px); /* Orta - yukarı */
  }
}

/* Hero Profil Resmi Hover */
/* Fare üzerine geldiğinde büyür ve döner */
.hero img.profil:hover {
  transform: scale(1.05) rotate(5deg); /* Büyüt ve döndür */
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.4); /* Renkli gölge */
}

/* Hero Text Container */
/* Hero bölümündeki metin alanı */
.hero-text {
  max-width: 500px; /* Maksimum genişlik */
  flex: 1; /* Esnek genişlik */
}

/* Hero Başlık 1 */
/* Ana başlık için stil */
.hero-text h1 {
  font-size: 3.5rem; /* Font boyutu */
  margin-bottom: 0.5rem; /* Alttan boşluk */
}

/* Hero Başlık 2 */
/* Alt başlık için stil */
.hero-text h2 {
  font-size: 2.5rem; /* Font boyutu */
  margin-bottom: 1rem; /* Alttan boşluk */
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
  line-height: 1.2; /* Satır yüksekliği */
}

/* Hero Paragraf */
/* Açıklama metni için stil */
.hero-text p {
  font-size: 1.1rem; /* Font boyutu */
  color: var(--text-secondary); /* İkincil metin rengi */
  line-height: 1.8; /* Satır yüksekliği */
  margin-bottom: 2rem; /* Alttan boşluk */
}

/* ============================================
   PROJECTS SECTION
   Projeler/Hakkımızda bölümü stilleri
   ============================================ */

/* Projects Section */
/* Projeler veya hakkımızda bölümü için stil */
.projects {
  padding: 5rem 2rem; /* İç boşluk */
  text-align: center; /* Metin ortala */
  background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(30, 41, 59, 0.5) 100%); /* Dikey gradient */
}

/* Projects Başlık */
/* Bölüm başlığı için stil */
.projects h2 {
  font-size: 2.5rem; /* Font boyutu */
  margin-bottom: 3rem; /* Alttan boşluk */
  background: var(--gradient-1); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
}

/* Project Container */
/* Proje kartlarının container'ı */
.project-container {
  display: flex; /* Flexbox düzeni */
  justify-content: center; /* Yatay ortala */
  gap: 2rem; /* Elemanlar arası boşluk */
  flex-wrap: wrap; /* Taşma durumunda alt satıra geç */
  max-width: 1200px; /* Maksimum genişlik */
  margin: 0 auto; /* Ortala */
}

/* ============================================
   CARD STYLES
   Kart bileşenleri için stiller
   ============================================ */

/* Card Styles */
/* Genel kart stili */
.card {
  background: var(--bg-card); /* Kart arka plan rengi */
  border-radius: 16px; /* Yuvarlatılmış köşeler */
  padding: 1.5rem; /* İç boşluk */
  width: 100%; /* Tam genişlik */
  max-width: 320px; /* Maksimum genişlik */
  box-shadow: var(--shadow-md); /* Orta gölge */
  transition: var(--transition); /* Geçiş efekti */
  border: 1px solid rgba(99, 102, 241, 0.1); /* İnce border */
  overflow: hidden; /* Taşan içeriği gizle */
  position: relative; /* Pozisyon - alt çizgi için */
}

/* Card Üst Çizgisi */
/* Kartın üstünde animasyonlu çizgi */
.card::before {
  content: ''; /* Boş içerik */
  position: absolute; /* Mutlak pozisyon */
  top: 0; /* Üstten 0px */
  left: 0; /* Soldan 0px */
  right: 0; /* Sağdan 0px */
  height: 4px; /* Çizgi yüksekliği */
  background: var(--gradient-1); /* Gradient çizgi */
  transform: scaleX(0); /* Başlangıç - görünmez */
  transition: var(--transition); /* Geçiş efekti */
}

/* Card Hover - Üst Çizgi */
/* Fare üzerine geldiğinde çizgi görünür */
.card:hover::before {
  transform: scaleX(1); /* Tam genişlik */
}

/* Card Hover */
/* Fare üzerine geldiğinde yukarı kalkar */
.card:hover {
  transform: translateY(-8px) scale(1.02); /* Yukarı kaydır ve büyüt */
  box-shadow: var(--shadow-lg); /* Büyük gölge */
  border-color: var(--primary-color); /* Border rengi değişir */
}

/* Card Resim */
/* Kart içindeki resim için stil */
.card img {
  width: 100%; /* Tam genişlik */
  height: 200px; /* Sabit yükseklik */
  object-fit: cover; /* Resmi kırp - kapa */
  border-radius: 12px; /* Yuvarlatılmış köşeler */
  margin-bottom: 1rem; /* Alttan boşluk */
  transition: var(--transition); /* Geçiş efekti */
}

/* Card Hover - Resim */
/* Fare üzerine geldiğinde resim büyür */
.card:hover img {
  transform: scale(1.05); /* Büyüt */
}

/* Card Başlık */
/* Kart başlığı için stil */
.card h3 {
  font-size: 1.5rem; /* Font boyutu */
  margin-bottom: 0.75rem; /* Alttan boşluk */
  color: var(--text-primary); /* Ana metin rengi */
  font-weight: 600; /* Yarı kalın */
}

/* Card Paragraf */
/* Kart açıklama metni için stil */
.card p {
  color: var(--text-secondary); /* İkincil metin rengi */
  margin-bottom: 1rem; /* Alttan boşluk */
  line-height: 1.6; /* Satır yüksekliği */
  word-wrap: break-word; /* Kelime kırılması */
  overflow-wrap: break-word; /* Taşma kırılması */
}

/* ============================================
   BLOG/MENU SECTION
   Blog veya menü bölümü stilleri
   ============================================ */

/* Blog Section */
/* Blog veya menü bölümü için stil */
.blog {
  padding: 5rem 2rem; /* İç boşluk */
  text-align: center; /* Metin ortala */
}

/* Blog Başlık */
/* Bölüm başlığı için stil */
.blog h2 {
  font-size: 2.5rem; /* Font boyutu */
  margin-bottom: 1rem; /* Alttan boşluk */
  background: var(--gradient-2); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
}

/* Section Subtitle */
/* Bölüm alt başlığı için stil */
.section-subtitle {
  font-size: 1.1rem; /* Font boyutu */
  color: var(--text-secondary); /* İkincil metin rengi */
  margin-bottom: 3rem; /* Alttan boşluk */
  font-style: italic; /* İtalik yazı */
}

/* No Menu Message */
/* Menü yoksa gösterilecek mesaj */
.no-menu {
  color: var(--text-secondary); /* İkincil metin rengi */
  font-size: 1.2rem; /* Font boyutu */
  padding: 3rem; /* İç boşluk */
}

/* Blog Container */
/* Blog kartlarının grid container'ı */
.blog-container {
  display: grid; /* Grid düzeni */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Otomatik sütunlar - min 300px */
  gap: 2rem; /* Elemanlar arası boşluk */
  max-width: 1200px; /* Maksimum genişlik */
  margin: 0 auto; /* Ortala */
}

/* ============================================
   BUTTON STYLES
   Buton bileşenleri için stiller
   ============================================ */

/* Button Styles */
/* Genel buton stili */
.btn {
  display: inline-block; /* Satır içi blok */
  padding: 0.75rem 1.5rem; /* İç boşluk */
  background: var(--gradient-1); /* Gradient arka plan */
  color: white; /* Metin rengi */
  border-radius: 8px; /* Yuvarlatılmış köşeler */
  text-decoration: none; /* Alt çizgiyi kaldır */
  font-weight: 600; /* Yarı kalın */
  margin-top: 1rem; /* Üstten boşluk */
  transition: var(--transition); /* Geçiş efekti */
  box-shadow: var(--shadow-sm); /* Küçük gölge */
  border: none; /* Border yok */
  cursor: pointer; /* İmleç - el işareti */
  position: relative; /* Pozisyon - ripple efekti için */
  overflow: hidden; /* Taşan içeriği gizle */
  letter-spacing: 0.5px; /* Harf aralığı */
}

/* Button Ripple Effect */
/* Buton içinde dalga efekti */
.btn::before {
  content: ''; /* Boş içerik */
  position: absolute; /* Mutlak pozisyon */
  top: 50%; /* Üstten %50 */
  left: 50%; /* Soldan %50 */
  width: 0; /* Başlangıç genişliği - 0 */
  height: 0; /* Başlangıç yüksekliği - 0 */
  border-radius: 50%; /* Yuvarlak */
  background: rgba(255, 255, 255, 0.3); /* Şeffaf beyaz */
  transform: translate(-50%, -50%); /* Ortala */
  transition: width 0.6s, height 0.6s; /* Genişleme geçişi */
}

/* Button Hover - Ripple */
/* Fare üzerine geldiğinde dalga büyür */
.btn:hover::before {
  width: 300px; /* Genişlik */
  height: 300px; /* Yükseklik */
}

/* Button Hover */
/* Fare üzerine geldiğinde yukarı kalkar */
.btn:hover {
  transform: translateY(-2px); /* Yukarı kaydır */
  box-shadow: var(--shadow-md); /* Orta gölge */
}

/* Button Active */
/* Tıklandığında aşağı iner */
.btn:active {
  transform: translateY(0); /* Normal pozisyon */
}

/* ============================================
   FOOTER STYLES
   Alt bilgi bölümü stilleri
   ============================================ */

/* Footer */
/* Alt bilgi bölümü için stil */
.footer {
  background: var(--gradient-1); /* Gradient arka plan */
  color: white; /* Metin rengi */
  text-align: center; /* Metin ortala */
  padding: 2.5rem; /* İç boşluk */
  margin-top: 4rem; /* Üstten boşluk */
}

/* Footer Content */
/* Footer içeriği için container */
.footer-content {
  max-width: 800px; /* Maksimum genişlik */
  margin: 0 auto 2rem; /* Ortala ve alttan boşluk */
}

/* Footer Başlık */
/* Footer başlığı için stil */
.footer-content h3 {
  font-size: 1.8rem; /* Font boyutu */
  margin-bottom: 1.5rem; /* Alttan boşluk */
  color: var(--cream); /* Krem rengi */
}

/* Footer Paragraf */
/* Footer metinleri için stil */
.footer-content p {
  margin: 0.75rem 0; /* Üst-alt boşluk */
  color: var(--text-secondary); /* İkincil metin rengi */
  font-size: 1rem; /* Font boyutu */
}

/* Footer Link */
/* Footer linkleri için stil */
.footer a {
  color: #e0e7ff; /* Açık mavi */
  text-decoration: none; /* Alt çizgiyi kaldır */
  font-weight: 500; /* Orta kalınlık */
  transition: var(--transition); /* Geçiş efekti */
  border-bottom: 2px solid transparent; /* Şeffaf alt çizgi */
}

/* Footer Link Hover */
/* Fare üzerine geldiğinde alt çizgi görünür */
.footer a:hover {
  color: white; /* Beyaz renk */
  border-bottom-color: white; /* Beyaz alt çizgi */
}

/* ============================================
   BLOG DETAIL PAGE
   Blog/menü detay sayfası stilleri
   ============================================ */

/* Blog Detail Page */
/* Blog veya menü detay sayfası için stil */
.blog-detay {
  max-width: 900px; /* Maksimum genişlik */
  margin: 4rem auto; /* Ortala ve üst-alt boşluk */
  padding: 2rem; /* İç boşluk */
  background: var(--bg-card); /* Kart arka plan rengi */
  border-radius: 16px; /* Yuvarlatılmış köşeler */
  box-shadow: var(--shadow-lg); /* Büyük gölge */
  animation: fadeInUp 0.6s ease-out; /* Yukarıdan belirme animasyonu */
}

/* Blog Detail Başlık */
/* Detay sayfası başlığı için stil */
.blog-detay h1 {
  font-size: 2.5rem; /* Font boyutu */
  margin-bottom: 2rem; /* Alttan boşluk */
  background: var(--gradient-1); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
  text-align: center; /* Metin ortala */
}

/* Blog Detail Resim */
/* Detay sayfası resmi için stil */
.blog-detay img {
  width: 100%; /* Tam genişlik */
  border-radius: 12px; /* Yuvarlatılmış köşeler */
  margin-bottom: 2rem; /* Alttan boşluk */
  box-shadow: var(--shadow-md); /* Orta gölge */
}

/* Blog Detail Paragraf */
/* Detay sayfası metni için stil */
.blog-detay p {
  font-size: 1.1rem; /* Font boyutu */
  line-height: 1.8; /* Satır yüksekliği */
  color: var(--text-secondary); /* İkincil metin rengi */
  margin-bottom: 2rem; /* Alttan boşluk */
}

/* ============================================
   RESPONSIVE DESIGN
   Mobil ve tablet için uyumlu tasarım
   ============================================ */

/* Responsive Design */
/* 768px ve altı ekranlar için stil ayarları */
@media (max-width: 768px) {
  /* Header - Mobil */
  .header {
    padding: 1rem 1.5rem; /* Küçük iç boşluk */
    flex-direction: column; /* Dikey düzen */
    gap: 1rem; /* Elemanlar arası boşluk */
  }

  /* Navigation - Mobil */
  .nav {
    gap: 1rem; /* Küçük boşluk */
    flex-wrap: wrap; /* Taşma durumunda alt satıra geç */
    justify-content: center; /* Ortala */
  }

  /* Hero - Mobil */
  .hero {
    padding: 3rem 1.5rem; /* Küçük iç boşluk */
    text-align: center; /* Metin ortala */
  }

  /* Hero Başlık 1 - Mobil */
  .hero-text h1 {
    font-size: 2rem; /* Küçük font boyutu */
  }

  /* Hero Profil Resmi - Mobil */
  .hero img.profil {
    width: 150px; /* Küçük genişlik */
    height: 150px; /* Küçük yükseklik */
  }

  /* Projects ve Blog Başlıkları - Mobil */
  .projects h2,
  .blog h2 {
    font-size: 2rem; /* Küçük font boyutu */
  }

  /* Card - Mobil */
  .card {
    max-width: 100%; /* Tam genişlik */
  }

  /* Blog Container - Mobil */
  .blog-container {
    grid-template-columns: 1fr; /* Tek sütun */
  }

  /* Cafe Container Başlık - Mobil */
  .cafe-container > h1 {
    font-size: 2rem; /* Küçük font boyutu */
  }

  /* Cafe Intro - Mobil */
  .cafe-intro {
    font-size: 1rem; /* Küçük font boyutu */
  }

  /* Menu Grid - Mobil */
  .menu-grid {
    grid-template-columns: 1fr; /* Tek sütun */
  }

  /* Cafe Features - Mobil */
  .cafe-features {
    grid-template-columns: 1fr; /* Tek sütun */
  }
}

/* ============================================
   CAFE SECTION
   Cafe sayfası için özel stiller
   ============================================ */

/* Cafe Section */
/* Cafe sayfası ana bölümü */
.cafe-section {
  padding: 5rem 2rem; /* İç boşluk */
  min-height: 80vh; /* Minimum yükseklik - viewport'un %80'i */
}

/* Cafe Container */
/* Cafe sayfası içerik container'ı */
.cafe-container {
  max-width: 1200px; /* Maksimum genişlik */
  margin: 0 auto; /* Ortala */
}

/* Cafe Container Başlık */
/* Cafe sayfası ana başlığı */
.cafe-container > h1 {
  font-size: 3rem; /* Font boyutu */
  text-align: center; /* Metin ortala */
  margin-bottom: 2rem; /* Alttan boşluk */
  background: var(--gradient-1); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
}

/* Cafe Intro */
/* Cafe sayfası giriş metni */
.cafe-intro {
  text-align: center; /* Metin ortala */
  font-size: 1.2rem; /* Font boyutu */
  color: var(--text-secondary); /* İkincil metin rengi */
  margin-bottom: 4rem; /* Alttan boşluk */
  max-width: 800px; /* Maksimum genişlik */
  margin-left: auto; /* Sol otomatik */
  margin-right: auto; /* Sağ otomatik */
  line-height: 1.8; /* Satır yüksekliği */
}

/* Cafe Menu */
/* Cafe menü bölümü */
.cafe-menu {
  margin-bottom: 4rem; /* Alttan boşluk */
}

/* Cafe Menu Başlık */
/* Menü başlığı için stil */
.cafe-menu h2 {
  font-size: 2.5rem; /* Font boyutu */
  margin-bottom: 2rem; /* Alttan boşluk */
  background: var(--gradient-2); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
  text-align: center; /* Metin ortala */
}

/* Menu Grid */
/* Menü öğelerinin grid düzeni */
.menu-grid {
  display: grid; /* Grid düzeni */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Otomatik sütunlar - min 280px */
  gap: 1.5rem; /* Elemanlar arası boşluk */
  margin-top: 2rem; /* Üstten boşluk */
}

/* Menu Item */
/* Menü öğesi kartı */
.menu-item {
  background: var(--bg-card); /* Kart arka plan rengi */
  border-radius: 12px; /* Yuvarlatılmış köşeler */
  padding: 1.5rem; /* İç boşluk */
  box-shadow: var(--shadow-md); /* Orta gölge */
  transition: var(--transition); /* Geçiş efekti */
  border: 1px solid rgba(99, 102, 241, 0.1); /* İnce border */
  position: relative; /* Pozisyon */
}

/* Menu Item Hover */
/* Fare üzerine geldiğinde yukarı kalkar */
.menu-item:hover {
  transform: translateY(-5px); /* Yukarı kaydır */
  box-shadow: var(--shadow-lg); /* Büyük gölge */
  border-color: var(--primary-color); /* Border rengi değişir */
}

/* Menu Item Başlık */
/* Menü öğesi başlığı */
.menu-item h3 {
  font-size: 1.3rem; /* Font boyutu */
  margin-bottom: 0.5rem; /* Alttan boşluk */
  color: var(--text-primary); /* Ana metin rengi */
}

/* Menu Item Paragraf */
/* Menü öğesi açıklaması */
.menu-item p {
  color: var(--text-secondary); /* İkincil metin rengi */
  margin-bottom: 1rem; /* Alttan boşluk */
  font-size: 0.95rem; /* Font boyutu */
}

/* Menu Item Fiyat */
/* Menü öğesi fiyat rozeti */
.menu-item .price {
  display: inline-block; /* Satır içi blok */
  background: var(--gradient-1); /* Gradient arka plan */
  color: white; /* Metin rengi */
  padding: 0.5rem 1rem; /* İç boşluk */
  border-radius: 8px; /* Yuvarlatılmış köşeler */
  font-weight: 600; /* Yarı kalın */
  font-size: 1.1rem; /* Font boyutu */
}

/* Cafe Info */
/* Cafe bilgi bölümü */
.cafe-info {
  margin-top: 4rem; /* Üstten boşluk */
}

/* Cafe Info Başlık */
/* Bilgi bölümü başlığı */
.cafe-info h2 {
  font-size: 2.5rem; /* Font boyutu */
  margin-bottom: 2rem; /* Alttan boşluk */
  background: var(--gradient-1); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
  text-align: center; /* Metin ortala */
}

/* Cafe Info Paragraf */
/* Bilgi bölümü metni */
.cafe-info > p {
  text-align: center; /* Metin ortala */
  font-size: 1.1rem; /* Font boyutu */
  color: var(--text-secondary); /* İkincil metin rengi */
  margin-bottom: 3rem; /* Alttan boşluk */
  max-width: 800px; /* Maksimum genişlik */
  margin-left: auto; /* Sol otomatik */
  margin-right: auto; /* Sağ otomatik */
  line-height: 1.8; /* Satır yüksekliği */
}

/* Cafe Features */
/* Cafe özellikler grid container'ı */
.cafe-features {
  display: grid; /* Grid düzeni */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Otomatik sütunlar - min 250px */
  gap: 2rem; /* Elemanlar arası boşluk */
  margin-top: 3rem; /* Üstten boşluk */
}

/* Feature */
/* Özellik kartı */
.feature {
  background: var(--bg-card); /* Kart arka plan rengi */
  border-radius: 12px; /* Yuvarlatılmış köşeler */
  padding: 2rem; /* İç boşluk */
  text-align: center; /* Metin ortala */
  box-shadow: var(--shadow-md); /* Orta gölge */
  transition: var(--transition); /* Geçiş efekti */
  border: 1px solid rgba(212, 165, 116, 0.15); /* İnce border */
}

/* Feature Hover */
/* Fare üzerine geldiğinde yukarı kalkar */
.feature:hover {
  transform: translateY(-5px); /* Yukarı kaydır */
  box-shadow: var(--shadow-colored); /* Renkli gölge */
  border-color: var(--accent-color); /* Border rengi değişir */
  background: var(--bg-card-light); /* Arka plan rengi değişir */
}

/* Feature Başlık */
/* Özellik başlığı */
.feature h3 {
  font-size: 1.5rem; /* Font boyutu */
  margin-bottom: 1rem; /* Alttan boşluk */
  color: var(--text-primary); /* Ana metin rengi */
}

/* Feature Paragraf */
/* Özellik açıklaması */
.feature p {
  color: var(--text-secondary); /* İkincil metin rengi */
  line-height: 1.6; /* Satır yüksekliği */
}

/* ============================================
   ADMIN PANEL STYLES
   Yönetim paneli için stiller
   ============================================ */

/* Admin Panel Styles */
/* Admin paneli ana gövde stili */
.admin-body {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; /* Font ailesi */
  background: var(--bg-dark); /* Arka plan rengi */
  color: var(--text-primary); /* Metin rengi */
  min-height: 100vh; /* Minimum yükseklik - viewport yüksekliği */
  padding: 2rem; /* İç boşluk */
}

/* Admin Container */
/* Admin paneli içerik container'ı */
.admin-container {
  max-width: 1200px; /* Maksimum genişlik */
  margin: 0 auto; /* Ortala */
}

/* Admin Login Form */
/* Admin giriş formu container'ı */
.admin-login-container {
  display: flex; /* Flexbox düzeni */
  justify-content: center; /* Yatay ortala */
  align-items: center; /* Dikey ortala */
  min-height: 80vh; /* Minimum yükseklik - viewport'un %80'i */
}

/* Admin Login Box */
/* Giriş formu kutusu */
.admin-login-box {
  background: var(--bg-card); /* Kart arka plan rengi */
  border-radius: 16px; /* Yuvarlatılmış köşeler */
  padding: 3rem; /* İç boşluk */
  box-shadow: var(--shadow-lg); /* Büyük gölge */
  border: 1px solid rgba(212, 165, 116, 0.2); /* İnce border */
  max-width: 450px; /* Maksimum genişlik */
  width: 100%; /* Tam genişlik */
  animation: fadeInUp 0.6s ease-out; /* Yukarıdan belirme animasyonu */
}

/* Admin Login Box Başlık */
/* Giriş formu başlığı */
.admin-login-box h2 {
  font-size: 2rem; /* Font boyutu */
  margin-bottom: 2rem; /* Alttan boşluk */
  background: var(--gradient-1); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
  text-align: center; /* Metin ortala */
}

/* Admin Error */
/* Hata mesajı kutusu */
.admin-error {
  background: rgba(124, 90, 62, 0.2); /* Şeffaf kahverengi arka plan */
  border: 1px solid rgba(124, 90, 62, 0.4); /* Kahverengi border */
  color: #D4A574; /* Açık kahverengi metin */
  padding: 1rem; /* İç boşluk */
  border-radius: 8px; /* Yuvarlatılmış köşeler */
  margin-bottom: 1.5rem; /* Alttan boşluk */
  text-align: center; /* Metin ortala */
  font-size: 0.95rem; /* Font boyutu */
}

/* Admin Panel Header */
/* Admin paneli üst başlık bölümü */
.admin-header {
  background: var(--gradient-1); /* Gradient arka plan */
  padding: 2rem; /* İç boşluk */
  border-radius: 16px; /* Yuvarlatılmış köşeler */
  margin-bottom: 2rem; /* Alttan boşluk */
  box-shadow: var(--shadow-md); /* Orta gölge */
  display: flex; /* Flexbox düzeni */
  justify-content: space-between; /* Elemanları arasında boşluk */
  align-items: center; /* Dikey hizalama - ortala */
  flex-wrap: wrap; /* Taşma durumunda alt satıra geç */
  gap: 1rem; /* Elemanlar arası boşluk */
}

/* Admin Header Başlık */
/* Admin paneli başlığı */
.admin-header h2 {
  font-size: 2rem; /* Font boyutu */
  color: var(--cream); /* Krem rengi */
  margin: 0; /* Margin sıfırla */
  display: flex; /* Flexbox düzeni */
  align-items: center; /* Dikey hizalama - ortala */
  gap: 0.5rem; /* Elemanlar arası boşluk */
}

/* Admin Header Başlık İkon */
/* Başlık önündeki ikon */
.admin-header h2::before {
  content: '⚙️'; /* Dişli ikonu */
  font-size: 1.5rem; /* Font boyutu */
}

/* Admin Logout */
/* Çıkış butonu */
.admin-logout {
  background: rgba(245, 230, 211, 0.2); /* Şeffaf krem arka plan */
  color: var(--cream); /* Krem rengi */
  padding: 0.75rem 1.5rem; /* İç boşluk */
  border-radius: 8px; /* Yuvarlatılmış köşeler */
  text-decoration: none; /* Alt çizgiyi kaldır */
  font-weight: 600; /* Yarı kalın */
  transition: var(--transition); /* Geçiş efekti */
  border: 1px solid rgba(245, 230, 211, 0.3); /* İnce border */
}

/* Admin Logout Hover */
/* Fare üzerine geldiğinde yukarı kalkar */
.admin-logout:hover {
  background: rgba(245, 230, 211, 0.3); /* Daha opak arka plan */
  transform: translateY(-2px); /* Yukarı kaydır */
  box-shadow: var(--shadow-md); /* Orta gölge */
  color: var(--accent-light); /* Açık vurgu rengi */
}

/* Admin Forms */
/* Admin form container'ı */
.admin-form-container {
  background: var(--bg-card); /* Kart arka plan rengi */
  border-radius: 16px; /* Yuvarlatılmış köşeler */
  padding: 2rem; /* İç boşluk */
  margin-bottom: 2rem; /* Alttan boşluk */
  box-shadow: var(--shadow-md); /* Orta gölge */
  border: 1px solid rgba(212, 165, 116, 0.15); /* İnce border */
  animation: fadeInUp 0.6s ease-out; /* Yukarıdan belirme animasyonu */
}

/* Admin Form Container Başlık */
/* Form başlığı */
.admin-form-container h3 {
  font-size: 1.75rem; /* Font boyutu */
  margin-bottom: 1.5rem; /* Alttan boşluk */
  background: var(--gradient-2); /* Gradient metin */
  -webkit-background-clip: text; /* Webkit için metin kırpma */
  -webkit-text-fill-color: transparent; /* Webkit için şeffaf metin */
  background-clip: text; /* Metin kırpma */
}

/* Admin Form Group */
/* Form grubu - label ve input birlikte */
.admin-form-group {
  margin-bottom: 1.5rem; /* Alttan boşluk */
}

/* Admin Form Group Label */
/* Form etiketi */
.admin-form-group label {
  display: block; /* Blok element */
  margin-bottom: 0.5rem; /* Alttan boşluk */
  color: var(--text-secondary); /* İkincil metin rengi */
  font-weight: 500; /* Orta kalınlık */
  font-size: 0.95rem; /* Font boyutu */
}

/* Admin Input ve Textarea */
/* Form input ve textarea alanları */
.admin-input,
.admin-textarea {
  width: 100%; /* Tam genişlik */
  padding: 0.875rem 1rem; /* İç boşluk */
  background: rgba(58, 46, 36, 0.6); /* Şeffaf koyu arka plan */
  border: 1px solid rgba(212, 165, 116, 0.2); /* İnce border */
  border-radius: 8px; /* Yuvarlatılmış köşeler */
  color: var(--text-primary); /* Ana metin rengi */
  font-size: 1rem; /* Font boyutu */
  font-family: inherit; /* Font ailesini miras al */
  transition: var(--transition); /* Geçiş efekti */
  margin: 0; /* Margin sıfırla */
}

/* Admin Input ve Textarea Focus */
/* Odaklandığında border ve gölge değişir */
.admin-input:focus,
.admin-textarea:focus {
  outline: none; /* Varsayılan outline'ı kaldır */
  border-color: var(--accent-color); /* Border rengi değişir */
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15); /* Dış gölge */
  background: rgba(58, 46, 36, 0.8); /* Daha opak arka plan */
}

/* Admin Input ve Textarea Placeholder */
/* Placeholder metin stili */
.admin-input::placeholder,
.admin-textarea::placeholder {
  color: var(--text-secondary); /* İkincil metin rengi */
  opacity: 0.6; /* %60 opaklık */
}

/* Admin Textarea */
/* Textarea için ekstra stil */
.admin-textarea {
  resize: vertical; /* Sadece dikey yeniden boyutlandırma */
  min-height: 120px; /* Minimum yükseklik */
}

/* Admin File Input */
/* Dosya yükleme input'u */
.admin-file-input {
  width: 100%; /* Tam genişlik */
  padding: 0.875rem; /* İç boşluk */
  background: rgba(58, 46, 36, 0.6); /* Şeffaf koyu arka plan */
  border: 1px dashed rgba(212, 165, 116, 0.3); /* Kesikli border */
  border-radius: 8px; /* Yuvarlatılmış köşeler */
  color: var(--text-primary); /* Ana metin rengi */
  cursor: pointer; /* İmleç - el işareti */
  transition: var(--transition); /* Geçiş efekti */
  margin: 0; /* Margin sıfırla */
}

/* Admin File Input Hover */
/* Fare üzerine geldiğinde border düz çizgi olur */
.admin-file-input:hover {
  border-color: var(--accent-color); /* Border rengi değişir */
  background: rgba(58, 46, 36, 0.8); /* Daha opak arka plan */
  border-style: solid; /* Düz çizgi */
}

/* Admin File Input Buton */
/* Dosya seç butonu */
.admin-file-input::-webkit-file-upload-button {
  background: var(--gradient-1); /* Gradient arka plan */
  color: var(--cream); /* Krem rengi */
  border: none; /* Border yok */
  padding: 0.5rem 1rem; /* İç boşluk */
  border-radius: 6px; /* Yuvarlatılmış köşeler */
  margin-right: 1rem; /* Sağdan boşluk */
  cursor: pointer; /* İmleç - el işareti */
  font-weight: 600; /* Yarı kalın */
  transition: var(--transition); /* Geçiş efekti */
}

/* Admin File Input Buton Hover */
/* Fare üzerine geldiğinde gradient değişir */
.admin-file-input::-webkit-file-upload-button:hover {
  background: var(--gradient-2); /* İkincil gradient */
}


.admin-button {
  background: var(--gradient-1); 
  color: var(--cream); 
  padding: 0.875rem 2rem; 
  border: none; 
  border-radius: 10px; 
  font-size: 1rem; 
  font-weight: 600; 
  cursor: pointer; 
  transition: var(--transition); 
  box-shadow: var(--shadow-sm); 
  font-family: inherit; 
  margin-top: 0.5rem; 
  border: 1px solid rgba(212, 165, 116, 0.2); 
}

.admin-button:hover {
  transform: translateY(-2px); 
  box-shadow: var(--shadow-colored); 
  background: var(--gradient-2); 
}

.admin-button:active {
  transform: translateY(0); 
}

.admin-card {
  background: var(--bg-card); 
  border-radius: 12px; 
  padding: 1.5rem; 
  margin-bottom: 1rem; 
  box-shadow: var(--shadow-md); 
  border: 1px solid rgba(212, 165, 116, 0.15); 
  transition: var(--transition); 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 1rem; 
  animation: fadeInUp 0.6s ease-out backwards; 
}
.admin-card:hover {
  transform: translateX(5px); 
  box-shadow: var(--shadow-colored); 
  border-color: var(--accent-color); 
  background: var(--bg-card-light); 
}

.admin-card strong {
  font-size: 1.2rem; 
  color: var(--text-primary); 
  flex: 1; 
  min-width: 200px; 
}

.admin-card-actions {
  display: flex; 
  gap: 1rem; 
  flex-wrap: wrap; 
}

.admin-link {
  padding: 0.5rem 1rem; 
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 600; 
  font-size: 0.9rem; 
  transition: var(--transition); 
  display: inline-block; 
}

.admin-link-edit {
  background: rgba(212, 165, 116, 0.2); 
  color: var(--accent-color); 
  border: 1px solid rgba(212, 165, 116, 0.3); 
}


.admin-link-edit:hover {
  background: rgba(212, 165, 116, 0.3); 
  transform: translateY(-2px); 
  color: var(--accent-light); 
}


.admin-link-delete {
  background: rgba(107, 78, 61, 0.3); 
  color: #B8956A;
  border: 1px solid rgba(107, 78, 61, 0.4); 
}

.admin-link-delete:hover {
  background: rgba(107, 78, 61, 0.4); 
  transform: translateY(-2px); 
  color: #D4A574; 
}

.admin-price-badge {
  display: inline-block; 
  background: var(--gradient-1); 
  color: white; 
  padding: 0.25rem 0.75rem; 
  border-radius: 6px; 
  font-size: 0.9rem; 
  font-weight: 600;
  margin-left: 1rem; 
}

.admin-image-preview {
  max-width: 300px; 
  border-radius: 12px; 
  margin: 1rem 0; 
  box-shadow: var(--shadow-md); 
  border: 2px solid rgba(99, 102, 241, 0.2); 
}


.admin-image-label {
  display: block; 
  margin-top: 1rem;
  margin-bottom: 0.5rem; 
  color: var(--text-secondary); 
  font-weight: 500; 
}


.admin-section-title {
  font-size: 1.75rem; 
  margin: 2rem 0 1.5rem 0; 
  background: var(--gradient-1); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; 
  padding-bottom: 0.5rem; 
  border-bottom: 2px solid rgba(212, 165, 116, 0.2); 
}


@media (max-width: 768px) {
 
  .admin-body {
    padding: 1rem; 
  }

  
  .admin-login-box {
    padding: 2rem 1.5rem; 
  }

  
  .admin-header {
    flex-direction: column;
    align-items: flex-start; 
  }

 
  .admin-card {
    flex-direction: column; 
    align-items: flex-start;
  }

  
  .admin-card-actions {
    width: 100%; 
  }

 
  .admin-link {
    flex: 1; 
    text-align: center; 
  }
}


@media (prefers-reduced-motion: no-preference) {
  
  .card,
  .hero {
    animation: fadeInUp 0.6s ease-out backwards; 
  }

 
  .card:nth-child(1) { animation-delay: 0.1s; } 
  .card:nth-child(2) { animation-delay: 0.2s; } 
  .card:nth-child(3) { animation-delay: 0.3s; } 
  .card:nth-child(4) { animation-delay: 0.4s; } 
}