/* ==========================================================================
   theme.css — Bootstrap 5 tema katmanı
   Yapı: bizimhesap.com tasarım sisteminden çıkarıldı.
   Palet: #001d4a · #024aa5 · #2563eb · #9ebaf6 · #eef3fd
   Kaynak: tokens.json   ·   bootstrap.min.css'ten SONRA yüklenir.

   TOKENLAR ROL ADIYLA TANIMLI (navy / accent / promo).
   Palet ileride değişirse yalnızca bu dosyadaki hex'ler değişir, kod değişmez.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENLAR

   RENK KURALI — sistemi ayakta tutan tek şey:
     navy   = kimlik ve koyu zeminler
     accent = AKSİYON. Sadece birincil CTA'da. Asla dekoratif değil.
     promo  = KAMPANYA / AYRICALIK. Başka hiçbir yerde.
     gray   = metin hiyerarşisi.

   Palet tamamen mavi: #001d4a koyu lacivert kimlik, #024aa5 ikinci katman,
   #9ebaf6 aksiyon, #eef3fd açık zemin, #2563eb kampanya vurgusu.
   -------------------------------------------------------------------------- */
:root {
  /* --- Navy: marka kimliği ------------------------------------------------ */
  --brand-navy-900: #001d4a;   /* kimlik ankrajı — header, hero, footer */
  --brand-navy-800: #024aa5;   /* üst destek şeridi */
  --brand-navy-700: #1f5fd0;   /* koyu zemin hover */
  --brand-navy-500: #6b8fc9;
  --brand-navy-300: #93aed4;   /* koyu zemin üstü ikincil metin */
  --brand-navy-100: #d3e0f4;
  --brand-navy-50:  #e9f0fa;   /* koyu zemin üstü açık metin */

  /* --- Accent: AKSİYON · açık mavi ---------------------------------------- */
  --brand-accent-600: #86a8f2;  /* hover */
  --brand-accent-500: #9ebaf6;  /* BİRİNCİL CTA */
  --brand-accent-200: #cfdefb;  /* özellik sayfası hero zemini */
  --brand-accent-100: #eef3fd;  /* sayfa sonu CTA şeridi */

  /* --- Promo: KAMPANYA / AYRICALIK · canlı mavi --------------------------- */
  --brand-promo-700: #1d4fd0;
  --brand-promo-600: #2563eb;   /* rozet zemini (beyaz metin) */
  --brand-promo-300: #bcd3fb;   /* kampanya kartı zemini */
  --brand-promo-50:  #eaf1fe;

  /* --- Gray: metin hiyerarşisi · laciverde eğimli soğuk nötrler ----------- */
  --brand-gray-900: #1a2634;   /* gövde metni — saf siyah değil */
  --brand-gray-700: #404e5e;
  --brand-gray-600: #5a6878;   /* paragraf / açıklama */
  --brand-gray-500: #76838f;
  --brand-gray-400: #98a4b1;   /* placeholder, pasif */
  --brand-gray-300: #bbc4ce;
  --brand-gray-100: #e3e8ee;   /* kenarlık */
  --brand-gray-50:  #f0f4f8;
  --brand-gray-25:  #f8fafc;   /* bölüm alternatif zemini */

  /* --- Semantik ---------------------------------------------------------- */
  --brand-success: #3d8f74;
  --brand-warning: #c08a45;
  --brand-danger:  #bd6259;

  /* --- Uzay & container -------------------------------------------------- */
  --gutter: 24px;
  --gutter-sm: 16px;
  --content-width: 1180px;
  --content-default: 1228px;  /* 1180 + 2*24 */
  --content-small: 780px;
  --content-section: 1440px;
  --content-large: 1680px;
  --section-text-width: 604px;

  /* --- Header ------------------------------------------------------------ */
  --topbar-h: 40px;
  --navbar-h: 96px;
  --header-h: 136px;
  --header-h-mobile: 80px;

  /* --- Gölgeler: nötr gri değil, marka renginde tint'li ------------------- */
  --shadow-menu:  0 4px 15px rgba(26, 38, 52, .09);
  --shadow-card:  0 2px 15px rgba(0, 29, 74, .09);
  --shadow-float: 0 1.6px 12px rgba(26, 38, 52, .14);

  /* --- Tipografi ---------------------------------------------------------- */
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ======================================================================
     BOOTSTRAP 5 OVERRIDE'LARI
     ====================================================================== */
  --bs-primary: #001d4a;
  --bs-primary-rgb: 0, 29, 74;
  --bs-secondary: #2563eb;
  --bs-secondary-rgb: 37, 99, 235;

  --bs-body-color: #1a2634;
  --bs-body-color-rgb: 26, 38, 52;
  --bs-body-bg: #ffffff;
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  --bs-heading-color: #1a2634;
  --bs-secondary-color: #5a6878;
  --bs-tertiary-color: #76838f;

  --bs-border-color: #e3e8ee;
  --bs-border-radius-sm: 4px;
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 24px;
  --bs-border-radius-xxl: 24px;
  --bs-border-radius-pill: 9999px;

  --bs-link-color: #001d4a;
  --bs-link-color-rgb: 0, 29, 74;
  --bs-link-hover-color: #024aa5;

  --bs-gutter-x: 1.5rem;
}

