/*
  Merkez Gurme Web Sitesi Stil Dosyası
  Bu dosya, tüm sayfalarda ortak olarak kullanılan renk paleti, tipografi ve bileşen stillerini içerir.
  Tasarım, Instagram'daki kurumsal kimliğe uygun olacak şekilde kırmızı, krem ve koyu tonlara dayanmaktadır.
*/

/* CSS Değişkenleri */
:root {
  --color-primary: #c4161c; /* logo kırmızı tonu */
  --color-primary-dark: #911115;
  --color-secondary: #f6f1eb; /* krem arka plan */
  --color-accent: #a32e2e;
  --color-text: #2b2a2a;
  --color-light: #ffffff;
  --max-width: 1200px;
  --radius: 8px;
  --transition-speed: 0.3s;
  --font-family-base: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-family-heading: "Georgia", "Times New Roman", serif;
}

/* Genel Sıfırlama ve Temel Ayarlar */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-secondary);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-speed);
}

a:hover {
  color: var(--color-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-primary);
}

p {
  margin-bottom: 1em;
}

/* Konteyner */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Navbar */
.navbar {
  background-color: var(--color-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-links a {
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--color-text);
}

.nav-links a.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-light);
}

.nav-links a.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

/* Hero Section */
.hero {
  position: relative;
  background-image: url('images/hero-placeholder.png');
  background-size: cover;
  background-position: center;
  height: 60vh;
  color: var(--color-light);
  display: flex;
  align-items: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-light);
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-light);
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: var(--color-secondary);
}

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  font-weight: bold;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-light);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-secondary {
  background-color: var(--color-light);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-light);
}

/* Intro Section */
.intro {
  padding: 3rem 0;
  text-align: center;
}

.intro h2 {
  margin-bottom: 1rem;
}

.cards-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background-color: var(--color-light);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card h3 {
  margin-bottom: 0.75rem;
  color: var(--color-primary);
}

/* Highlight Section */
.highlight-section {
  background-color: var(--color-light);
  padding: 3rem 0;
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.highlight-item {
  text-align: left;
}

.highlight-item h3 {
  margin-bottom: 0.5rem;
}

.text-link {
  color: var(--color-accent);
  font-weight: bold;
}

.text-link:hover {
  color: var(--color-primary-dark);
}

/* CTA Section */
.cta-section {
  background-color: var(--color-primary);
  color: var(--color-light);
  text-align: center;
  padding: 3rem 0;
}

.cta-section h2 {
  color: var(--color-light);
  margin-bottom: 0.5rem;
}

.cta-section p {
  margin-bottom: 1rem;
  color: var(--color-secondary);
}

.cta-section .btn-primary {
  background-color: var(--color-light);
  color: var(--color-primary);
}

.cta-section .btn-primary:hover {
  background-color: var(--color-secondary);
  color: var(--color-primary-dark);
}

/* Footer */
footer {
  background-color: var(--color-dark, #222);
  color: var(--color-secondary);
  padding: 2rem 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

footer h4 {
  margin-bottom: 0.75rem;
  color: var(--color-light);
}

footer ul {
  list-style: none;
}

footer ul li {
  margin-bottom: 0.5rem;
}

footer ul li a {
  color: var(--color-secondary);
  font-size: 0.95rem;
}

footer ul li a:hover {
  color: var(--color-light);
}

.footer-bottom {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Mobil menü henüz eklenmedi. */
  }
}