/* Site geneli tema katmanı.
 *
 * Tüm sayfalarda en son yüklenen stil dosyasıdır; dört işi var:
 *  1. Mor kare ızgarayı, kenarlara doğru eriyen maskesiyle her sayfanın zemini yapmak.
 *  2. Izgarayı örten tam genişlikteki bölüm zeminlerini saydamlaştırmak.
 *  3. Butonların arkasındaki bulanık renkli gölgeleri kaldırmak.
 *     Duolingo tarzı sert alt kenar (#3d0c9f) butonların kendi CSS'inde durur,
 *     bu dosya ona dokunmaz.
 *  4. Siyah / sarı / mor / beyaz arasındaki hiyerarşiyi tek yerden kurmak.
 */

:root {
  --grid-line: rgba(94, 23, 235, .16);
  --grid-size: 72px;
  --page-bg: #ffffff;

  /* Marka paleti. Yazı vurguları da butonlar da markanın kendi sarısını
     kullanır; mor yalnızca zemin ızgarasında kaldı. */
  --brand: #f9c809;       /* dolgu: buton gövdesi, işaretçi, rozet */
  --brand-deep: #d9a600;  /* kenarlık ve Duolingo alt basamağı */
  /* Beyaz üzerine sarı okunmuyor: açık zemindeki tüm yazı, ikon ve ince
     işaretler mürekkebe alındı. Sarı yalnızca dolu yüzeylerde (buton,
     rozet, seçili durum) ve siyah kabuğun üstünde kalıyor. */
  --brand-text: rgb(33, 23, 58);
  --brand-soft: #fff7dd;  /* çok açık sarı yüzey */
  --brand-highlight: #f9c809; /* başlıklarda vurgulanan kelimeler */
  --brand-on: #21173a;    /* sarı dolgunun üstündeki yazı — 10.6:1 */

  /* İçerik metni kapkara; rgb(33, 23, 58) yalnızca butonlarda kalıyor. */
  --ink: #000000;
  --about-ink: #000000;
  --about-copy: #333333;
  --copy: #333333;

  /* Eski mor değişkenleri sarıya bağlandı; gözden kaçan bir kullanım
     kalırsa mor değil marka sarısı çıksın. */
  --purple: var(--brand-text);
  --purple-dark: var(--brand-on);
  --purple-soft: var(--brand-soft);
  --about-purple: var(--brand-text);
  --about-purple-dark: var(--brand-on);
}

/* 1. Izgara: ekrana sabitlenmiş tek bir katman.
      Maske sayesinde kareler ortada tam görünür, kenarlara gidildikçe
      erir; eski kahraman alanındaki davranışın sayfa geneline taşınmış hâli.
      body::before mobil menü perdesi tarafından kullanıldığı için ::after. */
html {
  background-color: var(--page-bg);
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: center center;
  /* Kareler ortada tam, kenarlara doğru eriyip kayboluyor.
     closest-side: elipsin yarıçapı ekranın yarısı kadar, yani geçişin
     tamamı görünür alanın içinde bitiyor. (Önceki 96%/92% değerleriyle
     elips ekranın dışına taşıyor, erime hiç görünmüyordu.) */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0 50%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 0 50%, transparent 100%);
  pointer-events: none;
}

/* Sayfa CSS'leri body'ye düz renk veriyordu; ızgaranın görünmesi için kaldırılıyor.
   body[class] seçicisi about-body / quote-body / blog-body gibi sınıfları da yakalar. */
body,
body[class] {
  background-color: transparent;
  background-image: none;
}

/* 2. Kahraman alanlar: beyaz perde ve ana sayfada zaten kapalı olan
      renkli blur lekeleri kaldırıldı, ızgara doğrudan görünüyor. */
.hero,
.about-hero.hero,
.service-hero.about-hero,
#anasayfa .hero,
#home .hero,
.contact-section,
.quote-page {
  background: transparent;
}

.hero::before,
.hero::after,
.quote-page::before,
.quote-page::after,
.glow {
  display: none;
}

