/* ============================================================
   La Dolce Spoon — style.css
   Bootstrap 5 üzerine kurulu özel tema.
   Sıra kuralı: bu dosya index.html'de bootstrap.min.css'ten SONRA
   yükleniyor, böylece buradaki kurallar Bootstrap varsayılanlarını
   ezebiliyor (aynı specificity'de sonra gelen kazanır).

   İÇİNDEKİLER
   01. Renk & font değişkenleri (Bootstrap CSS değişkenlerini override eder)
   02. Genel taşma önleme kuralları
   03. Navbar
   04. Hero
   05. Öne Çıkanlar (Swiper slider)
   06. Menü (filtre + arama + kartlar)
   07. Yorumlar
   08. İletişim / Rezervasyon
   09. Footer
   10. WhatsApp / Scroll-top sabit butonlar
   11. Responsive ince ayarlar
   ============================================================ */

/* ============================================================
   01. Renk & Font Değişkenleri
   Bootstrap 5.3, bileşenlerinin çoğunu CSS değişkenleri (--bs-*)
   ile boyuyor. Bu değişkenleri :root'ta override ederek Bootstrap'i
   yeniden derlemeden (SCSS olmadan) marka renklerimize uydurabiliyoruz.
   ============================================================ */
:root {
  --espresso: #1c0f07;
  --coffee: #3b1f0e;
  --mocha: #6b3a2a;
  --caramel: #b5651d;
  --gold: #d4a843;
  --cream: #fdf6ed;
  --cream-2: #f5e8d3;
  --warm-white: #fffbf5;
  --txt-mid: #6b3a2a;
  --txt-light: #a07050;
  --border: rgba(107, 58, 42, 0.15);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 16px rgba(28, 15, 7, 0.08);
  --shadow-md: 0 10px 32px rgba(28, 15, 7, 0.14);
  --tr: 0.3s ease;

  /* Bootstrap'in "primary" rengini kendi karamel tonumuza çekiyoruz.
     Bu sayede .btn-primary, focus ring'leri, link renkleri vb.
     otomatik olarak tema ile uyumlu oluyor. */
  --bs-primary: var(--caramel);
  --bs-primary-rgb: 181, 101, 29;
  --bs-body-font-family: 'Lato', sans-serif;
  --bs-body-color: var(--espresso);
  --bs-link-color: var(--caramel);
  --bs-link-hover-color: var(--coffee);
}

h1, h2, h3, .navbar-brand, .footer-brand { font-family: 'Playfair Display', serif; }
em { font-style: italic; color: var(--caramel); }

/* ============================================================
   02. Genel Taşma Önleme Kuralları
   ============================================================ */

/* box-sizing: border-box — RESPONSIVE TASARIMIN TEMEL KURALI.
   Varsayılan (content-box) modelde bir elemana width:%100 verip üstüne
   padding/border eklediğinde, o padding/border DEKLARE EDİLEN genişliğin
   ÜSTÜNE eklenir ve eleman kutusundan taşar (en klasik yatay-scroll
   sebebi). border-box'ta ise padding+border, belirtilen genişliğin
   İÇİNE dahil edilir; eleman asla kendi genişliğinden büyük olmaz.

   Bootstrap'in kendi reboot.css'i bunu zaten CDN üzerinden veriyor,
   ama BURADA, kendi dosyamızda da AYRICA tanımlıyoruz: CDN herhangi bir
   sebeple (yavaş ağ, engelleyici, CDN kesintisi) yüklenemezse bile bu
   kural her zaman devrede kalsın — style.css site ile aynı sunucudan
   (GitHub Pages) geldiği için CDN'e bağımlı değil. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* GÜNCELLEME (canlı testle doğrulandı): html'de overflow-x tanımlanmazsa
   ("visible" kalırsa), body'nin overflow-x:hidden'i CSS spec'ine göre
   viewport'a "propagate" edilmesi GEREKİR ama tüm tarayıcılar/durumlar
   bunu güvenilir şekilde uygulamıyor — gerçek testte (DevTools +
   document.documentElement.scrollWidth ölçümü) html'in kendi overflow'u
   devreye girip sayfada gerçek bir yatay scroll'a sebep olduğu
   doğrulandı (Swiper slider'ının birkaç piksellik taşması sayfa
   geneline sızdı). Bu, "html+body'ye birlikte overflow-x:hidden koy"un
   internette en çok önerilen/kanıtlanmış çözüm olmasının sebebi —
   burada da öyle yapıyoruz. Navbar'ın fixed-position riski ise zaten
   navbar'ın KENDİ üzerindeki overflow-x:hidden + max-width:100vw
   kuralıyla (bkz. #mainNavbar) ayrıca karşılanıyor. */
