/* ========================================================================== ALICI CİHAZ VE UYGULAMA SAYFALARI — bileşen stilleri (FAZ 2 · 12.08.2026) Kaynak: prototip/vy-prototip.css alıcı bölümleri, birebir taşındı. Yüklenme: head.php · $needsUrunBloklari · vy-duzeltmeler ve vy-anasayfa'dan SONRA gelir. Token'lar (--vyp-kart-r, --vyp-golge…) vy-anasayfa.css'ten. Kapsam: A6 künye · A7 bildirim · A8 belge · A9 açı gezgini · B9 teknik künye B10 şema · B3 ikili kart · B4 ürün varyantı · B5 yan başlıklı + ürün hero. ========================================================================== */ /* ========================================================================== ALICI CİHAZ VE UYGULAMA SAYFALARI — 5 yeni bileşen 12.08.2026 · wireframe: vycall-alici-uygulama-wireframe.html -------------------------------------------------------------------------- Katalog 15 → 20. Eklenenler: A6 künye şeridi · A7 bildirim animasyonu · A8 belge kartı B9 teknik künye tablosu · B10 akış şeması Ayrıca B1'in cihaz varyantı (üç açılı ürün sahnesi) ve B4'ün dört sütunlu varyantı burada tanımlı. Yeni renk YOK — hepsi mevcut token setinden. ========================================================================== */ /* -------------------------------------------------------------------------- B1 varyant C · ÜRÜN HERO — cihaz sahnesi + üç açı Anasayfa hero'sundan farkı: hareket sahnesi yerine ÜRÜN duruyor ve altında açı noktaları var. Zemin çok açık bir dikey geçiş — ürünü kesmeden ayırır. -------------------------------------------------------------------------- */ .vyp-urun-hero { padding-top: clamp(120px, 12vw, 170px); padding-bottom: 0; } .vyp-urun-hero .vyp-baslik { margin-bottom: 26px; } .vyp-urun-hero .vyp-baslik .title { margin-bottom: 12px; } .vyp-hero-eylemler { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } .vyp-hero-eylemler .vyp-ikincil { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 13px 26px; font-weight: 600; font-size: 15px; color: var(--title); background: #fff; transition: border-color .25s ease, color .25s ease; min-height: 48px; } .vyp-hero-eylemler .vyp-ikincil:hover { border-color: var(--theme); color: var(--theme-a11y-text); } .vyp-urun-sahne { position: relative; margin-top: 22px; background: linear-gradient(180deg, #FBFCFD, #F1F5F9); border-radius: var(--vyp-kart-r); display: grid; place-items: center; /* Sahne sıkıldı (12.08.2026 revizesi): ürünün etrafındaki boşluk ilk ekranın yarısını yiyordu. Ürün yukarı geldi, hero tek bakışta okunuyor. */ min-height: clamp(230px, 25vw, 340px); padding: 16px 60px; overflow: hidden; } /* Açılar üst üste durur; yalnız aktif olan görünür — slider kütüphanesi yok, üç ve bir sınıf. Kaydırıcı eklemek CLS getiriyordu. */ /* DOĞRUDAN ÇOCUK zinciri şart: `.vyp-urun-sahne img` yazmak çerçevenin içindeki ürün görselini de yakalıyor ve onu görünmez yapıyordu. Katalogda kayıtlı tuzağın aynısı — blok içinde element seçicisi yazma. */ .vyp-urun-sahne > img { grid-area: 1 / 1; max-width: min(100%, 430px); height: auto; opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .45s ease; } .vyp-urun-sahne > img.aktif { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- A9 · ÜRÜN AÇI GEZGİNİ — kalıp, her ürün sayfasında aynı Nokta ve "Önden / Yandan" etiketi kaldırıldı (12.08.2026 kararı): sahnede yalnız ürün kalsın, gezinme görünmeden dursun. Sağ ve soldan iki minimal şeffaf ok; ürün değişir, çerçeve sabit kalır. Tek görsel varsa oklar hiç basılmaz — boş gezgin gösterilmez. -------------------------------------------------------------------------- */ .vyp-aci-ok { position: absolute; top: 50%; transform: translateY(-50%); /* Dokunma hedefi 44px; görünen daire 40px, gerisi şeffaf tampon. */ width: 44px; height: 44px; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; z-index: 3; background: transparent; -webkit-tap-highlight-color: transparent; } .vyp-aci-ok::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 1px solid rgba(40, 44, 50, .07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .25s ease, border-color .25s ease, transform .25s ease; } .vyp-aci-ok svg { position: relative; width: 17px; height: 17px; color: #5A6B7B; transition: color .25s ease; } .vyp-aci-ok:hover::before { background: #fff; border-color: rgba(28, 146, 233, .3); transform: scale(1.06); } .vyp-aci-ok:hover svg { color: var(--theme-a11y-text); } .vyp-aci-ok:focus-visible::before { outline: 2px solid var(--theme); outline-offset: 2px; } .vyp-aci-ok--geri { left: 10px; } .vyp-aci-ok--ileri { right: 10px; } @media (max-width: 767px) { .vyp-aci-ok--geri { left: 4px; } .vyp-aci-ok--ileri { right: 4px; } .vyp-aci-ok::before { background: rgba(255, 255, 255, .72); } } /* -------------------------------------------------------------------------- A6 · KÜNYE ŞERİDİ — hero'nun altına oturur Rakam ZORUNLU değil: uygulama sayfalarında kutular yetenek yazar ("USB ve Bluetooth", "iOS ve Android"). Bu yüzden değer punto'su rakama göre değil, en uzun ifadeye göre ayarlandı. -------------------------------------------------------------------------- */ /* Künye şeridi hero'ya YAPIŞMAZ (13.08.2026, Güneş kararı): ürün sahnesiyle şerit arasında nefes olur. Blok arası tam boşluğun (--vyp-bosluk) yarısı — ikisi hâlâ aynı öbeğin parçası gibi okunur ama sınırları ayrışır. Tek kural, künye şeridi taşıyan bütün ürün/ESL sayfalarında geçerli. */ .vyp-kunye-blok { padding-top: clamp(30px, 3.6vw, 52px); } .vyp-kunye { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); background: #fff; overflow: hidden; } .vyp-kunye--3 { grid-template-columns: repeat(3, 1fr); } .vyp-kunye--4 { grid-template-columns: repeat(4, 1fr); } .vyp-kunye-kutu { display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center; padding: 26px 18px; border-right: 1px solid var(--border); } .vyp-kunye-kutu:last-child { border-right: 0; } .vyp-kunye-deger { font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; line-height: 1.15; color: var(--title); letter-spacing: -.01em; } .vyp-kunye-etiket { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #7A8592; font-weight: 600; } /* Doğrulanmamış değer: uydurma rakam yerine boş kutu. Yayına çıkarken bu kutular tek tek dolar. */ .vyp-kunye-kutu--bos .vyp-kunye-deger { color: #C7CFD8; } /* -------------------------------------------------------------------------- A7 · BİLDİRİM ANİMASYONU — tek kod, üç çerçeve Wireframe'in çekirdek fikri: çağrının nasıl düştüğü video ile değil kodla anlatılır. Aynı kart üç yerde yaşar: .vyp-cerceve--ekran → alıcı cihaz, kart yukarıdan iner .vyp-cerceve--telefon → VyApp, bildirim üstten düşer .vyp-cerceve--pencere → VyBox, Windows bildirimi sağ alttan çıkar Video yok: ağırlık yok, LCP'yi geciktirmez, metni güncellenebilir. -------------------------------------------------------------------------- */ .vyp-cerceve { position: relative; background: #F7FAFD; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); overflow: hidden; isolation: isolate; } /* Çerçevenin oranı sabit (CLS sıfır), görselin oranı serbest: kare ürün fotoğrafı 4/3 çerçevede alttan kesiliyordu. contain ile tamamı görünür, artan yer çerçeve zeminiyle dolar. */ .vyp-cerceve img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .vyp-cerceve--telefon img { object-fit: cover; } .vyp-cerceve--ekran { aspect-ratio: 4 / 3; } .vyp-cerceve--telefon { max-width: 300px; margin-inline: auto; aspect-ratio: 9 / 17; border-radius: 30px; border-width: 8px; border-color: #E4E9EF; background: #fff; } .vyp-cerceve--pencere { aspect-ratio: 16 / 10; } .vyp-bildirim { position: absolute; z-index: 2; display: grid; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 26, 38, .16); padding: 12px 14px; min-width: 190px; opacity: 0; pointer-events: none; } .vyp-bildirim b { font-size: 14px; color: var(--title); line-height: 1.25; } .vyp-bildirim span { font-size: 12px; color: #5A6B7B; } .vyp-bildirim-sayac { font-variant-numeric: tabular-nums; color: var(--theme-a11y-text); font-weight: 700; } /* Yerleşim çerçeveye göre değişir — animasyon aynı kalır */ .vyp-cerceve--ekran .vyp-bildirim, .vyp-cerceve--telefon .vyp-bildirim { left: 12px; right: 12px; top: 14px; } .vyp-cerceve--pencere .vyp-bildirim { right: 14px; bottom: 14px; width: 210px; } .vyp-cerceve.oynat .vyp-bildirim { animation: vyp-dus .55s cubic-bezier(.2, .8, .25, 1) forwards; } .vyp-cerceve--pencere.oynat .vyp-bildirim { animation-name: vyp-sagalt; } /* Claude Design animasyon gömme çerçevesi (12.08.2026, revize aynı gün): zemin ve kenarlık YOK — animasyon blok zemininde serbest durur (Güneş kararı: beyaz kutu kalktı). 4/3 oran: kare sahne 1/1'de bloğu çok yükseltiyordu; sahne kendi içinde yükseklikten ölçeklenir, kırpılmaz. */ .vyp-anim-cerceve { position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; } .vyp-anim-cerceve iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; } @keyframes vyp-dus { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } } @keyframes vyp-sagalt { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- A8 · BELGE VE İNDİRME KARTI Teknik künyenin yanında sütun olur. Föy zorunlu (donanım sayfalarında); uygulama sayfalarında yerini mağaza rozetleri ve kılavuz alır. -------------------------------------------------------------------------- */ .vyp-belgeler { display: grid; gap: 10px; align-content: start; } .vyp-belge { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; min-height: 64px; transition: border-color .25s ease, box-shadow .25s ease; } .vyp-belge:hover { border-color: var(--theme); box-shadow: var(--vyp-golge); } .vyp-belge-ikon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--theme3); color: var(--theme-a11y-text); display: grid; place-items: center; } .vyp-belge-ikon svg { width: 21px; height: 21px; } .vyp-belge-metin { display: grid; gap: 2px; } .vyp-belge-metin b { font-size: 14px; color: var(--title); line-height: 1.3; } .vyp-belge-metin span { font-size: 12px; color: #7A8592; } /* -------------------------------------------------------------------------- B9 · TEKNİK KÜNYE TABLOSU Sol sütun tablo, sağ sütun belgeler. Doğrulanmamış satır soluk kalır — uydurma değer yazmaktansa eksik göstermek yeğdir. -------------------------------------------------------------------------- */ .vyp-teknik { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; } .vyp-teknik-tablo { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); overflow: hidden; } .vyp-teknik-tablo th, .vyp-teknik-tablo td { padding: 14px 18px; text-align: left; font-size: 14.5px; border-bottom: 1px solid #F0F2F5; vertical-align: top; } .vyp-teknik-tablo th { width: 42%; color: var(--title); font-weight: 650; } .vyp-teknik-tablo td { color: #5A6B7B; } .vyp-teknik-tablo tr:last-child th, .vyp-teknik-tablo tr:last-child td { border-bottom: 0; } .vyp-teknik-tablo tr:nth-child(even) { background: #FCFDFE; } .vyp-teknik-bos td { color: #C7CFD8; } /* B9 künye tablosunun ÜÇLÜ varyantı (13.08.2026) — karşılaştırma için: satır başlığı + iki seçenek. Yeni bileşen değil; tek fark sütun genişliği ve başlık satırının varlığı. Dar ekranda tablo kendi içinde kayar. */ .vyp-teknik-sarmal { width: 100%; overflow-x: auto; } .vyp-teknik-tablo--uclu { min-width: 560px; } .vyp-teknik-tablo--uclu th { width: auto; } .vyp-teknik-tablo--uclu thead th { background: #F7FAFD; font-size: 13px; letter-spacing: .01em; text-transform: none; color: var(--title); } .vyp-teknik-tablo--uclu tbody th { width: 26%; } /* -------------------------------------------------------------------------- B10 · AKIŞ ŞEMASI — kodla çizilir, ekran görüntüsü değil Dar ekranda şema yatay kayar; sayfanın kendisi ASLA kaymaz. -------------------------------------------------------------------------- */ .vyp-sema { background: #fff; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); padding: clamp(18px, 2.4vw, 32px); box-shadow: var(--vyp-golge); overflow-x: auto; } .vyp-sema svg { display: block; width: 100%; min-width: 620px; height: auto; } .vyp-sema-dipnot { margin: 14px auto 0; max-width: 760px; text-align: center; font-size: 13.5px; color: #7A8592; line-height: 1.6; } /* B4 · dört sütunlu varyant — alıcı sayfalarında sektör sayısı 6 değil 4 */ .vyp-sektor-izgara--dort { grid-template-columns: repeat(4, 1fr); } /* -------------------------------------------------------------------------- RESPONSIVE — kırılma noktaları 1200 · 992 · 768 · 480 -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .vyp-teknik { grid-template-columns: minmax(0, 1fr) 260px; } .vyp-sektor-izgara--dort { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .vyp-teknik { grid-template-columns: 1fr; } .vyp-belgeler { grid-template-columns: repeat(2, 1fr); } .vyp-kunye--4 { grid-template-columns: repeat(2, 1fr); } /* İki satıra düşen künyede ortadaki dikey çizgi asılı kalıyordu */ .vyp-kunye--4 .vyp-kunye-kutu:nth-child(2) { border-right: 0; } .vyp-kunye--4 .vyp-kunye-kutu:nth-child(-n+2) { border-bottom: 1px solid var(--border); } } @media (max-width: 767px) { .vyp-urun-hero { padding-top: 104px; } .vyp-urun-sahne { min-height: 240px; padding: 20px 16px; } .vyp-kunye--3 { grid-template-columns: 1fr; } .vyp-kunye--3 .vyp-kunye-kutu { border-right: 0; border-bottom: 1px solid var(--border); } .vyp-kunye--3 .vyp-kunye-kutu:last-child { border-bottom: 0; } /* Mobilde kutu satıra döner. Etiket ÖNCE gelir: değer boşken ("—") satırın başında yalnız bir tire duruyor ve ne olduğu anlaşılmıyordu. */ .vyp-kunye-kutu { padding: 16px 14px; flex-direction: row-reverse; justify-content: space-between; align-items: center; text-align: left; gap: 14px; } .vyp-kunye-deger { font-size: 15px; text-align: right; } .vyp-kunye-etiket { font-size: 11px; } .vyp-belgeler { grid-template-columns: 1fr; } .vyp-teknik-tablo th, .vyp-teknik-tablo td { padding: 12px 14px; font-size: 13.5px; } .vyp-teknik-tablo th { width: 46%; } .vyp-sektor-izgara--dort { grid-template-columns: 1fr; } .vyp-cerceve--telefon { max-width: 240px; } /* Birincil düğme ilk ekranda kalmalı — ikincil eylem metin linkine iner */ .vyp-hero-eylemler { gap: 10px; } .vyp-hero-eylemler .vyp-ikincil { border: 0; padding: 8px 4px; min-height: 44px; color: var(--theme-a11y-text); text-decoration: underline; text-underline-offset: 3px; } } @media (max-width: 479px) { .vyp-kunye--4 { grid-template-columns: 1fr; } .vyp-kunye--4 .vyp-kunye-kutu { border-right: 0; border-bottom: 1px solid var(--border); } .vyp-kunye--4 .vyp-kunye-kutu:last-child { border-bottom: 0; } } /* Hareketi kapatmış kullanıcı: bildirim son karesinde durur, düşmez */ @media (prefers-reduced-motion: reduce) { .vyp-cerceve .vyp-bildirim { opacity: 1; animation: none !important; } } /* Ok düğmelerindeki ekran okuyucu metni — tema bu sınıfı taşıyor ama prototip sayfası temanın gövde sınıflarını almadan da doğru çalışmalı. */ .vyp-aci-ok .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- B5 · YAN BAŞLIKLI VARYANT (12.08.2026) Wireframe'de bu blokların başlığı sayfanın ortasında değil, medyanın SAĞINDA duruyor — "solda ne olduğunu gösteriyoruz, sağda anlatıyoruz". Ortalı üst başlık kullanılınca blok ikiye bölünmüş görünüyordu. Üç yerde birden kullanılır: çağrı ekranı animasyonu · yönetim paneli · VyBox masaüstü bildirimi. -------------------------------------------------------------------------- */ .vyp-marka--yan { align-items: center; } .vyp-yan-govde { display: grid; gap: 0; } .vyp-yan-govde .vyp-ust-etiket { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-a11y-text); margin: 0 0 10px; } .vyp-yan-govde h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.02em; color: var(--title); margin: 0 0 12px; font-weight: 700; } .vyp-yan-govde > p { font-size: 16px; line-height: 1.65; color: #5A6B7B; margin: 0 0 18px; max-width: 46ch; } .vyp-yan-govde .vyp-madde { margin: 0; } /* -------------------------------------------------------------------------- B4 · ÜRÜN VARYANTI — minimal ürün ailesi kartı (12.08.2026 revizesi) Açıklama paragrafı ve "İnceleyin →" linki kaldırıldı: kartın kendisi link, üstünde yalnız model adı duruyor. Amaç "bu ne" sorusunu tek bakışta yanıtlamak; anlatım alt sayfada yapılıyor. Sektör kartından farkı ZEMİN: sektör kartı mekân fotoğrafı taşır ve koyu gradyan + beyaz metin ister. Ürün fotoğrafı beyaz zeminlidir — üstüne beyaz metin okunmaz. Bu yüzden metin ÜSTTE, koyu renkte ve beyazdan şeffafa inen bir perdenin üzerinde duruyor; ürün görselin ortasında serbest kalıyor. -------------------------------------------------------------------------- */ .vyp-urun-izgara { display: grid; gap: clamp(14px, 1.8vw, 22px); } .vyp-urun-izgara--dort { grid-template-columns: repeat(4, 1fr); } .vyp-urun-izgara--uc { grid-template-columns: repeat(3, 1fr); } .vyp-urun-kart { position: relative; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); background: #fff; aspect-ratio: 1200 / 694; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .vyp-urun-kart:hover { border-color: var(--theme); box-shadow: var(--vyp-golge-hover); transform: translateY(-3px); } .vyp-urun-kart img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .vyp-urun-kart:hover img { transform: scale(1.03); } .vyp-urun-ad { position: absolute; inset: 0 0 auto 0; z-index: 2; padding: 16px 18px 26px; font-size: clamp(15px, 1.3vw, 17px); font-weight: 700; line-height: 1.25; color: var(--title); letter-spacing: -.01em; background: linear-gradient(180deg, rgba(255, 255, 255, .96) 38%, rgba(255, 255, 255, 0)); } /* Kare ürün fotoğrafı taşıyan kart (12.08.2026): B300 · F100 · P200-PL gibi temsilci ürün fotoğrafları landscape karta cover ile kırpılıyordu. contain ile ürünün tamamı görünür; üst dolgu ad perdesinin altında pay bırakır, beyaz zeminli fotoğraf beyaz kartla kaynaşır. */ .vyp-urun-kart--urun img { object-fit: contain; padding: 13% 10% 4%; } /* Ok yalnız hover'da belirir — kart zaten tıklanabilir, sürekli ok gürültü. */ .vyp-urun-ad::after { content: '→'; margin-left: 7px; color: var(--theme-a11y-text); opacity: 0; transform: translateX(-4px); display: inline-block; transition: opacity .25s ease, transform .25s ease; } .vyp-urun-kart:hover .vyp-urun-ad::after { opacity: 1; transform: none; } @media (max-width: 991px) { .vyp-urun-izgara--dort, .vyp-urun-izgara--uc { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .vyp-urun-izgara--dort, .vyp-urun-izgara--uc { grid-template-columns: 1fr; } .vyp-urun-ad { padding: 14px 16px 24px; } } /* -------------------------------------------------------------------------- B3 · LİSTELİ MEDYA KARTI, İKİLİ DİZİLİM (12.08.2026) Anasayfadaki "Sisteminizi Kurun" üçlüsünün aynı kartı, iki sütunda. Panel ve ağ geçidi için: alt alta dururken ayrı iki bölüm gibi okunuyordu, yan yana eşit ağırlıkta duruyorlar. -------------------------------------------------------------------------- */ .vyp-kurulum--ikili { grid-template-columns: repeat(2, 1fr); } /* Kart yüksekliğini içerik belirler; iki kartın madde sayısı farklı olduğunda alt kenarlar yine hizalı bitsin diye gövde esner. */ .vyp-kurulum--ikili .vyp-kurulum-kart { display: flex; flex-direction: column; } .vyp-kurulum--ikili .vyp-kurulum-govde { display: flex; flex-direction: column; flex: 1; } .vyp-kurulum--ikili .vyp-kurulum-govde .vyp-link { margin-top: auto; padding-top: 14px; } .vyp-kurulum-aciklama { font-size: 15px; line-height: 1.6; color: #5A6B7B; margin: 0 0 14px; } @media (max-width: 767px) { .vyp-kurulum--ikili { grid-template-columns: 1fr; } } /* ========================================================================== BUTON (CİHAZ) SAYFALARI — ek bileşenler (FAZ 3 · 12.08.2026) Kaynak: prototip/vy-prototip.css buton bölümü, birebir taşındı. A11 kırıntı · A6 künye 5 kutu · B11 yaşam sahnesi · A10 üç adım şeridi. ========================================================================== */ /* -------------------------------------------------------------------------- A11 · EKMEK KIRINTISI Canlı sitenin dilini izler: ORTALI · ayırıcı "/" · son öğe marka mavisi. Sol hizalı, "›" ayırıcılı ilk deneme sitenin diline yabancı kalıyordu. Canlıda kırıntı `banner.php` içinde, H1'in ALTINDA duruyor ve iki seviyeli (Anasayfa / Ürün). Ürün sayfasında hero zaten başlığı taşıdığı için burada hero'nun İÇİNDE, eyebrow'un üstünde yaşıyor — banner ikinci kez basılmaz, ürün adı sayfada iki kez geçmez. Kategori adımı eklendi: iç link değeri. -------------------------------------------------------------------------- */ .vyp-kirinti { /* Küçük ve silik (13px, mobilde 12px): kırıntı bir yön levhasıdır, sayfanın girişi değil. Başlığın HEMEN ALTINDA durur — canlıdaki banner'da da sıra böyle. Hero tamamen ortalı bir kompozisyon olduğu için burada da ortalı; tek satırı sağa yaslamak dengeyi bozuyordu. */ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin: 2px 0 0; font-size: 13px; color: #7A8592; } .vyp-baslik .vyp-kirinti { margin-bottom: 14px; } .vyp-kirinti span, .vyp-kirinti a { display: inline-flex; align-items: center; gap: 6px; } .vyp-kirinti a { color: #5A6B7B; } .vyp-kirinti a:hover { color: var(--theme-a11y-text); text-decoration: underline; } .vyp-kirinti .vyp-kirinti-ayrac { color: #A9B4BF; } /* Bulunulan sayfa: canlıdaki gibi marka mavisi, link değil */ .vyp-kirinti [aria-current] { color: var(--theme); } @media (max-width: 575px) { .vyp-kirinti { font-size: 12px; gap: 4px; } } /* -------------------------------------------------------------------------- A6 · KÜNYE ŞERİDİ — 5 kutuya kadar Wireframe: sayı sabit değil, 3–5 arası. İlk kutu HER ZAMAN menzil. Beşli mobilde 3+2 diziliyor (wireframe kuralı). -------------------------------------------------------------------------- */ .vyp-kunye--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1199px) { .vyp-kunye--5 { grid-template-columns: repeat(3, 1fr); } .vyp-kunye--5 .vyp-kunye-kutu:nth-child(3) { border-right: 0; } .vyp-kunye--5 .vyp-kunye-kutu:nth-child(-n+3) { border-bottom: 1px solid var(--border); } } @media (max-width: 767px) { .vyp-kunye--5 { grid-template-columns: 1fr; } .vyp-kunye--5 .vyp-kunye-kutu { border-right: 0; border-bottom: 1px solid var(--border); } .vyp-kunye--5 .vyp-kunye-kutu:last-child { border-bottom: 0; } } /* -------------------------------------------------------------------------- B11 · YAŞAM SAHNESİ Kenardan kenara tek kare: cihaz gerçek mekânda, üstünde tek cümle. Sektör kartından (B4) farkı ölçek — o ızgarada küçük kart, bu tam genişlikte tek sahne. Ürün fotoğrafı "bu ne"yi anlatır, bu kare "bu bende nasıl durur"u. Endüstriyel cihazlarda sahayı gösterir: üretim hattı, depo, forklift. -------------------------------------------------------------------------- */ .vyp-sahne-blok { padding: 0; } .vyp-sahne { position: relative; isolation: isolate; min-height: clamp(280px, 34vw, 460px); display: flex; align-items: flex-end; overflow: hidden; background: #0F2233; } .vyp-sahne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .vyp-sahne::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15, 34, 51, .78), rgba(15, 34, 51, .12) 58%, rgba(15, 34, 51, .04)); } .vyp-sahne-yazi { max-width: 620px; color: #fff; padding: clamp(24px, 4vw, 52px) var(--vyp-kenar); margin-inline: auto; width: 100%; max-width: var(--vyp-hat); } .vyp-sahne-yazi h2 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -.02em; color: #fff; margin: 0 0 10px; font-weight: 700; text-shadow: 0 1px 14px rgba(0, 0, 0, .3); } .vyp-sahne-yazi p { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; margin: 0; color: rgba(255, 255, 255, .92); max-width: 56ch; } /* -------------------------------------------------------------------------- A10 · ÜÇ ADIM ŞERİDİ "Butona basılır → Sinyal gider → Alıcıya düşer". Uyumluluk bloğunun üstünde durur: buton tek başına çalışmaz, ziyaretçinin önce sistemi anlaması gerekiyor. B10 akış şemasından farkı — o teknik mimari, bu üç kelimelik zihin haritası. -------------------------------------------------------------------------- */ .vyp-adimlar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 20px); margin: 0 0 28px; } .vyp-adim { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: #5A6B7B; } .vyp-adim b { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--theme3); color: var(--theme-a11y-text); display: grid; place-items: center; font-size: 13px; font-weight: 700; } .vyp-adim-ok { color: #C7CFD8; font-size: 18px; line-height: 1; } @media (max-width: 575px) { .vyp-adimlar { flex-direction: column; align-items: flex-start; gap: 10px; } .vyp-adim-ok { transform: rotate(90deg); margin-left: 13px; } } /* ========================================================================== VyTag ESL SAYFALARI — 12.08.2026 Wireframe: vycall-esl-sayfalari.html · dört sayfa, tek iskelet. Yeni: A12 ebat rozeti · A13 etiket kalıbı · A14 aksesuar kartı · A15 yazılım ekranı · B12 model listesi. B11'e slider varyantı eklendi. ========================================================================== */ /* -------------------------------------------------------------------------- A12 · EBAT ROZET ŞERİDİ Rozette YALNIZCA ölçü durur — kullanım karşılığı model listesinde yaşar. Uzun ölçü tablosu ve dört ayrı kare bu şeritle değiştirildi. Özel modeller (soğuk alan, dış ortam) kesikli çerçeveyle ayrışır. -------------------------------------------------------------------------- */ .vyp-ebatlar { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 4px; } .vyp-ebat { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; background: #fff; padding: 10px 18px; font-size: 15px; font-weight: 650; color: var(--title); line-height: 1; letter-spacing: -.01em; /* Dokunma hedefi 44px (Ek A kuralı) — prototipte 34px kalıyordu. */ min-height: 44px; transition: border-color .2s ease, background-color .2s ease; } .vyp-ebat:hover { border-color: var(--theme); background: var(--theme3); } /* Rozet artık BUTON: tıklanınca yandaki görsel ve bilgi satırı o modele döner. Ölçü listesi seçim aracı oldu, süs değil. */ button.vyp-ebat { cursor: pointer; font-family: inherit; } .vyp-ebat.aktif { border-color: var(--theme); background: var(--theme); color: #fff; } .vyp-ebat.aktif.vyp-ebat--ozel { background: var(--theme-a11y-text); border-color: var(--theme-a11y-text); color: #fff; } .vyp-ebat:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; } /* Özel model: kesikli çerçeve + marka mavisi. Ölçü değil kullanım koşulu yazar. */ .vyp-ebat--ozel { border-style: dashed; border-color: var(--theme); background: var(--theme3); color: var(--theme-a11y-text); font-size: 14px; } /* -------------------------------------------------------------------------- A13 · ESL ETİKET KALIBI — kodla çizilir, ekran görüntüsü değil Kutu ve şerit değil, OKUNABİLİR bir örnek: müşteri kendi rafını görüyor. İki varyant: fiyat etiketi (raf) · bilgi ekranı (reyon başlığı / depo kartı). -------------------------------------------------------------------------- */ .vyp-etiket { width: 100%; max-width: 320px; background: #fff; border: 1px solid #D8DEE5; border-radius: 8px; padding: 15px 17px; box-shadow: 0 14px 34px rgba(20, 26, 38, .13); font-variant-numeric: tabular-nums; } .vyp-etiket-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .vyp-etiket-ad { font-size: 13px; font-weight: 650; color: var(--title); line-height: 1.3; } .vyp-etiket-kmp { background: #C0392B; color: #fff; font-size: 10px; font-weight: 700; border-radius: 3px; padding: 4px 8px; white-space: nowrap; } .vyp-etiket-fiyat { font-size: 42px; font-weight: 750; color: var(--title); letter-spacing: -.02em; line-height: 1; margin: 12px 0 3px; } .vyp-etiket-birim { font-size: 11px; color: #5A6B7B; } .vyp-etiket-birim s { color: #9AA1AB; } .vyp-etiket-alt { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; border-top: 1px solid #EEF0F3; padding-top: 10px; } .vyp-etiket-barkod { display: flex; gap: 1.5px; align-items: flex-end; height: 28px; } .vyp-etiket-barkod b { width: 2px; background: var(--title); display: block; } .vyp-etiket-kod { font-size: 9px; color: #9AA1AB; margin-top: 4px; letter-spacing: .04em; } .vyp-etiket-qr { width: 36px; height: 36px; border-radius: 2px; opacity: .85; background: repeating-linear-gradient(0deg, var(--title) 0 3px, transparent 3px 6px), repeating-linear-gradient(90deg, var(--title) 0 3px, transparent 3px 6px); } /* Bilgi ekranı varyantı — çok satırlı, başlık şeridi koyu */ .vyp-ekran { width: 100%; max-width: 420px; background: #fff; border: 1px solid #D8DEE5; border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(20, 26, 38, .13); } .vyp-ekran-bas { background: var(--title); color: #fff; padding: 13px 17px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .vyp-ekran-bas b { font-size: 17px; font-weight: 750; letter-spacing: .04em; } .vyp-ekran-bas span { font-size: 10px; letter-spacing: .1em; opacity: .72; } .vyp-ekran-govde { padding: 14px 17px; } .vyp-ekran-satir { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #EEF0F3; font-size: 13px; } .vyp-ekran-satir:last-child { border-bottom: 0; } .vyp-ekran-satir span { color: var(--title); font-weight: 600; } .vyp-ekran-satir b { font-size: 15px; font-weight: 750; color: var(--title); } .vyp-ekran-alt { background: #F5F6F8; padding: 10px 17px; border-top: 1px solid #EEF0F3; display: flex; justify-content: space-between; font-size: 10px; color: #7A8592; } /* Depo varyantı: başlık ters, ortada büyük lokasyon kodu */ .vyp-ekran--depo .vyp-ekran-bas { background: #fff; color: var(--title); border-bottom: 2px solid var(--title); } .vyp-ekran-kod { font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--title); text-align: center; padding: 18px 0 8px; } /* -------------------------------------------------------------------------- A14 · AKSESUAR KARTI Görsel · ad · "ne için" · uyum rozeti. Müşteri parça adını bilmiyor, DURUMUNU biliyor — kart durumdan parçaya götürür. -------------------------------------------------------------------------- */ .vyp-aks-izgara { display: grid; gap: clamp(12px, 1.6vw, 18px); } .vyp-aks-izgara--dort { grid-template-columns: repeat(4, 1fr); } .vyp-aks-izgara--uc { grid-template-columns: repeat(3, 1fr); } .vyp-aks { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .vyp-aks:hover { border-color: var(--theme); box-shadow: var(--vyp-golge); transform: translateY(-2px); } .vyp-aks-gorsel { aspect-ratio: 16 / 10; background: #F7FAFD; border-bottom: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; } .vyp-aks-gorsel img { width: 100%; height: 100%; object-fit: cover; } .vyp-aks-govde { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; } .vyp-aks-govde b { font-size: 14px; font-weight: 650; color: var(--title); margin-bottom: 6px; } .vyp-aks-govde p { font-size: 13px; line-height: 1.55; color: #5A6B7B; margin: 0; } .vyp-aks-uyum { display: inline-block; align-self: flex-start; margin-top: 12px; font-size: 11px; letter-spacing: .02em; color: #7A8592; background: #F4F6F8; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; } /* -------------------------------------------------------------------------- A15 · YAZILIM EKRAN KARESİ Tarayıcı çerçevesi + iskelet satırlar. Gerçek arayüz görseli gelene kadar yer tutucu; geldiğinde çerçevenin içine oturur. -------------------------------------------------------------------------- */ .vyp-yazilim { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .vyp-yazilim-tepe { background: #F4F6F8; border-bottom: 1px solid var(--border); padding: 9px 13px; display: flex; gap: 6px; align-items: center; } .vyp-yazilim-tepe i { width: 8px; height: 8px; border-radius: 50%; background: #C7CFD8; display: block; } .vyp-yazilim-tepe span { font-size: 11px; color: #7A8592; margin-left: 8px; } .vyp-yazilim-baslik { padding: 10px 13px; background: #FAFBFC; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 650; color: var(--title); } .vyp-yazilim img { width: 100%; height: auto; display: block; } .vyp-yazilim-govde { padding: 13px; } .vyp-yazilim-satir { display: flex; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid #F2F4F6; } .vyp-yazilim-satir:last-child { border-bottom: 0; } .vyp-yazilim-satir i { flex: 0 0 13px; height: 13px; border-radius: 3px; background: #D8DEE5; } .vyp-yazilim-satir i.secili { background: var(--theme); } .vyp-yazilim-satir u { flex: 1; height: 8px; border-radius: 4px; background: #E8ECF0; } .vyp-yazilim-satir s { flex: 0 0 48px; height: 8px; border-radius: 4px; background: #D8DEE5; } /* -------------------------------------------------------------------------- B12 · MODEL LİSTESİ TABLOSU İki kolon, dört sütun. Ölçü ve pil bilgisi burada DEĞİL — teknik künyede. Özel modeller (soğuk alan, dış ortam) renkli zeminle ayrışır. -------------------------------------------------------------------------- */ .vyp-modeller { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); } .vyp-model-tablo { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); overflow: hidden; } .vyp-model-tablo th { background: #F4F6F8; text-align: left; padding: 11px 14px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #7A8592; font-weight: 700; border-bottom: 1px solid var(--border); } .vyp-model-tablo td { padding: 11px 14px; border-bottom: 1px solid #F0F2F5; color: #5A6B7B; } .vyp-model-tablo td:first-child { color: var(--title); font-weight: 650; } .vyp-model-tablo tr:last-child td { border-bottom: 0; } .vyp-model-ozel td { background: var(--theme3); } @media (max-width: 991px) { .vyp-aks-izgara--dort { grid-template-columns: repeat(2, 1fr); } .vyp-aks-izgara--uc { grid-template-columns: repeat(2, 1fr); } .vyp-modeller { grid-template-columns: 1fr; } } @media (max-width: 575px) { .vyp-aks-izgara--dort, .vyp-aks-izgara--uc { grid-template-columns: 1fr; } .vyp-ebat { padding: 9px 15px; font-size: 14px; } .vyp-etiket-fiyat { font-size: 36px; } .vyp-ekran-kod { font-size: 36px; } } /* B11 · SLIDER VARYANTI — çok kareli yaşam sahnesi Renk seçenekleri ve kullanım biçimleri için: aynı sahne, farklı kare. A9 açı gezgininin kalıbını kullanır (iki şeffaf ok) — yeni gezinme dili uydurulmadı. Otomatik dönmez; ziyaretçi kendi hızında gezer. */ .vyp-sahne > img { opacity: 0; transition: opacity .45s ease; z-index: -2; } .vyp-sahne > img.aktif { opacity: 1; } .vyp-sahne .vyp-aci-ok { z-index: 4; } .vyp-sahne .vyp-aci-ok::before { background: rgba(255, 255, 255, .82); } .vyp-sahne-yazi > * { transition: opacity .3s ease; } /* A14 · görselsiz kart — aksesuar fotoğrafı henüz yokken */ .vyp-aks-gorsel--bos { background: linear-gradient(135deg, transparent calc(50% - .5px), #DDE3E9 50%, transparent calc(50% + .5px)), linear-gradient(225deg, transparent calc(50% - .5px), #DDE3E9 50%, transparent calc(50% + .5px)), #F7FAFD; color: #9AA5B1; font-size: 11px; letter-spacing: .04em; text-align: center; padding: 10px; } /* Slider metinleri üst üste durur; yalnız aktif olan görünür */ .vyp-sahne-yazi { position: relative; } .vyp-sahne-kare { display: none; } .vyp-sahne-kare.aktif { display: block; } /* TUZAK (12.08.2026): tema `br { display: none }` uyguluyor — etiket kalıbında ürün adı iki satıra inmiyordu ("Tam Yağlı1 L"). Kalıp içindeki satır sonları geri açılıyor. */ .vyp-etiket br, .vyp-ekran br { display: block !important; content: ''; } /* -------------------------------------------------------------------------- A12 · EBAT SAHNESİ — seçilen modelin görseli Arka plan beyazlığı KALKTI (12.08.2026 revizesi): ürün fotoğrafları zaten şeffaf/beyaz zeminli, çerçeve içine alınınca kutu içinde kutu görünüyordu. Görsel doğrudan blok zemininde durur; altında renk ve mm bilgisi. -------------------------------------------------------------------------- */ .vyp-ebat-sahne { position: relative; display: grid; place-items: center; min-height: clamp(220px, 26vw, 340px); padding: 8px; } .vyp-ebat-sahne > img { grid-area: 1 / 1; max-width: min(100%, 420px); height: auto; opacity: 0; transform: scale(.985); transition: opacity .35s ease, transform .35s ease; } .vyp-ebat-sahne > img.aktif { opacity: 1; transform: none; } .vyp-ebat-bilgi { margin: 14px 0 0; text-align: center; font-size: 14.5px; color: #5A6B7B; min-height: 22px; } .vyp-ebat-bilgi b { color: var(--title); font-weight: 650; } .vyp-ebat-bilgi span { color: #A9B4BF; margin: 0 8px; } /* ========================================================================== SEKTÖREL ÇÖZÜM SAYFASI — 12.08.2026 · wireframe-sektorel-cozum.html -------------------------------------------------------------------------- Tek şablon, 8 sayfa. Buradaki üç yeni parça wireframe ile geldi ve katalogda tanımlandı: B1 sektör hero varyantı · B15 kat planı · B11 ızgara varyantı · B3 sahne varyantı (kullanım örnekleri). ========================================================================== */ /* ------------------------- B1 sektör varyantı — kenardan kenara mekân hero Metin sol altta, üstünde koyu geçiş katmanı. H1 = sayfa adı. Kırıntı hero'nun içinde ve SOLA yaslı: bu hero ortalı değil, sol kompozisyonlu — ürün sayfasındaki ortalı kırıntı kuralı burada sola döner. */ .vyp-shero { position: relative; display: flex; align-items: flex-end; min-height: clamp(440px, 52vw, 520px); overflow: hidden; } .vyp-shero > picture { position: absolute; inset: 0; } .vyp-shero > picture img { width: 100%; height: 100%; object-fit: cover; display: block; } .vyp-shero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 32, 50, .78), rgba(11, 32, 50, .26) 52%, rgba(11, 32, 50, .10)); } .vyp-shero > .container { position: relative; z-index: 2; width: 100%; padding-top: 150px; padding-bottom: 46px; } .vyp-shero-yazi { max-width: 640px; } .vyp-shero .vyp-kirinti { justify-content: flex-start; margin: 0 0 14px; color: rgba(255,255,255,.72); } .vyp-shero .vyp-kirinti a { color: rgba(255,255,255,.85); } .vyp-shero .vyp-kirinti a:hover { color: #fff; } .vyp-shero .vyp-kirinti [aria-current] { color: #fff; font-weight: 700; } .vyp-shero .vyp-ust-etiket { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin: 0 0 10px; } .vyp-shero h1 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.1; color: #fff; font-weight: 700; margin: 0 0 12px; } .vyp-shero-desc { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .92); max-width: 560px; margin: 0; } .vyp-shero .vyp-hero-eylemler { justify-content: flex-start; align-items: center; } .vyp-shero-ikincil { display: inline-flex; align-items: center; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 100px; padding: 12px 26px; font-size: 15px; font-weight: 700; color: #fff; min-height: 44px; transition: background .2s ease; } .vyp-shero-ikincil:hover { background: rgba(255, 255, 255, .16); color: #fff; } /* ---------------------------------------- B2 logo varyantı — tek sıra 9 logo Rakam sütunu yok (anasayfada verildi). Masaüstünde tek sıra, mobilde 3×3. */ .vyp-logolar--sira { grid-template-columns: repeat(9, 1fr); gap: 18px 16px; } /* Tek sırada 9 hücre logoları küçültüyordu (Güneş, 12.08.2026: "logo alanı çok küçük"). Aralık daraltıldı ki hücreler genişlesin; yükseklik tavanı 40 → 64px. Geniş logolar hücre genişliğine, dikey logolar 64px'e dayanır. */ .vyp-logolar--sira .vyp-logo { min-height: 76px; } .vyp-logolar--sira .vyp-logo img { max-height: 64px; } /* Rakam sütunu olmayınca "Tüm Referanslar" sağda asılı kalıyordu — ortalanır. */ .vyp-logolar--sira + .vyp-logo-alt { text-align: center; margin-top: 10px; } /* --------------------------------------------------------- B15 · KAT PLANI Kroki SVG olarak kodla çizilir, fotoğraf değil. Tek mavi ton; vurgu yalnız noktalarda ve kesikli menzil halkasında. Nokta ve alan kartı aynı seçimi paylaşır: hangisine dokunulursa dokunulsun ikisi birlikte vurgulanır. */ .vyp-plan { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: stretch; } .vyp-plan-kroki { background: #fff; border: 1px solid var(--border, #E6E6E6); border-radius: var(--vyp-kart-r); padding: 18px; display: flex; align-items: center; } .vyp-plan-kroki svg { width: 100%; height: auto; display: block; } .vyp-plan-etiket { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; fill: #5A6B7B; } .vyp-plan-nokta { cursor: pointer; outline: none; } .vyp-plan-nokta .vyp-plan-isaret { fill: var(--theme, #1C92E9); transition: r .15s ease, fill .15s ease; } .vyp-plan-nokta--alici .vyp-plan-isaret { fill: var(--theme-a11y-text, #1064A3); } .vyp-plan-nokta text { fill: #fff; font-size: 12px; font-weight: 700; pointer-events: none; } .vyp-plan-nokta.aktif .vyp-plan-isaret, .vyp-plan-nokta:hover .vyp-plan-isaret { r: 15; } .vyp-plan-nokta:focus-visible .vyp-plan-isaret { stroke: var(--theme-a11y-text, #1064A3); stroke-width: 3; } .vyp-plan-alanlar { display: grid; gap: 10px; align-content: center; } .vyp-plan-alan { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border, #E6E6E6); border-radius: 12px; padding: 12px 14px; min-height: 44px; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .vyp-plan-alan:hover { border-color: var(--theme, #1C92E9); } .vyp-plan-alan.aktif { border-color: var(--theme, #1C92E9); box-shadow: 0 6px 18px rgba(28, 146, 233, .14); } .vyp-plan-no { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--theme, #1C92E9); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .vyp-plan-alan--alici .vyp-plan-no { background: var(--theme-a11y-text, #1064A3); } .vyp-plan-metin { min-width: 0; } .vyp-plan-metin b { display: block; font-size: 14.5px; font-weight: 700; color: var(--title, #282C32); } .vyp-plan-metin i { display: block; font-style: normal; font-size: 12.5px; line-height: 1.45; color: #5A6B7B; margin-top: 2px; } /* ------------------------------- B11 ızgara varyantı — 3 kare yaşam sahnesi Kenardan kenara, container yok. Sol kare geniş (1.35fr). Tıklanabilir DEĞİL; tek hareket hover'da %3 yakınlaşma. Etiket sol altta tek kelime. */ .vyp-yasam-blok { padding-bottom: 0; } .vyp-yasam { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 0; margin-top: 36px; border-top: 1px solid var(--border, #E6E6E6); border-bottom: 1px solid var(--border, #E6E6E6); } .vyp-yasam-kare { position: relative; margin: 0; overflow: hidden; border-right: 1px solid #fff; height: clamp(260px, 30vw, 420px); } .vyp-yasam-kare:last-child { border-right: 0; } .vyp-yasam-kare img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .vyp-yasam-kare:hover img { transform: scale(1.03); } .vyp-yasam-kare figcaption { position: absolute; left: 18px; bottom: 14px; z-index: 2; color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); } .vyp-yasam-kare::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 32, 50, .45), rgba(11, 32, 50, 0) 45%); } /* --------------------------- B3 sahne varyantı — kullanım örnekleri sahnesi Masaüstü: geniş kurulum fotoğrafı + üstünde yarı saydam vaka kartları; kartların kendi görseli gizli. MOBİLDE ortak sahne kalkar, her vaka kendi fotoğraflı kartına döner (wireframe kuralı). */ .vyp-ornek-blok { position: relative; overflow: hidden; } .vyp-ornek-sahne { position: absolute; inset: 0; } .vyp-ornek-sahne img { width: 100%; height: 100%; object-fit: cover; display: block; } .vyp-ornek-sahne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 32, 50, .72), rgba(11, 32, 50, .38)); } .vyp-ornek-ic { position: relative; z-index: 2; } .vyp-ornek-blok .vyp-baslik .title, .vyp-ornek-blok .vyp-baslik .subtitle { color: #fff; } .vyp-ornek-blok .vyp-baslik .section-desc { color: rgba(255, 255, 255, .85); } .vyp-ornek-kartlar .vyp-vaka { background: rgba(255, 255, 255, .94); } .vyp-ornek-kartlar .vyp-vaka-gorsel { display: none; } /* Kart görseli masaüstünde gizli — İÇERİK BEKLİYOR rozeti başlığın üstüne binmesin diye sağ üst köşeye alınır; mobilde görsel geri gelir, rozet varsayılan yerinde (sol üst, görselin üstünde) kalır. */ .vyp-ornek-kartlar .vyp-tutucu::before { left: auto; right: 12px; } @media (max-width: 991px) { .vyp-logolar--sira { grid-template-columns: repeat(3, 1fr); } .vyp-logolar--sira .vyp-logo { min-height: 60px; } .vyp-logolar--sira .vyp-logo img { max-height: 48px; } .vyp-plan { grid-template-columns: 1fr; } .vyp-plan-alanlar { grid-template-columns: 1fr 1fr; align-content: start; } } @media (max-width: 767px) { .vyp-shero { min-height: 500px; } .vyp-shero > .container { padding-top: 120px; padding-bottom: 34px; } .vyp-shero h1 { font-size: 32px; } .vyp-shero-desc { font-size: 15px; } /* Kilitli kural: mobilde ikincil eylem metin linkine iner, birincil düğme ilk ekranda kalır. */ .vyp-shero-ikincil { border: 0; padding: 10px 4px; text-decoration: underline; } /* Kat planı: kroki tam genişlik, alanlar rozet gibi ikili ızgara */ .vyp-plan-kroki { padding: 10px; } .vyp-plan-alan { padding: 10px 12px; } .vyp-plan-metin i { display: none; } .vyp-plan-alan.aktif .vyp-plan-metin i { display: block; } /* Yaşam sahneleri: 3 kare alt alta, tam genişlik */ .vyp-yasam { grid-template-columns: 1fr; } .vyp-yasam-kare { height: 210px; border-right: 0; border-bottom: 1px solid #fff; } .vyp-yasam-kare:last-child { border-bottom: 0; } /* Kullanım örnekleri: ortak sahne kalkar, vakalar kendi kartına döner */ .vyp-ornek-sahne { display: none; } .vyp-ornek-blok .vyp-baslik .title, .vyp-ornek-blok .vyp-baslik .subtitle { color: var(--title, #282C32); } .vyp-ornek-blok .vyp-baslik .section-desc { color: #5A6B7B; } .vyp-ornek-kartlar .vyp-vaka { background: #fff; } .vyp-ornek-kartlar .vyp-vaka-gorsel { display: block; } } @media (max-width: 480px) { .vyp-plan-alanlar { grid-template-columns: 1fr; } } /* ------------------------ fotoğraflı hero'da menü — sayfaya özel BEYAZ Sektör hero'su kenardan kenara koyu fotoğraf; menünün koyu yazısı üstünde kayboluyordu (Güneş, 12.08.2026). Sayfa başında menü yazısı, logo ve hamburger BEYAZ olur; kaydırınca opak bant gelir ve normale döner. ANKRAJ ÇEVİRİSİ (taşıma talimatı FAZ 1.4): prototipte body.vyp-menu-dolu idi; canlıda opak bandı vy-duzeltmeler.js yönetiyor ve sınıfı header'a VE .mobile-nav'a ekliyor: .vy-sticky-opak. Kural yalnız .vyp-shero taşıyan sayfalarda çalışır (:has) — diğer sayfalarda menüye dokunulmaz. */ body:has(.vyp-shero) header.cs_site_header:not(.vy-sticky-opak) .cs_nav_list > li > a, body:has(.vyp-shero) header.cs_site_header:not(.vy-sticky-opak) .cs_main_header_right > a, body:has(.vyp-shero) .mobile-nav:not(.vy-sticky-opak) .dvarmyok > a { color: #fff !important; transition: color .25s ease; } /* Logo tek renk beyaza çevrilir; bant gelince filtre kalkar, mavi logo döner. */ body:has(.vyp-shero) header.cs_site_header:not(.vy-sticky-opak) .cs_site_branding img, body:has(.vyp-shero) .mobile-nav:not(.vy-sticky-opak) .mobile-nav-inner .navlogo { filter: brightness(0) invert(1); transition: filter .25s ease; } /* Mobil hamburger çizgileri */ body:has(.vyp-shero) .mobile-nav:not(.vy-sticky-opak) .menu-toggle span { background-color: #fff !important; } /* B15 kroki dokunma hedefi (12.08.2026 taşıma ölçümü): SVG viewBox 720 ölçeklenince r=22'lik görünmez halka mobilde ~18px'e düşüyordu (Ek A eşiği 44px). Halka yarıçapı dar ekranda SVG biriminde büyütülür — görünür işaret (r=12) değişmez, yalnız şeffaf hedef genişler. Noktalar arası en dar mesafe ~112 birim; 52+52=104 çakışmaz. */ @media (max-width: 991px) { .vyp-plan-hedef { r: 24px; } } @media (max-width: 575px) { .vyp-plan-hedef { r: 55px; } } /* ========================================================================== TEKNOLOJİ SAYFASI v2 — SEKMELİ KURGU -------------------------------------------------------------------------- Kaynak: prototip/vy-prototip.css · üretici prototip/kur-teknoloji.py Tasarım sözleşmesi: prototip/SKILL-vycall-bilesenler.md · Bölüm 15 Taşındı: 13.08.2026 Buradaki bileşenler: A18 bildirim akışı (hero) · B13 şematik akış ve varyantları (--iki · --sema · alıcı kümesi) · B15 sekmeli sistem şeması · A5 numaralı-ikonlu kurulum kartı · B14 ürün kutusu · A17 etiket tazeleme · hero'nun kodla çizilen gradyan zemini. TUZAK — sıra: mobil düzeltmeler bu bölümün SONUNDA durur. Yukarıdaki masaüstü kuralları media query dışında olduğu için, mobil bloğu araya yazılırsa aynı özgüllükte sonra gelen kural onu eziyor. ========================================================================== */ /* -------------------------------------------------------------------------- B13 · ŞEMATİK AKIŞ ŞERİDİ (12.08.2026 revizesi — kart yapısı KALKTI) İlk hâli üç beyaz karttı. Üç kart yan yana durunca sinyalin GİTTİĞİ görünmüyordu; ziyaretçi üç ayrı resim görüyordu (Güneş, 12.08.2026). Yerine tek hat üzerinde üç DURAK: hat boyunca sinyal akıyor, duraklar sırası gelince yanıyor. Şema ama kutu-ok kalabalığı değil — bir çizgi, üç durak, hareket eden tek bir nokta. A10'dan farkı: A10 satır içi üç kelimelik zihin haritası; bu blok seviyesinde anlatım. İkisi aynı sayfada kullanılmaz. Döngü: hero sahnesiyle aynı davranış — blok ekrandayken döner, ekrandan çıkınca durur. "Bir kez oynar" kuralı duran şeyler için; hareketli şema bir kez oynarsa iki saniye sonra statik bir çizim olarak kalıyor. -------------------------------------------------------------------------- */ .vyp-akis { --vyp-durak: clamp(132px, 14vw, 190px); --vyp-tur: 4.4s; position: relative; display: grid; align-items: start; grid-template-columns: repeat(3, 1fr); gap: 0; } .vyp-akis-adim { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; min-width: 0; padding: 0 clamp(6px, 1vw, 16px); opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; } .vyp-akis.gor .vyp-akis-adim { opacity: 1; transform: none; } .vyp-akis.gor .vyp-akis-adim:nth-of-type(2) { transition-delay: .12s; } .vyp-akis.gor .vyp-akis-adim:nth-of-type(3) { transition-delay: .24s; } /* DURAK — gerçek ürün fotoğrafının oturduğu levha. Zemin her zaman beyaz: ürün fotoğraflarının bir kısmı şeffaf, bir kısmı beyaz zeminli PNG. Açık maviye boyanırsa beyaz zeminli olanlar levhanın ortasında beyaz bir dikdörtgen olarak görünüyor. */ .vyp-akis-gorsel { position: relative; z-index: 1; flex: 0 0 auto; width: var(--vyp-durak); height: var(--vyp-durak); display: grid; place-items: center; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 26px; box-shadow: 0 4px 25px rgba(0, 0, 0, .06); } /* TUZAK: tema `img` yüksekliğini eziyor — `height:100%` dikey fotoğrafta tutmuyor ve görsel levhadan taşıyor (vytag-lifestyle 800×1180'de yakalandı). Çare: yükseklik dayatmak yerine max-width/max-height ile levhaya sığdır. */ .vyp-akis-gorsel img { max-width: 100%; max-height: 100%; width: auto; height: auto; /* min-height:0 ŞART — grid öğesinin otomatik asgari boyutu, dikey fotoğrafın kendi yüksekliğinde kilitleniyor ve max-height'ı yok sayıyordu. */ min-width: 0; min-height: 0; object-fit: contain; display: block; } /* Durak halkası — sıra o durağa gelince bir kez yanıp söner. */ .vyp-akis-gorsel::after { content: ''; position: absolute; inset: -7px; border-radius: 32px; border: 2px solid var(--theme); opacity: 0; } .vyp-akis-no { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #7A8592; } .vyp-akis-adim > b { font-size: clamp(17px, 1.4vw, 19px); font-weight: 700; color: var(--title); letter-spacing: -.01em; line-height: 1.25; } .vyp-akis-adim > p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5A6B7B; max-width: 260px; } /* Vurgulu durak — VyApp'te ağ geçidi. Farkın nerede olduğu tek bakışta. */ .vyp-akis-adim--vurgu .vyp-akis-gorsel { border-color: var(--theme); box-shadow: 0 0 0 4px var(--theme3); } .vyp-akis-adim--vurgu .vyp-akis-no { color: var(--theme-a11y-text); } /* HAT — durak MERKEZİNDEN durak merkezine uzanır ve levhaların ALTINDAN geçer. Boşluğa sıkıştırılırsa (ilk deneme) 48 piksellik bir tire kalıyordu; şema okunmuyordu. Üç eşit kolonda merkezler %16,7 · %50 · %83,3'te. */ .vyp-akis-ok { position: absolute; z-index: 0; top: calc(var(--vyp-durak) / 2 - 1px); width: 33.333%; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #C7DCEE 0 5px, transparent 5px 12px); opacity: 0; transition: opacity .45s ease; } .vyp-akis-ok:nth-of-type(1) { left: 16.667%; } .vyp-akis-ok:nth-of-type(2) { left: 50%; } .vyp-akis.gor .vyp-akis-ok { opacity: 1; } /* Akan sinyal noktası. */ .vyp-akis-ok::after { content: ''; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--theme); box-shadow: 0 0 0 5px rgba(28, 146, 233, .16); opacity: 0; } /* --- döngü: yalnız .oynat varken çalışır, blok ekrandan çıkınca durur --- */ .vyp-akis.oynat .vyp-akis-ok::after { animation: vyp-akan var(--vyp-tur) linear infinite; animation-delay: .5s; } .vyp-akis.oynat .vyp-akis-ok:nth-of-type(2)::after { animation-delay: 1.9s; } .vyp-akis.oynat .vyp-akis-adim:nth-of-type(1) .vyp-akis-gorsel::after { animation: vyp-durak var(--vyp-tur) ease-out infinite; animation-delay: 0s; } .vyp-akis.oynat .vyp-akis-adim:nth-of-type(2) .vyp-akis-gorsel::after { animation: vyp-durak var(--vyp-tur) ease-out infinite; animation-delay: 1.5s; } .vyp-akis.oynat .vyp-akis-adim:nth-of-type(3) .vyp-akis-gorsel::after { animation: vyp-durak var(--vyp-tur) ease-out infinite; animation-delay: 2.9s; } /* Sinyal halkaları da turun kendi anında yayılır, sürekli değil. */ .vyp-akis.oynat .vyp-sinyal i { animation: vyp-yayil var(--vyp-tur) ease-out infinite; } .vyp-akis.oynat .vyp-sinyal i:nth-child(1) { animation-delay: 1.30s; } .vyp-akis.oynat .vyp-sinyal i:nth-child(2) { animation-delay: 1.55s; } .vyp-akis.oynat .vyp-sinyal i:nth-child(3) { animation-delay: 1.80s; } @keyframes vyp-akan { 0% { opacity: 0; transform: translateX(0); } 4% { opacity: 1; } 26% { opacity: 1; transform: translateX(calc(100% + var(--vyp-ok-yol, 40px))); } 31% { opacity: 0; transform: translateX(calc(100% + var(--vyp-ok-yol, 40px))); } 100% { opacity: 0; transform: translateX(0); } } @keyframes vyp-durak { 0% { opacity: 0; transform: scale(.94); } 4% { opacity: .9; transform: scale(1); } 14% { opacity: 0; transform: scale(1.06); } 100% { opacity: 0; transform: scale(1.06); } } /* "Sinyal gider" durağı — karşılığı ürün olmayan tek durak, kodla çizilir. Halkalar içten dışa büyür: sinyalin yayılması. */ .vyp-sinyal { position: relative; display: grid; place-items: center; width: 100%; height: 100%; } .vyp-sinyal::before { content: ''; position: absolute; width: 62%; height: 62%; border-radius: 50%; border: 1px dashed #BCD9F0; } .vyp-sinyal i { position: absolute; border-radius: 50%; border: 3px solid var(--theme); width: 26%; height: 26%; opacity: 0; } .vyp-sinyal b { width: 17%; height: 17%; border-radius: 50%; background: var(--theme); display: block; position: relative; } @keyframes vyp-yayil { 0% { transform: scale(1); opacity: 0; } 3% { opacity: .85; } 16% { transform: scale(3.4); opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } } /* Eşleştirme çizimi — sinyal halkasından ayrı bir şekil. */ .vyp-eslesme { width: 84%; height: auto; display: block; } @media (max-width: 991px) { /* Hat dikeye döner; şema aşağı doğru akar. */ .vyp-akis { grid-template-columns: 1fr; gap: 10px; } /* `static` DEĞİL `relative`: akan nokta mutlak konumlu, static olursa kapsayıcısı şeridin kendisi oluyor ve nokta sol üst köşeye kaçıyor. */ .vyp-akis-ok { position: relative; justify-self: center; top: auto; width: 2px; height: clamp(34px, 8vw, 52px); background: repeating-linear-gradient(180deg, #C7DCEE 0 5px, transparent 5px 12px); } .vyp-akis-ok:nth-of-type(1), .vyp-akis-ok:nth-of-type(2) { left: auto; } .vyp-akis-ok::after { left: -4px; top: 0; } } /* Hareket kapalıysa şema durur; duraklar ve hat olduğu gibi okunur. */ @media (prefers-reduced-motion: reduce) { .vyp-akis-adim { opacity: 1; transform: none; } .vyp-akis-ok { opacity: 1; } .vyp-akis.oynat *, .vyp-akis.oynat *::after { animation: none !important; } } /* -------------------------------------------------------------------------- B14 · ÜRÜN KUTUSU "Ayrı ürün" etiketli beyaz kart. VyApp, müşteri çağrı sistemi ve raf etiketi için doğdu: üçü de aynı sayfada anlatıldığında tek sistem sanılıyordu. Kutu, etiket ve kendi başlığı bu karışmayı kesiyor. Kutu blok zemininin TERSİNİ alır — mavi blokta beyaz, beyaz blokta açık. -------------------------------------------------------------------------- */ .vyp-urun-kutu { background: #F7FAFD; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); padding: clamp(20px, 3vw, 40px); margin-top: 36px; } .vyp-blok--zemin .vyp-urun-kutu { background: #fff; } .vyp-urun-kutu-bas { text-align: center; max-width: 720px; margin: 0 auto 28px; } .vyp-urun-etiket { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--theme-a11y-text); background: var(--theme3); border-radius: 999px; padding: 6px 14px; } .vyp-urun-kutu-bas h2 { margin: 12px 0 10px; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; color: var(--title); } .vyp-urun-kutu-bas p { margin: 0; font-size: 16px; line-height: 1.7; color: #5A6B7B; } /* Kutunun altındaki medya + metin satırı (yönetim paneli, etiket animasyonu) */ .vyp-kutu-alt { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; /* Şema ile etiket iç içe girmişti; ayırma payı büyütüldü (13.08.2026). */ margin-top: clamp(40px, 5vw, 68px); } .vyp-kutu-alt > div { min-width: 0; } /* Doğrudan fotoğraf: kaynak kareler 1:1 ve geniş beyaz paylı; olduğu gibi basılınca kutunun yarısı boş kalıyor. 16/10 çerçeveye kırpılıyor. */ .vyp-kutu-alt > div > img { width: 100%; height: auto; display: block; border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; background: #fff; } .vyp-kutu-alt h3 { margin: 0 0 10px; font-size: clamp(18px, 1.6vw, 21px); color: var(--title); letter-spacing: -.01em; } .vyp-kutu-alt p { margin: 0; font-size: 15.5px; line-height: 1.7; color: #5A6B7B; } @media (max-width: 767px) { .vyp-kutu-alt { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- A17 · ETİKET TAZELEME Gerçek DS027Q fotoğrafı durur; YALNIZ fiyat bandı kodla çizilen bir katmanla örtülür ve o katman değişir (12.08.2026, Güneş kararı). Bandın koordinatları fotoğraftan piksel piksel ölçüldü: sol %17,5 · üst %34,2 · genişlik %65,56 · yükseklik %29,8 Yüzdeyle konumlandığı için her genişlikte fotoğrafla birlikte ölçekleniyor; içerideki tipografi cqw ile kapsayıcının genişliğine bağlı. Sayısal değerler UYDURULMADI — 899,00 / 699,00 / %22 gerçek etiketin üzerinde yazan değerler. -------------------------------------------------------------------------- */ .vyp-tazele { margin: 0; } .vyp-tazele-sahne { position: relative; container-type: inline-size; border-radius: 14px; overflow: hidden; /* Etiket görseli çok büyük duruyordu — kutunun içinde ölçülü kalır. */ max-width: 400px; margin-inline: auto; } .vyp-tazele-sahne > img { width: 100%; height: auto; display: block; } .vyp-tazele-band { position: absolute; left: 17.5%; top: 34.42%; width: 65.56%; height: 28.92%; overflow: hidden; /* Ölçü birimi bandın KENDİ genişliği olmalı. Sahneye bağlanırsa yazılar 1,5 kat büyüyor ve üstü çizili fiyat banttan taşıp kayboluyor. */ container-type: inline-size; } .vyp-tazele-yuz { position: absolute; inset: 0; display: flex; align-items: stretch; opacity: 0; transition: opacity .18s linear; } .vyp-tazele-yuz.acik { opacity: 1; } /* ÖNCE — kampanya yokken etiket düz beyaz, tek fiyat yazar. */ .vyp-tazele-once { background: #fff; align-items: center; justify-content: center; } .vyp-tazele-once span { font-size: 30px; font-size: 14.5cqw; font-weight: 800; color: #1a1a1a; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .vyp-tazele-once span i { font-style: normal; font-size: .58em; margin-left: .1em; } /* SONRA — sarı kampanya bandı. Oranlar gerçek fotoğraftan ölçüldü: kırmızı sekme %9 · rozet %15,3 · büyük fiyat 108/708 = 15,3cqw. */ .vyp-tazele-sonra { background: #F5C400; } .vyp-tazele-tab { flex: 0 0 9%; background: #D8232A; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 10px; font-size: 3.7cqw; letter-spacing: .01em; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); } .vyp-tazele-govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .vyp-tazele-eski { position: relative; font-size: 14px; font-size: 7cqw; font-weight: 700; color: #1a1a1a; line-height: 1.05; letter-spacing: -.01em; align-self: flex-end; margin-right: 6%; font-variant-numeric: tabular-nums; } .vyp-tazele-eski::after { content: ''; position: absolute; left: -4%; right: -4%; top: 52%; height: .7cqw; min-height: 1px; background: #D8232A; transform: rotate(-5deg); } .vyp-tazele-yeni { font-size: 30px; font-size: 14.5cqw; font-weight: 800; color: #D8232A; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .vyp-tazele-yeni i { font-style: normal; font-size: .58em; margin-left: .08em; } .vyp-tazele-rozet { flex: 0 0 15.3%; background: #fff; color: #1a1a1a; display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); } .vyp-tazele-rozet b { font-size: 13px; font-size: 6.4cqw; font-weight: 800; line-height: 1; } .vyp-tazele-rozet span { font-size: 7px; font-size: 3.5cqw; font-weight: 600; margin-top: .5cqw; } .vyp-tazele-flas { position: absolute; inset: 0; background: #2b2b2b; opacity: 0; pointer-events: none; } .vyp-tazele-sahne.calisiyor .vyp-tazele-flas { animation: vyp-eink .44s steps(1) 1 both; } .vyp-tazele-alt { margin: 14px 0 0; font-size: 13.5px; color: #7A8592; text-align: center; } /* "Eşleştirin" çizimi — sinyal halkasından ayrı bir şekil. */ .vyp-eslesme { width: 78%; height: auto; display: block; } /* ========================================================================== TEKNOLOJİ SAYFASI v2 — SEKMELİ KURGU (13.08.2026) Wireframe: wireframe-teknoloji-v2.html · Güneş onayı 13.08.2026. Beş tekrarlı şerit kalktı. Sayfa artık "hangi ürün nasıl çalışır"ı SEKMELERLE ayırıyor; buton her sekmede tek (B300), altında "tüm buton modelleriyle uyumlu" notu. Ürün çeşidi burada değil buton sayfalarında. Yeni: A18 bildirim akışı (hero) · B15 sekmeli sistem şeması. B13 emekli olmadı — şematik akışın durak/hat/akan-nokta mekanizması sekmelerin İÇİNDE yeniden kullanılıyor, iki yeni varyantla. ========================================================================== */ /* -------------------------------------------------------------------------- A18 · BİLDİRİM AKIŞI (hero animasyonu) — 13.08.2026 revizesi Anasayfanın sahnesi "bir çağrının hikâyesi"ni anlatır (bas → git → düş). Bu ise "sistem sürekli iş görüyor"u anlatır. REVİZE (Güneş, 13.08.2026): · Üç FARKLI buton: B300 · F100 · D100 — portföyün üç ailesi tek bakışta. · Her butonun KENDİ hattı ve oku var; tek ortak hat yok. · Bildirimler pasifleşmez: düşer, tam görünür kalır, tur başa dönerken hepsi SİLİNİR ve yeniden yazılır. Soluk kart yok. Tur 9 sn; beş bildirim üç hattan sırayla gelir (1→2→3→1→2). -------------------------------------------------------------------------- */ .vyp-akin { --vyp-akin-tur: 9s; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.5vw, 32px); max-width: 880px; margin: clamp(10px, 2vw, 26px) auto 0; } .vyp-akin-sol { display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 22px); } .vyp-akin-satir { display: grid; grid-template-columns: auto minmax(46px, 1fr); align-items: center; gap: clamp(10px, 1.4vw, 16px); } .vyp-akin-buton { position: relative; width: clamp(66px, 6.6vw, 88px); aspect-ratio: 1; display: grid; place-items: center; padding: 7px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 4px 20px rgba(0, 0, 0, .06); } .vyp-akin-buton img { max-width: 100%; max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain; display: block; } .vyp-akin-buton::after { content: ''; position: absolute; inset: -6px; border-radius: 23px; border: 2px solid var(--theme); opacity: 0; } /* HAT — her butonun kendi hattı, ucunda ok */ .vyp-akin-hat { position: relative; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #C7DCEE 0 5px, transparent 5px 12px); } .vyp-akin-hat::before { content: ''; position: absolute; right: -1px; top: -5px; width: 0; height: 0; border-left: 9px solid #BCD9F0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .vyp-akin-hat > b { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--theme); box-shadow: 0 0 0 5px rgba(28, 146, 233, .16); opacity: 0; } .vyp-akin-etiket { display: block; text-align: center; margin: 16px 0 0; font-size: 13.5px; color: #7A8592; } /* --- döngü: yalnız .oynat varken --- */ .vyp-akin.oynat .vyp-akin-satir:nth-child(1) .vyp-akin-buton::after { animation: vyp-akin-b1 var(--vyp-akin-tur) ease-out infinite; } .vyp-akin.oynat .vyp-akin-satir:nth-child(2) .vyp-akin-buton::after { animation: vyp-akin-b2 var(--vyp-akin-tur) ease-out infinite; } .vyp-akin.oynat .vyp-akin-satir:nth-child(3) .vyp-akin-buton::after { animation: vyp-akin-b3 var(--vyp-akin-tur) ease-out infinite; } .vyp-akin.oynat .vyp-akin-satir:nth-child(1) .vyp-akin-hat > b { animation: vyp-akin-h1 var(--vyp-akin-tur) linear infinite; } .vyp-akin.oynat .vyp-akin-satir:nth-child(2) .vyp-akin-hat > b { animation: vyp-akin-h2 var(--vyp-akin-tur) linear infinite; } .vyp-akin.oynat .vyp-akin-satir:nth-child(3) .vyp-akin-hat > b { animation: vyp-akin-h3 var(--vyp-akin-tur) linear infinite; } /* Buton halkası hattın atışından hemen önce yanar; 1. ve 2. hat iki kez atar. */ @keyframes vyp-akin-b1 { 0% { opacity: 0; transform: scale(.94); } 2% { opacity: .9; transform: scale(1); } 9% { opacity: 0; transform: scale(1.16); } 50% { opacity: 0; transform: scale(.94); } 52% { opacity: .9; transform: scale(1); } 59% { opacity: 0; transform: scale(1.16); } 100% { opacity: 0; } } @keyframes vyp-akin-b2 { 0%, 16.7% { opacity: 0; transform: scale(.94); } 18.7% { opacity: .9; transform: scale(1); } 25.7% { opacity: 0; transform: scale(1.16); } 66.7% { opacity: 0; transform: scale(.94); } 68.7% { opacity: .9; transform: scale(1); } 75.7% { opacity: 0; transform: scale(1.16); } 100% { opacity: 0; } } @keyframes vyp-akin-b3 { 0%, 33.3% { opacity: 0; transform: scale(.94); } 35.3% { opacity: .9; transform: scale(1); } 42.3% { opacity: 0; transform: scale(1.16); } 100% { opacity: 0; } } @keyframes vyp-akin-h1 { 0% { opacity: 0; left: 0; } 2% { opacity: 1; } 12% { opacity: 1; left: calc(100% - 14px); } 13% { opacity: 0; left: calc(100% - 14px); } 50% { opacity: 0; left: 0; } 52% { opacity: 1; } 62% { opacity: 1; left: calc(100% - 14px); } 63% { opacity: 0; left: calc(100% - 14px); } 100% { opacity: 0; left: 0; } } @keyframes vyp-akin-h2 { 0%, 16.7% { opacity: 0; left: 0; } 18.7% { opacity: 1; } 28.7% { opacity: 1; left: calc(100% - 14px); } 29.7% { opacity: 0; left: calc(100% - 14px); } 66.7% { opacity: 0; left: 0; } 68.7% { opacity: 1; } 78.7% { opacity: 1; left: calc(100% - 14px); } 79.7% { opacity: 0; left: calc(100% - 14px); } 100% { opacity: 0; left: 0; } } @keyframes vyp-akin-h3 { 0%, 33.3% { opacity: 0; left: 0; } 35.3% { opacity: 1; } 45.3% { opacity: 1; left: calc(100% - 14px); } 46.3% { opacity: 0; left: calc(100% - 14px); } 100% { opacity: 0; left: 0; } } /* PANEL — bildirimler TAM görünür kalır, tur sonunda hepsi silinir. */ .vyp-akin-panel { width: clamp(216px, 25vw, 280px); background: #fff; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); padding: 15px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 4px 25px rgba(0, 0, 0, .06); } .vyp-akin-bas { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #7A8592; margin-bottom: 2px; } .vyp-akin-kart { background: #F7FAFD; border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; font-size: 14px; color: #5A6B7B; line-height: 1.3; display: flex; align-items: baseline; gap: 7px; opacity: 0; } .vyp-akin-kart b { color: var(--title); font-weight: 650; } .vyp-akin-kart span { margin-left: auto; font-size: 12.5px; color: #A9B4BF; } /* steps(1): kart ya VAR ya YOK — arada soluk hâl olmaz (Güneş kuralı). */ .vyp-akin.oynat .vyp-akin-kart:nth-of-type(1) { animation: vyp-akin-k1 var(--vyp-akin-tur) steps(1) infinite; } .vyp-akin.oynat .vyp-akin-kart:nth-of-type(2) { animation: vyp-akin-k2 var(--vyp-akin-tur) steps(1) infinite; } .vyp-akin.oynat .vyp-akin-kart:nth-of-type(3) { animation: vyp-akin-k3 var(--vyp-akin-tur) steps(1) infinite; } .vyp-akin.oynat .vyp-akin-kart:nth-of-type(4) { animation: vyp-akin-k4 var(--vyp-akin-tur) steps(1) infinite; } .vyp-akin.oynat .vyp-akin-kart:nth-of-type(5) { animation: vyp-akin-k5 var(--vyp-akin-tur) steps(1) infinite; } @keyframes vyp-akin-k1 { 0%, 12.9% { opacity: 0; } 13%, 92% { opacity: 1; } 92.1%, 100% { opacity: 0; } } @keyframes vyp-akin-k2 { 0%, 29.6% { opacity: 0; } 29.7%, 92% { opacity: 1; } 92.1%, 100% { opacity: 0; } } @keyframes vyp-akin-k3 { 0%, 46.2% { opacity: 0; } 46.3%, 92% { opacity: 1; } 92.1%, 100% { opacity: 0; } } @keyframes vyp-akin-k4 { 0%, 62.9% { opacity: 0; } 63%, 92% { opacity: 1; } 92.1%, 100% { opacity: 0; } } @keyframes vyp-akin-k5 { 0%, 79.6% { opacity: 0; } 79.7%, 92% { opacity: 1; } 92.1%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .vyp-akin-kart { opacity: 1 !important; } .vyp-akin.oynat *, .vyp-akin.oynat *::after { animation: none !important; } } @media (max-width: 767px) { .vyp-akin { grid-template-columns: 1fr; justify-items: center; gap: 16px; } .vyp-akin-satir { grid-template-columns: auto minmax(40px, 92px); } .vyp-akin-panel { width: min(100%, 330px); } } /* -------------------------------------------------------------------------- Hero zemini — TAMAMEN KOD (13.08.2026, Güneş onayı) -------------------------------------------------------------------------- Fotoğraf zemini (cta-bg.png + koyu mavi gradyan) denendi, reddedildi: hero sayfanın geri kalanından kopuyordu ve zeminin bittiği yer içeriğe yapışıyordu. Yerine kodla çizilen AÇIK gradyan: 1) taban yıkama — #f4faff'ten saf beyaza dikey geçiş 2) iki mavi hüzme — sol üst ve sağ üst, marka mavisi (--theme #1C92E9) 3) ince ızgara — 44px teknik grid, ::before üzerinde 4) kablosuz halka — sol üstte eş merkezli daireler, çok soluk Kritik: her katman ALTTA saf beyaza erir (mask + gradyan durakları), yani zeminin görünür bir bitiş çizgisi yoktur — sayfaya karışır. Metinler siyah kalır, menü beyazlatılmaz; okuma kontrastına dokunulmaz. Geri alma = bu bloğu silmek. -------------------------------------------------------------------------- */ .vyp-teknoloji-hero { position: relative; isolation: isolate; /* katmanlar dışarı taşmasın */ padding-bottom: clamp(56px, 7vw, 104px); background-image: radial-gradient(54% 48% at 10% 2%, rgba(28, 146, 233, .30) 0%, rgba(28, 146, 233, 0) 66%), radial-gradient(48% 44% at 92% 8%, rgba(28, 146, 233, .22) 0%, rgba(28, 146, 233, 0) 64%), radial-gradient(70% 40% at 50% 0%, rgba(16, 100, 163, .10) 0%, rgba(16, 100, 163, 0) 70%), linear-gradient(180deg, #e9f4ff 0%, #f6fbff 52%, #fff 90%); background-repeat: no-repeat; } /* Izgara + kablosuz halkalar — ayrı katman, çünkü ikisi de MASKELENİR. Maske olmadan grid alt kenarda kesiliyor ve zemin "bitmiş" gibi duruyordu. */ .vyp-teknoloji-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-radial-gradient(circle at 12% 6%, rgba(28, 146, 233, .13) 0 1px, rgba(28, 146, 233, 0) 1px 76px), repeating-linear-gradient(90deg, rgba(28, 146, 233, .12) 0 1px, rgba(28, 146, 233, 0) 1px 44px), repeating-linear-gradient(0deg, rgba(28, 146, 233, .12) 0 1px, rgba(28, 146, 233, 0) 1px 44px); -webkit-mask-image: radial-gradient(78% 72% at 50% 12%, #000 0%, transparent 78%); mask-image: radial-gradient(78% 72% at 50% 12%, #000 0%, transparent 78%); } /* Zemin dekoratiftir: içerik her zaman üstte kalır. */ .vyp-teknoloji-hero > .container { position: relative; z-index: 1; } /* Hareket azaltma tercihinde de zemin durur — animasyon yok, yalnızca boya. */ /* -------------------------------------------------------------------------- B15 · SEKMELİ SİSTEM ŞEMASI Beş yol art arda dizilince sayfa aynı şeyi beş kez anlatıyormuş gibi oluyordu. Sekme, ziyaretçiye "ben hangisiyim" sorusunu sordurup tek yola odaklanmasını sağlıyor. Sekme değişince yalnız panel değişir, sayfa zıplamaz. -------------------------------------------------------------------------- */ .vyp-sekmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0; list-style: none; } .vyp-sekme { min-height: 44px; padding: 11px 20px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-family: inherit; font-size: 15px; font-weight: 650; color: var(--title); letter-spacing: -.01em; line-height: 1.2; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .vyp-sekme:hover { border-color: var(--theme); color: var(--theme-a11y-text); } .vyp-sekme[aria-selected="true"] { background: var(--theme); border-color: var(--theme); color: #fff; } .vyp-sekme:focus-visible { outline: 2px solid var(--theme); outline-offset: 2px; } /* Mesafe bilgi notu — her sekmede aynı, minimal. Rakam vaat etmez. */ .vyp-mesafe-sar { text-align: center; margin-top: clamp(16px, 2vw, 24px); } .vyp-mesafe { display: inline-block; background: #F7FAFD; border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; color: #5A6B7B; } .vyp-panel-not { margin: 14px 0 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: #5A6B7B; } .vyp-panel-not b { color: var(--title); font-weight: 650; } /* -------------------------------------------------------------------------- B13 varyantları — şema içinde kullanım --iki : iki düğüm, tek hat (hat %25'ten başlar, %50 genişler) --sema : "Adım N" etiketi basılmaz; sekme başlığı zaten çerçeveyi kuruyor -------------------------------------------------------------------------- */ .vyp-akis--iki { grid-template-columns: repeat(2, 1fr); } .vyp-akis--iki .vyp-akis-ok:nth-of-type(1) { left: 25%; width: 50%; } .vyp-akis--sema .vyp-akis-no { display: none; } .vyp-akis--sema .vyp-akis-adim > b { margin-top: 2px; } /* Alıcı kümesi — "hangisini seçerseniz" mesajını taşıyan üçlü */ /* Küme, tek levhalı düğümle aynı yüksekliği kaplar ve dikeyde ortalanır — aksi hâlde alıcılar butondan yukarıda kalıp şema karışık görünüyordu. */ .vyp-alici-kume { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(8px, 1.2vw, 14px); width: 100%; min-height: var(--vyp-durak); } .vyp-alici-kume .vyp-akis-gorsel { width: clamp(84px, 9vw, 118px); height: clamp(84px, 9vw, 118px); border-radius: 20px; padding: 9px; } .vyp-alici-kume .vyp-akis-gorsel::after { inset: -6px; border-radius: 26px; } .vyp-alici-ad { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 650; color: var(--title); text-align: center; letter-spacing: -.01em; } .vyp-alici-tek { display: flex; flex-direction: column; align-items: center; } /* Her turda başka alıcı yanar — "hangisini seçerseniz" hareketten okunur. */ .vyp-akis.oynat .vyp-alici-tek:nth-child(1) .vyp-akis-gorsel::after { animation: vyp-durak calc(var(--vyp-tur) * 3) ease-out infinite; animation-delay: 1.4s; } .vyp-akis.oynat .vyp-alici-tek:nth-child(2) .vyp-akis-gorsel::after { animation: vyp-durak calc(var(--vyp-tur) * 3) ease-out infinite; animation-delay: calc(1.4s + var(--vyp-tur)); } .vyp-akis.oynat .vyp-alici-tek:nth-child(3) .vyp-akis-gorsel::after { animation: vyp-durak calc(var(--vyp-tur) * 3) ease-out infinite; animation-delay: calc(1.4s + var(--vyp-tur) * 2); } /* -------------------------------------------------------------------------- Kurulum adımı — ÜRÜN FOTOĞRAFI DEĞİL İKON (13.08.2026, Güneş) Kurulumda sinyal akmıyor, insan iş yapıyor; anlatılan cihaz değil EYLEM. Fotoğraf koyunca "hangi ürünü alacağım" sorusu doğuyordu. A5 özellik kartının numaralı varyantı — yeni bileşen değil. -------------------------------------------------------------------------- */ .vyp-adim-kart { background: #F7FAFD; border: 1px solid var(--border); border-radius: var(--vyp-kart-r); padding: clamp(20px, 2.2vw, 28px); } .vyp-blok--zemin .vyp-adim-kart { background: #fff; } .vyp-adim-ikon { width: 52px; height: 52px; border-radius: 14px; background: var(--theme3); display: grid; place-items: center; margin-bottom: 14px; } .vyp-adim-ikon svg { width: 26px; height: 26px; fill: none; stroke: var(--theme-a11y-text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .vyp-adim-no { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #7A8592; margin-bottom: 6px; } .vyp-adim-kart h3 { margin: 0 0 8px; font-size: clamp(17px, 1.4vw, 19px); color: var(--title); letter-spacing: -.01em; } .vyp-adim-kart p { margin: 0; font-size: 15px; line-height: 1.65; color: #5A6B7B; } /* Hat etiketi — sekme şemalarında hattın üstünde durur. */ /* Etiket çizginin ÜSTÜNDE değil ÜZERİNDE durur: hattın üstünde asılı kalınca orantısız görünüyordu (13.08.2026). Çip zemini çizgiyi örter. */ .vyp-akis-ok > i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: 12px; font-weight: 650; letter-spacing: -.01em; color: var(--theme-a11y-text); background: var(--theme3); border-radius: 999px; padding: 4px 12px; white-space: nowrap; line-height: 1.2; } /* Mobilde hat dikey; etiket sağa taşınca ekrandan çıkıyordu (390px'de 70px dışarıda kalıyordu). Hattın ÜZERİNE ortalanır — çip zemini çizgiyi örter. */ @media (max-width: 991px) { .vyp-akis-ok > i { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); font-size: 12px; padding: 3px 11px; } } /* -------------------------------------------------------------------------- TEKNOLOJİ v2 · MOBİL DÜZELTMELER TUZAK: bu bölümün kuralları dosyanın SONUNDA durmalı. B13'ün mobil bloğu dosyanın yukarısında; oraya yazılan düzeltmeler, aşağıdaki `--iki` varyantının masaüstü kuralına (aynı özgüllük, sonra gelen kazanır) yeniliyordu. -------------------------------------------------------------------------- */ @media (max-width: 991px) { /* --iki varyantı masaüstünde iki kolon kuruyor ve bu kural media query dışında olduğu için mobilde de geçerli kalıyordu: hat ikinci kolonun ortasına (soldan ~%75) düşüyordu. Mobilde tek kolona zorlanır. */ .vyp-akis--iki { grid-template-columns: 1fr; } .vyp-akis--iki .vyp-akis-ok:nth-of-type(1) { left: auto; width: 2px; } } @media (max-width: 575px) { /* Beş sekme 390px'de dört satıra düşüyordu; dolgu ve punto kısıldı, dokunma hedefi min-height ile 44px'te kalır. */ .vyp-sekmeler { gap: 7px; } .vyp-sekme { padding: 11px 13px; font-size: 13.5px; } .vyp-akin-panel { width: min(100%, 320px); } } /* -------------------------------------------------------------------------- MOBİL / TABLET DENETİM DÜZELTMELERİ · 13.08.2026 320 · 360 · 390 · 414 · 768 · 991 · 1024 · 1440'ta ölçüldü. Yatay taşma ve kardeş çakışması hiçbir kırılımda yoktu; düzeltilenler yerleşim mantığı, nefes payı ve dokunma hedefi. Bu blok dosyanın SONUNDA durur (özgüllük sırası tuzağı — yukarıdaki masaüstü kuralları media query dışında ve sonra geldiği için eziyordu). İKİ EŞİK, İKİ AYRI GEREKÇE: ≤991 → şema dikeye döndüğü ve cihaz dokunmatik olduğu eşik ≤767 → hero'nun iki kolonu tek kolona düştüğü eşik -------------------------------------------------------------------------- */ @media (max-width: 991px) { /* --- B13 şeması · hat etiketin altında kayboluyordu -------------------- Hata: dikey hat 34–52px, etiket çipi 26px — çizgi neredeyse tamamen çipin altında kalıyor, iki durak üst üste binmiş görünüyordu. Çözüm: hat uzar, blok aralığı açılır; etiket ortada, altı ve üstü açık. */ .vyp-akis { gap: clamp(14px, 4vw, 24px); } .vyp-akis-ok { height: clamp(72px, 12vw, 96px); } /* --- Alıcı kümesi · etiketler birbirine değiyordu ---------------------- Hata: esnek dizilimde üç öğe kaptan geniş çıkıyordu; 390'da L20 alt satıra düşüyor, 768'de üç etiket 9px boşlukla yapışıyordu. Çözüm: üç eşit kolonlu ızgara + ekranla büyüyen kolon boşluğu. `min-height` kalkar: dikey ortalama kuralı yalnız masaüstü içindi, şema dikeyken altta boş yer bırakıyordu. */ .vyp-alici-kume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px clamp(12px, 3vw, 30px); align-items: start; justify-items: center; min-height: 0; margin-bottom: 6px; } .vyp-alici-tek { width: 100%; } .vyp-alici-kume .vyp-akis-gorsel { width: min(100%, clamp(80px, 11vw, 108px)); height: clamp(80px, 11vw, 108px); } .vyp-alici-ad { font-size: clamp(11px, 1.5vw, 12.5px); line-height: 1.3; margin-top: 6px; } /* Küme başlığı etiketlerden daha uzakta dursun — aksi hâlde "L20 İkaz Lambası" ile "Çağrı görüntülenir" aynı öbek gibi okunuyordu. */ .vyp-alici-kume + b { margin-top: 14px; } } @media (max-width: 767px) { /* --- A18 hero · üç buton YAN YANA, hatlar AŞAĞI bakar ------------------ Hata: masaüstü kurgusu mobilde de korunuyordu — butonlar alt alta, hatları sağa doğru gidip BOŞLUKTA bitiyordu; panel ise altta duruyordu. Sinyal hiçbir yere gitmiyormuş gibi okunuyordu. Çözüm: butonlar tek satıra dizilir, her hat 90° döndürülüp panele bakar. Döndürme `transform` ile yapılır; nokta animasyonu `left` üzerinden çalıştığı için dönüşle birlikte doğru eksende akmayı sürdürür. */ .vyp-akin { gap: 4px; } .vyp-akin-sol { flex-direction: row; justify-content: center; align-items: flex-start; gap: clamp(14px, 5vw, 26px); } .vyp-akin-satir { grid-template-columns: 1fr; justify-items: center; gap: 0; } .vyp-akin-hat { width: 42px; /* döndükten sonra dikey uzunluk */ transform: rotate(90deg); margin: 20px 0; /* 2px + 2×20 = 42px dikey yer açar */ } } @keyframes vyp-eink { 0% { opacity: 0; background: #2b2b2b; } 20% { opacity: 1; background: #2b2b2b; } 50% { opacity: 1; background: #f2f2f2; } 75% { opacity: 1; background: #2b2b2b; } 90% { opacity: 1; background: #ffffff; } 100% { opacity: 0; } }