/* Tam genişlikteki bölüm zeminleri (beyaz / açık lila bantlar) saydam.
   Kartlar ve paneller beyaz kalmaya devam ediyor, ızgaranın üstünde duruyorlar. */
.about-section.services-section,
.approach-section,
.stripe-section,
.vision-section,
.about-cta-section,
.service-scope-section,
.service-outcome-section,
.service-fit-section,
.service-faq-section,
.service-related-section,
.service-depth-section {
  background: transparent;
}

/* 4. Renk hiyerarşisi.
 *
 * Siyah  = kabuk (navbar + footer). Üzerinde mor kullanılmaz.
 * Sarı   = markanın rengi: yazı vurguları, butonlar, işaretçiler.
 *          Açık zeminde --brand-text, dolgularda --brand tonu kullanılır.
 * Mor    = yalnızca zemin ızgarası; başka hiçbir yerde kullanılmıyor.
 * Beyaz  = kart ve panel yüzeyi.
 *
 * Butonların arkasında bulanık renkli gölge yok; derinliği Duolingo tarzı
 * sert alt kenar veriyor.
 */

/* Odak halkalari: siyah zeminde mor gorunmuyordu, sariya alindi. */
@media (min-width: 981px) {
  .navbar .nav-links a:focus-visible,
  .navbar .services-trigger:focus-visible,
  .navbar .cta:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
  }
}

/* Dil düğmesi ve menü düğmesi her ölçüde siyah barın üstünde. */
.navbar .language-btn:focus-visible,
.menu-button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* Menü AÇIKKEN düğme beyaz çekmecenin üstünde duruyor (siyah marka barı
   .mobile-menu-brand bu düzende display:none). Bu yüzden kapatma ikonu ve
   odak halkası orada koyu kalmalı; beyaz X beyaz zeminde kayboluyordu.
   X yalnızca menü açıkken ve kapanırken görünür; renk `menu-open`'a bağlı
   olursa sınıf kalktığı an solan X bir anlığına sarıya dönüyordu. */
.menu-close-icon::before,
.menu-close-icon::after {
  background-color: var(--brand-on);
}

body.menu-open .menu-button:focus-visible {
  outline-color: var(--brand-on);
}

/* Navbardaki birincil eylem de sitenin Duolingo buton dilini kullanıyor:
   dolu sarı gövde, sert koyu sarı alt basamak, basınca çökme. */
.navbar .cta {
  border: 2px solid var(--brand);
  border-bottom: 5px solid var(--brand-deep);
  border-radius: 14px;
  color: var(--brand-on);
  background: var(--brand);
  box-shadow: none;
  font-weight: 800;
  /* Dinlenme hâli açık sarı; marka sarısı üzerine gelindiğinde ortaya çıkar. */
  filter: brightness(1.06);
  transition: filter .16s ease, border-width .12s ease, transform .12s ease;
}

.navbar .cta:hover,
.navbar .cta:focus-visible {
  color: var(--brand-on);
  border-color: var(--brand);
  border-bottom-color: var(--brand-deep);
  background: var(--brand);
  box-shadow: none;
  filter: brightness(1);
}

.navbar .cta:active {
  border-bottom-width: 2px;
  filter: brightness(.94);
  transform: translateY(3px);
}

/* İkincil butonlar açık yüzeyli: çerçeve ve vurgu sarı, etiket koyu mürekkep.
   Sarı etiket açık zeminde kaybolduğu için birincil butondaki mantık burada
   da geçerli — sarı yüzeyi taşır, yazıyı mürekkep taşır.
   Hover durumları da dahil: beyaz buton hover'da ne sararır ne de yazısı
   sarıya döner, yalnızca nötr griye geçer. */
