/*
  components.css — buton, iletişim bilgi listesi. Eski filtre/kart-satır
  menü bileşenleri (menü artık interaktif soru-cevap akışı, bkz.
  js/menu-quiz.js + css/quiz.css) buradan KALDIRILDI — kullanılmayan CSS
  bırakmıyoruz (bkz. docs/DESIGN_SYSTEM.md).
*/

/* ---------- Buton ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.8em;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  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) {
  .btn:hover {
    transform: none;
  }
}


.btn--solid {
  background: var(--accent-deep, var(--brass-deep));
  color: var(--on-accent, #FBF8F3);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--accent, var(--brass));
}

/* Çerçeveli butonlar artık HEM açık HEM koyu zeminde çalışmalı: site
   ferah palete geçtiğinde bunlar açık zeminde görünmez oluyordu (beyaza
   yakın sabit bir kenarlık rengi vardı). `currentColor` kullanıldığı için
   renk her zaman içinde bulunduğu bölümün metin renginden gelir. */
.btn--outline,
.btn--ghost {
  background: none;
  border: 1px solid currentColor;
  color: inherit;
  opacity: 0.9;
}

.btn--outline:hover,
.btn--outline:focus-visible,
.btn--ghost:hover,
.btn--ghost:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ---------- İletişim/footer bilgi listesi ---------- */
.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: 0.9rem;
}

/* ---------- İletişim paneli ----------
   Bu üç sınıf (`.info-panel`, `.info-row`, `.legal-note`) HTML'de kullanılıyordu
   ama HİÇBİR CSS dosyasında tanımlı değildi — iletişim sayfası üç dilde de
   `.panel`in 100vh ortalanmış flex kutusu içinde ham <div> yığını olarak
   düşüyordu. Sistemin kendi diliyle yazıldı: kart YOK, ayrım hairline ile,
   yeni renk/spacing değeri üretilmedi. */
.info-panel {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  background: var(--paper);
}

.info-panel h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin-block-end: var(--sp-6);
}

/* Dört bilgi kalemi. `auto-fit` + `minmax` sayesinde ayrı bir mobil kuralı
   gerekmiyor: sütun sayısını kalan genişlik belirler. */
.info-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4) var(--sp-6);
  width: 100%;
}

.info-row > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--sand);
  font-size: 1.02rem;
  color: var(--ink);
}

.info-row strong {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep, var(--brass-deep));
}

:lang(ar) .info-row strong {
  letter-spacing: normal;
  text-transform: none;
  font-family: var(--font-arabic);
}

.info-row a {
  border-block-end: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
  align-self: flex-start;
}

.info-row a:hover,
.info-row a:focus-visible {
  color: var(--accent-deep, var(--brass-deep));
  border-block-end-color: currentColor;
}

.legal-note {
  margin-block-start: var(--sp-8);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--sand);
  max-width: 70ch;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--ink-soft);
}