img.fade-on-scroll{opacity:0;transform:translateY(24px);transition:opacity .8s ease-out,transform .8s ease-out;will-change:opacity,transform}
img.fade-on-scroll.is-visible{opacity:1;transform:translateY(0)}
body.index a:hover>img{animation:tilt-shake .6s ease-in-out infinite}
@keyframes tilt-shake{0%{transform:translate(0,0) rotate(0)}20%{transform:translate(-1px,.5px) rotate(-.35deg)}40%{transform:translate(1px,-.5px) rotate(.35deg)}60%{transform:translate(-1px,-.5px) rotate(-.35deg)}80%{transform:translate(1px,.5px) rotate(.35deg)}100%{transform:translate(0,0) rotate(0)}}
.hero-ekg-bottom{position:relative;width:min(1160px,92vw);aspect-ratio:1160/500;height:auto;margin:32px auto 20px;overflow:hidden;background:#fff;border-radius:18px;box-shadow:0 14px 32px rgba(0,0,0,.08)}
.hero-ekg-bottom .ekg-strip{position:absolute;left:0;right:0;top:20%;height:120px;transform:translateY(-50%);background-repeat:repeat-x;background-size:600px 120px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120'><path d='M0 60 L60 60 L80 60 L95 20 L110 95 L122 60 L170 60 L190 60 L205 35 L220 90 L235 60 L280 60 L300 60 L315 45 L330 75 L345 60 L390 60 L410 60 L425 25 L445 100 L458 60 L500 60 L520 60 L540 60 L560 60' stroke='black' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");animation:ekg-scroll 3.6s linear infinite}
@keyframes ekg-scroll{from{background-position:0 0}to{background-position:-600px 0}}
.hero-ekg-bottom .heart{position:absolute;left:50%;top:20%;width:clamp(80px,10vw,140px);height:clamp(80px,10vw,140px);transform:translate(-50%,-50%);filter:drop-shadow(0 6px 10px rgba(166,2,61,.25));animation:heart-beat 1.15s ease-in-out infinite}
@keyframes heart-beat{0%{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-50%) scale(1.18)}60%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1)}}
img{max-width:100%;height:auto}

/* === No-shadow override for EKG sections === */
.hero-ekg-bottom,
.hero-ekg {
  box-shadow: none !important;
}
.hero-ekg-bottom .heart,
.hero-ekg .heart {
  filter: none !important;
}

/* --- Logo shine (ritim + K üzerinde, saf CSS, maske yok) --- */
.logo-brand{ position:relative; display:inline-block; line-height:0; }
.logo-brand img{ display:block; max-width:100%; height:auto; }

/* Yalnız üst bölüm: yazıları hariç tutmak için clip-path ile alt kısmı kesiyoruz.
   Değer (46%) yazı hizasına göre 42–50 arasında ayarlanabilir. */
.logo-brand .logo-shine,
.logo-brand .logo-spark{
  position:absolute; inset:0; pointer-events:none;
  clip-path: inset(0 0 46% 0); /* alt %46 kes – sadece ritim+K */
  z-index:2;
}

/* Soldan sağa geçen ışıltı (10 sn’de bir) */
.logo-brand .logo-shine{
  /* Tek bir dikey parlama bandı */
  background: linear-gradient(90deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,.95) 50%,
              rgba(255,255,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 18% 100%;      /* band genişliği = %18 */
  background-position: -20% 0;    /* soldan başla */
  mix-blend-mode: screen;         /* kırmızıyı aydınlatsın */
  filter: blur(.6px);
  opacity: 0;
  animation: shine-move 10s infinite linear;
  will-change: background-position, opacity;
}

/* Bitiş noktasında kısa “parlama” */
.logo-brand .logo-spark{
  background: radial-gradient(circle at 92% 22%,
              rgba(255,255,255,.98) 0%,
              rgba(255,255,255,.6) 22%,
              rgba(255,255,255,0) 42%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(.9);
  animation: spark-pop 10s infinite ease-out;
  will-change: transform, opacity;
}

/* Hareket: ilk ~%12’de olur, sonra bekler */
@keyframes shine-move{
  0%   { background-position: -20% 0; opacity: 0; }
  3%   { opacity: 1; }
  12%  { background-position: 120% 0; opacity: 0; }
  100% { background-position: 120% 0; opacity: 0; }
}

@keyframes spark-pop{
  0%,10%  { opacity: 0; transform: scale(.9); }
  12%     { opacity: 1; transform: scale(1); }
  16%     { opacity: 0; transform: scale(.9); }
  100%    { opacity: 0; transform: scale(.9); }
}

/* İstersen erişilebilirlikte kapatma satırını kaldırdım; 
   hareketi azalt açıkken de görünür. Dilersen geri ekleyebilirsin. */

/* === Global background + beyaz merkez ve 300px fade === */
:root{
  /* İçerik genişliği ve yarısı */
  --content-w: 1160px;
  --content-half: 600px;   /* 1160 / 2 */
  --fade-w: 600px;
}

/* Tüm sayfalarda site arka planı */
html, body { height: 100%; }
body {
  /* sayfa genel zemin: root'taki görsel */
  background-image: url("site-background.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* önceki beyazları bastır */
  background-color: transparent !important;

  /* pseudo elementlerin içerik altında kalabilmesi için */
  position: relative;
  isolation: isolate;
}

/* Merkez beyaz şerit + sağ/sol 300px yumuşak geçiş (her zaman görünür) */
body::before{
  content: "";
  position: fixed;
  inset: 0;               /* tüm ekranı kapla */
  z-index: 0;             /* arka planda kalsın, içerik üstte */
  pointer-events: none;

  /* Ortası beyaz (1160px), kenarlarda 300px beyazdan şeffafa geçiş */
  background:
    linear-gradient(
      to right,
      transparent 0,
      transparent calc(50% - var(--content-half) - var(--fade-w)),
      rgba(255,255,255,0) calc(50% - var(--content-half) - var(--fade-w)),
      #ffffff               calc(50% - var(--content-half)),
      #ffffff               calc(50% + var(--content-half)),
      rgba(255,255,255,0)   calc(50% + var(--content-half) + var(--fade-w)),
      transparent 100%
    );
}

/* İçerik, beyaz şeridin üstünde kalır */
body > * { position: relative; z-index: 1; }

/* Daha dar ekranlarda (ör. <1280px) zemini tamamen beyaz yapıyoruz */
@media (max-width: 1280px){
  body::before { background: #fff; }
  /* Mobilde sabit arka plan yerine normal kaydırma tercih edilebilir */
  body { background-attachment: scroll; }
}