/* --------------------------------------------------------------------------
   2. TİPOGRAFİ
   Başlıklar Poppins 500 — 600 DEĞİL. H1 line-height 1.45 markanın imzası.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--brand-gray-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--brand-gray-900);
  letter-spacing: normal;
  text-wrap: balance;
}

h1, .h1 { font-size: 48px; line-height: 1.45; }
h2, .h2 { font-size: 42px; line-height: 1.3;  }
h3, .h3 { font-size: 34px; line-height: 1.3;  }
h4, .h4 { font-size: 24px; line-height: 1.35; }
h5, .h5 { font-size: 20px; line-height: 1.4;  }
h6, .h6 { font-size: 18px; line-height: 1.4;  }

@media (max-width: 991.98px) {
  h1, .h1 { font-size: 38px; }
  h2, .h2 { font-size: 32px; }
  h3, .h3 { font-size: 28px; }
  h4, .h4 { font-size: 22px; }
}
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 30px; line-height: 1.3; }
  h2, .h2 { font-size: 26px; }
  h3, .h3 { font-size: 22px; }
}

.text-14 { font-size: 14px; line-height: 1.55; }
.text-18 { font-size: 18px; line-height: 1.55; }
.text-20 { font-size: 20px; line-height: 1.5; }

/* Overline — özellik sayfası hero'sunun ve mega menü başlığının üst etiketi */
.overline {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-gray-500);
}
.overline-lead {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: var(--brand-navy-900);
}

/* --------------------------------------------------------------------------
   3. CONTAINER KATMANLARI
   Tek genişlik yok. Metin 1228px'te kilitli kalırken görsel 1440/1680'den taşar.
   -------------------------------------------------------------------------- */
.container-small,
.container-default,
.container-section,
.container-large {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-small   { max-width: var(--content-small); }
.container-default { max-width: var(--content-default); }
.container-section { max-width: var(--content-section); }
.container-large   { max-width: var(--content-large); }

@media (max-width: 575.98px) {
  .container-small,
  .container-default,
  .container-section,
  .container-large { padding-inline: var(--gutter-sm); }
}

.section-left-content { max-width: var(--section-text-width); width: 100%; }

/* --------------------------------------------------------------------------
   4. BÖLÜM BOŞLUKLARI  (144px -> 64px)
   -------------------------------------------------------------------------- */
.section-gap    { padding-block: clamp(64px, 8vw, 144px); }
.section-gap-sm { padding-block: clamp(48px, 5vw, 80px);  }
.section-stack  { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 144px); }

/* --------------------------------------------------------------------------
   5. ZEMİN & METİN YARDIMCILARI
   -------------------------------------------------------------------------- */
.bg-navy        { background-color: var(--brand-navy-900); }
.bg-navy-light  { background-color: var(--brand-navy-800); }
.bg-accent      { background-color: var(--brand-accent-500); }
.bg-accent-200  { background-color: var(--brand-accent-200); }
.bg-accent-100  { background-color: var(--brand-accent-100); }
.bg-promo       { background-color: var(--brand-promo-600); }
.bg-promo-300   { background-color: var(--brand-promo-300); }
.bg-promo-50    { background-color: var(--brand-promo-50); }
.bg-soft        { background-color: var(--brand-gray-25); }
.bg-soft-50     { background-color: var(--brand-gray-50); }

.text-navy      { color: var(--brand-navy-900) !important; }
.text-navy-300  { color: var(--brand-navy-300) !important; }
.text-navy-50   { color: var(--brand-navy-50)  !important; }
.text-accent    { color: var(--brand-accent-500) !important; }
.text-promo     { color: var(--brand-promo-600) !important; }
.text-promo-300 { color: var(--brand-promo-300) !important; }
.text-muted-600 { color: var(--brand-gray-600) !important; }
.text-muted-500 { color: var(--brand-gray-500) !important; }
.text-muted-400 { color: var(--brand-gray-400) !important; }