html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  /* DİKKAT: burada body'ye "navbar yüksekliği kadar" sabit bir
     padding-top VERMİYORUZ. Önceki denemede (76px) bu, navbar fixed
     olduğu için sayfa akışından çıktığından, body'nin kendi (cream)
     arka planının navbar ile hero arasında görünür bir şerit halinde
     kalmasına sebep oluyordu. Çözüm: hero'yu sayfanın en tepesinden
     (y:0) başlatıp navbar'ın ARKASINA kadar uzatıyoruz — navbar zaten
     yarı saydam/blur olduğu için görsel navbar'ın altından hafifçe
     görünür, bu standart ve kusursuz bir "hero arkasında saydam navbar"
     tasarımı. Diğer bölümler zaten normal akışta hero'nun altında
     geldiği için navbar onları hiç etkilemiyor. */
}

img { max-width: 100%; height: auto; }

.section { padding: 5rem 0; }
.section.alt { background: var(--cream-2); }

.sec-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caramel);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.sec-eyebrow.light { color: var(--gold); }

.sec-title {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin-bottom: 2.5rem;
}
.sec-title.light { color: var(--warm-white); }

/* Marka butonu — Bootstrap'in .btn tabanını kullanıp kendi rengimizi
   ve dolgu/gölge stilini ekliyoruz (Bootstrap'in .btn-primary'sine
   dokunmadan, çakışma riskini azaltmak için ayrı sınıf). */
.btn-brand {
  background: var(--caramel);
  border-color: var(--caramel);
  color: var(--warm-white);
  font-weight: 700;
  border-radius: 50px;
  padding: 0.7rem 1.6rem;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.btn-brand:hover {
  background: var(--coffee);
  border-color: var(--coffee);
  color: var(--warm-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-whatsapp {
  background: #25d366;
  color: #fff;
  border-radius: 50px;
  padding: 0.7rem 1.5rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  transition: transform var(--tr);
}
.btn-whatsapp:hover { color: #fff; transform: translateY(-2px); }

/* ============================================================
   03. Navbar
   ============================================================ */
#mainNavbar {
  background: rgba(253, 246, 237, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
  transition: box-shadow var(--tr);
  /* ÖNEMLİ: position:fixed elemanlar viewport'a göre konumlanır ve
     body'deki overflow-x:hidden'in etkisi ONLARIN İÇİNİ kapsamaz — yani
     navbar'ın içinde taşan bir eleman olursa bu doğrudan sayfa genelinde
     yatay scroll'a sebep olur (body'nin klip kuralı fixed elemanları
     "görmez"). Bu yüzden navbar'ın taşma kontrolünü kendi üzerinde,
     ayrıca yapıyoruz. Navbar zaten left:0/right:0 ile tam viewport
     genişliğinde olduğundan (Bootstrap .fixed-top), bu hiçbir içeriği
     görünmez yapmaz — sadece kazara dışarı taşan bir şeyi keser. */
  overflow-x: hidden;
  max-width: 100vw;
}

/* Navbar'ın iç kapsayıcısı flex olduğundan (Bootstrap .navbar > .container),
   flex öğelerinin varsayılan min-width:auto davranışı içerik küçültülmeye
   izin vermeyip taşmaya sebep olabilir. min-width:0 bunu düzeltir.
   NOT: flex-wrap'e DOKUNMUYORUZ — Bootstrap bunu .navbar-collapse'ın
   mobilde açılınca brand/toggler'ın ALTINA kayması için "wrap" tutuyor;
   nowrap yapsaydık açık menü brand ile aynı satıra sıkışmaya çalışıp
   asıl taşma sorununu biz yaratmış olurduk. */
#mainNavbar .container {
  min-width: 0;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--espresso) !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; /* çok dar ekranda marka adı kesilirse "..." ile biter, taşmaz */
}
.navbar-brand span { color: var(--caramel); }

.navbar-nav .nav-link {
  color: var(--txt-mid);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.5rem 0.9rem;
  transition: color var(--tr);
}
.navbar-nav .nav-link:hover { color: var(--caramel); }

/* Mobil hamburger menüsü açıkken (Bootstrap collapse) arka planı
   navbar ile aynı yapıp kenarları belirginleştiriyoruz. */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--warm-white);
    margin-top: 0.75rem;
    padding: 0.5rem 1rem 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
  }
  .navbar-nav .btn-brand { margin-top: 0.5rem; display: inline-block; }
}

