/* Ana sayfa hizmet kartları hareketli görselleri (önek: sv-). Kaynak: docs/motion/SPEC-v2.md §5 (temel sistem: SPEC.md §5)
   - Her kart 4–5 farklı markanın gerçek işini gösterir; sıra: önce güncel tam hizmet markaları, sonra en yeni eklenen.
   - Künye plakası (.sv-cap) üst üste yığılmış .sv-c satırlarıdır; her satır kendi çekimiyle aynı keyframe'i kullanır,
     böylece künye kesmeyle aynı karede değişir ve her an ekrandaki markayı adlandırır.
   - Çizilmiş yer tutucu, ikon, oynat halkası, metrik yok.
   - Hareket eden her öğede .ap var: style2.css kart (.svc[data-play]) %35 görünür olana dek (.is-in) bunları duraklatır.
   - Döngüler: infinite + yüzdeli keyframe; kesme = %0,01 arayla iki durak. Döngülerde fill-mode yok:
     temel (base) stiller her kartın anahtar karesidir; "hareketi azalt"ta (style2.css genel kuralı) o kare görünür.
   - Yalnızca transform ve opacity canlandırılır (kart 02'de z-index sıralaması da).
   - Netlik (2026-10-13 kalite geçişi): görseller kaynağın kendi çözünürlüğünde, tek sıkıştırma (cwebp q76–86, sharp_yuv).
     Kart 01–03 ve 05'te hiçbir görsel 1,5 kattan fazla büyütülmez (CSS px × DPR / dosya px); küçük kaynaklar için kutu
     ölçüsü ekran yoğunluğuna göre sınırlanır (--phmax, --fcmax, --swmax). Kart 04 kenardan kenara dolar; tavan yok
     (kaynak kareler 396–705 px; büyütme oranları rapor ve kart 04 başlığında). */

.svc-art.sv-art {
    background: var(--sv-bg, #ECEAE4);
    container: sv / size;
    contain: paint;
    --xo: cubic-bezier(.19, 1, .22, 1);
    --xi: cubic-bezier(.55, 0, 1, .45);
    --slide: cubic-bezier(.16, .84, .24, 1);
    --flick: cubic-bezier(.12, .8, .2, 1);
    --wipe: cubic-bezier(.7, 0, .2, 1)
}

.sv-shot {
    position: absolute;
    inset: 0
}

.sv-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block
}

