/* Masttech mühendislik karolajı (2026-11-05)
   Kaynak: prototype-v02 açık gri tema, .grid-bg (app.css) + --grid/--grid-strong (tokens.css).
   20 px ince kare ızgara + 100 px modül çizgisi, düşük kontrast, alta ve kenarlara yumuşak geçiş.
   Kırmızı yalnız küçük vurgu çizgisinde (.mt-karolaj-vurgu).

   Bağımsız dosya: başka değişkene ihtiyaç duymaz (--mt-red yoksa #E3010F kullanılır).
   8498'de masttech-ds.css içindeki tek @import satırıyla yüklenir.

   KULLANIM (sayfaya otomatik yayılmaz; yalnız açıkça seçilen bölümlere uygulanır):
     <section class="mt-karolaj">…</section>          alta doğru solan karolaj (giriş/hero bölümleri)
     <section class="mt-karolaj mt-karolaj--tam">      bölümün tamamında karolaj (solma yok, kenar geçişi var)
     <main class="mt-karolaj mt-karolaj--sayfa">        sayfa boyu karolaj, üst/alt yumuşak gölge (Kariyer standardı)
     <span class="mt-karolaj-vurgu">Etiket</span>       başlık/etiket önünde 18×2 px kırmızı çizgi
   Ayarlar (bölüm başına geçersiz kılınabilir):
     --mt-karolaj-zemin       zemin rengi (mevcut 8498 bölüm zemini #F8F8F8)
     --mt-karolaj-yukseklik   karolajın tam göründüğü yükseklik; altında zemine geçer
   Ürünler ve MSA için hazır, henüz uygulanmadı: ürün sayfalarında (ds.css zaten yüklü) bölüme
   .mt-karolaj sınıfı ya da buraya bir seçici eklemek; MSA sayfalarında ayrıca
   <link rel="stylesheet" href="/design/mt-karolaj.css"> eklemek yeterli. */

