/* ==========================================================================
   Vitrin Slider (modulId 43 / skTur 21)
   Görsel dosyası olmadan da dolu görünen anasayfa slaytı.
   Tüm hareket CSS animasyonu — JS bağımlılığı yok, JS kapalıyken de döner.
   Renk şeması slider ayarından gelir: .wt-vs--<renk>
   ========================================================================== */

.wt-vs{position:relative;overflow:hidden;display:flex;align-items:center;color:#fff;width:100%}
.wt-vs *{box-sizing:border-box}

/* --- Zemin katmanı --- */
.wt-vs-bg{position:absolute;inset:0;z-index:0}
.wt-vs-slide{position:absolute;inset:0;opacity:0;will-change:opacity}
.wt-vs-slide-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;
    animation:wtVsKen var(--wt-vs-tur,24s) ease-in-out infinite alternate}

/* Renk şemaları — her slayt kendi tonunu alsın diye 3 kademe */
.wt-vs--lacivert .wt-vs-s1 .wt-vs-slide-bg{background:linear-gradient(125deg,#12263f 0%,#1f3a5f 45%,#2d5580 100%)}
.wt-vs--lacivert .wt-vs-s2 .wt-vs-slide-bg{background:linear-gradient(125deg,#1a3050 0%,#26496f 50%,#3b6c9c 100%)}
.wt-vs--lacivert .wt-vs-s3 .wt-vs-slide-bg{background:linear-gradient(125deg,#14313f 0%,#1c5c63 55%,#2d5580 100%)}

.wt-vs--turuncu .wt-vs-s1 .wt-vs-slide-bg{background:linear-gradient(125deg,#12263f 0%,#7d3417 60%,#e8580c 100%)}
.wt-vs--turuncu .wt-vs-s2 .wt-vs-slide-bg{background:linear-gradient(125deg,#1f3a5f 0%,#b8471f 60%,#f0761f 100%)}
.wt-vs--turuncu .wt-vs-s3 .wt-vs-slide-bg{background:linear-gradient(125deg,#2a1a10 0%,#8c3d13 55%,#e8580c 100%)}

.wt-vs--yesil .wt-vs-s1 .wt-vs-slide-bg{background:linear-gradient(125deg,#0e2b2b 0%,#14514f 50%,#1f7a63 100%)}
.wt-vs--yesil .wt-vs-s2 .wt-vs-slide-bg{background:linear-gradient(125deg,#123a34 0%,#1a6659 55%,#33936d 100%)}
.wt-vs--yesil .wt-vs-s3 .wt-vs-slide-bg{background:linear-gradient(125deg,#0d3340 0%,#155f63 55%,#268a72 100%)}

.wt-vs--mor .wt-vs-s1 .wt-vs-slide-bg{background:linear-gradient(125deg,#241436 0%,#4a2170 50%,#7b2e9e 100%)}
.wt-vs--mor .wt-vs-s2 .wt-vs-slide-bg{background:linear-gradient(125deg,#2d1740 0%,#5f2585 55%,#a5379b 100%)}
.wt-vs--mor .wt-vs-s3 .wt-vs-slide-bg{background:linear-gradient(125deg,#1d1030 0%,#432066 55%,#8c2f8c 100%)}

.wt-vs--gri .wt-vs-s1 .wt-vs-slide-bg{background:linear-gradient(125deg,#1b1e22 0%,#2e343b 50%,#4a535e 100%)}
.wt-vs--gri .wt-vs-s2 .wt-vs-slide-bg{background:linear-gradient(125deg,#22262b 0%,#3a424b 55%,#5b6672 100%)}
.wt-vs--gri .wt-vs-s3 .wt-vs-slide-bg{background:linear-gradient(125deg,#181b1f 0%,#282e35 55%,#414a55 100%)}

/* Slaytın kendi görseli varsa zeminde de kullanılır (bulanık, düşük opaklık) */
.wt-vs-slide-foto{position:absolute;inset:-6%;background-size:cover;background-position:center;
    opacity:.30;filter:blur(2px);animation:wtVsKen var(--wt-vs-tur,24s) ease-in-out infinite alternate}

/* Süzülen ışık lekeleri + rulo izleri */
.wt-vs-blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.40;pointer-events:none}
.wt-vs-b1{width:520px;height:520px;top:-140px;left:-100px;background:#e8580c;animation:wtVsFloat1 17s ease-in-out infinite alternate}
.wt-vs-b2{width:440px;height:440px;bottom:-160px;right:8%;background:#5aa9e6;animation:wtVsFloat2 21s ease-in-out infinite alternate}
.wt-vs-b3{width:300px;height:300px;top:22%;right:32%;background:#ffd166;opacity:.24;animation:wtVsFloat1 26s ease-in-out infinite alternate-reverse}
.wt-vs-streak{position:absolute;inset:0;opacity:.15;pointer-events:none;
    background:repeating-linear-gradient(118deg,rgba(255,255,255,.85) 0 2px,transparent 2px 46px);
    animation:wtVsStreak 15s linear infinite}

/* --- İçerik katmanı --- */
.wt-vs-inner{position:relative;z-index:2;width:100%;padding:74px 0}
.wt-vs-inner .container{position:relative}
/* Slaytlar aynı grid hücresinde üst üste durur: kapsayıcı EN UZUN slayta göre
   yükseklik alır. position:absolute kullanılsaydı kapsayıcı sıfır yükseklikte
   kalır ve uzun slayt (ör. 3 butonlu) hero'nun dışına taşardı. */
.wt-vs-txtwrap{position:relative;display:grid}
.wt-vs-txt{grid-area:1/1;opacity:0;min-width:0}
.wt-vs-eyebrow{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
    padding:6px 14px;border-radius:100px;font-size:13px;font-weight:600;letter-spacing:.4px;margin-bottom:18px}
.wt-vs h1,.wt-vs h2.wt-vs-baslik{color:#fff;font-size:42px;line-height:1.16;margin:0 0 16px;font-weight:800;
    text-shadow:0 2px 18px rgba(0,0,0,.25)}
.wt-vs-sub{font-size:18px;line-height:1.55;color:rgba(255,255,255,.94);max-width:620px;margin:0}
.wt-vs-cta{margin-top:30px;position:relative;z-index:3}
.wt-vs-btn{display:inline-flex;align-items:center;gap:9px;vertical-align:top;background:#fff;color:#12263f;font-weight:700;padding:14px 28px;border-radius:5px;
    text-decoration:none;margin:0 10px 10px 0;box-shadow:0 8px 22px rgba(0,0,0,.18);transition:transform .18s ease}
.wt-vs-btn:hover,.wt-vs-btn:focus{transform:translateY(-2px);color:#12263f;text-decoration:none}
.wt-vs-btn-o{display:inline-flex;align-items:center;gap:9px;vertical-align:top;border:2px solid rgba(255,255,255,.7);color:#fff;font-weight:700;padding:12px 26px;
    border-radius:5px;text-decoration:none;margin:0 10px 10px 0;transition:background .18s ease}
.wt-vs-btn-o:hover,.wt-vs-btn-o:focus{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.wt-vs-btn-ic{display:inline-flex;align-items:center;flex:0 0 auto}
.wt-vs-btn-ic svg{width:18px;height:18px;display:block}

/* Ortalı varyant */
.wt-vs--orta .wt-vs-txt,.wt-vs--orta .wt-vs-cta{text-align:center}
.wt-vs--orta .wt-vs-sub{margin-left:auto;margin-right:auto}

/* --- Sağdaki dairesel görsel --- */
.wt-vs-visual{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:380px;height:380px;z-index:2;pointer-events:none}
.wt-vs-circ{position:absolute;inset:0;opacity:0;display:flex;align-items:center;justify-content:center}
.wt-vs-circ:before{content:"";position:absolute;inset:0;border-radius:50%;
    border:2px dashed rgba(255,255,255,.32);animation:wtVsSpin 46s linear infinite}
.wt-vs-disc{position:relative;width:300px;height:300px;border-radius:50%;overflow:hidden;
    display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;
    box-shadow:0 26px 60px rgba(0,0,0,.36),inset 0 0 0 3px rgba(255,255,255,.4);
    animation:wtVsBreath 9s ease-in-out infinite}
/* Görsel yoksa camsı yüzey + rulo dokusu */
.wt-vs-disc--bos{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.30),rgba(255,255,255,.08) 58%,rgba(255,255,255,.03))}
.wt-vs-disc--bos:after{content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(122deg,rgba(255,255,255,.12) 0 2px,transparent 2px 26px)}
.wt-vs-disc svg{position:relative;width:132px;height:132px;color:#fff;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}

/* --- İlerleme noktaları --- */
.wt-vs-dots{position:absolute;bottom:26px;left:0;right:0;text-align:center;z-index:3}
.wt-vs-dot{display:inline-block;width:30px;height:4px;border-radius:3px;background:rgba(255,255,255,.35);margin:0 4px;overflow:hidden}
.wt-vs-dot i{display:block;height:100%;width:0;background:#fff;border-radius:3px}

/* --- Animasyonlar --- */
@keyframes wtVsKen{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.15) translate3d(-2.5%,-1.5%,0)}}
@keyframes wtVsFloat1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(70px,50px) scale(1.16)}}
@keyframes wtVsFloat2{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-80px,-40px) scale(1)}}
@keyframes wtVsStreak{0%{background-position:0 0}100%{background-position:340px 0}}
@keyframes wtVsSpin{to{transform:rotate(360deg)}}
@keyframes wtVsBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* Tek slaytta geçiş animasyonu yok — sabit dursun */
.wt-vs--tek .wt-vs-slide,.wt-vs--tek .wt-vs-txt,.wt-vs--tek .wt-vs-circ{opacity:1;animation:none}
.wt-vs--tek .wt-vs-dots{display:none}

/* --- Duyarlılık --- */
@media(min-width:992px){
    .wt-vs--daire .wt-vs-txtwrap,.wt-vs--daire .wt-vs-cta{max-width:62%}
}
@media(max-width:1199px){
    .wt-vs-visual{width:320px;height:320px}
    .wt-vs-disc{width:252px;height:252px}
    .wt-vs-disc svg{width:110px;height:110px}
}
@media(max-width:991px){
    .wt-vs-visual{display:none}
    .wt-vs h1,.wt-vs h2.wt-vs-baslik{font-size:32px}
    .wt-vs-sub{font-size:16px}
}
@media(max-width:600px){
    .wt-vs h1,.wt-vs h2.wt-vs-baslik{font-size:26px}
    .wt-vs-inner{padding:56px 0}
    .wt-vs-btn,.wt-vs-btn-o{display:flex;justify-content:center;text-align:center;margin-right:0}
}

@media(prefers-reduced-motion:reduce){
    .wt-vs-slide,.wt-vs-txt,.wt-vs-circ,.wt-vs-slide-bg,.wt-vs-slide-foto,
    .wt-vs-blob,.wt-vs-streak,.wt-vs-dot i,.wt-vs-disc,.wt-vs-circ:before{animation:none!important}
    .wt-vs-s1,.wt-vs-t1,.wt-vs-c1{opacity:1}
}