/* künye plakası (antrasit, sol alt) */
.sv-cap {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 6;
    max-width: calc(100% - 16px);
    margin: 0;
    padding: 6px 10px 6px 12px;
    border-radius: 0 8px 0 0;
    background: #373736;
    color: #fff;
    font: 500 12px/1.25 var(--sans);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sv-cap b {
    font: 700 12.5px/1 var(--bold);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-right: 6px
}

/* çok markalı künye: satırlar aynı hücrede üst üste, kesmede sert değişir; plaka en uzun satır kadar geniş kalır (titremez) */
.sv-art .sv-cap {
    display: grid
}

.sv-art .sv-c {
    grid-area: 1/1;
    opacity: 0;
    overflow: hidden;
    text-overflow: ellipsis
}

.sv-art .sv-c1 {
    opacity: 1
}

/* dar kutuda (≤ 340 px) künye iki satır: müşteri üstte, iş altta; metin kesilmez */
@container sv (max-width: 340px) {
    .sv-cap {
        white-space: normal;
        padding: 7px 12px 7px 12px
    }

    .sv-cap b {
        display: block;
        margin: 0 0 3px
    }
}

/* en dar kutuda (≈ 202 px, 1021–1039 px ekran, kart 04/05) iş satırı ("Google görüntülü reklam seti") tek satırda kalsın */
@container sv (max-width: 205.98px) {
    .sv-cap {
        max-width: calc(100% - 6px);
        padding-right: 8px
    }
}

/* =====================================================================
   01 GRAFİK TASARIM: beş markanın kimlik ve basılı işleri. 6,5 sn, sert kesmeli çevirme defteri.
   Sarmak (724) 1,45 sn → Seda Gıda (678) 1,25 → Clinic 1618 (717) 1,30 → Gtech Kimya (686) 1,20 → Duweld (670) 1,30.
   Her çekimde kendi penceresi boyunca doğrusal hafif itme. Anahtar kare: Sarmak.
   ===================================================================== */
.sv-01 .sv-shot,
.sv-01 .sv-shot img,
.sv-01 .sv-c {
    animation: 6.5s linear infinite
}

.sv-01 .sv-shot {
    opacity: 0
}

.sv-01 .sv-x1 {
    opacity: 1
}

.sv-01 .sv-x1,
.sv-01 .sv-c1 {
    animation-name: sv01-w1
}

.sv-01 .sv-x2,
.sv-01 .sv-c2 {
    animation-name: sv01-w2
}

.sv-01 .sv-x3,
.sv-01 .sv-c3 {
    animation-name: sv01-w3
}

.sv-01 .sv-x4,
.sv-01 .sv-c4 {
    animation-name: sv01-w4
}

.sv-01 .sv-x5,
.sv-01 .sv-c5 {
    animation-name: sv01-w5
}

.sv-01 .sv-x1 img {
    transform-origin: 70% 35%;
    animation-name: sv01-p1
}

.sv-01 .sv-x2 img {
    transform-origin: 22% 30%;
    animation-name: sv01-p2
}

.sv-01 .sv-x3 img {
    transform-origin: 35% 45%;
    animation-name: sv01-p3
}

.sv-01 .sv-x4 img {
    transform-origin: 30% 55%;
    animation-name: sv01-p4
}

.sv-01 .sv-x5 img {
    transform-origin: 35% 55%;
    animation-name: sv01-p5
}

@keyframes sv01-w1 {
    0%, 22.3% { opacity: 1 }
    22.31%, 100% { opacity: 0 }
}

@keyframes sv01-w2 {
    0%, 22.3% { opacity: 0 }
    22.31%, 41.53% { opacity: 1 }
    41.54%, 100% { opacity: 0 }
}

@keyframes sv01-w3 {
    0%, 41.53% { opacity: 0 }
    41.54%, 61.53% { opacity: 1 }
    61.54%, 100% { opacity: 0 }
}

@keyframes sv01-w4 {
    0%, 61.53% { opacity: 0 }
    61.54%, 79.99% { opacity: 1 }
    80%, 100% { opacity: 0 }
}

@keyframes sv01-w5 {
    0%, 79.99% { opacity: 0 }
    80%, 100% { opacity: 1 }
}

@keyframes sv01-p1 {
    0% { transform: none }
    22.31%, 100% { transform: scale(1.045) }
}

@keyframes sv01-p2 {
    0%, 22.31% { transform: none }
    41.54%, 100% { transform: scale(1.045) }
}

@keyframes sv01-p3 {
    0%, 41.54% { transform: none }
    61.54%, 100% { transform: scale(1.045) }
}

@keyframes sv01-p4 {
    0%, 61.54% { transform: none }
    80%, 100% { transform: scale(1.045) }
}

@keyframes sv01-p5 {
    0%, 80% { transform: none }
    100% { transform: scale(1.045) }
}

/* =====================================================================
   02 WEB TASARIM: beş gerçek site, deste (7,5 sn). Öndeki pencere 1,3 sn bekler (bir kez kayar), 0,2 sn'de sola çıkar;
   deste altta ilerler. Sıra: Sarmak → Çay Çiftlik → Kale Rezidans → Canbeyli Traktör → Novapia Clinic.
   Künye, çıkan pencere yolun yarısını geçtiği karede (%19,6; ease-in eğrisinde görsel orta nokta) sonraki markaya geçer.
   Faz kaymaları 1,5 sn: t = 0'da w1 önde, w2 ortada, w3 arkada (tam görünür), w4 ve w5 gizli. Duraklatılmış ve
   "hareketi azalt" karesi budur (taban stiller de aynı).
   ===================================================================== */
.sv-02 .sv-win {
    position: absolute;
    left: 6%;
    top: 16%;
    width: 84%;
    height: 77%;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 12px 26px -14px rgba(0, 0, 0, .4);
    animation: sv02-win 7.5s linear infinite
}

.sv-02 .sv-url {
    display: block;
    height: 18px;
    padding: 0 10px;
    background: #F1EFEA;
    font: 500 10.5px/18px var(--sans);
    color: #5F5D58;
    white-space: nowrap;
    overflow: hidden
}

.sv-02 .sv-page {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

/* kaydırma payı: en çok görselin %12'si (Kale %19), ama hiçbir kutu ölçüsünde görselin altı pencerede boşluk bırakmaz
   (sayfa alanı 77cqh − 18px, görsel yüksekliği 84cqw × en-boy oranı --r) */
.sv-02 .sv-page img {
    position: static;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: initial;
    --fl: min(0px, max(-12%, 77cqh - 18px - 84cqw * var(--r)));
    animation: sv02-page 7.5s linear infinite
}

.sv-02 .sv-w3 img {
    --fl: min(0px, max(-19%, 77cqh - 18px - 84cqw * var(--r)));
    animation-name: sv02-page-k
}

.sv-02 .sv-w1 { --r: .5179 }
.sv-02 .sv-w2 { --r: .6490 }
.sv-02 .sv-w3 { --r: .5813 }
.sv-02 .sv-w4 { --r: .5778 }
.sv-02 .sv-w5 { --r: .5695 }

.sv-02 .sv-c {
    animation: sv02-cap 7.5s linear infinite
}

.sv-02 .sv-w1 {
    z-index: 3
}

.sv-02 .sv-w2 {
    z-index: 2;
    transform: translate(1.5%, -9.5%) scale(.965)
}

.sv-02 .sv-w3 {
    z-index: 1;
    transform: translate(3%, -19%) scale(.93)
}

.sv-02 .sv-w4,
.sv-02 .sv-w5 {
    z-index: 0;
    opacity: 0;
    transform: translate(3%, -19%) scale(.93)
}

.sv-02 .sv-w1,
.sv-02 .sv-w1 img,
.sv-02 .sv-c1 {
    animation-delay: 0s
}

.sv-02 .sv-w2,
.sv-02 .sv-w2 img,
.sv-02 .sv-c2 {
    animation-delay: -6s
}

.sv-02 .sv-w3,
.sv-02 .sv-w3 img,
.sv-02 .sv-c3 {
    animation-delay: -4.5s
}

.sv-02 .sv-w4,
.sv-02 .sv-w4 img,
.sv-02 .sv-c4 {
    animation-delay: -3s
}

.sv-02 .sv-w5,
.sv-02 .sv-w5 img,
.sv-02 .sv-c5 {
    animation-delay: -1.5s
}

@keyframes sv02-win {
    0%, 17.33% { transform: none; z-index: 3; opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45) }
    17.34% { z-index: 5 }
    19.98% { transform: translateX(-118%); z-index: 5; opacity: 1 }
    20%, 57.33% { transform: translate(3%, -19%) scale(.93); z-index: 0; opacity: 0 }
    60% { transform: translate(3%, -19%) scale(.93); z-index: 1; opacity: 1 }
    77.33% { transform: translate(3%, -19%) scale(.93); z-index: 1; opacity: 1; animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    77.34% { z-index: 2 }
    80%, 97.33% { transform: translate(1.5%, -9.5%) scale(.965); z-index: 2; opacity: 1; animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    97.34% { z-index: 4 }
    100% { transform: none; z-index: 4; opacity: 1 }
}

@keyframes sv02-page {
    0%, 6% { transform: none; animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    10%, 17.33% { transform: translateY(var(--fl)) }
    20%, 100% { transform: none }
}

@keyframes sv02-page-k {
    0%, 6% { transform: none; animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    10%, 17.33% { transform: translateY(var(--fl)) }
    20%, 100% { transform: none }
}

@keyframes sv02-cap {
    0%, 19.59% { opacity: 1 }
    19.6%, 99.59% { opacity: 0 }
    99.6%, 100% { opacity: 1 }
}

/* =====================================================================
   03 SOSYAL MEDYA: beş markadan birer gönderi, şerit (7,25 sn). Her gönderi 1,1 sn bekler, 0,35 sn'de kayar (--xo);
   künye şerit yolun yarısını geçtiği karede değişir (--xo eğrisi kaymanın %10,5'inde yarıyı geçer → %15,7, %35,7 …). Sıra: Nur Yapı → Canbeyli Traktör → Kale Rezidans → Duweld → Groseri.
   Gönderiler kendi en-boy oranında, yükseklik --ph (78cqh; 2,2× sınırı için ekran yoğunluğuna göre tavanlı).
   Genişlikler --ph cinsinden: 1, 1, 0,7994 (Kale 267×334), 1, 1,0404 (Groseri 309×297). Aralık 4cqw. Adım i, gönderi i'yi ortalar:
   translateX(50cqw − merkezᵢ). Şeridin başında Groseri kopyası var (left: −(1,0404 × --ph + 4cqw)), sonunda Nur ve Canbeyli kopyası:
   %100'deki kare (%0 ile aynı: ortada Nur, solda Groseri, sağda Canbeyli) döngüyü sıçramasız kapatır.
   ===================================================================== */
.sv-03 {
    --phmax: 408px
}

.sv-03 .sv-strip {
    --ph: min(78cqh, var(--phmax));
    position: absolute;
    top: calc(50cqh - var(--ph) / 2);
    left: calc(-4cqw - var(--ph) * 1.0404);
    height: var(--ph);
    display: flex;
    gap: 4cqw;
    transform: translateX(calc(50cqw - var(--ph) * .5));
    animation: sv03-strip 7.25s linear infinite
}

.sv-03 .sv-pre img {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.sv-03 .sv-strip img {
    position: static;
    flex: none;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: initial;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 12px 24px -14px rgba(0, 0, 0, .3)
}

@keyframes sv03-strip {
    0%, 15.17% { transform: translateX(calc(50cqw - var(--ph) * .5)); animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    20%, 35.17% { transform: translateX(calc(46cqw - var(--ph) * 1.5)); animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    40%, 55.17% { transform: translateX(calc(42cqw - var(--ph) * 2.3997)); animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    60%, 75.17% { transform: translateX(calc(38cqw - var(--ph) * 3.2994)); animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    80%, 95.17% { transform: translateX(calc(34cqw - var(--ph) * 4.3196)); animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    100% { transform: translateX(calc(30cqw - var(--ph) * 5.3398)) }
}

.sv-03 .sv-c {
    animation: 7.25s linear infinite
}

.sv-03 .sv-c1 { animation-name: sv03-c1 }
.sv-03 .sv-c2 { animation-name: sv03-c2 }
.sv-03 .sv-c3 { animation-name: sv03-c3 }
.sv-03 .sv-c4 { animation-name: sv03-c4 }
.sv-03 .sv-c5 { animation-name: sv03-c5 }

@keyframes sv03-c1 {
    0%, 15.69% { opacity: 1 }
    15.7%, 95.69% { opacity: 0 }
    95.7%, 100% { opacity: 1 }
}

@keyframes sv03-c2 {
    0%, 15.69% { opacity: 0 }
    15.7%, 35.69% { opacity: 1 }
    35.7%, 100% { opacity: 0 }
}

@keyframes sv03-c3 {
    0%, 35.69% { opacity: 0 }
    35.7%, 55.69% { opacity: 1 }
    55.7%, 100% { opacity: 0 }
}

@keyframes sv03-c4 {
    0%, 55.69% { opacity: 0 }
    55.7%, 75.69% { opacity: 1 }
    75.7%, 100% { opacity: 0 }
}

@keyframes sv03-c5 {
    0%, 75.69% { opacity: 0 }
    75.7%, 95.69% { opacity: 1 }
    95.7%, 100% { opacity: 0 }
}

/* =====================================================================
   04 VİDEO: dört markanın film/video karesi, kutuyu kenardan kenara doldurur (5 sn; her kare 1,25 sn, %5 doğrusal itme, sert kesme).
   Sıra: Nur Yapı tanıtım filmi (drone) → Ely's Cure dikey video → Fullimex tanıtım filmi (553) → Garden Koala YouTube (530).
   Siyah zemin, küçük 9:16 kadraj, köşe işareti yok. Her kare object-fit: cover; --op hem kadrajın odağı hem itmenin merkezi.
   Dikey kutu (masaüstü, 202–268 px geniş) yatay karelerden dikey bir dilim, yatay kutu (≤ 1020 px) dikey videodan yatay bir bant alır.
   Büyütme (CSS px × DPR / kaynak px, itme hariç; ölçüldü): 1440 2x 268×396 → Ely's 1,19, Garden 1,68, Nur 1,76, Fullimex 1,98;
   390 3x 352×234 → Nur 1,56, Fullimex 1,75, Garden 2,08, Ely's 2,34. Projede daha büyük kare yok (video dosyası yok; Nur'un karesi
   SUNUM PDF'inin içindeki özgün 736×468 görüntü, sayfa JPEG'i bunun 1,65 kat büyütülmüşü).
   ===================================================================== */
.sv-04 .sv-fr {
    position: absolute;
    inset: 0;
    overflow: hidden;
    animation: 5s linear infinite
}

.sv-04 .sv-fr img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--op);
    transform-origin: var(--op);
    animation: 5s linear infinite
}

/* odak: dikey kutuda yatay karenin hangi dilimi, yatay kutuda dikey karenin hangi bandı */
.sv-04 .sv-f1 { --op: 36% 50% }   /* Nur: logolu silo binası */
.sv-04 .sv-f2 { --op: 50% 50% }   /* Ely's: logo, %25, ürünler */
.sv-04 .sv-f3 { --op: 54% 50% }   /* Fullimex: "Trade Help Center" ekranı */
.sv-04 .sv-f4 { --op: 50% 50% }   /* Garden Koala: sera, orkideler */

/* ince dikey kutu (masaüstü 202–268 px): ekran yazısı ve başlık bandı ortadan bölünmesin diye kare soldan okunur
   (Fullimex: raf, takvim, çöp kutusu; Garden Koala: bant yazısı baştan başlar, sağda kesilir) */
@container sv (max-aspect-ratio: 3/4) {
    .sv-04 .sv-f3 { --op: 0% 50% }
    .sv-04 .sv-f4 { --op: 0% 50% }
}

@container sv (min-aspect-ratio: 1/1) {
    .sv-04 .sv-f1 { --op: 50% 62% }
    .sv-04 .sv-f2 { --op: 50% 37% }  /* "Flaş indirimler – açılışa özel %25" bandı */
    .sv-04 .sv-f4 { --op: 50% 0% }   /* başlık bandı ("Rengarenk orkidelerimiz seramızda") üstte kalır */
}

.sv-04 .sv-c {
    animation: 5s linear infinite
}

.sv-04 .sv-f2,
.sv-04 .sv-f3,
.sv-04 .sv-f4 {
    opacity: 0
}

.sv-04 .sv-f1,
.sv-04 .sv-c1 {
    animation-name: sv04-w1
}

.sv-04 .sv-f2,
.sv-04 .sv-c2 {
    animation-name: sv04-w2
}

.sv-04 .sv-f3,
.sv-04 .sv-c3 {
    animation-name: sv04-w3
}

.sv-04 .sv-f4,
.sv-04 .sv-c4 {
    animation-name: sv04-w4
}

.sv-04 .sv-f1 img { animation-name: sv04-p1 }
.sv-04 .sv-f2 img { animation-name: sv04-p2 }
.sv-04 .sv-f3 img { animation-name: sv04-p3 }
.sv-04 .sv-f4 img { animation-name: sv04-p4 }

@keyframes sv04-w1 {
    0%, 24.99% { opacity: 1 }
    25%, 100% { opacity: 0 }
}

@keyframes sv04-w2 {
    0%, 24.99% { opacity: 0 }
    25%, 49.99% { opacity: 1 }
    50%, 100% { opacity: 0 }
}

@keyframes sv04-w3 {
    0%, 49.99% { opacity: 0 }
    50%, 74.99% { opacity: 1 }
    75%, 100% { opacity: 0 }
}

@keyframes sv04-w4 {
    0%, 74.99% { opacity: 0 }
    75%, 100% { opacity: 1 }
}

@keyframes sv04-p1 {
    0% { transform: none }
    25%, 100% { transform: scale(1.05) }
}

@keyframes sv04-p2 {
    0%, 25% { transform: none }
    50%, 100% { transform: scale(1.05) }
}

@keyframes sv04-p3 {
    0%, 50% { transform: none }
    75%, 100% { transform: scale(1.05) }
}

@keyframes sv04-p4 {
    0%, 75% { transform: none }
    100% { transform: scale(1.05) }
}

/* =====================================================================
   05 SPONSORLU REKLAM: beş marka, her an ortada tek reklam (8,4 sn). Sağlık sektörü reklamı yok (sahibin talebi 2026-10-13).
   Sarmak Kompresör akış 1,6 sn → Kale Rezidans hikâye 1,8 sn → Nur Yapı Kimyasalları akış 1,6 sn → Occo Global hikâye 1,8 sn →
   Groseri akış 1,6 sn (4:5 kreatif, --fr). Akış/hikâye dönüşümlü, sert kesme; hikâyede CTA kesmeden 0,3 sn sonra yükselir.
   Metrik yok. Hikâye çerçevesi: üstte ince bant, ortada kreatif (205:373, kırpılmaz), altta CTA bandı.
   Akış reklamı: üstte başlık bandı (--ft), kreatif (genişlik --fcs, yükseklik --fcs × --fr), altta CTA bandı (--fb); hikâyenin ortasına hizalı.
   Netlik tavanları (1,5×): --swmax hikâye kreatifi (en dar Kale 205 px), --fcmax akış kreatifi (en dar Groseri 412 px), dosyanın sonunda.
   ===================================================================== */
.sv-05 {
    --fcmax: 412px;
    --swmax: 205px
}

.sv-05 > * {
    --st: 12px;                 /* hikâye üst bandı */
    --sb: 42px;                 /* hikâye alt bandı (CTA) */
    --ch: 28px;                 /* CTA yüksekliği */
    --pr: 56px;                 /* altta künye plakasına bırakılan pay (iki satırlı plaka) */
    --sh: min(88cqh, 94cqh - var(--pr), min(88cqw, var(--swmax)) * 373 / 205 + var(--st) + var(--sb));
    --sw: calc((var(--sh) - var(--st) - var(--sb)) * 205 / 373);
    --sy: max(6cqh, (100cqh - var(--pr) - var(--sh)) / 2);
    /* akış reklamı: kreatif genişliği --fcs (kutu genişliği ve 1,5× tavanıyla sınırlı), oranı --fr (yükseklik / genişlik), kart yüksekliği --fdh */
    --fr: 1;
    --ft: 34px;
    --fb: 36px;
    --fcs: min((var(--sh) - var(--ft) - var(--fb)) / var(--fr), 88cqw, var(--fcmax));
    --fdh: calc(var(--fcs) * var(--fr) + var(--ft) + var(--fb))
}

/* Groseri kreatifi 412×490 (4:5'e yakın, .sv-fd3): --fr kartın kendisinde, --fcs/--fdh de kartta hesaplandığı için ona göre çözülür */
.sv-05 > .sv-fd3 {
    --fr: 1.1893
}

.sv-05 .sv-story {
    position: absolute;
    top: var(--sy);
    left: calc(50% - var(--sw) / 2);
    width: var(--sw);
    height: var(--sh);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    container: svs / inline-size
}

.sv-05 .sv-story::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22%;
    z-index: 1;
    background: linear-gradient(rgba(0, 0, 0, .45), transparent)
}

.sv-05 .sv-cr {
    position: absolute;
    left: 0;
    top: var(--st);
    width: 100%;
    height: auto;
    max-width: none
}

.sv-05 .sv-hd {
    position: absolute;
    top: 7px;
    left: 9px;
    right: 9px;
    z-index: 2;
    display: flex;
    gap: 7px;
    align-items: center;
    color: #fff;
    font: 400 9.5px/1.2 var(--sans);
    white-space: nowrap
}

.sv-05 .sv-av {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    padding: 2px
}

.sv-05 .sv-hd b {
    display: block;
    font: 700 10.5px/1.2 var(--sans)
}

.sv-05 .sv-hd i {
    font-style: normal;
    opacity: .85
}

.sv-05 .sv-cta {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc((var(--sb) - var(--ch)) / 2);
    z-index: 2;
    height: var(--ch);
    border-radius: 6px;
    background: #fff;
    color: #262626;
    font: 600 11px var(--sans);
    line-height: var(--ch);
    text-align: center;
    white-space: nowrap;
    overflow: hidden
}

/* akış reklamı (Meta): beyaz kart, başlık bandı, kare kreatif, gri CTA bandı */
.sv-05 .sv-fd {
    position: absolute;
    top: calc(var(--sy) + (var(--sh) - var(--fdh)) / 2);
    left: calc(50% - var(--fcs) / 2);
    width: var(--fcs);
    height: var(--fdh);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 10px 24px -14px rgba(0, 0, 0, .3);
    opacity: 0;
    container: svs / inline-size
}

.sv-05 .sv-fd .sv-hd {
    top: calc((var(--ft) - 24px) / 2);
    color: #262626
}

.sv-05 .sv-fd .sv-av {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1)
}

/* kare kreatif: yükseklik genişlikten (kart genişliği = --fcs); kartın içinde cq birimi kartın kendisine göre çözülürdü */
.sv-05 .sv-fd .sv-cr {
    position: absolute;
    left: 0;
    top: var(--ft);
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    max-width: none
}

.sv-05 .sv-fd .sv-cta {
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--fb);
    line-height: var(--fb);
    border-radius: 0;
    background: #F0F2F5;
    text-align: left;
    padding: 0 10px;
    animation: none;
    transform: none
}

.sv-05 .sv-story,
.sv-05 .sv-fd,
.sv-05 .sv-c,
.sv-05 .sv-story .sv-cta {
    animation-duration: 8.4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

/* anahtar kare (duraklatılmış / hareketi azalt): Sarmak akış reklamı */
.sv-05 .sv-story {
    opacity: 0
}

.sv-05 .sv-fd1 {
    opacity: 1
}

.sv-05 .sv-fd1,
.sv-05 .sv-c1 {
    animation-name: sv05-1
}

.sv-05 .sv-st1,
.sv-05 .sv-c2 {
    animation-name: sv05-2
}

.sv-05 .sv-fd2,
.sv-05 .sv-c3 {
    animation-name: sv05-3
}

.sv-05 .sv-st2,
.sv-05 .sv-c4 {
    animation-name: sv05-4
}

.sv-05 .sv-fd3,
.sv-05 .sv-c5 {
    animation-name: sv05-5
}

.sv-05 .sv-st1 .sv-cta {
    animation-name: sv05-cta1
}

.sv-05 .sv-st2 .sv-cta {
    animation-name: sv05-cta2
}

/* kesmeler: 1,6 / 3,4 / 5,0 / 6,8 sn → %19,05 / %40,48 / %59,52 / %80,95 */
@keyframes sv05-1 {
    0%, 19.04% { opacity: 1 }
    19.05%, 100% { opacity: 0 }
}

@keyframes sv05-2 {
    0%, 19.04% { opacity: 0 }
    19.05%, 40.47% { opacity: 1 }
    40.48%, 100% { opacity: 0 }
}

@keyframes sv05-3 {
    0%, 40.47% { opacity: 0 }
    40.48%, 59.51% { opacity: 1 }
    59.52%, 100% { opacity: 0 }
}

@keyframes sv05-4 {
    0%, 59.51% { opacity: 0 }
    59.52%, 80.94% { opacity: 1 }
    80.95%, 100% { opacity: 0 }
}

@keyframes sv05-5 {
    0%, 80.94% { opacity: 0 }
    80.95%, 100% { opacity: 1 }
}

/* hikâye CTA: kesmeden 0,3 sn sonra 0,4 sn'de yükselir, bir kez dürter, hikâye bitene dek durur */
@keyframes sv05-cta1 {
    0%, 22.62% { transform: translateY(160%); animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    27.38%, 33.33% { transform: none; animation-timing-function: ease-in-out }
    35.12% { transform: translateY(-3px) }
    36.9%, 100% { transform: none }
}

@keyframes sv05-cta2 {
    0%, 63.1% { transform: translateY(160%); animation-timing-function: cubic-bezier(.19, 1, .22, 1) }
    67.86%, 73.81% { transform: none; animation-timing-function: ease-in-out }
    75.6% { transform: translateY(-3px) }
    77.38%, 100% { transform: none }
}

/* yatay kutuda künye plakası, en uzun satır sığdığında tek satır; tek satırlı plaka reklama daha çok yükseklik bırakır */
@container sv (min-aspect-ratio: 1/1) and (min-width: 300px) {
    .sv-05 .sv-cap {
        white-space: nowrap;
        padding: 6px 10px 6px 12px
    }

    .sv-05 .sv-cap b {
        display: inline;
        margin: 0 6px 0 0
    }

    .sv-05 > * {
        --pr: 38px
    }
}

/* alçak kutu (≤ 300 px yükseklik): hikâye bantları ve CTA küçük */
@container sv (max-height: 300px) {
    .sv-05 > * {
        --st: 9px;
        --sb: 28px;
        --ch: 20px
    }
}

/* çok alçak kutu (≤ 240 px): akış reklamının CTA bandı kalkar, kreatif büyük kalır */
@container sv (max-height: 240px) {
    .sv-05 > * {
        --ft: 28px;
        --fb: 0px
    }

    .sv-05 .sv-fd .sv-cta {
        display: none
    }
}

/* hikâye / akış kartı genişliğine göre başlık ve CTA ölçüsü: "Daha Fazla Bilgi Al" ve marka adı hiçbir genişlikte kesilmez
   (metin genişlikleri: CTA 11 px ≈ 100, 10 px ≈ 91, 8,5 px ≈ 78, 8 px ≈ 73; ad 10,5 px ≈ 75, 9,5 px ≈ 68, 8,5 px ≈ 60, 8 px ≈ 56) */
/* dar akış kartı (telefonda ≈ 130 px): marka adı ("Nur Yapı Kimyasalları", "Sarmak Kompresör") kenara değmesin */
@container svs (min-width: 124px) and (max-width: 149.98px) {
    .sv-05 .sv-fd .sv-hd {
        left: 7px;
        right: 7px;
        gap: 5px
    }

    .sv-05 .sv-fd .sv-av {
        width: 20px;
        height: 20px;
        padding: 1.5px
    }

    .sv-05 .sv-fd .sv-hd b {
        font-size: 9.5px
    }
}

@container svs (max-width: 123.98px) {
    .sv-05 .sv-hd {
        left: 7px;
        right: 7px;
        gap: 5px;
        font-size: 8.5px
    }

    .sv-05 .sv-av {
        width: 20px;
        height: 20px;
        padding: 1.5px
    }

    .sv-05 .sv-hd b {
        font-size: 9.5px
    }

    .sv-05 .sv-cta {
        left: 6px;
        right: 6px;
        border-radius: 5px;
        font-size: 10px
    }
}

@container svs (max-width: 107.98px) {
    .sv-05 .sv-hd {
        top: 4px;
        left: 5px;
        right: 3px;
        gap: 4px;
        font-size: 7.5px
    }

    .sv-05 .sv-av {
        width: 15px;
        height: 15px;
        padding: 1px
    }

    .sv-05 .sv-hd b {
        font-size: 8.5px;
        letter-spacing: -.01em
    }

    .sv-05 .sv-cta {
        left: 4px;
        right: 4px;
        border-radius: 4px;
        font-size: 8.5px;
        letter-spacing: -.01em
    }
}

@container svs (max-width: 89.98px) {
    .sv-05 .sv-hd {
        left: 4px;
        right: 3px;
        gap: 3px;
        font-size: 7px
    }

    .sv-05 .sv-av {
        width: 14px;
        height: 14px
    }

    .sv-05 .sv-hd b {
        font-size: 8px
    }

    .sv-05 .sv-cta {
        font-size: 8px
    }
}

/* Groseri akış kreatifi 412×490: kare değil */
.sv-05 .sv-fd3 .sv-cr {
    aspect-ratio: 412 / 490
}

/* dar akış kartı (≤ 180 px; telefonda ≈ 85–130 px): uzun sayfa adı ("Nur Yapı Kimyasalları") kesilmez, iki satıra iner */
@container svs (max-width: 179.98px) {
    .sv-05 .sv-fd .sv-hd {
        top: 2px;
        white-space: normal
    }

    .sv-05 .sv-fd .sv-hd > span {
        min-width: 0
    }

    .sv-05 .sv-fd .sv-hd b {
        line-height: 1.06
    }
}

/* =====================================================================
   Ekran yoğunluğuna göre tavanlar (1,5× kuralı: CSS px × DPR ≤ 1,5 × dosya px; her kademe kendi en yüksek DPR'sine göre):
   --phmax  kart 03 gönderi yüksekliği, en küçük gönderi Duweld 272 px → 1,5 × 272 / DPR
   --fcmax  kart 05 akış kreatifi genişliği, en dar Groseri 412 px → 1,5 × 412 / DPR
   --swmax  kart 05 hikâye kreatifi genişliği, en dar Kale 205 px → 1,5 × 205 / DPR
   ===================================================================== */
@media (min-resolution: 1.01dppx) {
    .sv-03 { --phmax: 272px }
}

@media (min-resolution: 1.5dppx) {
    .sv-03 { --phmax: 204px }
    .sv-05 { --fcmax: 309px; --swmax: 153px }
}

@media (min-resolution: 2.01dppx) {
    .sv-03 { --phmax: 163px }
    .sv-05 { --fcmax: 247px; --swmax: 123px }
}

@media (min-resolution: 2.51dppx) {
    .sv-03 { --phmax: 136px }
    .sv-05 { --fcmax: 206px; --swmax: 102px }
}

@media (min-resolution: 3.01dppx) {
    .sv-03 { --phmax: 117px }
    .sv-05 { --fcmax: 177px; --swmax: 88px }
}