/* ==========================================================================
   HYDROTRUST — ANA SAYFA HERO KATMANI (tam ekran fotoğraf)
   hydro.css'in üstüne binen ince katman. Sadece ana sayfa hero'sunu
   etkiler; sayfanın geri kalanı hydro.css'teki Cloud Pearl zeminde kalır.
   Kaldırmak için layout'taki <link> satırını silmek yeterli.

   Önceki sürüm kırmızı bir kanvastı: solda bordo zemin, sağ yarıda maskeyle
   zemine karışan fotoğraf. Müşteri kırmızıyı kaldırıp fotoğrafın tam ekran
   olmasını istedi. Artık slaytın tamamını fotoğraf kaplıyor, metin okunsun
   diye üstüne yönlü bir karartma perdesi (.hxs__slide::before) biniyor.
   ========================================================================== */

:root{
  --c-on-hero:      #FFFFFF;              /* fotoğraf üstü başlık */
  --c-on-hero-mut:  rgba(255,255,255,.84); /* fotoğraf üstü gövde metni */
  --c-hero-dark:    10,10,8;              /* perdenin rengi (rgb bileşenleri) */
}

/* Fotoğraf yüklenene kadar altta duran zemin; koyu olmalı ki beyaz metin
   ilk karede de okunsun. */
.hxs{ background:var(--c-ink); }
.hxs__aura{ display:none; }               /* kart düzenine ait altın lekeler */

/* hydro.css ana sayfada hero'yu menünün altına çekip (negatif margin) aynı
   kadar padding veriyor; böylece metin menünün altına girmiyordu. Ama o
   padding yüzünden fotoğraf da 135px aşağıdan başlıyor, tepede bir şerit
   zemin görünüyordu. Padding kaldırılıp aynı boşluk metnin kendisine
   veriliyor: fotoğraf artık menünün de arkasından geçiyor. */
.is-home .hxs{ padding-top:0; }
.is-home .hxs__grid{ padding-top:calc(var(--home-top) + clamp(8px, 1.5vh, 20px)); }

/* ---------- Slayt: boydan boya fotoğraf ---------- */
.hxs__slide{
  position:relative; overflow:hidden;
  /* "Tam ekran" hissi. svh kullanılıyor: mobilde adres çubuğu açılıp
     kapanırken vh değişip hero zıplıyordu. */
  min-height:clamp(560px, 86svh, 920px);
}

/* Fotoğrafın kabı slaytın tamamı. .hxs__grid'in position'ı static yapılmazsa
   kap, grid'in kenarına dayanıp ekran kenarına ulaşamıyor. */
.hxs__grid{ position:static; }
.hxs__stage{
  position:absolute; inset:0; z-index:0;
  width:100%; display:block; align-self:stretch; min-height:0;
  border-radius:0; overflow:hidden;
}
.hxs__stage::before{ content:none; }       /* eski beyaz ışık lekesi */
.hxs__glow, .hxs__ring{ display:none; }    /* kart düzenine ait süsler */

.hxs__img{
  /* block şart: satır-içi kalırsa satır yüksekliği yüzünden üstte ve altta
     birkaç piksellik boşluk kalıyor, fotoğraf kutuyu tam doldurmuyordu. */
  display:block;
  width:100%; height:100%; max-width:none;
  object-fit:cover;
  /* Odak noktası slayt başına panelden geliyor (--odak). Masaüstünde kutu
     geniş olduğu için Y, mobilde dar olduğu için X belirleyici oluyor. */
  object-position:var(--odak, 50% 50%);
  border-radius:0; filter:none;
  /* Maske yok: fotoğraf artık bir kart değil, zeminin kendisi. */
  -webkit-mask-image:none; mask-image:none;
}

/* ---------- Okunabilirlik perdesi ----------
   hydro.css bu sözde-öğeyi display:none yapıyor; burada geri açılıyor.
   İki katman: yatayda metnin olduğu yana doğru koyulaşma, dikeyde üstte
   menü çubuğu ve altta sekme şeridi için karartma. Üst bant bilhassa koyu:
   fotoğraf menünün arkasından geçiyor ve geniş ekranda dikey kırpma arttığı
   için ürünün tepesi menü hizasına kadar çıkabiliyor; bu gölge olmadan
   silindir başlıkları menü yazılarıyla yarışıyordu. */
