/*
Theme Name: Blocksy Child - Fırat Atasoy
Theme URI: https://firatatasoy.com
Template: blocksy
Description: Fırat Atasoy Restoranları için özelleştirilmiş, mavi tonlarında premium Blocksy child theme. Kasa Takip ve Personel Portalı eklentileriyle aynı görsel kimliği (renk, tipografi) paylaşır.
Version: 1.0.0
Text Domain: blocksy-child
*/

/* =========================================================
   MARKA KİMLİĞİ — Kasa Takip ve Personel Portalı eklentileriyle
   aynı renk/tipografi paletini kullanır, böylece tüm site ve
   araçlar tek bir bütün gibi hissettirir.
   ========================================================= */
:root{
  --fa-navy:      #0F2A47;
  --fa-blue:      #1B5D9B;
  --fa-blue-2:    #2C7BC2;
  --fa-sky:       #5FA8D3;
  --fa-paper:     #EEF4FA;
  --fa-card:      #FFFFFF;
  --fa-line:      #D7E4F0;
  --fa-muted:     #5B7086;
  --fa-ink:       #1A2733;
  --fa-radius:    14px;
  --fa-shadow:    0 20px 45px -25px rgba(15, 42, 71, .35);
}

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

body{
  font-family: 'Inter', sans-serif;
  color: var(--fa-ink);
}
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--fa-navy);
}

/* Butonlarda (Blocksy'nin kendi buton stiline nazik bir premium dokunuş) */
.ct-button, button, input[type="submit"], .wp-block-button__link {
  border-radius: 10px !important;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ct-button:hover, .wp-block-button__link:hover {
  transform: translateY(-1px);
  opacity: .95;
}

/* Header'daki "Personel Girişi" butonuna özel vurgu — Customizer'da Button
   elemanının "Ek CSS Sınıfları" alanına "fa-staff-button" yazarsanız aktif olur. */
.fa-staff-button {
  background: linear-gradient(135deg, var(--fa-blue), var(--fa-blue-2)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px -8px rgba(27, 93, 155, .6);
}
.fa-staff-button:hover {
  box-shadow: 0 10px 26px -8px rgba(27, 93, 155, .75);
}

/* =========================================================
   İLERİYE DÖNÜK KULLANIM — Ana sayfaya veya herhangi bir sayfaya
   yeni bir "menü/araç" bölümü eklemek istediğinizde, Gutenberg'de
   bir Grup (Group) veya Sütun (Columns) bloğu ekleyip "Ek CSS
   sınıfı" alanına aşağıdaki sınıfları yazmanız yeterli — otomatik
   olarak bu premium kart görünümünü alır, tekrar bana kod
   yazdırmanıza gerek kalmaz.

   Örnek kullanım (Gutenberg'de):
   1) Bir "Sütunlar" bloğu ekleyin, Ek CSS sınıfı: fa-feature-grid
   2) İçine istediğiniz kadar "Grup" bloğu ekleyin, her birine
      Ek CSS sınıfı: fa-feature-card
   3) Her kartın içine bir başlık + kısa açıklama + buton koyun.
   ========================================================= */
.fa-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 32px 0;
}
.fa-feature-card {
  background: var(--fa-card);
  border: 1px solid var(--fa-line);
  border-radius: var(--fa-radius);
  padding: 28px 24px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fa-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fa-shadow);
  border-color: var(--fa-blue-2);
}
.fa-feature-card h3 {
  margin-top: 0;
  font-size: 18px;
}
.fa-feature-card p {
  color: var(--fa-muted);
  font-size: 14.5px;
}

/* Açık mavi vurgulu bölüm arka planı (ör. "Şubelerimiz", "Neden Biz" gibi
   bölümler için) — Grup bloğuna Ek CSS sınıfı: fa-section-tint */
.fa-section-tint {
  background: var(--fa-paper);
  border-radius: var(--fa-radius);
  padding: 40px 24px;
}

/* Mobilde kartların rahat okunması için */
@media (max-width: 600px) {
  .fa-feature-card { padding: 20px 18px; }
}