/* ===========================
   NODESAN HERO — TEMİZ SÜRÜM
   (yalnızca bu bloğu kullan)
=========================== */

/* 0) Güvenli temel */
.nodesan-hero-section, .nodesan-hero-content, #nodesan-hero { box-sizing: border-box; }

/* 1) Büyük görsel alanı (hero kutu) */
#nodesan-hero{
  position: relative;
  display: block;
  min-height: 480px;                 /* masaüstü güvenli yükseklik */
  height: clamp(420px, 56vh, 640px); /* responsive yükseklik */
  overflow: hidden;
  border-radius: 16px;
  z-index: 5;
}

/* 2) Slaytlar: üst üste duran katmanlar */
#nodesan-hero > .nodesan-slide{
  position: absolute;
  inset: 0;
  display: block;                    /* tema display:none verse bile görünür */
  visibility: visible;
  opacity: 0;                        /* pasif */
  pointer-events: none;
  transition: opacity .35s ease;     /* fade emniyeti */
}

/* 3) Aktif slayt kesinlikle görünür */
#nodesan-hero > .nodesan-slide.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* 4) Görsel kutuyu tam doldursun (temadaki img {height:auto}’yu ezer) */
#nodesan-hero > .nodesan-slide > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                 /* kesmeden doldur */
  object-position: center;
}

/* 5) Soldan kayma animasyon sınıfları */
@keyframes nodesanSlideInLeft  { from{ transform:translateX(-100%); opacity:.9 } to{ transform:translateX(0); opacity:1 } }
@keyframes nodesanSlideOutRight{ from{ transform:translateX(0);     opacity:1 }   to{ transform:translateX(100%); opacity:.9 } }
#nodesan-hero > .nodesan-slide.slide-in-left   { animation: nodesanSlideInLeft .55s ease forwards; }
#nodesan-hero > .nodesan-slide.slide-out-right { animation: nodesanSlideOutRight .55s ease forwards; }

/* 6) Başlık–açıklama geçişinde hafif fade (opsiyonel) */
.nodesan-hero-text{ transition: opacity .25s ease; }
.nodesan-hero-text.nodesan-fading{ opacity:.35; }

/* 7) Küçük görseller (thumb) + pırıltı */
.nodesan-thumb{
  border: 0; background: none; padding: 0; margin: 0;
  position: relative; display: inline-block;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.nodesan-thumb img{ display:block; width:220px; height:auto; }
@media (max-width: 900px){ .nodesan-thumb img{ width:180px; } }

.nodesan-thumb::after{
  content:""; position:absolute; top:0; left:-160%;
  width:60%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%,
                                       rgba(255,255,255,.55) 50%,
                                       rgba(255,255,255,0) 100%);
  transform: skewX(-20deg); pointer-events:none;
}
.nodesan-thumb:hover::after{ animation: nodesanShine .8s ease; }
@keyframes nodesanShine{ 0%{ left:-160% } 100%{ left:160% } }
/* 1) İKİ KOLON YERLEŞİM (sol: büyük görsel, sağ: metin+küçükler) */
.nodesan-hero-content{
  display: grid;
  grid-template-columns: minmax(420px, 48%) 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px){
  .nodesan-hero-content{ grid-template-columns: 1fr; gap: 20px; }
}

/* 2) BÜYÜK GÖRSEL KUTUSU – GENİŞLİK & YÜKSEKLİK AL */
#nodesan-hero{
  position: relative;
  width: 75%;
  min-height: 480px;                 /* görünür yükseklik */
  height: clamp(420px, 56vh, 640px);
  overflow: hidden;
  border-radius: 16px;
  z-index: 3;
  /* debug için istersen aç: background:#eef; */
}

/* 3) SLAYTLAR ÜST ÜSTE DURSUN, AKTİF OLAN GÖRÜNSÜN */
#nodesan-hero > .nodesan-slide{
  position: absolute;
  inset: 0;
  display: block;
  visibility: visible;
  opacity: 0;
  pointer-events: none;
}
#nodesan-hero > .nodesan-slide.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* 4) GÖRSEL KUTUYU DOLDURSUN */
#nodesan-hero > .nodesan-slide > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* 5) SOLDAN KAYMA ANİMASYONLARI (opsiyonel) */
@keyframes nodesanSlideInLeft  { from{transform:translateX(-100%);opacity:.9} to{transform:translateX(0);opacity:1} }
@keyframes nodesanSlideOutRight{ from{transform:translateX(0);opacity:1}     to{transform:translateX(100%);opacity:.9} }
#nodesan-hero > .nodesan-slide.slide-in-left   { animation: nodesanSlideInLeft .55s ease forwards; }
#nodesan-hero > .nodesan-slide.slide-out-right { animation: nodesanSlideOutRight .55s ease forwards; }