.hxs__slide::before{
  content:""; display:block;
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(var(--c-hero-dark),.92) 0%,
      rgba(var(--c-hero-dark),.78) 28%,
      rgba(var(--c-hero-dark),.38) 54%,
      rgba(var(--c-hero-dark),.10) 78%,
      rgba(var(--c-hero-dark),.04) 100%),
    linear-gradient(to bottom,
      rgba(var(--c-hero-dark),.86) 0%,
      rgba(var(--c-hero-dark),.52) 9%,
      rgba(var(--c-hero-dark),.14) 24%,
      rgba(var(--c-hero-dark),0) 46%,
      rgba(var(--c-hero-dark),.34) 78%,
      rgba(var(--c-hero-dark),.76) 100%);
}
[dir="rtl"] .hxs__slide::before{
  background:
    linear-gradient(to left,
      rgba(var(--c-hero-dark),.92) 0%,
      rgba(var(--c-hero-dark),.78) 28%,
      rgba(var(--c-hero-dark),.38) 54%,
      rgba(var(--c-hero-dark),.10) 78%,
      rgba(var(--c-hero-dark),.04) 100%),
    linear-gradient(to bottom,
      rgba(var(--c-hero-dark),.86) 0%,
      rgba(var(--c-hero-dark),.52) 9%,
      rgba(var(--c-hero-dark),.14) 24%,
      rgba(var(--c-hero-dark),0) 46%,
      rgba(var(--c-hero-dark),.34) 78%,
      rgba(var(--c-hero-dark),.76) 100%);
}

/* Metin perdenin de üstünde kalmalı. */
.hxs__content{ position:relative; z-index:3; }

/* ---------- Hero tipografisi ---------- */
.hxs__eyebrow, .hxs__title{ color:var(--c-on-hero); }
.hxs__title{ text-shadow:0 2px 26px rgba(var(--c-hero-dark),.45); }
.hxs__lead{ color:var(--c-on-hero-mut); }
.hxs .eyebrow{ color:var(--c-primary-l); }

/* Güven rozetleri (TSE / Hızlı Teslimat / Teknik Destek) */
.hxs__chips li{
  background:rgba(0,0,0,.30); border-color:rgba(255,255,255,.24);
  color:var(--c-on-hero);
}

/* ---------- Alt şerit ----------
   Cam yüzeyler açık zemin için tasarlanmıştı; koyu fotoğrafın üstünde
   yarı saydam beyazlar kirli duruyor. Koyu cama çevriliyor; yalnız aktif
   sekme beyaz kalıyor ki sıradaki slayt belli olsun. */
/* Yalnız katman sırası veriliyor. position'a DOKUNULMUYOR: hydro.css'te
   absolute ve slaytın üstünde duruyor; relative yapılınca akışa girip
   fotoğrafın altında 85px'lik boş bant bırakıyor, hero sert kesiliyordu. */
.hxs__navwrap{ z-index:4; }
.hxs__tab{
  background:linear-gradient(135deg, rgba(0,0,0,.52), rgba(0,0,0,.34));
  border-color:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px) saturate(1.1); backdrop-filter:blur(6px) saturate(1.1);
  color:var(--c-on-hero);
  box-shadow:0 10px 26px rgba(0,0,0,.32);
}
/* .hxs__tabname'in kendi rengi var (--c-ink), .hxs__tab'ın color'ını miras
   almıyor: pasif sekmelerin başlığı koyu camın üstünde kömür siyahı kalıyordu. */
.hxs__tab:not(.is-active) .hxs__tabname{ color:var(--c-on-hero); }
.hxs__tabdesc{ color:var(--c-on-hero-mut); }
.hxs__tabthumb{
  background:rgba(0,0,0,.26); border-color:rgba(255,255,255,.20);
  box-shadow:none;
}
.hxs__progress{ background:rgba(255,255,255,.26); }

