seçiliyor ki işaretlemede ne
satır içi style ne de ek class gereksin. */
.fp-logo b {
font-weight: 800;
font-style: normal;
letter-spacing: inherit;
color: inherit;
}
/* ─────────────────────────────────────────────────────────────────────────
4. "+" İŞARETİ
Kontur tekniği: -webkit-text-stroke + paint-order. Eski dört köşe
text-shadow numarası köşegenlerde boşluk bırakıyordu ve büyük boyutta bu
görünür hale geliyordu. paint-order konturu dolgunun ARKASINA çizer,
böylece harf incelmez. Desteklemeyen tarayıcı için sekiz yönlü gölge
yedeği aşağıda.
───────────────────────────────────────────────────────────────────────── */
.fp-logo::after {
/* Temel biçim: her tarayıcıda çalışır. */
content: var(--fp-logo-sembol);
font-size: calc(var(--fp-logo-arti-olcek) * 1em);
font-weight: 800;
/* DİKKAT: buradan sonraki her em "+"ın KENDİ boyutudur. Logo em'i
isteyen değerler bu yüzden ölçeğe bölünüyor. */
/* "+" YÜKSELTMESİ: position/top ile, vertical-align ile DEĞİL.
Bu bilerek böyle ve geri çevrilmemeli:
vertical-align satır kutusunu BÜYÜTÜR. Denendi ve logonun kutusu
1,10em yerine 1,26em oldu; fazlalığın tamamı üstte biriktiği için
logo "üstüne padding verilmiş" gibi göründü ve hizası kaydı.
position/top ise yalnızca çizimi kaydırır, kutuya dokunmaz —
eski .plusLogo tanımının yıllardır yaptığı şey de buydu.
Bedeli: "+" kutunun 0,2em üstüne taşar. overflow:hidden olan bir
ata onu kırpabilir. Eski tanımda da böyleydi ve hiç sorun çıkmadı;
görünen hiza bozukluğu ise varsayımsal kırpmadan daha ağır bastı. */
position: relative;
vertical-align: baseline;
top: calc(var(--fp-logo-arti-kalkis) / var(--fp-logo-arti-olcek) * -1em);
margin-left: calc(var(--fp-logo-arti-yanasma) / var(--fp-logo-arti-olcek) * -1em);
letter-spacing: 0;
color: var(--fp-logo-sari);
/* Sekiz yönlü kontur + yumuşak gölge. paint-order destekleniyorsa
aşağıdaki blok bunun yerini alır. */
text-shadow:
0 0 var(--fp-logo-golge-yayma) var(--fp-logo-golge-renk),
calc(var(--fp-logo-kontur) * -.5) calc(var(--fp-logo-kontur) * -.5) 0 var(--fp-logo-kontur-renk),
calc(var(--fp-logo-kontur) * .5) calc(var(--fp-logo-kontur) * -.5) 0 var(--fp-logo-kontur-renk),
calc(var(--fp-logo-kontur) * -.5) calc(var(--fp-logo-kontur) * .5) 0 var(--fp-logo-kontur-renk),
calc(var(--fp-logo-kontur) * .5) calc(var(--fp-logo-kontur) * .5) 0 var(--fp-logo-kontur-renk),
0 calc(var(--fp-logo-kontur) * -.65) 0 var(--fp-logo-kontur-renk),
0 calc(var(--fp-logo-kontur) * .65) 0 var(--fp-logo-kontur-renk),
calc(var(--fp-logo-kontur) * -.65) 0 0 var(--fp-logo-kontur-renk),
calc(var(--fp-logo-kontur) * .65) 0 0 var(--fp-logo-kontur-renk);
}
/* Ekran okuyucuya "+"ın süs olduğunu söyle: marka sesli okunduğunda
"FiyatPlus" der. AYRI blok, çünkü bu sözdizimi Safari 17.4 öncesinde
TÜM content bildirimini geçersiz kılar ve "+" tamamen kaybolurdu. */
@supports (content: "a" / "b") {
.fp-logo::after {
content: var(--fp-logo-sembol) / "";
}
}
@supports (paint-order: stroke) {
.fp-logo::after {
-webkit-text-stroke: var(--fp-logo-kontur) var(--fp-logo-kontur-renk);
paint-order: stroke fill;
/* Kontur artık gerçek çizgi; gölge tek başına kalıyor. */
text-shadow: 0 0 var(--fp-logo-golge-yayma) var(--fp-logo-golge-renk);
}
}
/* ─────────────────────────────────────────────────────────────────────────
5. VARYANTLAR
Hepsi yalnızca değişken ezer. Yeni geometri tanımlayan varyant YOKTUR;
olursa bu dosyanın varlık sebebi ortadan kalkar.
───────────────────────────────────────────────────────────────────────── */
/* Koyu zeminde. */
.fp-logo--beyaz { --fp-logo-murekkep: #fff; }
/* Renkli bir başlığın parçasıyken kelime işareti başlığın rengini alsın. */
.fp-logo--devral { --fp-logo-murekkep: currentColor; }
/* Sade: rengi korur, kontur ve gölgeyi atar. 16px altındaki kullanımlarda
ve yoğun arayüzlerde kontur çamura döner; orada bunu kullan. */
.fp-logo--sade { --fp-logo-kontur: 0px; }
/* Tek renk: tek renkli baskı, kaşe, gravür, faks, tek renkli damga.
Kurumsal kimliğin zorunlu varyantı. */
.fp-logo--tek-renk {
--fp-logo-murekkep: currentColor;
--fp-logo-sari: currentColor;
--fp-logo-kontur: 0px;
}
.fp-logo--sade::after,
.fp-logo--tek-renk::after {
-webkit-text-stroke: 0;
text-shadow: none;
}
/* Yalnızca "+": daraltılmış menü, favicon, avatar, filigran.
BOŞ etikete verilir; kelime işareti hiç yazılmaz:
Eskiden bunun için ayrı bir ve ayrı bir class seti vardı. */
.fp-logo--isaret::after {
margin-left: 0;
/* Tek başınayken "kalkış" anlamsız: kelime işareti yok ki ona göre
yükselsin. Tabana oturur, kutu tam ortalanır. */
position: static;
top: auto;
vertical-align: baseline;
}
/* ─────────────────────────────────────────────────────────────────────────
6. BOYUT KOLAYLIKLARI
Zorunlu değil; font-size vermek her zaman yeterlidir. Bunlar yalnızca sık
kullanılan yerleşimlerin adlandırılmış hali, herkes aynı rakamı yazsın
diye. rem: kullanıcı tarayıcı yazı boyutunu büyütürse logo da büyür.
───────────────────────────────────────────────────────────────────────── */
.fp-logo--xs { font-size: 1.25rem; } /* 20px — alt bilgi, satır içi künye */
.fp-logo--sm { font-size: 1.625rem; } /* 26px — dar üst bant */
.fp-logo--md { font-size: 2rem; } /* 32px — mobil başlık, rapor başlığı */
.fp-logo--lg { font-size: 2.5rem; } /* 40px — kenar çubuğu (ölçek referansı) */
.fp-logo--xl { font-size: 3.125rem; } /* 50px — pazarlama sitesi üst bandı */
/* ─────────────────────────────────────────────────────────────────────────
7. YAZDIRMA VE PDF
Tarayıcılar baskıda dekoratif rengi eler. Logo için bu kabul edilemez;
sarı "+" markanın kendisi.
───────────────────────────────────────────────────────────────────────── */
@media print {
.fp-logo {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Baskıda ince yumuşak gölge çamurlaşır; kontur kalır, gölge gider. */
.fp-logo::after {
text-shadow: none;
}
}
/* ─────────────────────────────────────────────────────────────────────────
8. MATEMATİK SEMBOLÜ ANİMASYONU — İSTEĞE BAĞLI
Temel sınıf HAREKETSİZDİR. İsteyen .fp-logo--canli ekler.
Bilinçli karar: animasyon logonun parçası değil, üstüne takılan bir
davranış. Kurumsal işaretin tanımı hareketsiz olmalı; aksi halde her PDF,
her e-posta ve her baskı "eksik" sayılırdı.
Sembolü fiyatplus-logo.js değiştirir; yaptığı tek şey --fp-logo-sembol
değişkenini yazmaktır.
───────────────────────────────────────────────────────────────────────── */
.fp-logo--canli::after {
/* Sembol genişliği ×, ÷, − arasında değişiyor; kutu sabitlenmezse
kelime işareti her geçişte yerinden oynar.
HATA NOTU: burada önce calc(var(--fp-logo-arti-olcek) * .62em)
yazılmıştı. İki kusuru vardı: (a) ::after içinde 1em ZATEN "+"ın
boyutu, ölçekle bir daha çarpmak yanlış; (b) 0.62em glifin gerçek
ilerlemesinden (0.545em) geniş. İkisi birlikte kutuyu 0.682em'e
çıkarıp "+"ı 40px logoda 3 piksel sağa itiyordu — animasyonlu
logonun "s" harfine mesafesi animasyonsuzdan farklı görünüyordu.
Doğrusu kutuyu glifin kendi ilerlemesine eşitlemek. */
display: inline-block;
width: var(--fp-logo-arti-genislik);
text-align: center;
}
.fp-logo--canli.fp-logo--degisiyor::after {
animation: fp-logo-sembol-cikis 200ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.fp-logo--canli.fp-logo--geliyor::after {
animation: fp-logo-sembol-giris 200ms cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes fp-logo-sembol-cikis {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(1.3); }
}
@keyframes fp-logo-sembol-giris {
from { opacity: 0; transform: scale(.82); }
to { opacity: 1; transform: scale(1); }
}
/* Hareket azaltma talebi mutlaka karşılanır: animasyon tamamen susar,
logo "+" işaretinde kalır. */
@media (prefers-reduced-motion: reduce) {
.fp-logo--canli.fp-logo--degisiyor::after,
.fp-logo--canli.fp-logo--geliyor::after {
animation: none;
opacity: 1;
transform: none;
}
}