/* ============================================================
   04. Hero
   ============================================================ */
#hero {
  position: relative;
  /* min-height iki kez tanımlı: önce 100vh (svh desteklemeyen eski
     tarayıcılar için güvenli fallback), sonra 100svh (mobilde adres
     çubuğu açılıp kapandıkça gerçek görünür yüksekliğe göre ayarlanan
     modern birim) — ikinci tanım destekleniyorsa öncekini ezer, CSS'in
     "tanınmayan değeri yok say" kuralından faydalanan güvenli bir katman. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Üst padding navbar yüksekliğinden BÜYÜK tutuluyor ki metin/butonlar
     navbar'ın (saydam da olsa) arkasında kalıp tıklanamaz hale gelmesin;
     bu görselin kendisini etkilemez, sadece içeriği aşağı iter. */
  padding: 7.5rem 0 4rem;
  margin: 0; /* header etiketinin varsayılan/gizli bir dış boşluğu olmasın,
                navbar'a tam yapışsın */

  /* Arka plan görseli — background-attachment:fixed ile "resim sabit
     durur, üstündeki yazı/içerik kayar" (parallax) efekti. Görsel
     viewport'a sabitlenir, section'ın kendisi scroll ile hareket eder.
     background-position: "center 38%" — fotoğrafın odak noktası (kahve
     fincanı/latte art) dikeyde tam ortadan biraz yukarıda; dar/uzun
     mobil ekranlarda "cover" foroğrafın alt-boş kısmını değil, dolu
     (fincan) kısmını göstersin diye. Sadece "center" kullanıldığında
     dar ekranlarda görselin daha boş/loş bir bölgesi öne çıkabiliyordu
     — "sağdan/genelde boş görünüyor" hissi buradan geliyordu. */
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* background-attachment:fixed sadece TELEFONLARDA (iPhone vb.) kapatılıyor —
   eski/bazı mobil Safari'de performans sorunu yaratıyor ve düzgün
   çalışmıyor. Eşik BİLİNÇLİ olarak 768px değil 600px: 768px kullanılsaydı
   iPad (dikey modda tam 768px genişlik) de bu kurala yakalanıp parallax'ı
   kaybederdi — tabletler modern Safari ile fixed background'ı düzgün
   render eder, o yüzden tablet + masaüstünde efekt korunuyor, sadece
   gerçek telefon genişliklerinde (≤600px) scroll'a düşüyor. */
@media (max-width: 600px) {
  #hero { background-attachment: scroll; }
}