/* 6) KÜÇÜK GÖRSELLER (pırıltı aynı kalsın) */
.nodesan-thumb{
  border:0; background:none; padding:0; margin:0;
  position:relative; display:inline-block;
  border-radius:14px; overflow:hidden; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.nodesan-thumb img{ display:block; width:220px; height:auto; }
@media (max-width:900px){ .nodesan-thumb img{ width:180px; } }
.nodesan-thumb::after{
  content:""; position:absolute; top:0; left:-160%;
  width:60%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg); pointer-events:none;
}
.nodesan-thumb:hover::after{ animation:nodesanShine .8s ease; }
@keyframes nodesanShine{ 0%{left:-160%} 100%{left:160%} }

/* 7) Metin geçişi (varsa) */
.nodesan-hero-text{ transition: opacity .25s ease; }
.nodesan-hero-text.nodesan-fading{ opacity:.35; }

/* 8) Olası üstteki katmanları bastırmak için sağ blok z-index düşük kalsın */
.nodesan-right-wrapper{ position: relative; z-index: 2; }
/* SAĞ SÜTUNU SERT ŞEKİLDE SOLA ÇEK */
#nodesan-hero + .nodesan-right-wrapper{
  margin-left: -40px !important;         /* ana kaydırma */
  transform: translateX(-40px) !important;/* bazı temalar margin'i ezerse */
}

/* Başlık ve küçük görsellerin kendi iç sol boşluklarını da sıfırla */
#nodesan-hero + .nodesan-right-wrapper .nodesan-hero-text,
#nodesan-hero + .nodesan-right-wrapper .nodesan-bottom-slider{
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Grid aralığını da biraz daralt (soldaki görsel ile sağ blok arasındaki boşluk) */
.nodesan-hero-content{
  column-gap: 20px !important;           /* gerekiyorsa 16–28 arası deneyebilirsin */
}

/* Masaüstünde biraz daha sola almak istersen burayı açıp değeri büyüt */
@media (min-width: 1200px){
  #nodesan-hero + .nodesan-right-wrapper{
    margin-left: -56px !important;
    transform: translateX(-56px) !important;
  }
}

/* Mobilde dokunma – hizayı bozma */
@media (max-width: 900px){
  #nodesan-hero + .nodesan-right-wrapper{
    margin-left: 0 !important;
    transform: none !important;
  }
}
/* Başlık tek satır kalsın (masaüstü) */
#nodesan-title{
  white-space: nowrap;         /* satır kırma yok */
  display: inline-block;
  max-width: 100%;
  overflow: hidden;            /* taşarsa … ile kes */
  text-overflow: ellipsis;
  font-size: clamp(28px, 4.2vw, 56px); /* genişliğe göre ölçekle */
}

/* Mobilde okumayı bozmasın diye tekrar kırılmasına izin veriyoruz */
@media (max-width: 480px){
  #nodesan-title{
    white-space: normal;
    text-overflow: clip;
  }
}
#nodesan-title{
  white-space: nowrap;        /* tek satır */
  display: block;
  overflow: visible;          /* … yok */
}
/* Başlık boyutunu küçült */
#nodesan-title{
  font-size: clamp(26px, 3.2vw, 44px); /* önceki değerden daha küçük */
  line-height: 1.15;
  margin-bottom: 10px;
}

/* Alt açıklama yazısı biraz küçültsün */
#nodesan-desc{
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.6;
}

/* Mobilde daha da ufalt */
@media (max-width: 480px){
  #nodesan-title{ font-size: 24px; }
  #nodesan-desc { font-size: 14px; }
}
/* =========================================
   MOBİLDE HERO TAM EKRAN YAPSIN
   (tek ekleme ile sorun çözülür)
========================================= */
@media(max-width: 768px){

    /* Hero genişliği tam ekran */
    #nodesan-hero {
        width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border-radius: 0 !important;

        min-height: 380px !important;  /* istersen 420px yaparım */
        height: 60vh !important;       /* ekrana göre ölçeklenir */
    }

    /* Görsel tam doldursun */
    #nodesan-hero > .nodesan-slide > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Sağ blok (yazı + küçük slider) alta düşecek, taşma olmayacak */
    .nodesan-hero-content {
        grid-template-columns: 1fr !important;
    }

    /* Mobilde tüm hizalama sıfırlansın */
    #nodesan-hero + .nodesan-right-wrapper {
        margin-left: 0 !important;
        transform: none !important;
    }
}