/* Base Container & Viewport Breakout */ #wSliderContainer-1 { position: relative; width: 100% !important; max-width: 100% !important; left: 0 !important; overflow: hidden; background: #090d16; min-height: 95vh; box-sizing: border-box !important; } #wSlider-1, #wSliderUltimate-1 { position: relative; width: 100% !important; max-width: 100% !important; left: 0 !important; overflow: hidden; background: transparent !important; opacity: 1; z-index: 5; } /* Heights & Responsive Scale */ #wSlider-1 .holder, #wSliderUltimate-1 .holder { position: relative; z-index: 5; width: 100%; min-height: 95vh !important; height: auto; background-size: cover; background-position: center center; background-repeat: no-repeat; display: flex !important; align-items: center; box-sizing: border-box; } /* ================================================================== İŞ 1 — SLAYT ARKA PLAN KATMANI ------------------------------------------------------------------ `.holder`'ın kendi background'unun yerini aldı. Ayrı bir element olduğu için tek başına ölçeklenebilir/kaydırılabilir — Ken Burns (İŞ 2) ve geçiş efektleri (İŞ 6) bunun üzerine kurulacak. z-index 1: video (2), şekilli kenar (3), hareketli arka plan (3) ve içerik (.inner = 6) bunun ÜSTÜNDE kalır — eski sıralama korundu. `overflow:hidden` .holder'da zaten var; ölçeklenen arka plan taşmayacak. ================================================================== */ #wSlider-1 .ss-slide-bg, #wSliderUltimate-1 .ss-slide-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; background-size: cover; background-position: center center; background-repeat: no-repeat; /* Ken Burns ölçeklemesi kenardan boşluk göstermesin diye dönüşüm merkezi ortada; İŞ 2 bunu kullanacak. */ transform-origin: center center; will-change: transform; } #wSlider-1 .holder, #wSliderUltimate-1 .holder { overflow: hidden; } /* Global Background Mode: Force transparent slide containers so background video/image shines through */ #wSlider-1 .holder, #wSliderUltimate-1 .holder, #wSlider-1 .uitem, #wSliderUltimate-1 .uitem, #wSlider-1 .uimage, #wSliderUltimate-1 .uimage, #wSlider-1 .super-slide-bg, #wSliderUltimate-1 .super-slide-bg { background: transparent !important; background-color: transparent !important; background-image: none !important; } #wSlider-1 .inner, #wSliderUltimate-1 .inner { position: relative !important; z-index: 6 !important; width: 100% !important; max-width: 1200px !important; min-height: 95vh !important; height: 100% !important; margin: 0 auto !important; padding: 0 15px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; } #wSlider-1 .ws-layer, #wSliderUltimate-1 .ws-layer { transform-style: preserve-3d; box-sizing: border-box !important; } #wSlider-1 .ws-layer img, #wSliderUltimate-1 .ws-layer img { transform-style: preserve-3d; backface-visibility: hidden; max-width: 100% !important; max-height: 100% !important; display: block; } #wSlider-1 .ss-inner-frame, #wSliderUltimate-1 .ss-inner-frame { position: absolute; pointer-events: none; box-sizing: border-box; z-index: 3; transform-style: preserve-3d; backface-visibility: hidden; } #wSlider-1 .ss-layer-overlay, #wSliderUltimate-1 .ss-layer-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; } @media (max-width: 991px) { #wSlider-1 .holder, #wSliderUltimate-1 .holder { min-height: 85vh !important; } #wSlider-1 .inner, #wSliderUltimate-1 .inner { padding: 2.5rem 1.25rem; } } @media (max-width: 576px) { #wSlider-1 .holder, #wSliderUltimate-1 .holder { min-height: 80vh !important; } #wSlider-1 .inner, #wSliderUltimate-1 .inner { padding: 2rem 1rem; } } /* Video Background Wrapper & Sizing */ .superslider-global-video-bg-wrap, .superslider-slide-video-bg-wrap { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; z-index: 2 !important; pointer-events: none !important; } .ss-video-cover-iframe { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 100vw !important; height: 56.25vw !important; min-height: 100% !important; min-width: 100% !important; border: none !important; pointer-events: none !important; z-index: 2 !important; } @media (max-aspect-ratio: 16/9) { .ss-video-cover-iframe { width: 177.78vh !important; height: 100vh !important; } } /* Layer Visibility & Entrance Animations Engine */ .animated { animation-fill-mode: both !important; -webkit-animation-fill-mode: both !important; will-change: transform, opacity; } #wSlider-1 .holder, #wSlider-1 .wojo-grid, #wSlider-1 .inner, #wSlider-1 .container, #wSlider-1 .row, #wSlider-1 .columns, #wSliderUltimate-1 .holder, #wSliderUltimate-1 .wojo-grid, #wSliderUltimate-1 .inner, #wSliderUltimate-1 .container, #wSliderUltimate-1 .row, #wSliderUltimate-1 .columns { position: relative; width: 100%; height: 100%; min-height: 100%; box-sizing: border-box; } #wSlider-1 .row, #wSliderUltimate-1 .row, #wSlider-1 .columns, #wSliderUltimate-1 .columns { display: flex; flex-direction: column; justify-content: center; } #wSlider-1 .ws-layer, #wSliderUltimate-1 .ws-layer, .ws-layer { box-sizing: border-box; opacity: 1; visibility: visible; will-change: transform, opacity; pointer-events: auto; } #wSlider-1 .ws-layer:not([style*="position"]), #wSliderUltimate-1 .ws-layer:not([style*="position"]) { position: relative; } /* 🎗️ KAYAN YAZI (MARQUEE) - always full-bleed edge-to-edge, regardless of whatever left/width px values got captured while dragging/resizing it in the builder canvas. Vertical position (top) is left untouched so it still lands where it was placed relative to other layers. */ #wSlider-1 .ws-layer[data-type="marquee"], #wSliderUltimate-1 .ws-layer[data-type="marquee"], .ws-layer[data-type="marquee"] { left: 50% !important; width: 100vw !important; max-width: 100vw !important; transform: translateX(-50%) !important; margin: 0 !important; } /* Text shimmer fix: promote the ANIMATED track to its own GPU layer so scrolling text doesn't get re-rasterized every frame. Deliberately NOT applied to .ss-marquee-skew - that element carries the skewY() transform itself, and GPU-promoting a skewed+clipped (overflow:hidden) box makes the compositor rasterize its diagonal edge as a staircase instead of a smooth line. Leaving the skew wrapper on the normal (non-GPU-layered) paint path keeps that edge anti-aliased correctly. */ .ss-marquee-track { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .ss-marquee-seg span { -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; } /* 🚀 ACTIONS BUTTONS CENTERING & HOVER */ #wSlider-1 .ws-layer a, #wSlider-1 a.ws-layer, #wSlider-1 .ws-layer button, #wSliderUltimate-1 .ws-layer a, #wSliderUltimate-1 a.ws-layer, #wSliderUltimate-1 .ws-layer button, .ws-layer a, a.ws-layer, .ws-layer button { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; white-space: nowrap !important; text-decoration: none !important; line-height: 1.2 !important; /* transition: all -> giris animasyonu bitiminde yazilan transform/perspective degerlerini de anime edip ikinci bir hareket (ziplama) yaratiyordu. Sadece hover icin gereken ozellikler birakildi. */ transition: background-color 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, opacity 0.25s ease !important; } #wSlider-1 a.ws-layer:hover, #wSliderUltimate-1 a.ws-layer:hover, .ws-layer a:hover, a.ws-layer:hover { transform: translateY(-2px); filter: brightness(1.08); } /* 15.09.2026: BASLIK BAGLANTISI - slayt basligini ilgili sayfaya baglayan . basligi SARAR (

