/* ==========================================================================
   AR-KAR — Tasarım Sistemi v4
   --------------------------------------------------------------------------
   style.css'ten SONRA, responsive.css'ten ÖNCE yüklenir.

   MARKA PALETİ — logodan örneklenen üç renk:
     kırmızı  #E71E24   tek vurgu rengi
     siyah    #000000   YALNIZCA navbar + footer zemini (logo bunun için
                         tasarlanmış; sayfanın geri kalanı siyah DEĞİL)
     beyaz    #FFFFFF   kart/sayfa zemini

   --------------------------------------------------------------------------
   AÇIK TEMA + SİYAH "ÇERÇEVE"
   --------------------------------------------------------------------------
   Site açık temadır — sayfa zemini beyaza yakın açık gri, metin koyu.
   Navbar ve footer bunun DIŞINDA: ikisi de .bg-dark sınıfıyla bilerek saf
   siyaha (--arkar-black) sabitlenir, çünkü ikisinde de logo var ve logo
   siyah zemin için tasarlanmış. Bu ikisi sayfayı yukarıdan ve aşağıdan
   "çerçeveleyen" sabit bir bant gibi davranır; aradaki içerik açık kalır.

   Sayfa içinde YİNE DE koyu vurgu panelleri var (sayfa başlığı barı, CTA
   şeridi, öne çıkan hizmet kutusu, iletişim modalı başlığı) — bunlar
   BİLEREK --ink-900 (koyu grafit, #14151a) kullanır, saf siyah değil.
   Böylece "logo siyahı" (navbar/footer) ile "vurgu koyusu" (içerik)
   birbirine karışmaz; ikisi görsel olarak ayrışan iki farklı koyu tondur.
   ========================================================================== */

:root {
  /* --- Marka --- */
  --arkar-red: #E71E24;
  --arkar-black: #000000;
  --arkar-white: #FFFFFF;

  --primary: var(--arkar-red);
  --bs-primary: var(--arkar-red);
  --bs-primary-rgb: 231, 30, 36;

  /* --- Mürekkep (koyudan açığa; açık zemin üzerindeki metin/kenarlık) --- */
  --ink-900: #14151a;   /* en koyu metin / başlık; koyu vurgu panellerinin zemini */
  --ink-700: #33353d;   /* gövde metni */
  --ink-500: #5b5e68;   /* ikincil / muted metin */
  --ink-300: #9a9da6;   /* pasif metin, ikon */
  --ink-100: #e7e8eb;   /* kenarlık ve ayraç */

  /* --- Zeminler --- */
  --surface: #ffffff;        /* kart, kutu */
  --surface-alt: #f6f6f8;    /* sayfa zemini / hafif vurgulu bölüm */
  --surface-raised: #eef0f3; /* surface-alt'ten bir tık koyu — dekoratif gradyan bitişi */

  --secondary: var(--ink-700);
  --bs-secondary: var(--ink-700);
  --dark: var(--ink-900);
  --bs-dark: var(--ink-900);
  --light: var(--surface-alt);
  --bs-light: var(--surface-alt);

  --bs-body-bg: var(--surface-alt);
  --bs-body-color: var(--ink-700);
  --bs-border-color: var(--ink-100);
  --bs-emphasis-color: var(--ink-900);

  /* --- Tipografi --- */
  --font-heading: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* --- Biçim --- */
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-soft: 0 8px 30px rgba(20, 21, 26, 0.07);
  --shadow-soft-hover: 0 16px 40px rgba(20, 21, 26, 0.12);
}

html { background: var(--surface-alt); }

body {
  font-family: var(--font-body);
  color: var(--ink-700);
  background: var(--surface-alt);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-heading);
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.display-1, .display-2, .display-3, .display-4 {
  font-weight: 800;
}

.text-muted { color: var(--ink-500) !important; }

/* Sitede .bg-dark YALNIZCA navbar ve footer'da kullanılır (3 kullanım:
   Navbar.astro kökü, Footer.astro üst ve alt şeridi) — başka hiçbir
   bileşen bu sınıfı taşımaz. Bu yüzden burada karmaşık bir seçiciye
   gerek yok: .bg-dark = logo siyahı, direkt ve koşulsuz.
   Sayfa içindeki AYRI "koyu vurgu paneli" kavramı (sayfa başlığı barı,
   bento CTA, iletişim modalı başlığı) bu sınıfı hiç kullanmaz; kendi
   CSS'lerinde doğrudan var(--ink-900) (grafit, saf siyah değil) ile
   tanımlanır — bkz. bento.css ve Footer.astro. */
.bg-dark { background-color: var(--arkar-black) !important; }

.text-white-50 { color: rgba(255, 255, 255, 0.62) !important; }

/* Kart/kutu bileşenlerinde tekrar kullanılacak ortak yumuşak gölge */
.card,
.service-item,
.portfolio-box {
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-md);
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.82);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: var(--arkar-white);
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
  color: var(--primary);
}
.navbar-dark .navbar-toggler {
  border-color: #2a2a2a;
}
/* Sayfayı siyahtan ayıran ince bir alt çizgi — menü havada durmasın. */
.sticky-top.bg-dark {
  border-bottom: 1px solid #1a1a1a;
}

/* ==========================================================================
   Google Haritalar gömüleri
   ========================================================================== */
iframe[src*="google.com/maps"] {
  border-radius: var(--radius-md);
}

::selection {
  background: var(--primary);
  color: var(--arkar-white);
}