:root {
  --mt-karolaj-zemin: #F8F8F8;
  /* karolaj bandının tonu: prototipteki --hero-bg (#E9ECEE) yönünde, 8498 zeminine yakın soğuk açık gri */
  --mt-karolaj-ton: #EDEFF1;
  --mt-karolaj-cizgi: rgb(20 24 28 / .045);
  --mt-karolaj-cizgi-guclu: rgb(20 24 28 / .085);
  --mt-karolaj-hucre: 20px;
  --mt-karolaj-modul: 100px;
  --mt-karolaj-yukseklik: 380px;
  --mt-karolaj-kenar: 56px;
  --mt-karolaj-vurgu-renk: var(--mt-red, #E3010F);
}

/* ---- ortak karolaj ---- */
.mt-karolaj,
/* Yasal sayfalar (MSA /msa/privacy/, /msa/terms/, /msa/data-deletion/): içerik alanının üst bandı; ayrıntı mt-legal.css */
.legal-page .legal-main,
/* Sektörler giriş bölümü: TR /tr/sektorler/ (3173), EN /industries/ ve AR /ar/industries/ (1063) */
.elementor-3173 > .elementor-element-204fd0b,
.elementor-1063 > .elementor-element-204fd0b {
  background-color: var(--mt-karolaj-zemin);
  background-image:
    /* alta doğru zemine geçiş */
    linear-gradient(to bottom, transparent 0, transparent calc(var(--mt-karolaj-yukseklik) * .45), var(--mt-karolaj-zemin) var(--mt-karolaj-yukseklik)),
    /* yan kenar geçişi */
    linear-gradient(90deg, var(--mt-karolaj-ton) 0, transparent var(--mt-karolaj-kenar), transparent calc(100% - var(--mt-karolaj-kenar)), var(--mt-karolaj-ton) 100%),
    /* ince kare ızgara */
    linear-gradient(var(--mt-karolaj-cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--mt-karolaj-cizgi) 1px, transparent 1px),
    /* modül çizgisi (5 hücrede bir) */
    linear-gradient(var(--mt-karolaj-cizgi-guclu) 1px, transparent 1px),
    linear-gradient(90deg, var(--mt-karolaj-cizgi-guclu) 1px, transparent 1px),
    /* band tonu (ızgaranın altında; aşağıda zemine geçiş katmanı örter) */
    linear-gradient(var(--mt-karolaj-ton), var(--mt-karolaj-ton));
  background-size:
    100% 100%,
    100% 100%,
    var(--mt-karolaj-hucre) var(--mt-karolaj-hucre),
    var(--mt-karolaj-hucre) var(--mt-karolaj-hucre),
    var(--mt-karolaj-modul) var(--mt-karolaj-modul),
    var(--mt-karolaj-modul) var(--mt-karolaj-modul),
    100% 100%;
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, center top, center top, center top, center top, 0 0;
}

/* tam bölüm: alt solma yok, yalnız kenar geçişi */
.mt-karolaj.mt-karolaj--tam {
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(90deg, var(--mt-karolaj-ton) 0, transparent var(--mt-karolaj-kenar), transparent calc(100% - var(--mt-karolaj-kenar)), var(--mt-karolaj-ton) 100%),
    linear-gradient(var(--mt-karolaj-cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--mt-karolaj-cizgi) 1px, transparent 1px),
    linear-gradient(var(--mt-karolaj-cizgi-guclu) 1px, transparent 1px),
    linear-gradient(90deg, var(--mt-karolaj-cizgi-guclu) 1px, transparent 1px),
    linear-gradient(var(--mt-karolaj-ton), var(--mt-karolaj-ton));
}

/* ---- sayfa boyu karolaj (2026-11-05, Kariyer standardı) ----
   Bölüm değil sayfanın içerik alanı: karolaj baştan sona aynı ölçekte (20/100 px) sürer,
   üstte header altından inen yumuşak gölge, altta footer'a doğru yumuşak koyulaşma ve solma.
   Kullanım: <main class="mt-karolaj mt-karolaj--sayfa"> ya da aşağıdaki seçici listesine eklemek.
   Formlar ve metin karolajın üstünde beyaz yüzeyde (kart) durur; karolaj metnin arkasına girmez. */
.mt-karolaj.mt-karolaj--sayfa,
/* Kariyer modülü: /kariyer/, /kariyer/genel-basvuru/, /kariyer/ilan/<slug>/ (main.tc, TR/EN/AR) */
body.mt-page-kariyer main.tc,
/* MSA v2 asistanı: /msa/assistant.html beş adım (main.assistant-main kayar; ayrıntı mt-msa.css) */
body.assistant-page:not(.legal-page) main.assistant-main {
  --mt-karolaj-ust-golge: rgb(20 24 28 / .07);
  --mt-karolaj-alt-golge: rgb(20 24 28 / .05);
  background-color: var(--mt-karolaj-zemin);
  background-image:
    /* üst: header altı yumuşak gölge */
    linear-gradient(to bottom, var(--mt-karolaj-ust-golge) 0, transparent 36px),
    /* alt: footer'a doğru koyulaşma */
    linear-gradient(to top, var(--mt-karolaj-alt-golge) 0, transparent 48px),
    /* alt: karolaj zemine solar (son 240 px) */
    linear-gradient(to top, var(--mt-karolaj-zemin) 0, transparent 240px),
    /* yan kenar geçişi */
    linear-gradient(90deg, var(--mt-karolaj-ton) 0, transparent var(--mt-karolaj-kenar), transparent calc(100% - var(--mt-karolaj-kenar)), var(--mt-karolaj-ton) 100%),
    linear-gradient(var(--mt-karolaj-cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--mt-karolaj-cizgi) 1px, transparent 1px),
    linear-gradient(var(--mt-karolaj-cizgi-guclu) 1px, transparent 1px),
    linear-gradient(90deg, var(--mt-karolaj-cizgi-guclu) 1px, transparent 1px),
    linear-gradient(var(--mt-karolaj-ton), var(--mt-karolaj-ton));
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%,
    var(--mt-karolaj-hucre) var(--mt-karolaj-hucre),
    var(--mt-karolaj-hucre) var(--mt-karolaj-hucre),
    var(--mt-karolaj-modul) var(--mt-karolaj-modul),
    var(--mt-karolaj-modul) var(--mt-karolaj-modul),
    100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, center top, center top, center top, center top, 0 0;
}

/* ---- kırmızı küçük vurgu çizgisi (yalnız bu) ---- */
.mt-karolaj-vurgu::before,
/* sektörler etiketi: TR/EN'de h1, AR taslakta h2; başlık etiketine dokunmadan widget üzerinden */
.elementor-3173 > .elementor-element-204fd0b .elementor-element-ecec866 .elementor-heading-title::before,
.elementor-1063 > .elementor-element-204fd0b .elementor-element-ecec866 .elementor-heading-title::before {
  content: "";
  display: inline-block;
  inline-size: 18px;
  block-size: 2px;
  background: var(--mt-karolaj-vurgu-renk);
  vertical-align: middle;
  margin-inline-end: 10px;
  position: relative;
  top: -2px;
}

/* ---- küçük ekran: daha dar kenar geçişi, karolaj metnin arkasında daha kısa ---- */
@media (max-width: 767px) {
  :root {
    --mt-karolaj-yukseklik: 300px;
    --mt-karolaj-kenar: 16px;
    --mt-karolaj-cizgi: rgb(20 24 28 / .04);
    --mt-karolaj-cizgi-guclu: rgb(20 24 28 / .07);
  }
}

/* ---- erişilebilirlik ve baskı: karolaj kaldırılır, zemin kalır ---- */
@media (prefers-contrast: more), (forced-colors: active), print {
  .mt-karolaj,
  .legal-page .legal-main,
  body.mt-page-kariyer main.tc,
  body.assistant-page:not(.legal-page) main.assistant-main,
  .elementor-3173 > .elementor-element-204fd0b,
  .elementor-1063 > .elementor-element-204fd0b { background-image: none; }
}