@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Genel Sıfırlamalar ve Temel Stiller */
body {
  font-family: 'Inter', sans-serif;
  background: url('img/background.png') no-repeat center center fixed; /* background-attachment: fixed eklendi */
  background-size: cover;
  margin: 0;
  padding: 0;
  color: #374151;
  line-height: 1.6; /* Okunabilirliği artırmak için */
}

/* Header */
.header {
  background: linear-gradient(90deg, #ff6600, #ffbf00);
  color: white;
  padding: 3rem 1.5rem; /* Mobil uyumluluk için padding azaltıldı */
  display: flex;
  flex-direction: column; /* Mobil için dikey sıralama */
  justify-content: center; /* İçeriği ortala */
  align-items: center; /* İçeriği ortala */
  text-align: center; /* Metni ortala */
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header h1 {
  font-size: 2.5rem; /* Mobil için font boyutu küçültüldü */
  font-weight: 900;
  margin-bottom: 0.5rem; /* Başlık ile altındaki metin arasına boşluk */
}

.header p {
  font-size: 1rem; /* Mobil için font boyutu küçültüldü */
  margin-top: 0;
}

.header img {
  width: 100px; /* Mobil için logo boyutu küçültüldü */
  height: 100px; /* Oranları korumak için */
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-top: 1rem; /* Logo ile metin arasına boşluk */
}

/* Main Content Area */
main {
  padding: 1.5rem; /* Genel padding */
  max-width: 90%; /* Daha geniş ekranlarda daha iyi görünüm */
  margin: 2rem auto; /* Üstten ve alttan boşluk, yatayda ortalama */
}

/* Card Styles */
.card {
  background: white;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
  margin-bottom: 1.5rem; /* Kartlar arasına boşluk */
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.card h2 {
  font-size: 1.3rem; /* Mobil için font boyutu küçültüldü */
  font-weight: 600;
  margin-bottom: 1rem; /* Başlık ile select/button arasına boşluk */
  color: #333;
}

/* Selector */
.selector {
  width: 100%;
  padding: 0.75rem; /* Padding artırıldı */
  border: 1px solid #d1d5db;
  background-color: #f9f9f9;
  color: #333;
  transition: border-color 0.3s, box-shadow 0.3s;
  border-radius: 0.5rem;
  margin-bottom: 1rem; /* Altındaki butona boşluk */
  font-size: 1rem; /* Font boyutu ayarlandı */
}

.selector:focus {
  border-color: #ff6600; /* Odaklandığında renk değişimi */
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2); /* Hafif gölge */
  outline: none;
}

/* Buttons */
.button-orange, .button-purple, .button-teal {
  width: 100%; /* Mobil için tam genişlik */
  padding: 0.75rem 1rem; /* Padding artırıldı */
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
  font-size: 1rem; /* Font boyutu ayarlandı */
  margin-top: 0.5rem; /* Select ile buton arasına boşluk */
}

.button-orange {
  background: #ff6f61;
  color: white;
}

.button-orange:hover {
  background: #ff3b2f;
  transform: scale(1.02); /* Hafif büyütme */
}

.button-purple {
  background: #8b5cf6;
  color: white;
}

.button-purple:hover {
  background: #6d28d9;
  transform: scale(1.02);
}

.button-teal {
  background: #14b8a6;
  color: white;
}

.button-teal:hover {
  background: #0d9488;
  transform: scale(1.02);
}

.result {
  font-weight: 600;
  margin-top: 1rem; /* Sonuç ile buton arasına boşluk */
  padding: 0.75rem;
  background-color: #f0f0f0;
  border-radius: 0.5rem;
  text-align: center;
  word-wrap: break-word; /* Uzun metinler için */
}

/* Widget */
.widget {
  position: static; /* Mobil için sabit konumdan çıkarıldı */
  margin-top: 2rem; /* Ana içerikten sonra boşluk */
  background: rgba(255, 255, 255, 0.9); /* Daha opak */
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column; /* Mobil için dikey sıralama */
  gap: 0.8rem; /* Öğeler arası boşluk */
  padding: 1rem;
  backdrop-filter: saturate(150%) blur(8px);
  z-index: 500;
  transition: background-color 0.3s ease;
  width: 90%; /* Genişlik ayarı */
  max-width: 300px; /* Maksimum genişlik */
  margin-left: auto; /* Ortalamak için */
  margin-right: auto; /* Ortalamak için */
}

.widget-item {
  background: rgba(250, 250, 250, 0.95); /* Daha opak */
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background-color 0.3s ease;
  width: 100%; /* Tam genişlik */
}

.widget-item:hover {
  background-color: rgba(230, 230, 255, 0.9); /* Hoverda daha belirgin arka plan */
}

.widget-item p:first-child {
  font-size: 0.7rem; /* Daha küçük font */
  color: #6b7280;
  margin: 0 0 0.2rem 0;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.widget-item p:last-child {
  font-size: 0.9rem; /* Daha küçük font */
  font-weight: 600;
  color: #374151;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Footer */
.footer {
  background: linear-gradient(90deg, #ff6600, #ffbf00);
  color: black;
  text-align: center;
  padding: 2rem 1rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  margin-top: 3rem; /* Üstten boşluk */
}

.footer-content p {
  margin: 0.5rem 0;
  font-size: 0.85rem; /* Font boyutu küçültüldü */
}

.footer-content a {
  color: #fff;
  text-decoration: underline;
  transition: color 0.3s;
}

.footer-content a:hover {
  color: #333;
}

.footer-contact {
  margin-bottom: 1rem;
}

.footer-suggest form {
  display: flex;
  flex-direction: column; /* Mobil için dikey sıralama */
  align-items: center; /* Ortala */
  gap: 0.8rem; /* Öğeler arası boşluk */
  margin: 1rem 0;
}

.footer-suggest input {
  padding: 0.6rem; /* Padding artırıldı */
  border: none;
  border-radius: 0.5rem;
  width: 80%; /* Genişlik ayarı */
  max-width: 300px; /* Maksimum genişlik */
  font-size: 0.9rem;
}

.footer-suggest button {
  padding: 0.6rem 1.2rem; /* Padding artırıldı */
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
}

.tmdb-attribution {
  margin-top: 2rem; /* Üstten boşluk */
}

.tmdb-attribution p {
  font-size: 0.75rem; /* Daha küçük font */
  color: #222;
  margin-bottom: 0.5rem;
}

.tmdb-attribution img {
  height: 40px; /* Logo boyutu küçültüldü */
  max-width: 100%;
  display: block;
  margin: 0.5rem auto 0; /* Üstten boşluk ve ortalama */
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

/* Responsive Düzenlemeler */

/* Tablet ve Masaüstü için (768px ve üzeri) */
@media (min-width: 768px) {
  .header {
    flex-direction: row; /* Yatay sıralama */
    justify-content: space-between; /* Öğeler arası boşluk */
    padding: 5rem 3rem; /* Orijinal padding */
    text-align: left; /* Metin hizalaması */
  }

  .header h1 {
    font-size: 3.25rem; /* Orijinal font boyutu */
  }

  .header p {
    font-size: 1.125rem; /* Orijinal font boyutu */
  }

  .header img {
    width: 160px; /* Orijinal logo boyutu */
    height: 160px;
    margin-top: 0; /* Boşluk sıfırlandı */
  }

  main {
    max-width: 896px; /* Orijinal max-width */
    padding: 1.5rem;
    margin: 2.5rem auto; /* Orijinal margin */
  }

  .card h2 {
    font-size: 1.5rem; /* Orijinal font boyutu */
  }

  .selector,
  .button-orange,
  .button-purple,
  .button-teal {
    width: auto; /* Butonlar ve select kutuları otomatik genişlik */
    display: inline-block; /* Yan yana durmaları için */
    margin-right: 0.5rem; /* Yan yana boşluk */
  }

  .button-orange, .button-purple, .button-teal {
    margin-top: 0; /* Üst boşluk sıfırlandı */
  }

  .widget {
    position: fixed; /* Sabit konum */
    top: 16rem; /* Orijinal konum */
    right: 1rem; /* Orijinal konum */
    flex-direction: row; /* Yatay sıralama */
    gap: 1.5rem; /* Orijinal boşluk */
    width: auto; /* Genişlik otomatik */
    max-width: none; /* Maksimum genişlik sıfırlandı */
    margin: 0; /* Margin sıfırlandı */
  }

  .widget-item {
    min-width: 80px; /* Orijinal min-width */
    width: auto; /* Genişlik otomatik */
    padding: 0.75rem 0.10rem;
  }

  .widget-item p:first-child {
    font-size: 0.75rem; /* Orijinal font boyutu */
  }

  .widget-item p:last-child {
    font-size: 1rem; /* Orijinal font boyutu */
  }

  .footer-content p {
    font-size: 0.9rem; /* Orijinal font boyutu */
  }

  .footer-suggest form {
    flex-direction: row; /* Yatay sıralama */
    justify-content: center; /* Ortala */
    gap: 0.5rem; /* Orijinal boşluk */
  }

  .footer-suggest input {
    width: 200px; /* Orijinal genişlik */
    max-width: none; /* Maksimum genişlik sıfırlandı */
  }

  .footer-suggest button {
    padding: 0.5rem 1rem; /* Orijinal padding */
  }

  .tmdb-attribution img {
    height: 50px; /* Orijinal logo boyutu */
  }
}

/* Ek Küçük Ekran İyileştirmeleri (Örn: 480px ve altı) */
@media (max-width: 480px) {
  .header h1 {
    font-size: 2rem;
  }

  .header p {
    font-size: 0.9rem;
  }

  .header img {
    width: 80px;
    height: 80px;
  }

  .card {
    padding: 1rem;
  }

  .card h2 {
    font-size: 1.2rem;
  }

  .selector,
  .button-orange,
  .button-purple,
  .button-teal {
    padding: 0.6rem;
    font-size: 0.9rem;
  }

  .result {
    font-size: 0.9rem;
    padding: 0.6rem;
  }

  .widget {
    padding: 0.8rem;
    gap: 0.6rem;
  }

  .widget-item p:first-child {
    font-size: 0.65rem;
  }

  .widget-item p:last-child {
    font-size: 0.8rem;
  }

  .footer-content p {
    font-size: 0.75rem;
  }

  .footer-suggest input {
    width: 90%;
  }

  .footer-suggest button {
    padding: 0.5rem 1rem;
  }

  .tmdb-attribution p {
    font-size: 0.7rem;
  }

  .tmdb-attribution img {
    height: 35px;
  }
}

/* Mevcut Tailwind CSS sınıflarının karşılıkları (değişiklik yapılmadı, referans için) */
.bg-gray-100 { background-color: #f7fafc; }
.text-gray-800 { color: #2d3748; }
.max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-6 { padding: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.text-4xl { font-size: 3rem; line-height: 2.5rem; }
.font-bold { font-weight: 700; }
.text-sm { font-size: 1.25rem; }
.italic { font-style: italic; }
.text-gray-600 { font-weight: 700; color: #2e2e2e; }
.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-10 { margin-top: 2.5rem; }
.flex { display: flex; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.gap-6 { gap: 1.5rem; }
.gap-1 { gap: 0.25rem; }
.flex-col { flex-direction: column; }
.w-40 { width: 10rem; }
.text-center { text-align: center; }
.rounded { border-radius: 0.5rem; }
.shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.overflow-hidden { overflow: hidden; }
.cursor-pointer { cursor: pointer; }
.transition { transition-property: all; transition-duration: 0.3s; transition-timing-function: ease-in-out; }
.hover\:bg-orange-600:hover { background-color: #dd6b20; }
.block { display: block; }
.fixed { position: fixed; }
.z-50 { z-index: 50; }

/* Özel Result Stilleri (Mevcut) */
#foodResult, #activityResult {
  margin-top: 10px;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #444;
  background-color: #f1f1f1;
  border-left: 5px solid #007BFF;
  border-radius: 4px;
  max-width: 300px; /* Bu değer responsive olarak ayarlanmalı */
  width: 100%; /* Mobil için tam genişlik */
  box-sizing: border-box; /* Padding ve border genişliğe dahil */
}

#movieResult {
  margin-top: 10px;
  padding: 12px 15px;
  font-size: 19px;
  font-weight: 700;
  color: #2c3e50;
  background-color: #f1f1f1;
  border-left: 6px solid #0056b3;
  border-radius: 6px;
  max-width: 320px; /* Bu değer responsive olarak ayarlanmalı */
  width: 100%; /* Mobil için tam genişlik */
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  line-height: 1.4;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  word-wrap: break-word;
  transition: background-color 0.3s ease;
}

/* Responsive Result Stilleri */
@media (max-width: 767px) {
  #foodResult, #activityResult, #movieResult {
    max-width: 100%; /* Mobil cihazlarda tam genişlik */
    font-size: 16px; /* Mobil için font boyutu küçültüldü */
    padding: 8px;
  }
}