.service-action-secondary,
.service-action-secondary:hover,
.service-action-secondary:focus-visible,
.intro-action-secondary,
.intro-action-secondary:hover,
.intro-action-secondary:focus-visible,
.application-status-reset,
.application-status-reset:hover,
.application-status-close,
.application-status-close:hover,
.application-status-close:focus-visible,
.month-button,
.month-button:hover:not(:disabled),
.month-button:focus-visible:not(:disabled),
.copy-reference-button,
.copy-reference-button:hover,
.copy-reference-button:focus-visible,
.service-ghost-link,
.service-ghost-link:hover,
.service-ghost-link:focus-visible,
.process-link-save,
.process-link-add,
.process-link-remove:hover,
.process-link-remove:focus-visible,
.blog-pagination a,
.blog-back {
  color: var(--brand-on);
}

/* Sarı zeminli her butonun yazısı tek renk: rgb(33, 23, 58).
   Etiket <span>'leri de dahil — navbardaki "Teklif Al" etiketi
   mobile-nav.css'te !important ile beyaza zorlanıyordu. */
.navbar .cta,
.navbar .cta:hover,
.navbar .cta:focus-visible,
.navbar .cta:active,
.navbar .cta span,
.cta .cta-label-desktop,
.cta .cta-label-mobile,
.hero-discover,
.hero-discover:hover,
.contact-submit,
.contact-submit:hover:not(:disabled),
.contact-submit:focus-visible,
.service-action-primary,
.service-action-primary:hover,
.about-cta-link,
.about-cta-link:hover,
.blog-cta,
.blog-cta:hover,
.intro-action-primary,
.submit-button,
.submit-button:hover:not(:disabled),
.submit-button:focus-visible,
.success-button,
.success-button:hover,
.success-button:focus-visible,
.application-status-submit,
.application-status-reset,
.time-slot.is-selected,
.time-slot.is-selected:hover,
.time-slot.is-selected:focus-visible,
.skip-link {
  color: rgb(33, 23, 58);
}

.cta .cta-label-desktop,
.cta .cta-label-mobile {
  color: rgb(33, 23, 58) !important;
}

/* Başlıklardaki vurgu kelimeleri ("adım adım", "uçtan uca", "ERP ve yazılım")
   markanın sarısında kalıyor: bunlar 44-86px arası büyük başlık metni ve
   sayfadaki tek sarı yazı vurgusu. Küçük etiketler (eyebrow, kicker) ve
   gövde metni mürekkep kalmaya devam ediyor.
   Arkalarında gradyan, dolgu ya da metin-maskesi mirası bırakılmıyor. */
.hero h1 .hero-accent,
.hero h1 span,
.about-hero h1 span,
.service-hero h1 span,
.quote-intro h1 span,
.section-kicker,
.eyebrow {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  filter: none;
  text-shadow: none;
}

.hero h1 .hero-accent,
.hero h1 > span > span,
.about-hero h1 span,
.service-hero h1 span,
.quote-intro h1 span {
  color: var(--brand-highlight) !important;
  -webkit-text-fill-color: var(--brand-highlight);
}

/* .hero-line sarmalayıcısı vurgu değil, satır kırma yardımcısı. */
.hero h1 .hero-line {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
}

/* Navbar bağlantıları: hover ve bulunulan sayfa yalnızca yazı rengiyle
   belirtiliyor. Yarı saydam sarı zemin kaldırıldı. */
.navbar .nav-links a:hover,
.navbar .nav-links a:focus-visible,
.navbar .nav-links a[aria-current="page"],
.navbar .services-trigger:hover,
.navbar .services-trigger:focus-visible,
.navbar .services-menu[open] > .services-trigger,
.navbar .services-menu.is-current > .services-trigger,
.navbar .services-menu:hover > .services-trigger,
.navbar .services-menu:focus-within > .services-trigger {
  background: transparent;
}

/* Açılır menülerde de aynı sistem: hover ve bulunulan sayfa yalnızca
   yazı rengiyle belli oluyor, satırın arkasında zemin yok. */
.navbar .language-dropdown a:hover,
.navbar .language-dropdown a:focus-visible,
.navbar .language-dropdown a[aria-current="page"],
.navbar .services-dropdown a:hover,
.navbar .services-dropdown a:focus-visible,
.navbar .services-dropdown a[aria-current="page"] {
  background: transparent;
}