/* =======================================================
   ALTINSARAY PÖÇ TANDIR — style.css
   Tam Responsive + Mobil Uyumlu Sürüm
   ======================================================= */


/* -------------------------------------------------------
   1. TEMEL & RESET
   ------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Yatay taşmayı önle */
body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Tüm görseller responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Scrollbar gizle */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Galeri yatay kaydırma */
.gallery-scroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery-item { scroll-snap-align: start; }


/* -------------------------------------------------------
   2. HERO ANİMASYONLARI
   ------------------------------------------------------- */
.hero-img {
  animation: heroZoom 20s ease-out forwards;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.00); }
}

.hero-tag   { animation: fadeUp 0.8s 0.3s ease both; }
.hero-title { animation: fadeUp 1s  0.5s ease both; }
.hero-sub   { animation: fadeUp 0.8s 0.8s ease both; }
.hero-btns  { animation: fadeUp 0.8s 1.1s ease both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scroll-arrow {
  animation: bounce 2s 1.5s infinite both;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
}


/* -------------------------------------------------------
   3. SCROLL REVEAL
   ------------------------------------------------------- */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

.stat-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.stat-item.visible { opacity: 1; transform: translateY(0); }
.stat-item:nth-child(1) { transition-delay: 0.0s; }
.stat-item:nth-child(2) { transition-delay: 0.15s; }
.stat-item:nth-child(3) { transition-delay: 0.30s; }
.stat-item:nth-child(4) { transition-delay: 0.45s; }


/* -------------------------------------------------------
   4. NAVBAR
   ------------------------------------------------------- */
#navbar {
  width: 100%;
}

.nav-scrolled {
  background: rgba(26, 20, 16, 0.97) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(61, 46, 30, 0.5);
}

/* Mobil nav link tıklanabilir alan */
.mobile-nav-link {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


/* -------------------------------------------------------
   5. MENÜ KARTLARI (Ana sayfa featured)
   ------------------------------------------------------- */
.menu-card {
  background: linear-gradient(135deg, #2C2018 0%, #1A1410 100%);
  border: 1px solid #3D2E1E;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.menu-card:hover {
  border-color: rgba(200, 129, 42, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(200, 129, 42, 0.1);
}

/* Mobilde hover efekti olmaz (touch) */
@media (hover: none) {
  .menu-card:hover {
    transform: none;
    box-shadow: none;
  }
}

.menu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 129, 42, 0.4), transparent);
}


/* -------------------------------------------------------
   6. GALERİ GÖRSELLERİ
   ------------------------------------------------------- */
.gallery-item {
  border: 1px solid rgba(61, 46, 30, 0.5);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.gallery-img {
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.05);
}

@media (hover: none) {
  .gallery-item:hover .gallery-img {
    transform: none;
  }
}


/* -------------------------------------------------------
   7. FİLTRE BUTONLARI (menu.html)
   ------------------------------------------------------- */
.active-filter {
  background-color: #C8812A;
  border-color: #C8812A;
  color: #1A1410;
  font-weight: 700;
}

.filter-btn:not(.active-filter):hover {
  border-color: #C8812A;
  color: #E8A84C;
}

/* Büyük dokunma hedefi mobil için */
.filter-btn {
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}


/* -------------------------------------------------------
   8. MENÜ ÜRÜN SATIRLARI (menu.html)
   ------------------------------------------------------- */
.menu-item {
  transition: background 0.2s ease;
  animation: slideIn 0.3s ease forwards;
  -webkit-tap-highlight-color: transparent;
}

.menu-item:hover {
  background: rgba(61, 46, 30, 0.3);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Rozet stilleri */
.badge-ember {
  background: rgba(200, 129, 42, 0.15);
  color: #E8A84C;
  border: 1px solid rgba(200, 129, 42, 0.3);
}
.badge-stone {
  background: rgba(61, 46, 30, 0.5);
  color: #C9B99A;
  border: 1px solid rgba(61, 46, 30, 0.8);
}


/* -------------------------------------------------------
   9. KATEGORİ BAŞLIĞI (menu.html)
   ------------------------------------------------------- */
.category-header {
  position: relative;
  padding-bottom: 12px;
}

.category-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 2px;
  background: linear-gradient(90deg, #C8812A, transparent);
}


/* -------------------------------------------------------
   10. HARİTA
   ------------------------------------------------------- */
.map-container {
  position: relative;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  display: block;
  border: 0;
}

.map-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
  pointer-events: none;
}

