/* ============================================================================
   MarbleMap — "Nasıl çalışır" (.h11-service) kart okunabilirlik düzeltmesi
   ----------------------------------------------------------------------------
   main.css'ten SONRA yüklenir. main.css'e DOKUNULMAZ (613 KB şablon dosyası).
   TÜM seçiciler .h11-service-item ile kapsanmıştır. Bu sınıflar repo genelinde
   yalnız Views/Home/Index.cshtml ve Views/Home/en-US/Index.cshtml'de kullanılıyor.

   DÜZELTİLEN HATALAR
   1) main.css TOP LEVEL'da:
        .h11-service-item .h6-service-content{opacity:0;visibility:hidden}
      Görünürlüğü sadece (a) :hover ve (b) 0-991px'i kapsayan bileşik media query
      geri veriyor. Yani >=992px'te metin YALNIZCA fare üstüne gelince görünüyor;
      dokunmatik geniş ekranda hiç görünmüyor. Dahası visibility:hidden alt ağacı
      klavye sırasından ve erişilebilirlik ağacından da çıkarıyor → her karttaki
      <h4 class="title"><a href="…/register"> linki Tab ile ULAŞILAMIYOR
      (WCAG 2.1.1 Keyboard + 2.4.3 Focus Order). Kartın diğer linki zaten
      tabindex="-1" aria-hidden="true" — yani portala giden tek klavye yolu kapalı.

   2) p.desc'in kendi color kuralı yok; body'den var(--tj-color-text-body)=#454363
      miras alıyor (kardeşleri .title ve .h6-service-index beyaza çevrilmiş,
      .desc UNUTULMUŞ — asıl kök neden bu).

   3) Metnin arkası sabit bir renk DEĞİL. Kart 450px, thumb height:100%,
      img object-fit:cover → arkada mermer FOTOĞRAFI var; üstünde z-index:1
      clip-path'li mor kama; en üstte z-index:2 içerik.

      ÖLÇÜM — 2026-08-21'de yenilenen SOĞUK görseller üzerinde (yani "görselleri
      koyulaştırınca sorun kalkar mı?" sorusunun cevabı: KALKMIYOR). Her kartın
      alt yarısı, scrim OLMADAN beyaz metne karşı:
        flow-1.webp  ort L=0.395  en parlak piksel rgb(232,239,247) → 2.36:1 / en kötü 1.16:1
        flow-2.webp  ort L=0.157  en parlak piksel rgb(193,199,201) → 5.08:1 / en kötü 1.71:1
        flow-3.webp  ort L=0.168  en parlak piksel rgb(209,218,224) → 4.81:1 / en kötü 1.42:1
      Üçü de AA'nın (4.5:1) altında kalabiliyor ve değer fotoğrafa göre geziniyor.
      Bu yüzden kontrast garantisi fotoğrafa değil, deterministik bir scrim'e
      bağlanmak ZORUNDA. (Yeni bir taş görseli geldiğinde bu dosya değişmez —
      garanti görselden bağımsızdır. Zaten bütün mesele bu.)

   ÇÖZÜM: metni her koşulda göster + arkasına, fotoğraftan ve mor kamadan
   BAĞIMSIZ, içerik kutusuna otomatik boyutlanan bir gradient scrim koy.
   Kontrast garantisi tek bir yerde toplanır.

   CANLI ÖLÇÜM (https://marblemap.co/tr-TR/, Playwright, bu CSS enjekte edilerek):
     kart yüksekliği : 450px (her breakpoint'te)
     içerik kutusu   : 274px (1280/1440) · 267px (992-1199) · 221px (768-991)
                       219px (600) · 243px (375)
     padding-top     : 30px (>=1200 ve 768-991) · 20px (992-1199 ve <=767)
     scrim kutusu    : içerik + 80px = EN FAZLA 354px / 450px → >=96px fotoğraf açık
     ilk glif ("01.") gradyanda 100-110px'te; >=.94 alfa durağı 70px'te → >=30px pay
     .desc ilk satırı gradyanda 207-228px'te (ölçüldü) → devasa pay
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) METİN HER ZAMAN GÖRÜNÜR — hover'a bağlı değil.
      Link tekrar Tab sırasına ve a11y ağacına girer.

      ÖZGÜLLÜK NOTU (bilerek 0-2-0): main.css'in hem temel kuralı hem de
      0-991px mobil override'ı da 0-2-0. Bu dosya SONRA yüklendiği için ikisini
      de kaynak sırasıyla yeniyor — ve mobil override ile AYNI değerleri
      (opacity:1 / visibility:visible / width:100%) yazdığı için mobilde
      görünür hiçbir değişiklik olmuyor. Seçiciye ".h11-service " ata prefix'i
      EKLEMEYİN: özgüllük 0-3-0'a çıkar, mobil override'ı ezer ve sırf onu geri
      vermek için ayrı bir @media telafi bloğu yazmak zorunda kalırsınız.

      position/z-index YENİDEN BEYAN: 2. maddedeki scrim, bu kutunun yığın
      bağlamı kurmasına bağlı. Bağlamı main.css'in z-index:2'sine emanet etmek
      yerine burada garanti ediyoruz — upstream tema güncellemesi o satırı
      kaldırsa bile scrim mor kamanın altına düşmez.
   --------------------------------------------------------------------------- */
