/*
  showcase.css — anasayfadaki müşteri yorumları bölümü ve onunla paylaşılan
  başlık/etiket tipografisi (`.showcase-eyebrow`, `.showcase-title`), ki bunları
  "Atmosfer" koridoru (css/stream.css) ve tam menü de kullanır.
  Sadece index.html'de yüklenir.

  Not: eski statik fotoğraf ızgarası (`.gallery*`) buradan KALDIRILDI — o bölüm
  artık bir fotoğraf koridoru (bkz. css/stream.css). Kullanılmayan CSS
  bırakmıyoruz (bkz. docs/DESIGN_SYSTEM.md).

  Görsel dil "Ferah Panel" ile tutarlı: kart yok gibi görünen ama hafif bir
  çerçeveyle ayrışan yorum kartları.
*/

.showcase-eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, var(--brass-deep));
  font-weight: 700;
}

:lang(ar) .showcase-eyebrow {
  letter-spacing: normal;
  text-transform: none;
}

.showcase-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin-block: var(--sp-2) var(--sp-6);
}

/* Tek başına duran başlık ("Atmosfer." / "Deneyimler.") — üstünde küçük
   bir etiket YOK. İki satırın aynı şeyi söylemesi başlığı zayıflatıyordu;
   tek kelimelik başlık kendi başına daha güçlü, bu yüzden biraz daha
   büyük ve nefes alacak boşlukla duruyor. */
.showcase-title--solo {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  margin-block: 0 var(--sp-4);
  text-transform: uppercase;
  /* Büyük harfte NEGATİF tracking olmaz: küçük harflerin çıkıntıları
     yokken harfler zaten yan yana sıkışır, eksi değer okunurluğu bozar.
     Sıfırın hafif üstü, versal bir başlığın doğru nefesi. */
  letter-spacing: 0.005em;
}

/* Arapçada büyük/küçük harf ayrımı YOK — `text-transform` etkisiz kalır ama
   niyeti açıkça kapatıyoruz ki kural ileride değişirse Arapça etkilenmesin. */
:lang(ar) .showcase-title--solo {
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- Müşteri yorumları ---------- */
.reviews {
  background: var(--paper);
  padding: var(--section-y) var(--sp-6);
}

.reviews__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}

.reviews__score {
  color: var(--ink-soft);
  margin-block-end: var(--sp-6);
  font-size: 1.05rem;
}

.reviews__score strong {
  font-family: var(--font-body);
  color: var(--accent-deep, var(--brass-deep));
}

/* ---------- Rozetler ----------
   Yorumlardaki tekrar eden temaları ("okey keyfi", "aile ortamı",
   "nitelikli kahve") tek bakışta okunur hâle getirir — yorumları okumaya
   vakti olmayan ziyaretçi de mekânın ne olduğunu anlar.
   EMOJİ DEĞİL, sprite ikonları kullanılıyor (bkz. DESIGN_SYSTEM.md):
   emoji platformdan platforma farklı render edilir ve tipografiyle
   aynı optik ağırlıkta durmaz. */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
  list-style: none;
  padding: 0;
}

/* Rozet — tasarım korundu, sadece %12 büyütüldü (kullanıcı kararı):
   7 etkinlik 3 rozetten daha fazla yer istiyor ama biçim değişmemeli. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.62em 1.25em;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

/* Üç etkinlik rozeti tıklanabilir (doğrudan o akışa girer); diğer dördü
   mekân niteliği, bir sayfaya götürmez. Fark imleçle ve hover'la belli olur. */
.badge--link {
  text-decoration: none;
}

.badge:hover {
  border-color: var(--accent-light, var(--brass));
  transform: translateY(-2px);
}

/* ---------- Dokunmatikte sahte hover ----------
   Telefon, parmakla dokunulduğunda `:hover`ı da tetikler ve kullanıcı başka
   bir yere dokunana kadar o durum ÜZERİNDE KALIR: kart havada asılı kalmış
   gibi görünür. Emil Kowalski'nin motion standardı bunu açıkça yasaklıyor
   ("touch fires false hovers on tap") — aynı hatayı yorum bandında da
   bulmuştuk (bkz. js/reviews.js).

   Sadece YER DEĞİŞTİRME kapatılıyor; renk/kenarlık değişimi kalıyor, o
   dokunma anında geri bildirim olarak işe yarıyor. `:focus-visible`
   ETKİLENMEZ — o klavye odağı ve her cihazda doğru davranış. */
@media (hover: none) {
  .badge:hover {
    transform: none;
  }
}


.badge__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent-deep, var(--brass-deep));
}

/* ---------- Deneyimler (özel etkinlikler) ---------- */
.experiences {
  background: var(--paper);
  padding: var(--section-y) var(--sp-6);
}

.experiences__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}

.experiences__cta {
  margin-block-start: var(--sp-2);
}

