/* Ana sayfa: yeni filmlerin HD karelerinden 21 eğik şerit ve slogan.
   Şerit görselleri images/hero-sekans-2/01.jpg … 21.jpg (yüze ortalanmış dikey kesitler). */

.hero-photo{
  position:relative;
  width:100%;
  flex:0 0 auto;
  height:calc(100vh - var(--bar-h));
  min-height:440px;
  overflow:hidden;
  background:#ffffff;
}

/* Dış katman eğilir (şeritler çapraz kesilir), iç katman ters eğilerek görüntü dik kalır */
.seq{
  position:absolute;
  top:0; bottom:0;
  left:-12%; right:-12%;
  z-index:0;
  display:flex;
  gap:3px;
  transform:skewX(-9deg);
}

.seq-strip{
  position:relative;
  flex:1 1 0;
  overflow:hidden;
  opacity:0;
  animation:seqIn .85s cubic-bezier(.16,.8,.24,1) forwards;
  animation-delay:calc(var(--i) * 45ms);
}

.seq-strip span{
  position:absolute;
  top:-1%; bottom:-1%;
  left:-80%; right:-80%;
  display:block;
  transform:skewX(9deg);
  background-size:cover;
  background-position:center 35%;
}

@keyframes seqIn{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}

.hero-photo-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 44% 32% at 50% 52%, rgba(12,10,8,.55) 0%, rgba(12,10,8,.24) 55%, rgba(12,10,8,0) 100%),
    linear-gradient(180deg, rgba(12,10,8,0) 60%, rgba(12,10,8,.25) 100%);
}

.hero-photo-text{
  position:absolute;
  left:0; right:0;
  top:50%;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:0 24px;
  transform:translateY(-50%);
  text-align:center;
}

.hero-photo-title{
  margin:0;
  max-width:13ch;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px, 5.4vw, 72px);
  line-height:1.05;
  letter-spacing:-0.5px;
  text-wrap:balance;
  color:#fbf6ec;
  text-shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 40px rgba(0,0,0,.45);
}

.hero-photo-alt{
  margin:0;
  max-width:60ch;
  font-size:clamp(14px, 1.3vw, 17px);
  line-height:1.5;
  color:rgba(251,246,236,.92);
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}

/* Genişliğe göre gösterilen şerit sayısı */
@media (max-width:1200px){ .seq-strip:nth-child(n+16){ display:none; } }
@media (max-width:900px){ .seq-strip:nth-child(n+12){ display:none; } }

@media (max-width:620px){
  .seq-strip:nth-child(n+8){ display:none; }
  .seq{ left:-18%; right:-18%; }
  .hero-photo{ min-height:360px; }
  .hero-photo-title{ max-width:9ch; font-size:42px; }
  .hero-photo-alt{ max-width:28ch; font-size:14px; }
}

@media (prefers-reduced-motion:reduce){
  .seq-strip{ opacity:1 !important; }
}