..

): h1'in icine konunca SplitText satir bolmesi 'yi her satira kopyaliyor, satir maskede takili kaliyordu (olculdu). Yukaridaki dugme kurali (inline-flex, nowrap, ortalama, line-height 1.2) ve cihaz bloklarindaki punto/padding kurallari sarmalayiciyi dugmeye ceviriyordu. (1,2,1) ozgulluk hepsini ezer; gorunum basligin kendisinden gelir. */ #wSlider-1 .ws-layer a.ssu-baslik-bag, #wSliderUltimate-1 .ws-layer a.ssu-baslik-bag { display: block !important; white-space: inherit !important; line-height: inherit !important; font-size: inherit !important; text-align: inherit !important; padding: 0 !important; max-width: none !important; color: inherit; text-decoration: none !important; transition: none !important; } #wSlider-1 .ws-layer a.ssu-baslik-bag:hover, #wSliderUltimate-1 .ws-layer a.ssu-baslik-bag:hover { transform: none; filter: none; } /* 🖼️ IMAGE LAYERS 3D & CLIP-PATH RENDERING */ #wSlider-1 .ws-layer img, #wSliderUltimate-1 .ws-layer img, .ws-layer img { max-width: 100%; height: auto; display: block; box-sizing: border-box; transition: transform 0.3s ease, filter 0.3s ease; } /* ===== OLU CSS TEMIZLENDI (6 Eylul 2026) ===== Buradaki 51 giris keyframe tanimi, giris animasyonlari GSAP motoruna (view/front/js/anim-engine.js) tasindiktan sonra hicbir seyi tetiklemiyordu: - .ss-playing sinifi artik eklenmiyor - motor, kayitli icerikteki 'animated' + efekt-adi siniflarini calisma aninda soküyor Eski hali: master.php.bak_gsap | Ayrinti: _calisma/ANIMASYON-MOTORU.md ============================================= */ /* Premium Text FX (1-Tık Metin Efektleri) - shared keyframes for animated text presets */ @keyframes ssTextFxGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes ssTextFxNeonPulse { 0%, 100% { filter: brightness(1) drop-shadow(0 0 6px currentColor); } 50% { filter: brightness(1.25) drop-shadow(0 0 18px currentColor); } } @keyframes ssTextFxGlitch { 0%, 100% { text-shadow: -2px 0 #ff2079, 2px 0 #00e5ff; transform: translate(0,0); } 20% { text-shadow: 2px 0 #ff2079, -2px 0 #00e5ff; transform: translate(-1px,1px); } 40% { text-shadow: -2px 0 #ff2079, 2px 0 #00e5ff; transform: translate(1px,-1px); } 60% { text-shadow: 2px 0 #ff2079, -2px 0 #00e5ff; transform: translate(-1px,0); } 80% { text-shadow: -1px 0 #ff2079, 1px 0 #00e5ff; transform: translate(1px,0); } } @keyframes ssTextFxFireFlicker { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } } @keyframes ssTextFxChromeShine { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } } /* ===== BUILDER İLE AYNI OYNATMA MODELİ ===== Katmanlar oynatılana kadar gizli; slayta .ss-playing eklenince CSS animasyonu devralır. fill-mode:both sayesinde gecikme boyunca 0% karesi, bitince 100% karesi tutulur — sonradan temizlik/geri yükleme YOK. */ #wSlider-1 .ws-layer[data-animation]:not([data-animation="none"]):not(.ss-anim-on), .wSlider .ws-layer[data-animation]:not([data-animation="none"]):not(.ss-anim-on) { opacity: 0; } .holder.ss-playing .ws-layer.ss-anim-on { animation-iteration-count: 1; animation-fill-mode: both; animation-timing-function: cubic-bezier(.22,.68,.28,1); will-change: transform, opacity; } /* ===== OLU CSS TEMIZLENDI (6 Eylul 2026) ===== Buradaki 104 eslesme kurali (.ss-playing ve .animated.*), giris animasyonlari GSAP motoruna (view/front/js/anim-engine.js) tasindiktan sonra hicbir seyi tetiklemiyordu: - .ss-playing sinifi artik eklenmiyor - motor, kayitli icerikteki 'animated' + efekt-adi siniflarini calisma aninda soküyor Eski hali: master.php.bak_gsap | Ayrinti: _calisma/ANIMASYON-MOTORU.md ============================================= */ @keyframes ssBlurIn { 0% { opacity: 0; filter: blur(14px); transform: scale(0.95); } 100% { opacity: 1; filter: blur(0px); transform: scale(1); } } @keyframes ssBlinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .ss-type-cursor { display: inline-block; animation: ssBlinkCursor 0.8s infinite; font-weight: 300; margin-left: 2px; color: currentColor; } /* 🔄 CONTINUOUS LOOP ANIMATIONS (10 LUXURY PRESETS - INFINITE ZERO DISAPPEAR) */ .ws-layer.ss-loop-pulse, .ss-loop-pulse { animation: ssLoopPulse 2s infinite ease-in-out !important; } @keyframes ssLoopPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 1; } } .ws-layer.ss-loop-glow, .ss-loop-glow { animation: ssLoopGlow 2.5s infinite ease-in-out !important; } @keyframes ssLoopGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.4)); opacity: 1; } 50% { filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.95)) drop-shadow(0 0 35px rgba(59, 130, 246, 0.8)); opacity: 1; } } .ws-layer.ss-loop-float, .ss-loop-float { animation: ssLoopFloat 3.5s infinite ease-in-out; } @keyframes ssLoopFloat { 0%, 100% { transform: translateY(0px); opacity: 1; } 50% { transform: translateY(-14px); opacity: 1; } } .ws-layer.ss-loop-sway, .ss-loop-sway { animation: ssLoopSway 4s infinite ease-in-out; transform-origin: center bottom; } @keyframes ssLoopSway { 0%, 100% { transform: rotate(0deg); opacity: 1; } 25% { transform: rotate(-3.5deg) translateX(-4px); opacity: 1; } 75% { transform: rotate(3.5deg) translateX(4px); opacity: 1; } } .ws-layer.ss-loop-bounce, .ss-loop-bounce { animation: ssLoopBounce 2.4s infinite ease-in-out; } @keyframes ssLoopBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-16px); opacity: 1; } 60% { transform: translateY(-7px); opacity: 1; } } .ws-layer.ss-loop-spin, .ss-loop-spin { animation: ssLoopSpin 14s infinite linear; } @keyframes ssLoopSpin { from { transform: rotate(0deg); opacity: 1; } to { transform: rotate(360deg); opacity: 1; } } .ws-layer.ss-loop-shimmer, .ss-loop-shimmer { animation: ssLoopShimmer 3s infinite ease-in-out; } @keyframes ssLoopShimmer { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); } 50% { filter: brightness(1.35) drop-shadow(0 0 16px rgba(255,255,255,0.7)); } } .ws-layer.ss-loop-breathe, .ss-loop-breathe { animation: ssLoopBreathe 4s infinite ease-in-out; } @keyframes ssLoopBreathe { 0%, 100% { transform: scale(1) rotate(0deg); filter: blur(0px); opacity: 1; } 50% { transform: scale(1.05) rotate(1deg); filter: drop-shadow(0 15px 30px rgba(0,0,0,0.4)); opacity: 1; } } .ws-layer.ss-loop-hue, .ss-loop-hue { animation: ssLoopHue 6s infinite linear; } @keyframes ssLoopHue { 0% { filter: hue-rotate(0deg); opacity: 1; } 100% { filter: hue-rotate(360deg); opacity: 1; } } .ws-layer.ss-loop-wiggle, .ss-loop-wiggle { animation: ssLoopWiggle 1.8s infinite ease-in-out; } @keyframes ssLoopWiggle { 0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; } 25% { transform: rotate(-2deg) scale(1.02); opacity: 1; } 75% { transform: rotate(2deg) scale(1.02); opacity: 1; } } /* 🎯 9 INTERACTIVE HOVER EFFECTS */ .ws-layer.ss-hover-scale, .ss-hover-scale { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .ws-layer.ss-hover-scale:hover, .ss-hover-scale:hover { transform: scale(1.09) !important; } .ws-layer.ss-hover-lift, .ss-hover-lift { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease !important; } .ws-layer.ss-hover-lift:hover, .ss-hover-lift:hover { transform: translateY(-8px) !important; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5)) !important; } .ws-layer.ss-hover-glow, .ss-hover-glow { transition: filter 0.35s ease, text-shadow 0.35s ease, transform 0.35s ease !important; } .ws-layer.ss-hover-glow:hover, .ss-hover-glow:hover { filter: drop-shadow(0 0 20px #eab308) drop-shadow(0 0 35px #f59e0b) !important; text-shadow: 0 0 20px #eab308 !important; transform: translateY(-2px) !important; } .ws-layer.ss-hover-neon, .ss-hover-neon { transition: filter 0.35s ease, text-shadow 0.35s ease, transform 0.35s ease !important; } .ws-layer.ss-hover-neon:hover, .ss-hover-neon:hover { filter: drop-shadow(0 0 15px #06b6d4) drop-shadow(0 0 30px #3b82f6) !important; text-shadow: 0 0 20px #06b6d4 !important; transform: translateY(-2px) scale(1.02) !important; } .ws-layer.ss-hover-tilt, .ss-hover-tilt { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important; perspective: 800px; } .ws-layer.ss-hover-tilt:hover, .ss-hover-tilt:hover { transform: perspective(800px) rotateX(8deg) rotateY(-8deg) scale(1.04) !important; } .ws-layer.ss-hover-shine, .ss-hover-shine { position: relative; overflow: hidden; transition: all 0.35s ease !important; } .ws-layer.ss-hover-shine:hover, .ss-hover-shine:hover { filter: brightness(1.25) contrast(1.1) drop-shadow(0 10px 25px rgba(255,255,255,0.4)) !important; transform: translateY(-3px) scale(1.03) !important; } .ws-layer.ss-hover-rubber:hover, .ss-hover-rubber:hover { animation: ssRubberBand 0.8s both !important; } .ws-layer.ss-hover-glass, .ss-hover-glass { transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } .ws-layer.ss-hover-glass:hover, .ss-hover-glass:hover { backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.45) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important; transform: translateY(-4px) !important; } .ws-layer.ss-hover-sharp, .ss-hover-sharp { filter: blur(1.5px) opacity(0.85); transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease !important; } .ws-layer.ss-hover-sharp:hover, .ss-hover-sharp:hover { filter: blur(0px) opacity(1) !important; transform: scale(1.03) !important; } /* 360 Spin & Parallax Tilt Engine */ .ss-spin-continuous { animation: ssSpinContinuous 10s linear infinite !important; } .ss-spin-slow { animation: ssSpinContinuous 20s linear infinite !important; } .ss-spin-fast { animation: ssSpinContinuous 4s linear infinite !important; } .ss-spin-reverse { animation: ssSpinReverse 10s linear infinite !important; } @keyframes ssSpinContinuous { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ssSpinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } .ss-360-tilt { transition: transform 0.15s ease-out; transform-style: preserve-3d; will-change: transform; } /* Ken Burns Background & Line SVG */ /* ESKI KURAL — dokunulmadi. `.super-slide-bg` yalnizca Stüdyo tuvalinde ve eski slayt HTML'lerinde geciyor; on yuz bu elementi hic uretmiyor. Ken Burns'un ON YUZDE hic calismamasinin sebebi buydu (İŞ 2). */ .super-slide-bg.kenburns { animation: superKenBurns 14s infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important; } @keyframes superKenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.18); } } /* ================================================================== İŞ 2 — KEN BURNS (calisan surum) ------------------------------------------------------------------ İŞ 1'de arka plan `.ss-slide-bg` adli AYRI bir katmana tasindi. Ken Burns artik o katmani (ve sabit modda global gorsel katmanini) tek basina buyutuyor; icerik katmanlari kilini kipirdatmiyor. NEDEN `transform` DEGIL de `scale` OZELLIGI: Gecis efekti motoru (İŞ 6) ve yorunge motoru ayni elementin `transform`'unu kullanacak. CSS animasyonu `transform`'u doldurursa satir ici stili ezer (H24'te tam olarak bu yasandi). Ayri `scale` ozelligi ile iki taraf birbirine hic dokunmuyor. Sure ve hedef olcek slayt ayarindan gelir; degiskenler yoksa eski davranisin ayni degerleri (14s / 1.18) kullanilir. ================================================================== */ @keyframes ssuKenBurns { from { scale: 1; } to { scale: var(--ssu-kb-olcek, 1.18); } } #wSlider-1 .ss-slide-bg.ssu-kenburns, #wSliderUltimate-1 .ss-slide-bg.ssu-kenburns, #wSliderContainer-1 .superslider-global-img-bg.ssu-kenburns { animation: ssuKenBurns var(--ssu-kb-sure, 14s) infinite alternate cubic-bezier(0.4, 0, 0.2, 1); transform-origin: var(--ssu-kb-odak, center center); will-change: scale; } /* Ekranda olmayan slaytlar bosuna boyanmasin. Slick, sinifi sarmalayiciya degil DOGRUDAN `.holder`'a ekliyor (canli DOM'da olculdu). */ #wSlider-1.slick-initialized .holder:not(.slick-active) > .ss-slide-bg.ssu-kenburns { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { #wSlider-1 .ss-slide-bg.ssu-kenburns, #wSliderUltimate-1 .ss-slide-bg.ssu-kenburns, #wSliderContainer-1 .superslider-global-img-bg.ssu-kenburns { animation: none; scale: 1; } } .customLineAnim { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: ssDashLine 4s cubic-bezier(0.16, 1, 0.3, 1) forwards infinite; } @keyframes ssDashLine { to { stroke-dashoffset: 0; } } /* Gradient Text */ .ss-gradient-text { background-clip: text !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; display: inline-block; } /* Glassmorphism & Modern Ultra Card Styling */ .glass-box, .glass-card, .ss-glass { background: rgba(15, 23, 42, 0.65) !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; border-radius: 20px !important; position: relative; z-index: 10; } /* 🔘 BUTTON STYLES & LUXURY PRESETS */ .btn-gold { background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 50%, #aa7c11 100%) !important; color: #0f172a !important; font-weight: 800 !important; padding: 14px 34px !important; border-radius: 30px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 25px rgba(212,175,55,0.4) !important; transition: all 0.3s ease !important; border: none !important; } .btn-gold:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 12px 30px rgba(212,175,55,0.6) !important; color: #000000 !important; } .btn-glass { background: rgba(255,255,255,0.12) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.3) !important; color: #ffffff !important; font-weight: 700 !important; padding: 14px 34px !important; border-radius: 30px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important; transition: all 0.3s ease !important; } .btn-glass:hover { background: rgba(255,255,255,0.25) !important; transform: translateY(-3px) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important; } .btn-outline { background: transparent !important; border: 2px solid #ffffff !important; color: #ffffff !important; font-weight: 700 !important; padding: 12px 32px !important; border-radius: 30px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; } .btn-outline:hover { background: #ffffff !important; color: #0f172a !important; transform: translateY(-3px) !important; } /* 🧭 MODERN NAVIGATION ARROWS & DOTS */ #wSlider-1 .ss-nav-arrow, #wSliderUltimate-1 .ss-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 25; width: 52px; height: 52px; border-radius: 50%; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.4); padding: 0; outline: none; } #wSlider-1 .ss-nav-arrow:hover, #wSliderUltimate-1 .ss-nav-arrow:hover { background: #eab308; color: #0f172a; border-color: #eab308; transform: translateY(-50%) scale(1.12); box-shadow: 0 10px 25px rgba(234,179,8,0.5); } #wSlider-1 .ss-prev, #wSliderUltimate-1 .ss-prev { left: 24px; } #wSlider-1 .ss-next, #wSliderUltimate-1 .ss-next { right: 24px; } /* Slick'in kendi tema CSS'i (slick-theme.css) ok butonlarına ::before ile bir ok karakteri basıyor. Bizim SVG ikonumuzla üst üste binince okun yanında ikinci bir "‹" görünüyordu. Sözde öğeleri tamamen kapatıyoruz. */ #wSlider-1 .ss-nav-arrow::before, #wSlider-1 .ss-nav-arrow::after, #wSliderUltimate-1 .ss-nav-arrow::before, #wSliderUltimate-1 .ss-nav-arrow::after, #wSlider-1 .slick-prev::before, #wSlider-1 .slick-next::before, #wSliderUltimate-1 .slick-prev::before, #wSliderUltimate-1 .slick-next::before { content: none !important; display: none !important; } #wSlider-1 .ss-nav-arrow, #wSliderUltimate-1 .ss-nav-arrow { font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; box-sizing: border-box !important; flex-shrink: 0; } #wSlider-1 .ss-nav-arrow svg, #wSliderUltimate-1 .ss-nav-arrow svg { width: 22px !important; height: 22px !important; display: block !important; flex: 0 0 auto; } /* Okun yatay kaydırma/taşma yüzünden ekran kenarında yarım kalmaması için kapsayıcı yatayda kesinlikle taşmaz. */ #wSliderContainer-1 { overflow-x: hidden !important; } @media (max-width: 768px) { #wSlider-1 .ss-nav-arrow, #wSliderUltimate-1 .ss-nav-arrow { width: 40px; height: 40px; } #wSlider-1 .ss-prev, #wSliderUltimate-1 .ss-prev { left: 10px; } #wSlider-1 .ss-next, #wSliderUltimate-1 .ss-next { right: 10px; } } #wSlider-1 .slick-dots, #wSliderUltimate-1 .slick-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex !important; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 6px 14px; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(10px); border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); } #wSlider-1 .slick-dots li, #wSliderUltimate-1 .slick-dots li { margin: 0; padding: 0; } #wSlider-1 .slick-dots li button, #wSliderUltimate-1 .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 12px; height: 12px; padding: 0; cursor: pointer; color: transparent; border: 2px solid rgba(255,255,255,0.6); outline: none; background: transparent; border-radius: 50%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #wSlider-1 .slick-dots li.slick-active button, #wSliderUltimate-1 .slick-dots li.slick-active button { background: #eab308; border-color: #eab308; width: 28px; border-radius: 10px; box-shadow: 0 0 12px rgba(234,179,8,0.7); } /* ================================================================== İŞ 9 ARTAKALANI — NOKTA STİLİ (`nav_style`) ------------------------------------------------------------------ Ölçüm (6 Eylül): `nav_style` panelde ve veritabanında vardı ama ön yüzde yalnızca bir değişkene okunuyor, sonra HİÇ kullanılmıyordu. O iş "ölü ayar temizliği" kapsamındaydı; bu ise yeni bir özellik olduğu için bilerek ertelenmişti. Burası o ertelenen iş. TASARIM KARARI: yukarıdaki blok (kapsüllü parlak) OLDUĞU GİBİ duruyor ve varsayılan odur. Bu blok yalnızca kullanıcı başka bir stil seçtiyse basılır ve o zaman yukarıdakini ezer. Yani ayarı olmayan hiçbir slider'ın görünümü değişmiyor (KURAL 4) ve çıktı da büyümüyor. ================================================================== */ #wSlider-1#wSlider-1 .slick-dots { position: absolute !important; top: calc(50% + 34px) !important; bottom: auto !important; left: calc(var(--ssu-pay, clamp(20px, 4vw, 64px)) / 2 - 13px) !important; right: auto !important; transform: translateY(-50%) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: clamp(14px, 2.2vh, 25px) !important; width: 26px !important; padding: 8px 0 !important; margin: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 26 !important; } #wSlider-1#wSlider-1 .slick-dots::before, #wSlider-1#wSlider-1 .slick-dots::after { content: "" !important; position: absolute !important; left: 50% !important; width: 4px !important; height: clamp(40px, 8vh, 85px) !important; transform: translateX(-50%) !important; opacity: .3 !important; pointer-events: none !important; } #wSlider-1#wSlider-1 .slick-dots::before { bottom: calc(100% + 12px) !important; background: linear-gradient(0deg, #fff 14%, rgba(255,255,255,.76) 35%, rgba(255,255,255,.57) 57%, rgba(255,255,255,.19) 95%) !important; } #wSlider-1#wSlider-1 .slick-dots::after { top: calc(100% + 12px) !important; background: linear-gradient(180deg, #fff 14%, rgba(255,255,255,.76) 35%, rgba(255,255,255,.57) 57%, rgba(255,255,255,.19) 95%) !important; } #wSlider-1#wSlider-1 .slick-dots li { display: block !important; width: 10px !important; height: 10px !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } #wSlider-1#wSlider-1 .slick-dots li button { position: relative !important; display: block !important; width: 10px !important; min-width: 10px !important; height: 10px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; outline: none !important; background: rgba(255, 255, 255, .4) !important; box-shadow: none !important; text-shadow: none !important; overflow: visible !important; font-size: 0 !important; color: transparent !important; transform: none !important; cursor: pointer !important; transition: background-color 200ms linear .1s !important; } #wSlider-1#wSlider-1 .slick-dots li.slick-active button { width: 10px !important; background: #fff !important; box-shadow: none !important; } #wSlider-1#wSlider-1 .slick-dots li button::before { content: "" !important; display: block !important; position: absolute !important; top: -8px !important; right: -8px !important; bottom: -8px !important; left: -8px !important; width: auto !important; height: auto !important; border: 1px solid rgba(255, 255, 255, .4) !important; border-radius: 50% !important; background: none !important; opacity: 1 !important; transform: scaleX(0) !important; transition: transform 200ms linear .1s, border-color 200ms linear .1s !important; pointer-events: none !important; } #wSlider-1#wSlider-1 .slick-dots li.slick-active button::before, #wSlider-1#wSlider-1 .slick-dots li button:hover::before { transform: scaleX(1) !important; border-color: #fff !important; } #wSlider-1#wSlider-1 .slick-dots li button:focus-visible { outline: 2px solid #fff !important; outline-offset: 10px !important; } @media (max-width: 991px) { #wSlider-1#wSlider-1 .slick-dots { display: none !important; } } @media (prefers-reduced-motion: reduce) { #wSlider-1#wSlider-1 .slick-dots li button, #wSlider-1#wSlider-1 .slick-dots li button::before { transition: none !important; } } /* Kap genişliği birimi (100cqw). Oto Elektronik şablonları metnin solunu rayın soluna, görselin sağını rayın sağına bu birimle hizalıyor. Ekran genişliği (vw) kaydırma çubuğunu da saydığı için 7,5px kayıyordu. */ #wSliderContainer-1 { container-type: inline-size; } /* 14.09.2026 — KENAR PAYI (--ssu-pay): rayın iç kutusu ve Oto Elektronik şablonlarının metin/görsel hizası bu değişkeni okur. Dikey nokta sütunu açıkken (≥992px) pay en az 100px olur; sütun bu boşluğun ortasına oturur, metin üstüne binmez. Ölçüm: 1440px'de metin soldan 58px'te başlıyordu; sütun 60px'e konunca biniyordu. */ #wSliderContainer-1 { --ssu-pay: clamp(20px, 4vw, 64px); } @media (min-width: 992px) { #wSliderContainer-1 { --ssu-pay: max(clamp(20px, 4vw, 64px), 100px); } } /* Autoscale Fluid Typography & Mobile Responsive Engine */ #wSlider-1 *, #wSliderUltimate-1 * { box-sizing: border-box !important; } #wSlider-1 .ws-layer, #wSliderUltimate-1 .ws-layer { max-width: 100% !important; word-break: normal; overflow-wrap: break-word; word-wrap: break-word; } /* 14.09.2026 — H1 BASLIK, H2 OLCEGI: Oto Elektronik hizmet slaytlarinin basliklari SEO icin h2'den h1'e cevrildi; gorunumleri AYNI kalmali. h1 cihaz kurallari diger hazir sablonlarin (Porto, Sektor, Kurumsal - 80 slaytin 66'si basligi h1 ile yaziyor) daha iri olcegi icin; onlara dokunulmadi. data-ssu-punto-olcek="h2" tasiyan h1 asagidaki butun h1 kurallarindan :not() ile cikarilir ve h2 kurallarina eklenir. Kurala eklemek yerine CIKARMAK gerekiyordu: h1'in <=768 kurali letter-spacing'i !important ile eziyor; sonradan ekleyecek bir kural satir ici degeri geri getiremezdi. Builder tuvalindeki esi: builder/iframe.css. Olcum: _calisma/_olcum (8 genislik, 0 fark). */ #wSlider-1 h1:not([style*="font-size"]):not([data-ssu-punto-olcek="h2"]), #wSliderUltimate-1 h1:not([style*="font-size"]):not([data-ssu-punto-olcek="h2"]), #wSlider-1 .slider-title:not([style*="font-size"]), #wSliderUltimate-1 .slider-title:not([style*="font-size"]) { /* İŞ 8 / Aşama E: çarpan tanımsızken 1'dir → değer değişmez. */ font-size: calc(clamp(28px, 4.5vw, 64px) * var(--ssu-fs-carpan, 1)); line-height: 1.15; word-break: normal; overflow-wrap: break-word; } #wSlider-1 h2:not([style*="font-size"]), #wSliderUltimate-1 h2:not([style*="font-size"]), #wSlider-1 h1[data-ssu-punto-olcek="h2"]:not([style*="font-size"]), #wSliderUltimate-1 h1[data-ssu-punto-olcek="h2"]:not([style*="font-size"]) { font-size: calc(clamp(22px, 3.5vw, 48px) * var(--ssu-fs-carpan, 1)); line-height: 1.2; word-break: normal; overflow-wrap: break-word; } #wSlider-1 p:not([style*="font-size"]), #wSliderUltimate-1 p:not([style*="font-size"]), #wSlider-1 h4:not([style*="font-size"]), #wSliderUltimate-1 h4:not([style*="font-size"]), #wSlider-1 .slider-desc:not([style*="font-size"]), #wSliderUltimate-1 .slider-desc:not([style*="font-size"]) { font-size: calc(clamp(14px, 1.8vw, 20px) * var(--ssu-fs-carpan, 1)); line-height: 1.6; word-break: normal; overflow-wrap: break-word; } #wSlider-1 .slider-badge, #wSliderUltimate-1 .slider-badge { display: inline-block; background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.35); padding: 5px 14px; border-radius: 20px; font-weight: 800; font-size: clamp(10px, 1.1vw, 13px); letter-spacing: 1.5px; margin-bottom: 12px; } #wSlider-1 .text-gold, #wSliderUltimate-1 .text-gold { color: #eab308 !important; background: linear-gradient(135deg, #d4af37, #f3e5ab, #aa7c11); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline; } #wSlider-1 .slider-actions, #wSliderUltimate-1 .slider-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } /* 📱 TABLET RESPONSIVE RULES (max-width: 991px) 14.09.2026: `tablet_olcek` ölçeği artık yalnızca 992-1199px'de; 769-991px yığın olduğu için bu punto kuralları orada da geçerli (ölçekle üst üste binip başlığı ikinci kez küçültme sorunu bu aralıkta kalmadı). */ @media (max-width: 991px) { #wSlider-1 .inner, #wSliderUltimate-1 .inner { padding: 2rem 1.5rem !important; max-width: 100% !important; } #wSlider-1 .ws-layer h1:not([data-ssu-punto-olcek="h2"]), #wSliderUltimate-1 .ws-layer h1:not([data-ssu-punto-olcek="h2"]), #wSlider-1 h1:not([data-ssu-punto-olcek="h2"]), #wSliderUltimate-1 h1:not([data-ssu-punto-olcek="h2"]) { font-size: calc((clamp(26px, 5.5vw, 40px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.18 !important; max-width: 100% !important; word-break: normal !important; overflow-wrap: break-word !important; } #wSlider-1 .ws-layer h2, #wSliderUltimate-1 .ws-layer h2, #wSlider-1 h2, #wSliderUltimate-1 h2, #wSlider-1 h1[data-ssu-punto-olcek="h2"], #wSliderUltimate-1 h1[data-ssu-punto-olcek="h2"] { font-size: calc((clamp(20px, 4.2vw, 30px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.22 !important; max-width: 100% !important; word-break: normal !important; overflow-wrap: break-word !important; } #wSlider-1 .ws-layer p, #wSliderUltimate-1 .ws-layer p, #wSlider-1 p, #wSliderUltimate-1 p { font-size: calc((clamp(14px, 2.2vw, 17px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.55 !important; max-width: 100% !important; } } /* 📱 MOBILE RESPONSIVE RULES (max-width: 768px) */ @media (max-width: 768px) { #wSlider-1 .inner, #wSliderUltimate-1 .inner { padding: 1.5rem 1.25rem !important; max-width: 100% !important; } #wSlider-1 .ws-layer, #wSliderUltimate-1 .ws-layer { max-width: 100% !important; } #wSlider-1 .ws-layer h1:not([data-ssu-punto-olcek="h2"]), #wSliderUltimate-1 .ws-layer h1:not([data-ssu-punto-olcek="h2"]), #wSlider-1 h1:not([data-ssu-punto-olcek="h2"]), #wSliderUltimate-1 h1:not([data-ssu-punto-olcek="h2"]) { font-size: calc((clamp(22px, 6.2vw, 32px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; word-break: normal !important; overflow-wrap: break-word !important; max-width: 100% !important; } #wSlider-1 .ws-layer h2, #wSliderUltimate-1 .ws-layer h2, #wSlider-1 h2, #wSliderUltimate-1 h2, #wSlider-1 h1[data-ssu-punto-olcek="h2"], #wSliderUltimate-1 h1[data-ssu-punto-olcek="h2"] { font-size: calc((clamp(18px, 5.2vw, 24px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.25 !important; word-break: normal !important; overflow-wrap: break-word !important; max-width: 100% !important; } #wSlider-1 .ws-layer h3, #wSliderUltimate-1 .ws-layer h3, #wSlider-1 h3, #wSliderUltimate-1 h3 { font-size: calc((clamp(16px, 4.5vw, 20px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.3 !important; max-width: 100% !important; } #wSlider-1 .ws-layer p, #wSliderUltimate-1 .ws-layer p, #wSlider-1 p, #wSliderUltimate-1 p { font-size: calc((clamp(13px, 3.8vw, 15px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.5 !important; max-width: 100% !important; } #wSlider-1 .ws-layer a, #wSliderUltimate-1 .ws-layer a, #wSlider-1 a.ws-layer, #wSliderUltimate-1 a.ws-layer, #wSlider-1 .ws-layer button, #wSliderUltimate-1 .ws-layer button { font-size: calc((clamp(12px, 3.4vw, 14px)) * var(--ssu-fs-carpan, 1)) !important; padding: 10px 20px !important; max-width: 100% !important; white-space: normal !important; } #wSlider-1 .ws-layer img, #wSliderUltimate-1 .ws-layer img { max-width: 100% !important; height: auto !important; } #wSlider-1 .glass-card, #wSliderUltimate-1 .glass-card { padding: 18px 14px !important; max-width: 100% !important; } } /* 📱 SMALL MOBILE RULES (max-width: 576px & 480px) */ @media (max-width: 576px) { #wSlider-1 .holder, #wSliderUltimate-1 .holder { min-height: 80vh !important; } #wSlider-1 .inner, #wSliderUltimate-1 .inner { padding: 1.25rem 1rem !important; max-width: 100% !important; } #wSlider-1 .ws-layer h1:not([data-ssu-punto-olcek="h2"]), #wSliderUltimate-1 .ws-layer h1:not([data-ssu-punto-olcek="h2"]), #wSlider-1 h1:not([data-ssu-punto-olcek="h2"]), #wSliderUltimate-1 h1:not([data-ssu-punto-olcek="h2"]) { font-size: calc((clamp(20px, 6.8vw, 26px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.2 !important; margin: 6px 0 !important; } #wSlider-1 .ws-layer h2, #wSliderUltimate-1 .ws-layer h2, #wSlider-1 h2, #wSliderUltimate-1 h2, #wSlider-1 h1[data-ssu-punto-olcek="h2"], #wSliderUltimate-1 h1[data-ssu-punto-olcek="h2"] { font-size: calc((clamp(17px, 5.5vw, 21px)) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.25 !important; margin: 4px 0 !important; } #wSlider-1 .ws-layer p, #wSliderUltimate-1 .ws-layer p, #wSlider-1 p, #wSliderUltimate-1 p { font-size: calc((13px) * var(--ssu-fs-carpan, 1)) !important; line-height: 1.45 !important; margin: 6px 0 !important; } #wSlider-1 .ws-layer a, #wSliderUltimate-1 .ws-layer a, #wSlider-1 a.ws-layer, #wSliderUltimate-1 a.ws-layer { font-size: calc((13px) * var(--ssu-fs-carpan, 1)) !important; padding: 9px 18px !important; } #wSlider-1 .slider-actions, #wSliderUltimate-1 .slider-actions { gap: 8px !important; margin-top: 12px !important; } } /* NOT: Buraya bir zamanlar güven şeridi etiketlerini beyaza zorlayan bir kural konmuştu (color / background / -webkit-text-fill-color, hepsi !important). Gereksizdi: etiketlerin kendi satır içi rengi zaten kazanıyor. Dahası zararlıydı — "1-Tık Metin Efektleri" (Gökkuşağı, Altın Parıltı, Krom...) gradyanı tam da bu üç özellikle kuruyor, stil sayfasındaki !important onları satır içi stilin önünde ezip efektin ön yüzde hiç görünmemesine yol açıyordu. Tekrar eklenmemeli. */ /* ================================================================ 📱 MOBİLDE KATMAN YIĞINI (max-width: 768px) ---------------------------------------------------------------- Katmanlar Stüdyo'da 1920px genişliğindeki tuval üzerinde MUTLAK (position:absolute) piksel koordinatlarıyla konumlanır. Bu değerler 390px'lik bir telefonda anlamını yitiriyor: bir katman ekranın dışına taşıyor (örn. left:-67px), diğerleri üst üste biniyordu. Yalnızca punto küçültmek yetmiyordu, çünkü asıl sorun konumlandırma. Mobilde mutlak konumlandırmayı bırakıyoruz: slayt bir dikey kolona dönüşüyor, katmanlar DOM sırasına göre alt alta diziliyor. Böylece hiçbir katman bir diğerinin üstüne binmiyor ve hiçbiri ekran dışında kalmıyor. Masaüstü ve tablet yerleşimi aynen korunur. İŞ 4 (6 Eylül) — KURAL ARTIK SLAYT BAZINDA KAPATILABİLİR `attrib.mobile_layout = 'keep'` olan slayt `data-mobile="keep"` alır ve aşağıdaki yığın kuralları ona UYGULANMAZ. ⚠️ ÖLÇÜM UYARISI — bu seçenek çoğu slaytta İŞE YARAMAZ. Planda "şablonlar yüzde konumlandırma kullandığı için mobil güvenli, yığın kuralı onların emeğini siliyor" yazıyordu. Ölçüldü ve bu ÇÜRÜTÜLDÜ: `[mobil guvenli]` işaretli A1 şablonu 375px ekranda, yığın kapatıldığında **21 çift katman üst üste biniyor** (iki buton tam olarak aynı y'de, 161px örtüşüyor). Sebep: yüzde konumlandırma katmanın BAŞLANGIÇ NOKTASINI ölçekliyor ama YÜKSEKLİĞİNİ değil; 855px'lik masaüstü slaytı için ayarlanmış %26/%30/%46/%60/%71 değerleri 650px'lik mobil slaytta 94px'lik bir bantta sıkışıyor. Yani yığın kuralı, şablonların mobil görünümünü BOZAN değil KURTARAN şey. Bu yüzden varsayılan `stack` (bugünkü davranış) ve `keep` yalnızca slaydı mobil için ELLE düzenlemiş olan kullanıcı içindir. Asıl çözüm cihaz bazlı katman düzenlemedir (İŞ 8). 14.09.2026: `tablet_olcek` açıkken sınır 991px ($ssuYigin). Bilinen sınır: 769-991px'de tablet için ELLE konumlanmış katman (`data-ssu-t`) yığının içinde kalır, kendi koordinatına geçmez. ================================================================ */ @media (max-width: 991px) { /* 1) Slayt kabı: dikey kolon, içerik kadar uzayabilir */ #wSlider-1 .holder:not([data-mobile="keep"]), #wSliderUltimate-1 .holder:not([data-mobile="keep"]) { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; height: auto !important; /* üstte sabit menü, altta şekilli kenar + oklar için pay */ padding: 84px 20px 108px !important; overflow: visible !important; } /* Stüdyo'nun ara sarmalayıcıları da akışa uysun */ #wSlider-1 .holder:not([data-mobile="keep"]) .uitem, #wSlider-1 .holder:not([data-mobile="keep"]) .uimage, #wSlider-1 .holder:not([data-mobile="keep"]) .ucontent, #wSliderUltimate-1 .holder:not([data-mobile="keep"]) .uitem, #wSliderUltimate-1 .holder:not([data-mobile="keep"]) .uimage, #wSliderUltimate-1 .holder:not([data-mobile="keep"]) .ucontent { position: static !important; display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; width: 100% !important; padding: 0 !important; } /* 2) Katmanlar: mutlak konumdan çık, tam genişlik, alt alta İŞ 8: cihaz için ELLE konumlandırılmış katman (`data-ssu-m`) yığına hiç girmez — aşağıdaki İŞ 8 bloğu onu kendi koordinatlarına yerleştirir. İki kural kümesi birbirini dışladığı için aralarında özgüllük yarışı yok. */ #wSlider-1 .holder:not([data-mobile="keep"]) .ws-layer:not([data-ssu-m="1"]), #wSliderUltimate-1 .holder:not([data-mobile="keep"]) .ws-layer:not([data-ssu-m="1"]) { position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; margin: 0 0 14px !important; } #wSlider-1 .holder:not([data-mobile="keep"]) .ws-layer:last-child, #wSliderUltimate-1 .holder:not([data-mobile="keep"]) .ws-layer:last-child { margin-bottom: 0 !important; } /* Görseller kabına sığsın */ #wSlider-1 .holder:not([data-mobile="keep"]) .ws-layer img, #wSliderUltimate-1 .holder:not([data-mobile="keep"]) .ws-layer img { width: 100% !important; height: auto !important; object-fit: cover !important; } /* 3) Oklar metnin üstünden çekilip alta, yan yana alınır. Yanlarda dururken 390px'lik ekranda yazının üzerine biniyorlardı. */ #wSlider-1 .ss-nav-arrow, #wSliderUltimate-1 .ss-nav-arrow { top: auto !important; bottom: 30px !important; transform: none !important; width: 38px !important; height: 38px !important; } #wSlider-1 .ss-prev, #wSliderUltimate-1 .ss-prev { left: calc(50% - 45px) !important; right: auto !important; } #wSlider-1 .ss-next, #wSliderUltimate-1 .ss-next { left: calc(50% + 7px) !important; right: auto !important; } /* 4) Güven şeridi telefonda 2'şerli, daha derli toplu */ #wSlider-1 .hg-trustbar > div, #wSliderUltimate-1 .hg-trustbar > div { gap: 12px 0 !important; padding: 14px 6px !important; } #wSlider-1 .hg-trustbar > div > div, #wSliderUltimate-1 .hg-trustbar > div > div { flex: 1 1 40% !important; max-width: none !important; padding: 2px 4px !important; } } /* ================================================================ 📐 İŞ 8 — CİHAZ BAZLI KATMAN KONUMLANDIRMA (Aşama A: motor) ---------------------------------------------------------------- Bir katman mobil/tablet için ELLE konumlandırıldığında değerleri kendi üzerinde CSS DEĞİŞKENİ olarak taşır:
NEDEN katman başına CSS ÜRETİLMİYOR: plan "master.php'de @media bloğu üreten bir CSS üretici" diyordu. Bu, slayt HTML'ini sunucuda ayrıştırmayı, her katmana benzersiz bir kimlik uydurmayı ve slayt başına onlarca kural basmayı gerektirirdi. Değerler elementin kendisinde durunca tek bir statik kural yetiyor — ayrıştırma yok, kimlik yok, çıktı büyümüyor. İŞ 4 İLE İLİŞKİ: yığın kuralı `:not([data-ssu-m="1"])` ile daraltıldı; yani cihaz için konumlandırılmış katman yığına HİÇ girmiyor, girmeyenler ise eskisi gibi alt alta diziliyor. İki kural kümesi birbirini dışlıyor, aralarında özgüllük yarışı yok. GERİYE UYUMLULUK: niteliği olmayan katman hiçbir kuraldan etkilenmez — bugünkü davranış birebir sürer. PUNTO (çözüldü — Aşama E): `font-size` bu kural kümesiyle ezilemiyor, çünkü şablonlar punto değerini katmanın KENDİSİNE değil içindeki etikete satır içi yazıyor; kalıtım oraya ulaşmıyor. Bu yüzden punto EZİLMİYOR, ÇARPILIYOR: aşağıdaki ayrı blok ve `view/front/js/ssu-punto.js`. Gerekçe orada yazılı. ================================================================ */ @media (max-width: 768px) { #wSlider-1 .holder .ws-layer[data-ssu-m="1"], #wSliderUltimate-1 .holder .ws-layer[data-ssu-m="1"] { position: absolute !important; left: var(--ssu-m-x, auto) !important; top: var(--ssu-m-y, auto) !important; width: var(--ssu-m-w, auto) !important; height: var(--ssu-m-h, auto) !important; right: auto !important; bottom: auto !important; margin: 0 !important; max-width: none !important; min-width: 0 !important; } #wSlider-1 .holder .ws-layer[data-ssu-m-gizli="1"], #wSliderUltimate-1 .holder .ws-layer[data-ssu-m-gizli="1"] { display: none !important; } /* İŞ 8 / Aşama E — PUNTO ÇARPANI (mobil). Çarpan katmana atanır, KALITIMLA bütün alt ögelere iner. */ #wSlider-1 .holder .ws-layer[data-ssu-m-fs="1"], #wSliderUltimate-1 .holder .ws-layer[data-ssu-m-fs="1"] { --ssu-fs-carpan: var(--ssu-m-fs, 1); } } /* Tablet aralığı: mevcut tablet medya bloğuyla aynı sınır (991px). */ @media (min-width: 769px) and (max-width: 991px) { #wSlider-1 .holder .ws-layer[data-ssu-t="1"], #wSliderUltimate-1 .holder .ws-layer[data-ssu-t="1"] { position: absolute !important; left: var(--ssu-t-x, auto) !important; top: var(--ssu-t-y, auto) !important; width: var(--ssu-t-w, auto) !important; height: var(--ssu-t-h, auto) !important; right: auto !important; bottom: auto !important; margin: 0 !important; max-width: none !important; } #wSlider-1 .holder .ws-layer[data-ssu-t-gizli="1"], #wSliderUltimate-1 .holder .ws-layer[data-ssu-t-gizli="1"] { display: none !important; } /* İŞ 8 / Aşama E — PUNTO ÇARPANI (tablet). */ #wSlider-1 .holder .ws-layer[data-ssu-t-fs="1"], #wSliderUltimate-1 .holder .ws-layer[data-ssu-t-fs="1"] { --ssu-fs-carpan: var(--ssu-t-fs, 1); } } /* ==================================================================== İŞ 8 / Aşama E — PUNTO: satır içi değeri ÇARPARAK ez -------------------------------------------------------------------- NEDEN BÖYLE (ölçüldü): şablonlar puntoyu katmanın kendisine değil içindeki etikete satır içi yazıyor (63 ögenin 63'ü), üstelik iç içe. Katmana verilen bir `font-size` kalıtımla oraya ulaşamaz. `--ssu-fs-taban` ögenin KENDİ satır içi değerinin kopyasıdır (ssu-punto.js yazar); çarpan ise katmandan kalıtımla iner. Her tabanın MUTLAK olması sayesinde çarpım iç içe katlanmaz. `!important` taşıyan sayfa kuralı, `!important`sız satır içi bildirimi kaskad gereği yener. Çarpanı olmayan yerde `--ssu-fs-carpan` tanımsız → 1 → değer aynen tabanın kendisi. Yani bu kural varsayılan durumda hiçbir şeyi değiştirmiyor; yalnız medya blokları içinde ve yalnız çarpanlı katmanlarda etkisi görünüyor. ==================================================================== */ @media (max-width: 991px) { /* ÖZGÜLLÜK BİLEREK DÜŞÜK TUTULDU (ölçümle bulundu). Ölçüm: bir katmanın

'i satır içi `font-size:56px` taşımasına rağmen mobilde 26px görünüyordu — çünkü master.php'nin kendi mobil blokları `clamp(...) !important` ile satır içini zaten eziyor. Yani "satır içi her zaman kazanır" varsayımı yanlıştı. Sonuç: mobilde kazanan değer duruma göre değişiyor. İki yol birden gerekiyordu: · Bir cihaz kuralının kapsadığı öge (h1/h2/p...) → çarpan o kuralın kendi değerine eklendi (yukarıdaki 12 satır). · Hiçbir kuralın kapsamadığı öge (span/b/rozet...) → satır içi değer kazanıyor; onu aşağıdaki kural çarpıyor. Bu kuralın seçicisinde kimlik (#wSlider-N) YOK: özgüllüğü (0,2,0), cihaz kurallarınınki (1,1,1). Böylece ikisi birden eşleştiğinde CİHAZ KURALI kazanıyor ve taban iki kez hesaplanmıyor. `!important` taşıdığı için satır içini yine de yeniyor — kaskadda `!important` satır içinin üstündedir. */ .holder [data-ssu-fs="1"] { font-size: calc(var(--ssu-fs-taban) * var(--ssu-fs-carpan, 1)) !important; } } /* ================================================================== MOBIL DUZELTME - ssu-mobil-ic-punto ------------------------------------------------------------------ SORUN (olculdu, 390px): Studyo, bicimlendirilmis kelimeyi kendi satir ici puntosuyla bir icine sariyor:

Performans

Yukaridaki cihaz bloklari yalnizca h1/h2/h3/p/a ogesini kucultuyor; ICERIDEKI span'e dokunan kural yok. Sonuc: h1 26px'e iniyor ama span 56px kaliyor, kelime iki satira tasiyor (144px) ve katmanin masaustunden gelen sabit yuksekligini (113px) asip alttaki katmanin uzerine biniyor. ssu-punto.js bu isi yalnizca kullanicinin cihaz icin ELLE punto carpani verdigi katmanlarda yapiyor (data-ssu-m-fs / data-ssu-t-fs), yani genel durumda devrede degil. Onun isaretledigi ogelere ([data-ssu-fs="1"]) burada dokunmuyoruz - o sistem kendi degerini uygulamaya devam etsin. 2. KISIM: Yigin (stack) modunda katmanlar position:static oluyor ama masaustunden gelen satir ici `height` degeri kaliyordu; icerik uzayinca yine tasma cikiyordu. Yuksekligi icerige birakiyoruz. OLCUM: 390px'de tasan katman sayisi 20 -> 4 (kalanlar 6-15px, kart kosesi gibi bilincli tasan dekor ogeleri). ================================================================== */ @media (max-width: 991px) { .ws-layer h1 :is(span, strong, b, em, i, mark, u, small):not([data-ssu-fs="1"]), .ws-layer h2 :is(span, strong, b, em, i, mark, u, small):not([data-ssu-fs="1"]), .ws-layer h3 :is(span, strong, b, em, i, mark, u, small):not([data-ssu-fs="1"]), .ws-layer h4 :is(span, strong, b, em, i, mark, u, small):not([data-ssu-fs="1"]), .ws-layer p :is(span, strong, b, em, i, mark, u, small):not([data-ssu-fs="1"]), .ws-layer a :is(span, strong, b, em, i):not([data-ssu-fs="1"]), .ws-layer button :is(span, strong, b, em, i):not([data-ssu-fs="1"]) { font-size: inherit !important; line-height: inherit !important; } } @media (max-width: 991px) { #wSlider-1 .holder:not([data-mobile="keep"]) .ws-layer:not([data-ssu-m="1"]), #wSliderUltimate-1 .holder:not([data-mobile="keep"]) .ws-layer:not([data-ssu-m="1"]) { height: auto !important; min-height: 0 !important; max-height: none !important; } } /* 14.09.2026 — DİKEY TABLET YIĞINI (769-991px), mobildekiyle aynı görünüm. Tema metni yalnızca ≤768px'de ortalıyor (.wSlider .inner); burada da ortalanır. Yatay dizilen listeler (bilgi satırı) ortalı metnin altında sola yaslı kalıyordu. */ @media (min-width: 769px) and (max-width: 991px) { #wSlider-1 .inner, #wSliderUltimate-1 .inner { text-align: center !important; } #wSlider-1 .holder:not([data-mobile="keep"]) .ws-layer ul[style*="flex"], #wSliderUltimate-1 .holder:not([data-mobile="keep"]) .ws-layer ul[style*="flex"] { justify-content: center !important; } }