.map-container:hover::after {
  border-color: rgba(200, 129, 42, 0.3);
}


/* -------------------------------------------------------
   11. BUTONLAR
   ------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.whatsapp-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  text-decoration: none;
}


/* -------------------------------------------------------
   12. RESPONSIVE KIRILIM NOKTALARI
   ------------------------------------------------------- */

/* Küçük mobil (320px - 480px) */
@media (max-width: 480px) {
  /* Hero metin boyutu küçük ekranlar için */
  .hero-title {
    font-size: 2.25rem !important;
    line-height: 1.1;
  }

  /* Nav logo küçülsün */
  #navbar a.font-display {
    font-size: 1.1rem;
  }

  /* Menü kartları tek sütun tam genişlik */
  #featured-menu {
    grid-template-columns: 1fr !important;
  }

  /* Galeri kartları biraz dar olsun */
  .gallery-item {
    width: 240px !important;
  }

  /* İletişim buton padding azalt */
  .whatsapp-btn {
    font-size: 0.75rem;
    padding: 0.875rem 1rem;
  }
}

/* Orta mobil (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
  .hero-title {
    font-size: 3rem !important;
  }
}

/* Tablet (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
  #featured-menu {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .menu-skeleton:nth-child(3) {
    display: none;
  }
}

/* Geniş tablet ve masaüstü (769px+) */
@media (min-width: 769px) {
  /* Galeri: grid görünüme geç */
  .gallery-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1.5rem;
  }

  .gallery-item {
    width: auto !important;
    flex-shrink: unset !important;
  }
}


/* -------------------------------------------------------
   15. FEATURED CARD — Ana sayfa öne çıkan lezzetler
   ------------------------------------------------------- */
.featured-card {
  background: linear-gradient(160deg, #2C2018 0%, #1A1410 100%);
  border: 1px solid #3D2E1E;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
}

.featured-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200,129,42,0.5), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.featured-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,129,42,0.45);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,129,42,0.1);
}

.featured-card:hover::before { opacity: 1; }

@media (hover: none) {
  .featured-card:hover { transform: none; box-shadow: none; }
}

/* Görsel sarıcı */
.featured-card-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 200px;
}

@media (min-width: 768px) {
  .featured-card-img-wrap { height: 220px; }
}

.featured-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.featured-card:hover .featured-card-img { transform: scale(1.06); }

.featured-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(26,20,16,0.85) 100%);
}

/* Placeholder (görsel yoksa) */
.featured-card-img-placeholder {
  background: rgba(61,46,30,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rozet (görsel üstünde) */
.featured-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
}

/* Kart içerik alanı */
.featured-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Kategori etiketi */
.featured-card-kategori {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #C9B99A;
  margin-bottom: 0.75rem;
}

/* Başlık */
.featured-card-baslik {
  font-size: 1.35rem;
  line-height: 1.2;
  color: #F5EDD8;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .featured-card-baslik { font-size: 1.5rem; }
}

/* İnce altın çizgi */
.featured-card-divider {
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, #C8812A, transparent);
  margin-bottom: 0.875rem;
}

/* Geleneksel tanım metni */
.featured-card-tanim {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #C9B99A;
  font-weight: 300;
  flex: 1;
  margin-bottom: 1.25rem;
}

/* Alt link */
.featured-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C8812A;
  transition: color 0.2s ease, gap 0.2s ease;
  text-decoration: none;
  margin-top: auto;
}

.featured-card-link:hover {
  color: #E8A84C;
  gap: 10px;
}

/* Mobilde menü görseli boyutu */
@media (max-width: 640px) {
  .menu-item img {
    width: 4.5rem !important;
    height: 4.5rem !important;
  }

  /* Ürün adı ve fiyat satırı */
  .menu-item h3 {
    font-size: 0.875rem;
  }

  /* Alt sticky WhatsApp butonu */
  .sticky.bottom-0 a {
    font-size: 0.8rem;
    padding: 0.9rem;
  }
}

/* Filtre butonları yatay kaydırma */
.filter-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.filter-scroll-wrap::-webkit-scrollbar { display: none; }


/* -------------------------------------------------------
   14. SAFE AREA (iPhone X+ çentik desteği)
   ------------------------------------------------------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky.bottom-0 {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  #navbar {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
}