/* hero-overlay: arka plan fotoğrafı ne kadar açık/kontrastsız olursa
   olsun üstteki beyaz başlık metninin okunabilirliğini garanti eden
   koyu katman. Tamamen DÜZ ve EŞİT koyulukta — herhangi bir kenarda
   (üst/sağ/sol) daha açık bir bölge bırakmıyoruz ki orada "boşluk"
   varmış gibi bir görsel yanılsama oluşmasın. Sadece görselin ortalama
   parlaklığına göre okunabilirliği garanti eden tek bir opaklık değeri. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(28, 15, 7, 0.55);
}

.hero-inner { position: relative; z-index: 2; max-width: 700px; }

.eyebrow { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 1rem; font-weight: 700; }
.hero-title { color: var(--warm-white); font-size: clamp(2.1rem, 6vw, 3.6rem); margin-bottom: 1.25rem; }
.hero-sub { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 540px; margin-bottom: 2rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ============================================================
   05. Öne Çıkanlar — Swiper Slider
   Swiper kendi CSS'ini yüklüyor (swiper-bundle.min.css); burada sadece
   kart görünümünü ve ok/nokta renklerini markaya uyduruyoruz.
   ============================================================ */
.highlights-swiper {
  padding: 0.5rem 1.25rem 3rem;
  /* Swiper varsayılan olarak overflow:hidden kullanır — bu kasıtlı ve
     güvenli bir taşma, çünkü sadece bu bileşenin kendi kutusunda kalır,
     sayfa geneline sızmaz. */
}

.highlight-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform var(--tr), box-shadow var(--tr);
}
.highlight-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.highlight-card img { width: 100%; height: 160px; object-fit: cover; }
.hc-body { padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.hc-body h3 { font-size: 1rem; margin: 0; }
.hc-body .price { color: var(--caramel); font-weight: 700; white-space: nowrap; }

/* Swiper ok butonları — varsayılan mavi yerine marka rengi */
.highlights-swiper .swiper-button-prev,
.highlights-swiper .swiper-button-next {
  color: var(--caramel);
  background: var(--warm-white);
  width: 42px; height: 42px;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.highlights-swiper .swiper-button-prev::after,
.highlights-swiper .swiper-button-next::after { font-size: 1rem; font-weight: 700; }

.highlights-swiper .swiper-pagination-bullet-active { background: var(--caramel); }

@media (max-width: 700px) {
  .highlights-swiper .swiper-button-prev,
  .highlights-swiper .swiper-button-next { display: none; }
}

/* ============================================================
   06. Menü — Arama + Filtre + Kartlar
   ============================================================ */
.menu-search-wrap {
  position: relative;
  max-width: 420px;
  margin: 0 auto 2rem;
}
.menu-search-wrap i {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--txt-light);
}
.menu-search {
  padding-left: 2.6rem;
  border-radius: 50px;
  border-color: var(--border);
  min-width: 0; /* flex/grid içinde input'un taşmasını önler */
}
.menu-search:focus {
  border-color: var(--caramel);
  box-shadow: 0 0 0 0.2rem rgba(181, 101, 29, 0.15);
}

.menu-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.filter-btn {
  border: 1.5px solid var(--border);
  background: var(--warm-white);
  color: var(--txt-mid);
  padding: 0.5rem 1.2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.88rem;
  transition: all var(--tr);
}
.filter-btn:hover { border-color: var(--caramel); color: var(--caramel); }
.filter-btn.active { background: var(--caramel); border-color: var(--caramel); color: var(--warm-white); }

.menu-empty {
  text-align: center;
  color: var(--txt-light);
  font-style: italic;
  margin-bottom: 2rem;
}

.menu-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--tr), box-shadow var(--tr);
}
.menu-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.mc-img { height: 190px; overflow: hidden; }
.mc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.menu-card:hover .mc-img img { transform: scale(1.06); }
.mc-body { padding: 1.25rem; }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.mc-top h3 { font-size: 1.05rem; margin: 0; }
.mc-price { color: var(--caramel); font-weight: 700; white-space: nowrap; }
.mc-body p { color: var(--txt-light); font-size: 0.9rem; margin: 0; }

