/* Hero Monitor Mockup + İçeride ürün görselleri için marquee */
/* Net, basit ve performanslı tasarım */

.hero-image { display: flex; justify-content: center; align-items: center; }

/* Mac benzeri monitor gövdesi */
.monitor-mockup { --screen-w: 520px; --screen-h: 320px; --bezel: 18px; --radius: 16px; --metal:#e9eef3; --frame:#0e0f11; position: relative; }

.monitor-body {
  width: calc(var(--screen-w) + var(--bezel) * 2);
  height: calc(var(--screen-h) + var(--bezel) * 2);
  background: var(--frame);
  border-radius: calc(var(--radius) + var(--bezel));
  box-shadow: 0 20px 50px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
}

.monitor-camera { width: 8px; height: 8px; border-radius: 50%; background: #444; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 0 2px #1b1b1b; }

.monitor-screen {
  position: absolute; inset: var(--bezel); border-radius: var(--radius); overflow: hidden; background: #111; 
}

/* İçeride gölgeli cam hissi */
.monitor-screen { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 20px 40px rgba(255,255,255,0.03); }

/* Stand */
.monitor-stand { display:flex; flex-direction:column; align-items:center; gap:8px; }
.stand-neck { width: 90px; height: 24px; background: var(--frame); border-radius: 0 0 14px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.05); margin: 10px auto 0; }
.stand-foot { width: 220px; height: 10px; background: var(--frame); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.05); }

/* İçeride ürün görselleri taşıyıcıları */
.screen-marquee-container { position:relative; width:100%; height:100%; overflow:hidden; }
.screen-marquee-track { position:relative; z-index:1; display:flex; align-items:center; gap: 1.25rem; width:max-content; height:100%; will-change: transform; animation: screen-marquee-left 36s linear infinite; padding: 0 8px; }

/* Ürün kartları - gerçek görsel geldiğinde img ile değiştirilebilir */
.product-card { flex:0 0 180px; height: 70%; display:flex; align-items:center; justify-content:center; border-radius:12px; overflow:hidden; background:#1a1a1a; border:1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 20px rgba(0,0,0,0.25); }
.img-placeholder { width:100%; height:100%; background: linear-gradient(135deg, #2a2a2a, #3a3a3a); position:relative; }

/* Placeholder’lara farklı tonlar vererek çeşitlilik sağla */
.img-placeholder[data-variant="1"]{ background: linear-gradient(135deg, #2a2a2a, #3a3a3a); }
.img-placeholder[data-variant="2"]{ background: linear-gradient(135deg, #233, #345); }
.img-placeholder[data-variant="3"]{ background: linear-gradient(135deg, #302934, #493b57); }
.img-placeholder[data-variant="4"]{ background: linear-gradient(135deg, #12362e, #1f5a4d); }
.img-placeholder[data-variant="5"]{ background: linear-gradient(135deg, #3a2a2a, #513939); }
.img-placeholder[data-variant="6"]{ background: linear-gradient(135deg, #1f2a3a, #2f4158); }

@keyframes screen-marquee-left { 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }

/* Responsive ince ayarlar */
@media (max-width: 1024px){ .monitor-mockup{ --screen-w: 480px; --screen-h: 300px; } .product-card{ flex-basis:160px; } }
@media (max-width: 768px){ .monitor-mockup{ --screen-w: 420px; --screen-h: 260px; } .product-card{ flex-basis:140px; } }
@media (max-width: 480px){ .monitor-mockup{ --screen-w: 320px; --screen-h: 210px; } .product-card{ flex-basis:120px; } .screen-marquee-track{ animation-duration: 40s; } }

/* --- Sağdan Sola Kayma Döngü Slideshow --- */
.screen-slideshow { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  overflow: hidden;
  border-radius: 8px;
}

.screen-slideshow .slide { 
  position: absolute; 
  inset: 0; 
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

.screen-slideshow .slide.is-active { 
  transform: translateX(0);
  z-index: 2;
}

.screen-slideshow .slide.is-exiting { 
  transform: translateX(-100%);
  z-index: 1;
}

/* Slayt içerikleri tam ekran dolsun */
.screen-slideshow .slide > .img-placeholder, 
.screen-slideshow .slide > img { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  cursor: pointer;
  transition: transform 0.3s ease-out;
  filter: brightness(1) contrast(1.05) saturate(1.1);
}

/* Sürekli döngü animasyonu için CSS değişkenleri */
:root { 
  --slide-count: 3; 
  --slide-duration: 3s; 
  --slide-total: calc(var(--slide-count) * var(--slide-duration)); 
}

/* Otomatik sürekli döngü animasyonu */
.screen-slideshow.auto-play .slide { 
  animation: slideCarousel var(--slide-total) linear infinite;
}

/* İlk slayt hemen görünür olsun */
.screen-slideshow.auto-play .slide:nth-child(1) { 
  animation-delay: 0s;
  transform: translateX(0);
  z-index: 2;
}
.screen-slideshow.auto-play .slide:nth-child(2) { animation-delay: calc(var(--slide-duration) * 1); }
.screen-slideshow.auto-play .slide:nth-child(3) { animation-delay: calc(var(--slide-duration) * 2); }

@keyframes slideCarousel {
  0% { 
    transform: translateX(100%);
    z-index: 1;
  }
  5% { 
    transform: translateX(0);
    z-index: 2;
  }
  33.33% { 
    transform: translateX(0);
    z-index: 2;
  }
  38.33% { 
    transform: translateX(-100%);
    z-index: 1;
  }
  100% { 
    transform: translateX(-100%);
    z-index: 1;
  }
}


/* Responsive iyileştirmeler */
@media (max-width: 768px) {
  .screen-slideshow .slide {
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  :root {
    --slide-duration: 3.5s;
  }
}