.h11-service-item .h6-service-content {
  position: absolute;
  z-index: 2;
  width: 100%;
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* main.css'in :hover kuralı 0-3-0 ve transition-delay:.25s taşıyor. Aynı
   özgüllükte, sonra yüklenerek nötrleyoruz — "açılıyormuş" gibi hayalet bir
   animasyon kalmasın. (padding'e DOKUNULMUYOR: main.css'in breakpoint'e göre
   30px/20px padding'i olduğu gibi kalır; 3. maddedeki geometri paya buna bağlı.) */
.h11-service-item:hover .h6-service-content {
  opacity: 1;
  visibility: visible;
  transition: none;
  transition-delay: 0s;
}

/* ---------------------------------------------------------------------------
   2) OKUNABİLİRLİK SCRIM'İ — içerik kutusuna otomatik boyutlanır.

      KATMAN: .h6-service-content position:absolute + z-index:2 olduğu için KENDİ
      yığın bağlamını kurar. z-index:-1 olan bu pseudo o bağlamın İÇİNDE metnin
      ALTINDA, ama bağlam bir bütün olarak .h6-service-thumb::before (mor kama,
      z-index:1) ve fotoğrafın ÜSTÜNDE boyanır. Yani scrim, fotoğrafın ne olduğundan
      ve kamanın nerede durduğundan bağımsız olarak metnin DOĞRUDAN zeminidir.

      GEOMETRİ: top:-80px ile kutunun dışına taşar, böylece yumuşak geçiş metnin
      ÜSTÜNDE kalır ve tek bir glif bile fade bölgesine düşmez. Duraklar YÜZDE
      DEĞİL PX — metin uzunluğu, dil (TR/EN) veya kart yüksekliği değişse de
      garanti bozulmaz.
      DEĞİŞMEZ KURAL: 70px (>=.94 durağı) < 80px (taşma) + padding-top (en az 20px).
      Yani en dar halde bile 30px pay var; ölçülen gerçek pay 127-158px.
      padding küçültülürse ya da top:-80px değiştirilirse 70px durağı da düşürülmeli.
      .h6-service-item{overflow:hidden;border-radius:10px} taşan kısmı karta kırpar.

      RENK: siyah değil, temanın kendi indigo ailesi — üstte primary (#3b348c)
      tonu, altta dark-2 (#17143a). blog.css'teki .mm-side-cta da aynı dili kullanıyor.
   --------------------------------------------------------------------------- */
.h11-service-item .h6-service-content::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  top: -80px;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(59, 52, 140, 0)   0,      /* --tj-color-theme-primary, saydam  */
    rgba(45, 39, 110, .62) 36px,   /* fade — BU BÖLGEDE METİN YOK       */
    rgba(30, 26, 74, .94)  70px,   /* metin bölgesinin tavanı           */
    rgba(23, 20, 58, .97)  100%    /* --tj-color-theme-dark-2           */
  );
}