.hxs__tab.is-active{
  background:linear-gradient(135deg, #FFFFFF, #F4F6F8);
  border-color:var(--c-primary);
  box-shadow:0 22px 46px rgba(0,0,0,.40);
  color:var(--c-ink);
}
.hxs__tab.is-active .hxs__tabname{ color:var(--c-ink); }
.hxs__tab.is-active .hxs__tabdesc{ color:var(--c-muted); }
.hxs__tab.is-active .hxs__tabthumb{ background:#EEF2F5; border-color:var(--c-line); }
.hxs__tab.is-active .hxs__progress{ background:rgba(20,20,15,.14); }

/* Ok düğmeleri: aynı koyu cam dili */
.hxs__arrow{
  background:rgba(0,0,0,.32); border-color:rgba(255,255,255,.26);
  color:var(--c-on-hero); box-shadow:0 10px 26px rgba(0,0,0,.30);
}
.hxs__arrow:hover{ background:var(--c-primary); border-color:var(--c-primary); color:var(--c-on-primary); }

/* ---------- Ana sayfada menü çubuğu hero'nun üstünde şeffaf duruyor:
     koyu bağlantılar fotoğrafta okunmuyordu. Sabitlenip beyaz zemine
     oturduğunda yine koyuya döner. ------------------------------------- */
.is-home .m-header:not(.is-stuck) .m-nav > a,
.is-home .m-header:not(.is-stuck) .m-nav__item > a,
.is-home .m-header:not(.is-stuck) .m-icon-btn,
.is-home .m-header:not(.is-stuck) .m-lang__btn{ color:var(--c-on-hero); }
.is-home .m-header:not(.is-stuck) .m-nav > a:hover,
.is-home .m-header:not(.is-stuck) .m-nav__item > a:hover{ color:var(--c-primary-l); }
.is-home .m-header:not(.is-stuck) .m-lang__btn,
.is-home .m-header:not(.is-stuck) .m-icon-btn{ border-color:rgba(255,255,255,.28); }
/* Üst bar .m-header'ın DIŞINDA duruyor, o yüzden ayrı seçici gerekiyor.
   Alt ayraç çizgisi kaldırıldı: tam ekran fotoğrafın üstünde ekranı boydan
   boya kesen açık gri bir çizgi olarak görünüyor, kusur gibi duruyordu. */
.is-home .m-topbar{ background:transparent; border-bottom-color:transparent; }
.is-home .m-topbar,
.is-home .m-topbar > .mx > * > a,
.is-home .m-topbar__info a,
.is-home .m-topbar span,
.is-home .m-topbar__info{ color:var(--c-on-hero); }
/* Dil düğmesi ve açılır menüsü kendi BEYAZ zeminlerini taşıyor; üst bardaki
   "beyaz yazı" kuralı buraya sızınca "TR" yazısı beyaz üstünde beyaz kalıyordu. */
.is-home .m-lang__btn,
.is-home .m-lang__btn span,
.is-home .m-lang__btn i{ color:var(--c-ink); }
.is-home .m-lang__menu a{ color:var(--c-ink); }
/* Aktif dil altın renkteyken beyaz zeminde 2,4:1'de kalıyordu; yazı için
   koyu altın tonu kullanılıyor, ayırt ediciliği kalınlıkla veriliyor. */
.is-home .m-lang__menu a:hover{ color:var(--c-primary-ink, #8C5D00); }
.is-home .m-lang__menu a.active{ color:var(--c-primary-ink, #8C5D00); font-weight:700; }
.is-home .m-topbar a:hover{ color:var(--c-primary-l); }
.is-home .m-header.is-stuck .m-nav > a,
.is-home .m-header.is-stuck .m-nav__item > a{ color:var(--c-ink); }

/* ---------- Yerleşim ---------- */
@media (min-width:993px){
  /* Sağ sütun artık görsel taşımıyor (fotoğraf mutlak konumlu), ama metnin
     fotoğrafın odak noktasının üstüne binmemesi için dar kalması gerekiyor. */
  .hxs__grid{ grid-template-columns:minmax(0,1fr) minmax(0,46%); }
  .hxs__content{ padding-block:clamp(40px,7vh,90px); }
}

/* Mobilde tek sütun: metin fotoğrafın üstünde, perde dikeyde ağırlaşıyor.
   Yatay perde dar ekranda metnin sağ tarafını da karartmalı, yoksa uzun
   satırların sonu fotoğrafın açık bölgesine denk gelip okunmuyor. */
@media (max-width:992px){
  .hxs__grid{ grid-template-columns:1fr; }
  .hxs__slide{ min-height:clamp(520px, 82svh, 780px); }
  .hxs__slide::before{
    background:
      linear-gradient(to bottom,
        rgba(var(--c-hero-dark),.72) 0%,
        rgba(var(--c-hero-dark),.52) 30%,
        rgba(var(--c-hero-dark),.34) 52%,
        rgba(var(--c-hero-dark),.58) 78%,
        rgba(var(--c-hero-dark),.86) 100%);
  }
  [dir="rtl"] .hxs__slide::before{
    background:
      linear-gradient(to bottom,
        rgba(var(--c-hero-dark),.72) 0%,
        rgba(var(--c-hero-dark),.52) 30%,
        rgba(var(--c-hero-dark),.34) 52%,
        rgba(var(--c-hero-dark),.58) 78%,
        rgba(var(--c-hero-dark),.86) 100%);
  }
  /* Metin dikeyde ortalanıyor: fotoğrafın ürünü genelde alt yarıda. */
  .hxs__content{ position:relative; padding-block:clamp(30px,6vh,60px); }

  /* Dar ekranda metin ürünün üstüne biniyor. Bütün fotoğrafı karartmak
     yerine yalnız metnin arkasına yumuşak bir perde konuyor: fotoğraf
     açık kalıyor, beyaz yazı ürünün açık tan gövdesinde de okunuyor
     (en kötü nokta 3,4:1'den 4,5:1'in üstüne çıkıyor).
     z-index:-1 .hxs__content'in kendi yığın bağlamında kalıyor; slaytın
     perdesinin altına düşmüyor. */
  .hxs__content::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    inset:-26px -20px -22px;
    background:radial-gradient(124% 88% at 50% 46%,
      rgba(var(--c-hero-dark),.80) 0%,
      rgba(var(--c-hero-dark),.58) 46%,
      rgba(var(--c-hero-dark),.22) 70%,
      transparent 84%);
  }
}