/* =============================================================
   DOSYA: style.css
   AMAÇ : Tema renkleri, tipografi, bileşen stilleri ve efektler
   NOT  : Yalın, açıklamalı ve kolay genişletilebilir yapı
   ============================================================= */

/* -------------------------------------------------------------
   1) Değişkenler (marka rengi vb.)
   İPUCU: --brand değerini kurumsal renk kodunuzla değiştirin.
   ------------------------------------------------------------- */
:root {
  --brand: #0d6efd;   /* Birincil marka rengi */
  --brand-2: #0b5ed7; /* Hover/aktif ton */
  --dark: #0f172a;    /* Başlık/gövde koyu metin */
  --muted: #6b7280;   /* İkincil metin */
  --bg: #f8fafc;      /* Açık arkaplan */
  --radius: 1.25rem;  /* Kart köşe yuvarlaklığı */
}

/* -------------------------------------------------------------
   2) Temel Ayarlar
   ------------------------------------------------------------- */
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--dark);
  background: #fff;
}
.text-muted { color: var(--muted) !important; }

/* Bölüm boşlukları */
.section { padding: 72px 0; }
.section-title { font-weight: 800; letter-spacing: -0.02em; }

/* -------------------------------------------------------------
   3) Butonlar ve Rozetler
   ------------------------------------------------------------- */
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* Yumuşak arkaplanlı rozet (hero üstündeki) */
.badge-soft {
  background: #edf2ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* -------------------------------------------------------------
   4) Hero Alanı ve Yardımcı Sınıflar
   ------------------------------------------------------------- */
.hero {
  /* Hafif degrade ile modern bir görünüm */
  background: linear-gradient(180deg, #fff, #f5f8ff 60%);
}
.shadow-soft {
  /* Karta hafif ve hoş bir gölge verir */
  box-shadow: 0 10px 30px rgba(2, 6, 23, .08);
}

/* -------------------------------------------------------------
   5) Bileşenler: Hizmet Kartları ve İkonlar
   ------------------------------------------------------------- */
.feature-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #eef4ff; /* marka renginin açık tonu */
  color: var(--brand);
  font-size: 1.5rem; /* ikon boyutu */
}

.service-card {
  border: 1px solid #eef2ff;
  border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(13, 110, 253, .08);
}

/* -------------------------------------------------------------
   6) Footer
   ------------------------------------------------------------- */
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* -------------------------------------------------------------
   7) Duyarlılık (Responsive) Kırılımlar
   ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Navbar içerikleri mobilde sıkıştırma ayarları vb. */
}

@media (max-width: 575.98px) {
  /* En küçük ekran optimizasyonları */
}