/* --------------------------------------------------------------------------
   6. GÖLGE YARDIMCILARI
   -------------------------------------------------------------------------- */
.shadow-menu  { box-shadow: var(--shadow-menu); }
.shadow-card  { box-shadow: var(--shadow-card); }
.shadow-float { box-shadow: var(--shadow-float); }

/* --------------------------------------------------------------------------
   7. BUTONLAR
   .btn-accent = birincil eylem. Aksiyon rengi SADECE burada kullanılır.
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-heading);
  font-weight: 500;
  border-radius: var(--bs-border-radius);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn-accent {
  --bs-btn-color: #001d4a;
  --bs-btn-bg: var(--brand-accent-500);
  --bs-btn-border-color: var(--brand-accent-500);
  --bs-btn-hover-color: #001d4a;
  --bs-btn-hover-bg: var(--brand-accent-600);
  --bs-btn-hover-border-color: var(--brand-accent-600);
  --bs-btn-active-bg: var(--brand-accent-600);
  --bs-btn-active-border-color: var(--brand-accent-600);
  --bs-btn-focus-shadow-rgb: 158, 186, 246;
  font-weight: 500;
}

.btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-navy-900);
  --bs-btn-border-color: var(--brand-navy-900);
  --bs-btn-hover-bg: var(--brand-navy-800);
  --bs-btn-hover-border-color: var(--brand-navy-800);
  --bs-btn-hover-color: #fff;
}

.btn-outline-navy {
  --bs-btn-color: var(--brand-navy-900);
  --bs-btn-border-color: var(--brand-gray-100);
  --bs-btn-hover-color: var(--brand-navy-900);
  --bs-btn-hover-bg: var(--brand-gray-25);
  --bs-btn-hover-border-color: var(--brand-gray-300);
}

.btn-pill { border-radius: var(--bs-border-radius-pill); }

/* Metin link + ok — "Detaylı İnceleyin", "Detaylar ›" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--brand-navy-900);
  text-decoration: none;
}
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover { color: var(--brand-navy-700); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   8. FORM
   -------------------------------------------------------------------------- */
.form-control {
  border-radius: var(--bs-border-radius);
  border-color: transparent;
  padding: 14px 16px;
  font-size: 16px;
}
.form-control::placeholder { color: var(--brand-gray-400); }
.form-control:focus {
  border-color: var(--brand-accent-500);
  box-shadow: 0 0 0 3px rgba(158, 186, 246, .42);
}

/* --------------------------------------------------------------------------
   9. ROZETLER
   -------------------------------------------------------------------------- */
.badge-only-us {                       /* "Sadece Biz'de!" */
  display: inline-block;
  background: var(--brand-accent-100);
  color: var(--brand-navy-900);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--bs-border-radius-pill);
  white-space: nowrap;
}
.badge-sector {                        /* "# Distribütör / Saha Satışı" */
  display: inline-block;
  background: var(--brand-promo-600);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  padding: 10px 28px;
  border-radius: var(--bs-border-radius-pill);
}
.badge-chip {
  display: inline-block;
  background: rgba(255, 255, 255, .85);
  color: var(--brand-gray-900);
  font-size: 13px;
  padding: 4px 12px;
  border-radius: var(--bs-border-radius-pill);
  backdrop-filter: blur(4px);
}
.badge-cat {                           /* blog kategori etiketi */
  display: inline-block;
  background: var(--brand-navy-50);
  color: var(--brand-navy-900);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: var(--bs-border-radius-pill);
}

/* --------------------------------------------------------------------------
   10. MESH GRADIENT HERO
   Üç aile de düşük opaklıkta yıkanıyor — hiçbiri baskın çıkmıyor.
   -------------------------------------------------------------------------- */
.hero-mesh {
  position: relative;
  background-color: #fff;
  background-image:
    radial-gradient(60% 55% at 12% 18%, rgba(158, 186, 246, .55) 0%, transparent 62%),
    radial-gradient(55% 50% at 88% 12%, rgba(37, 99, 235, .16) 0%, transparent 60%),
    radial-gradient(70% 60% at 78% 88%, rgba(158, 186, 246, .45) 0%, transparent 62%),
    radial-gradient(50% 45% at 25% 92%, rgba(2, 74, 165, .12) 0%, transparent 60%);
}

/* --------------------------------------------------------------------------
   11. ERİŞİLEBİLİRLİK
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--brand-accent-500);
  color: #001d4a;
  font-family: var(--font-heading);
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--bs-border-radius);
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--brand-accent-500);
  outline-offset: 2px;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}