/* ---------------------------------------------------------------------------
   3) METİN RENKLERİ
      .desc bugün body'den #454363 miras alıyor → 1.09:1 / değişken.
      #eeecf6 = var(--tj-color-grey-1), temanın kendi token'ı (body background'u).
      .title ve .h6-service-index zaten beyaz; burada açıkça sabitleniyor ki
      ileride bir token değişirse kontrast sessizce bozulmasın.
      NOT: h1..h6 a{color:inherit} olduğu için <h4 class="title"><a> beyazı
      miras alır — link için ayrı kural GEREKMİYOR (doğrulandı).
   --------------------------------------------------------------------------- */
.h11-service-item .h6-service-content .desc {
  color: var(--tj-color-grey-1, #eeecf6);
}
.h11-service-item .h6-service-content .title,
.h11-service-item .h6-service-index {
  color: var(--tj-color-common-white, #ffffff);
}

/* ---------------------------------------------------------------------------
   4) MOR CLIP-PATH KAMASI SABİTLENİR: bottom:-60% → bottom:0.
      Bu, tasarımın KENDİ hover bitiş durumu (ve mobilde main.css'in zaten
      yaptığı şey) — yeni bir kompozisyon icat edilmiyor. Scrim yarı saydam
      olduğu için kamanın hover'da yukarı kayması renkte oynama/titreme
      yaratırdı. main.css'in :hover kuralı da bottom:0 dediğinden ek kural
      gerekmiyor; bu tek satır her iki durumu da kapatır.
   --------------------------------------------------------------------------- */
.h11-service-item .h6-service-thumb::before {
  bottom: 0;
  transition: none;
}

/* ---------------------------------------------------------------------------
   5) KLAVYE ODAK HALKASI — 1. madde linki gerçekten odaklanabilir yaptığı için
      scrim/fotoğraf üstünde GÖRÜNÜR bir gösterge şart (WCAG 2.4.7). Tarayıcının
      varsayılan ince halkası bu zeminde kaybolur. Beyaz halka scrim üstünde
      >=13.7:1, mor kama üstünde 10.21:1 — grafiksel öğe eşiği 3:1'i rahat geçer.
   --------------------------------------------------------------------------- */
.h11-service-item .h6-service-content a:focus-visible {
  outline: 2px solid var(--tj-color-common-white, #ffffff);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   6) HAREKET AZALTMA — main.css'te HİÇ prefers-reduced-motion yok (ölçüm: 0).
      Kalan tek hover efekti olan görsel zoom'u kapatır. (Zoom kuralı
      .h6-service-item:hover .h6-service-thumb img (0,3,1), h11'in transform:none
      kuralını (0,2,1) yendiği için hover'da ÇALIŞIYOR — ona dokunmuyoruz,
      sadece hareket hassasiyeti olan kullanıcı için kapatıyoruz.)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .h11-service-item .h6-service-thumb img,
  .h11-service-item:hover .h6-service-thumb img {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   7) YAZDIRMA — main.css'te HİÇ @media print yok (ölçüm: 0). Gradient scrim
      varsayılan olarak basılmaz; açık renkli metin beyaz kâğıtta kaybolurdu.
      Yani bu blok, düzeltmeyi yaparken YENİ bir okunabilirlik hatası
      doğurmamak için zorunlu. Kapsam yalnız .h11-service — sitenin geri
      kalanının yazdırma davranışı değişmez.
   --------------------------------------------------------------------------- */
@media print {
  .h11-service-item .h6-service-content::before { display: none; }
  .h11-service-item .h6-service-content { background-color: #ffffff; }
  .h11-service-item .h6-service-content .title,
  .h11-service-item .h6-service-content .desc,
  .h11-service-item .h6-service-index { color: #1c1945; }
}

/* --- ÖZGÜLLÜK TABLOSU ------------------------------------------------------
   main.css  .h11-service-item .h6-service-content              0-2-0  (önce)
   main.css  @media 0-991px  aynı seçici                        0-2-0  (önce)
   main.css  .h11-service-item:hover .h6-service-content        0-3-0  (önce)
   BURADA    .h11-service-item .h6-service-content              0-2-0  (SONRA) → kazanır
   BURADA    .h11-service-item:hover .h6-service-content        0-3-0  (SONRA) → kazanır
   BURADA    .h11-service-item .h6-service-content .desc        0-3-0  → rakibi yalnız body mirası
   !important KULLANILMIYOR ve gerekmiyor.
   -------------------------------------------------------------------------- */