/* ---------- "Bizi değerlendirin" ---------- */
.reviews__cta {
  margin-block-start: var(--sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.reviews__cta p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* Bu bir dönüşüm butonu — açık yulaf zeminde ince çerçeveli/şeffaf hâli
   fark edilmiyordu (kullanıcı geri bildirimi: "arka planla bir
   gözükmüyor"). `currentColor`'a bırakmak yerine BURADA rengi açıkça
   sabitliyoruz: dolu aksan zemin + açık metin, her koşulda kontrastlı. */
.reviews__cta .btn {
  background: var(--accent-deep, var(--brass-deep));
  border: 1px solid var(--accent-deep, var(--brass-deep));
  color: var(--on-accent, #FBF8F3);
  opacity: 1;
  box-shadow: var(--shadow-pop);
}

.reviews__cta .btn:hover,
.reviews__cta .btn:focus-visible {
  background: var(--accent, var(--brass));
  border-color: var(--accent, var(--brass));
  color: var(--on-accent, #FBF8F3);
}

/* ---------- Yorum bandı ----------
   Sabit hızda, kesintisiz sola akan bir bant.

   Hareket `transform` DEĞİL, natif yatay kaydırma (bkz. js/reviews.js):
   transform bütün şeridi tek bir compositor katmanına yükseltiyordu ve
   12 yorum × 2 kopya telefonda ~7300px ediyordu — iOS'un ~4096px katman
   sınırını aşınca bant görünüp kayboluyordu. Kaydırmada böyle bir sınır yok.
   ============================================================ */
.reviews__marquee {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: auto;
  padding-block: 4px;
  /* Kenarlarda yumuşak geçiş: kartlar kesilerek değil ERİYEREK çıkar. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.reviews__marquee::-webkit-scrollbar { display: none; }

.reviews__track {
  display: flex;
  gap: var(--sp-3);
  width: max-content;
}

/* Yorum kartı — sistemin `--radius: 2px` kuralının BİLİNÇLİ istisnası.
   Akan bir bantta keskin köşeli dikdörtgenler sert ve "tablo" gibi duruyordu;
   yuvarlak kenar kartı fiziksel bir nesneye benzetiyor. Kart YATAY: sabit
   genişlik + az satır, böylece bant boyunca hepsi aynı yükseklikte akar.
   Mobilde uzun metin kartı dikey bir sütuna dönüşüyordu — metinler de
   kısaltıldı. */
.review-card {
  margin: 0;
  flex: none;
  width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-2);
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 20px;
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-pop);
}

.review-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.review-card footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.review-card footer strong {
  font-family: var(--font-body);
  color: var(--ink);
}

@media (max-width: 860px) {
  /* Telefonda ortada bir tam kart, iki yanında yarımlar: bandın devam
     ettiğini gösteren en sessiz yol. 72vw tam da bunu verir. */
  .review-card {
    width: 72vw;
    max-width: 320px;
  }

  .experiences,
  .reviews {
    padding: var(--section-y) var(--sp-4);
  }

  /* Skor satırı dar ekranda iki satıra sarıyor — biraz küçültünce tek
     satırda daha çok yer buluyor ve başlıkla arası açılmıyor. */
  .reviews__score {
    font-size: 0.95rem;
    margin-block-end: var(--sp-4);
  }

  .badge {
    font-size: 0.92rem;
    padding: 0.58em 1.1em;
  }
}

/* ============================================================
   SIKÇA SORULANLAR

   Native `<details>/<summary>` kullanılıyor: açılıp kapanma, klavye erişimi
   ve ekran okuyucu duyurusu tarayıcıdan gelir — tek satır JS yok. Kendi
   akordiyonumu yazmak `aria-expanded`, odak yönetimi ve Enter/Space
   davranışını elle üstlenmek demekti; hepsi bedava geliyorken gereksiz.

   Hakkımızda sayfasında 15 sorunun tamamı + FAQPage JSON-LD (Google arama
   sonucunda açılır cevap kutusu çıkarabilir); anasayfada en sık sorulan
   6 tanesi ve tamamına giden bir link.
   ============================================================ */

.faq {
  background: var(--paper);
  padding: var(--section-y) var(--sp-6);
}

.faq__inner {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.faq__list {
  text-align: start;
  margin-block-start: var(--sp-4);
}

.faq__item {
  border-block-end: 1px solid var(--sand);
}

.faq__item:first-child {
  border-block-start: 1px solid var(--sand);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

:lang(ar) .faq__q {
  font-family: var(--font-arabic);
}

/* Varsayılan açılır üçgeni kaldır — yerine kendi artı/eksi işaretimiz. */
.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  /* Artı işareti iki çizgiden; açıkken dikey olan kaybolur ve eksi kalır.
     Ayrı bir ikon yüklemeden, tek bir öğeyle iki durum. */
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--accent-deep, var(--brass-deep));
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.faq__item[open] .faq__q::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  transform: rotate(180deg);
}

.faq__q:hover,
.faq__item[open] .faq__q {
  color: var(--accent-deep, var(--brass-deep));
}

.faq__a {
  padding-block-end: var(--sp-3);
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 62ch;
}

.faq__more {
  display: inline-block;
  margin-block-start: var(--sp-5, var(--sp-4));
  font-weight: 600;
  color: var(--accent-deep, var(--brass-deep));
  border-block-end: 1px solid currentColor;
  padding-block-end: 2px;
}

@media (max-width: 760px) {
  .faq {
    padding: var(--section-y) var(--sp-4);
  }
  .faq__q {
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}