/* Hero slider ve slayt geçişleri. Hem site hem yönetim paneli (efekt önizleme) kullanır. */
.hero{position:relative;height:clamp(420px,52vw,700px);background:var(--ink, #0e1f3d);overflow:hidden}
/* Slayt geçişleri. Efekt/hız panelden gelir: .hero[data-effect][data-speed] */
.hero{--dur:.9s}
.hero[data-speed="fast"]{--dur:.6s}
.hero[data-speed="slow"]{--dur:1.4s}
.hero[data-effect="flip"],
.hero[data-effect="tilt"]{perspective:1600px}

.slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;backface-visibility:hidden;
  transition:opacity var(--dur) ease,transform var(--dur) cubic-bezier(.4,0,.2,1),
             filter var(--dur) ease,clip-path var(--dur) ease,visibility 0s linear var(--dur)}
.slide.on{opacity:1;visibility:visible;transform:none;filter:none;clip-path:inset(0 0 0 0);
  transition:opacity var(--dur) ease,transform var(--dur) cubic-bezier(.4,0,.2,1),
             filter var(--dur) ease,clip-path var(--dur) ease,visibility 0s}
.slide.exit-left,.slide.exit-right{visibility:visible;z-index:1}
/* Giren slayt her zaman üstte olmalı. z-index verilmezse üstte kalan DOM sırasına göre
   belirlenir; son slayttan ilkine dönerken giren slayt altta kalır ve geçiş "geri sarıyor"
   gibi görünür. */
.slide.on{z-index:2}
.slide img,.slide video{width:100%;height:100%;object-fit:cover;display:block}
/* Video slaytında Ken Burns yok: zaten hareketli görüntü. */
.slide.is-video video{animation:none!important;transform:none!important}
/* Oynatılana kadar (yavaş bağlantı, veri tasarrufu) video kendi poster karesini gösterir;
   ayrı bir <img> katmanına gerek yok. */

/* Dar ekranda kare kırpma görüntünün büyük kısmını kesiyordu: video ekrana sığdırılır,
   boşta kalan alan marka lacivertiyle dolar. */
@media (max-width:768px){
  .slide.is-video{background:var(--ink,#0e1f3d)}
  .slide.is-video video{object-fit:contain}
}

/* --- slayt yazısı --- */
/* Perde fotoğrafın tamamına değil, YALNIZ yazının arkasına uygulanır.
   figcaption sadece hizalama kutusudur (.wrap ile 1200px'e sınırlı), arka planı yoktur —
   aksi hâlde gradyan bu kutunun kenarlarında dikdörtgen olarak görünürdü. */
.slide figcaption{position:absolute;inset:0;z-index:1;background:none;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.slide-copy{max-width:min(100%,44rem);align-self:flex-start;
  padding:1.5rem 1.75rem 1.6rem;border-radius:4px;
  background:rgba(14,31,61,.68);backdrop-filter:blur(4px);
  box-shadow:0 12px 40px rgba(5,12,26,.28)}
.slide-title{font-family:var(--font-display,'Manrope',sans-serif);color:#fff;margin:0;
  font-weight:700;line-height:1.08;letter-spacing:.005em;
  font-size:clamp(2rem,4vw,3.1rem)}
.slide-copy p{margin:.55rem 0 0;color:#d8e0e9;font-size:1rem;line-height:1.55}
.slide-copy .btn{margin-top:1rem}

@media (max-width:860px){
  .slide-copy{padding:1.15rem 1.25rem 1.25rem}
  /* Mobilde clamp'in alt sınırı (2rem) hâlâ iri kalıyordu; küçük ekranda ölçek düşürülür. */
  .slide-title{font-size:clamp(1.45rem,5.2vw,2.05rem);line-height:1.14}
  .slide-copy p{font-size:.9rem;line-height:1.5}
}
@media (max-width:480px){
  .slide-title{font-size:1.35rem}
  .slide-copy p{font-size:.85rem}
}

/* Yazı paneli fotoğraftan 2 sn sonra girer.
   animation + fill:both kullanılmıyor: animasyon çalışmazsa (kısıtlı sekme, azaltılmış
   hareket tercihi) panel kalıcı görünmez kalırdı. transition ile .on eklendiği anda
   opacity:1 zaten geçerlidir; gecikme yalnız görsel süstür, içerik kaybolmaz.
   Süreyi değiştirmek için aşağıdaki iki 2s. */
.slide .slide-copy{opacity:0;transform:translateY(18px)}
.slide.on .slide-copy{opacity:1;transform:none;
  transition:opacity .7s ease 2s,transform .7s cubic-bezier(.22,.8,.28,1) 2s}
/* çıkan slaytın yazısı beklemeden kaybolur */
.slide.exit-left .slide-copy,.slide.exit-right .slide-copy{opacity:0;transition:opacity .25s ease}

/* Ken Burns: transition değil animation — ilk slaytta da çalışır, her geçişte baştan başlar.
   Gecikme = geçiş süresi (--dur): geçiş sürerken görsel sabit durur, yakınlaşma ancak slayt
   yerine oturunca başlar. Aksi hâlde ebeveynin (slaytın) dönüşümüyle çocuğunki (görselin)
   çarpışıyor ve zoom/döndürme/çevirme efektleri bulanıklaşıyordu.
   'both' dolgusu bekleme boyunca başlangıç ölçeğini tutar; animasyon hiç çalışmazsa görsel
   yalnızca hafif yakınlaşmış görünür, kaybolmaz. */
.hero[data-kenburns="on"] .slide.on img{
  animation:kenburns 8s ease-out var(--dur,.9s) both}
@keyframes kenburns{from{transform:scale(1.15)}to{transform:scale(1)}}

/* --- efektler: from-* giren slaytın başlangıcı, exit-* çıkanın hedefi --- */
[data-effect="slide"] .slide{opacity:1}
[data-effect="slide"] .from-right{transform:translateX(100%)}
[data-effect="slide"] .from-left{transform:translateX(-100%)}
[data-effect="slide"] .exit-left{transform:translateX(-100%)}
[data-effect="slide"] .exit-right{transform:translateX(100%)}

[data-effect="slide-up"] .slide{opacity:1}
[data-effect="slide-up"] .from-right{transform:translateY(100%)}
[data-effect="slide-up"] .from-left{transform:translateY(-100%)}
[data-effect="slide-up"] .exit-left{transform:translateY(-100%)}
[data-effect="slide-up"] .exit-right{transform:translateY(100%)}

/* itme: çıkan yarı hızda gider, derinlik hissi verir */
[data-effect="push"] .slide{opacity:1}
[data-effect="push"] .from-right{transform:translateX(100%)}
[data-effect="push"] .from-left{transform:translateX(-100%)}
[data-effect="push"] .exit-left{transform:translateX(-35%) scale(.94)}
[data-effect="push"] .exit-right{transform:translateX(35%) scale(.94)}

[data-effect="zoom-in"] .from-right,[data-effect="zoom-in"] .from-left{transform:scale(1.3)}
[data-effect="zoom-in"] .exit-left,[data-effect="zoom-in"] .exit-right{transform:scale(.85);opacity:0}

[data-effect="zoom-out"] .from-right,[data-effect="zoom-out"] .from-left{transform:scale(.72)}
[data-effect="zoom-out"] .exit-left,[data-effect="zoom-out"] .exit-right{transform:scale(1.3);opacity:0}

[data-effect="blur"] .from-right,[data-effect="blur"] .from-left{filter:blur(20px);transform:scale(1.06)}
[data-effect="blur"] .exit-left,[data-effect="blur"] .exit-right{filter:blur(20px);opacity:0}

[data-effect="flip"] .slide{opacity:1;transform-origin:center}
[data-effect="flip"] .from-right{transform:rotateY(85deg);opacity:0}
[data-effect="flip"] .from-left{transform:rotateY(-85deg);opacity:0}
[data-effect="flip"] .exit-left{transform:rotateY(-85deg);opacity:0}
[data-effect="flip"] .exit-right{transform:rotateY(85deg);opacity:0}

[data-effect="curtain"] .slide{opacity:1}
[data-effect="curtain"] .from-right{clip-path:inset(0 0 0 100%)}
[data-effect="curtain"] .from-left{clip-path:inset(0 100% 0 0)}
[data-effect="curtain"] .exit-left{clip-path:inset(0 100% 0 0)}
[data-effect="curtain"] .exit-right{clip-path:inset(0 0 0 100%)}

[data-effect="fade-scale"] .from-right,[data-effect="fade-scale"] .from-left{transform:scale(1.07)}
[data-effect="fade-scale"] .exit-left,[data-effect="fade-scale"] .exit-right{transform:scale(.95);opacity:0}

[data-effect="split"] .slide{opacity:1}
[data-effect="split"] .from-right,[data-effect="split"] .from-left{clip-path:inset(0 50% 0 50%)}
[data-effect="split"] .exit-left,[data-effect="split"] .exit-right{clip-path:inset(0 50% 0 50%)}

[data-effect="circle"] .slide{opacity:1}
[data-effect="circle"] .slide.on{clip-path:circle(80% at 50% 50%)}
[data-effect="circle"] .from-right,[data-effect="circle"] .from-left{clip-path:circle(0% at 50% 50%)}
[data-effect="circle"] .exit-left,[data-effect="circle"] .exit-right{clip-path:circle(0% at 50% 50%)}

/* yeni slayt eskisinin üstüne biner, eski yerinde kalır */
[data-effect="stack"] .slide{opacity:1}
[data-effect="stack"] .slide.on{box-shadow:-18px 0 40px rgba(0,0,0,.35)}
[data-effect="stack"] .from-right{transform:translateX(100%)}
[data-effect="stack"] .from-left{transform:translateX(-100%)}
[data-effect="stack"] .exit-left,[data-effect="stack"] .exit-right{transform:none}

[data-effect="tilt"] .from-right{transform:rotateX(-40deg) translateY(28%);opacity:0}
[data-effect="tilt"] .from-left{transform:rotateX(40deg) translateY(-28%);opacity:0}
[data-effect="tilt"] .exit-left{transform:rotateX(40deg) translateY(-28%);opacity:0}
[data-effect="tilt"] .exit-right{transform:rotateX(-40deg) translateY(28%);opacity:0}

[data-effect="zoom-blur"] .from-right,[data-effect="zoom-blur"] .from-left{transform:scale(1.4);filter:blur(16px)}
[data-effect="zoom-blur"] .exit-left,[data-effect="zoom-blur"] .exit-right{transform:scale(.88);filter:blur(16px);opacity:0}

[data-effect="rotate"] .from-right{transform:rotate(7deg) scale(1.18)}
[data-effect="rotate"] .from-left{transform:rotate(-7deg) scale(1.18)}
[data-effect="rotate"] .exit-left{transform:rotate(-7deg) scale(1.18);opacity:0}
[data-effect="rotate"] .exit-right{transform:rotate(7deg) scale(1.18);opacity:0}

.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;font-size:2rem;line-height:1;
  color:#fff;background:rgba(0,0,0,.3);border:0;cursor:pointer;transition:background .2s}
.nav-arrow:hover{background:var(--accent, #1b4b8f)}
.prev{left:0}.next{right:0}
.dots{position:absolute;bottom:1.2rem;left:0;right:0;display:flex;justify-content:center;gap:.5rem;z-index:3}
.dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer}
.dots button.on{background:var(--accent, #1b4b8f);width:26px;border-radius:5px}