/* ---------- Global: Smooth fade-in on scroll for all images ---------- */
img.fade-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
  will-change: opacity, transform;
}
img.fade-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Index-only: Light shake on hover for linked button images ---------- */
body.index a:hover > img {
  animation: tilt-shake 0.6s ease-in-out infinite;
}
@keyframes tilt-shake {
  0%   { transform: translate(0,0) rotate(0deg); }
  20%  { transform: translate(-1px, 0.5px) rotate(-0.35deg); }
  40%  { transform: translate(1px, -0.5px) rotate(0.35deg); }
  60%  { transform: translate(-1px, -0.5px) rotate(-0.35deg); }
  80%  { transform: translate(1px, 0.5px) rotate(0.35deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* ---------- Heart + EKG hero (1160x500) ---------- */
.hero-ekg {
  position: relative;
  width: 1160px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

/* Animated EKG strip behind the heart */
.hero-ekg .ekg-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
  height: 120px;
  transform: translateY(-50%);
  background-repeat: repeat-x;
  background-size: 600px 120px;
  /* SVG path draws a stylized EKG beat; repeated horizontally */
  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.5s linear infinite;
}

@keyframes ekg-scroll {
  from { background-position: 0 0; }
  to   { background-position: -600px 0; }
}

/* --- Patient slider crossfade (yalnızca slider'ı etkiler) --- */
.patient-slider {
  position: relative;
  display: inline-block;
}
.patient-slider img {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
  pointer-events: none;
}
.patient-slider img.active {
  position: relative; /* aktif olan akışta kalsın ki yükseklik korunsun */
  opacity: 1;
  pointer-events: auto;
}

/* Pulsing heart in the center */
.hero-ekg .heart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(166,2,61,0.25));
  animation: heart-beat 1.1s 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.0); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Make table-based layouts look smoother on smaller screens */
@media (max-width: 1220px) {
  .hero-ekg {
    width: 100%;
  }
}

/* --- 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; }
}