/* Filtreleme JS ile .menu-item'a "d-none" (Bootstrap utility) sınıfı
   eklenip çıkarılarak yapılıyor; ekstra bir kural gerekmiyor çünkü
   d-none zaten Bootstrap'ten geliyor (display:none !important). */

/* ============================================================
   07. Yorumlar
   ============================================================ */
.reviews { background: linear-gradient(160deg, var(--espresso), var(--coffee)); }
.review-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 1.75rem;
  height: 100%;
}
.review-card .stars { color: var(--gold); margin-bottom: 0.75rem; font-size: 0.85rem; }
.review-card p { color: var(--cream); margin-bottom: 1rem; font-style: italic; }
.review-card cite { color: var(--gold); font-weight: 700; font-size: 0.9rem; }

/* ============================================================
   08. İletişim / Rezervasyon
   ============================================================ */
.contact-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.contact-list li { margin-bottom: 0.9rem; color: var(--txt-mid); display: flex; align-items: center; gap: 0.6rem; }
.contact-list i { color: var(--caramel); }
.contact-list a { color: var(--caramel); font-weight: 700; }

.reserve-form {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.reserve-form .form-control,
.reserve-form .form-select {
  border-color: var(--border);
  background: var(--cream);
}
.reserve-form .form-control:focus,
.reserve-form .form-select:focus {
  border-color: var(--caramel);
  box-shadow: 0 0 0 0.2rem rgba(181, 101, 29, 0.15);
}

.form-success {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: var(--radius-sm);
  color: #1a7a3d;
  font-weight: 700;
}

/* ============================================================
   09. Footer
   ============================================================ */
#footer { background: var(--espresso); color: var(--cream-2); padding: 3.5rem 0 1.5rem; }
.footer-top { margin-bottom: 2rem; }
.footer-brand { font-size: 1.2rem; color: var(--warm-white); font-weight: 700; }
.footer-brand span { color: var(--gold); }
.footer-tag { color: rgba(253,246,237,0.6); font-size: 0.88rem; margin: 0.75rem 0 1.25rem; }

.footer-social { display: flex; gap: 0.75rem; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(253,246,237,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-2);
  transition: all var(--tr);
}
.footer-social a:hover { background: var(--caramel); border-color: var(--caramel); color: var(--warm-white); }

.footer-head { color: var(--gold); font-weight: 700; margin-bottom: 1rem; font-size: 0.95rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 0.6rem; font-size: 0.88rem; color: rgba(253,246,237,0.7); }
.footer-list a { color: inherit; }
.footer-list a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(253,246,237,0.12);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: rgba(253,246,237,0.55);
}

/* ============================================================
   10. Sabit Butonlar — WhatsApp FAB & Scroll-Top
   ============================================================ */
#whatsappFab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 56px; height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: transform var(--tr);
}
#whatsappFab:hover { color: #fff; transform: scale(1.08); }

#scrollTop {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;
  width: 44px; height: 44px;
  background: var(--espresso);
  color: var(--warm-white);
  border-radius: 50%;
  display: none; /* JS scroll pozisyonuna göre görünür yapar */
  align-items: center; justify-content: center;
  z-index: 998;
  box-shadow: var(--shadow-sm);
  transition: opacity var(--tr);
}
#scrollTop.visible { display: flex; }

/* ============================================================
   11. Responsive İnce Ayarlar
   ============================================================ */
@media (max-width: 480px) {
  .section { padding: 3.5rem 0; }
  #hero { padding: 6.5rem 0 3rem; } /* üstte hâlâ navbar payı, sadece alt/geneli daralttık */
  .hero-btns .btn { flex: 1 1 auto; text-align: center; }
  #whatsappFab { width: 50px; height: 50px; font-size: 1.4rem; }
}