/* ========================================================================== GENOVITECH — RTL ÖZEL DURUMLAR (ELLE YAZILIR — üretilmez) -------------------------------------------------------------------------- `rtl.css` sitenin kendi CSS'inde bulunan fiziksel yön özelliklerini otomatik olarak aynalar. Bu dosya, otomatik aynalamanın DOĞRU YAPAMADIĞI durumları üstlenir ve **`rtl.css`'ten SONRA** yüklenir (bkz. `app/layout.js`), böylece üretilmiş katmanı gerektiğinde ezebilir. İçerik: 1. Arapça yazı tipi 2. Arapça tipografi — harf aralığı ve büyük/küçük harf sıfırlaması 3. Soldan-sağa "adalar" — telefon, e-posta, URL, ürün kodu, teknik yazım 4. Header ve footer — yerleşim DEĞİŞMEZ, yalnızca metin Arapça 5. Yön belirten ikonların çevrilmesi 6. Yön bağımlı keyframe ikizi (gvSheen) Tüm kurallar `[dir="rtl"]` ile kapsanmıştır; soldan-sağa diller (tr, en, de, ru, fr) bu dosyadan hiç etkilenmez. ========================================================================== */ /* -------------------------------------------------------------------------- 1. ARAPÇA YAZI TİPİ -------------------------------------------------------------------------- Sitenin yüklediği yazı tipleri (Satoshi, Inter, Source Serif 4, Georgia) Arapça karakterleri İÇERMEZ; müdahale edilmezse tarayıcı işletim sisteminin varsayılan Arapça yazı tipine düşer ve sayfa marka dışı görünür. IBM Plex Sans Arabic, markanın geometrik-nötr arayüz sesiyle (Satoshi / Inter) bilinçli olarak eşleşen Plex ailesinin Arapça üyesidir. Sıralama önemli: Arapça yazı tipi mevcut yığının ARDINA eklenir, önüne değil. Böylece Latin metin (marka ve ürün adları) Satoshi'de kalır; yalnızca Satoshi'nin kapsamadığı Arapça karakterler Plex'e düşer. -------------------------------------------------------------------------- */ [dir="rtl"] .theme-genovitech { --font-global: "Satoshi", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-alt: "Satoshi", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-global-alt: "Satoshi", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: Georgia, "IBM Plex Sans Arabic", "Times New Roman", Times, serif; } /* `--pdp-serif` ürün detay sayfasının kapsamında (`.gnv-pdp`) tanımlıdır; yukarıdaki `.theme-genovitech` değeri orada ezilir. Bu yüzden ayrıca tanımlanır. */ [dir="rtl"] .gnv-pdp { --pdp-serif: "Source Serif 4", "Iowan Old Style", Georgia, "IBM Plex Sans Arabic", "Times New Roman", serif; } /* Serif yığınını doğrudan yazan kurallar (değişken kullanmayanlar). */ [dir="rtl"] .theme-genovitech .gnv-pdp :is(h1, h2, h3, em, .gnv-pdp-lead) { font-family: var(--pdp-serif); } /* -------------------------------------------------------------------------- 2. ARAPÇA TİPOGRAFİ SIFIRLAMASI -------------------------------------------------------------------------- Sitenin dekoratif mikro-etiketleri `letter-spacing` (0.1–0.2em) ve `text-transform: uppercase` kullanır. Arapça'da: • `letter-spacing` harflerin BİRLEŞMESİNİ koparır ve kelimeyi okunmaz hâle getirir — bu yüzden sıfırlanmalıdır. • `text-transform` anlamsızdır (Arapça'da büyük/küçük harf yoktur). • `word-spacing` ve `line-height` değerleri Latin metne göre ayarlandığı için Arapça'da sıkışık kalır; satır yüksekliği bir miktar açılır. Latin adalar (`.gv-ltr`) bu sıfırlamadan muaftır: oradaki metin Latin harflerle yazıldığı için aralık ve büyük harf düzeni korunmalıdır. -------------------------------------------------------------------------- */ [dir="rtl"] .theme-genovitech *:not(.gv-ltr):not(.gv-ltr *):not([dir="ltr"]) { letter-spacing: normal !important; text-transform: none !important; } /* Arapça metin, aynı puntoda Latin metinden daha küçük görünür ve satırları daha sıkışıktır; okunabilirlik için ölçülü bir düzeltme. */ [dir="rtl"] .theme-genovitech :is(p, li, dd, dt, blockquote, figcaption) { line-height: 1.85; } /* -------------------------------------------------------------------------- 3. SOLDAN-SAĞA ADALAR -------------------------------------------------------------------------- RTL bir sayfada bile şu içerik soldan sağa okunur ve iki yönlü algoritma tarafından dağıtılmamalıdır: telefon numaraları, e-posta adresleri, URL'ler, ürün kodları ve `1×10⁹ CFU/ml` gibi teknik yazımlar. `.gv-ltr` sınıfı bir bileşenin bu içeriği işaretlemesi için hazır bir yardımcıdır. Aşağıdaki kural, etiketlenmemiş yaygın durumları da kapsar. -------------------------------------------------------------------------- */ [dir="rtl"] .gv-ltr, [dir="rtl"] [dir="ltr"] { direction: ltr; unicode-bidi: isolate; text-align: left; letter-spacing: inherit; text-transform: inherit; } [dir="rtl"] .theme-genovitech :is(code, kbd, samp, pre), [dir="rtl"] .theme-genovitech a[href^="mailto:"], [dir="rtl"] .theme-genovitech a[href^="tel:"], [dir="rtl"] .theme-genovitech :is(dd, dt) { unicode-bidi: isolate; } /* Ürün künyesindeki serbest metin alanları (içerik, doz, form, hedef) çoğunlukla Latince tür adı ve ölçü birimi taşır; tek parça kalsınlar. */ [dir="rtl"] .theme-genovitech .gnv-pdp-facts dd, [dir="rtl"] .theme-genovitech .gnv-pdp-card-tag { unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 4. HEADER ve FOOTER — YERLEŞİM DEĞİŞMEZ, YALNIZCA METİN ARAPÇA -------------------------------------------------------------------------- TASARIM KARARI: Arapça sürümde header ve footer'ın yerleşimi diğer dillerdekiyle AYNI kalır — logo solda, ana menü ortada, dil seçici ve iletişim çağrısı sağda; footer sütunları aynı sırada. Yalnızca metinler Arapça olur. Bunun iki parçası var: 1) `rtl.css` bu iki bölgeye ait HİÇBİR kuralı aynalamaz. (`scripts/generate-rtl-css.mjs` → `HEADER_FOOTER_SELECTORS`) 2) Aşağıdaki `direction: ltr`, yerleşimin `dir="rtl"` yüzünden kendiliğinden dönmesini engeller: flex `row` yönü, `text-align: start` ve `margin-inline` gibi mantıksal değerler bu iki kökün içinde LTR gibi davranır. Arapça METİN yine doğru okunur: iki yönlü algoritma her metin parçasını kendi yönünde dizer; yalnızca blok yerleşimi sabit kalır. Kapsam bilinçli olarak bu iki kökle sınırlıdır; sayfa gövdelerinin geri kalanı tam aynalanır. -------------------------------------------------------------------------- */ [dir="rtl"] .theme-genovitech .main-nav, [dir="rtl"] .theme-genovitech .gv-footer-modern { direction: ltr; } /* Mega menü panelleri header'ın dışına taşabildiği için ayrıca sabitlenir. */ [dir="rtl"] .theme-genovitech .gnv-products-panel, [dir="rtl"] .theme-genovitech .gnv-solutions-panel, [dir="rtl"] .theme-genovitech .gnv-corporate-panel, [dir="rtl"] .theme-genovitech .ind-lang-panel { direction: ltr; } /* Marka adları ve ürün adları her dilde Latin harfli kalır; header/footer LTR olduğu için ek bir izolasyona gerek yoktur. Arapça etiketlerin kendi yönünde okunması `dir` özniteliğiyle zaten sağlanır. */ [dir="rtl"] .theme-genovitech .main-nav :is(a, span, strong, small, li), [dir="rtl"] .theme-genovitech .gv-footer-modern :is(a, span, strong, small, li, p, h2) { text-align: inherit; } /* -------------------------------------------------------------------------- 5. YÖN BELİRTEN İKONLAR -------------------------------------------------------------------------- İkon fontu yönü sabit çizer: `mi-arrow-right` her zaman sağa bakar. RTL'de "ileri" ve "sonraki" anlamı sola döndüğü için bu ikonlar yatayda çevrilir. Sağ/sol çiftleri BİRLİKTE çevrilir; böylece bir slider'ın "önceki" ve "sonraki" düğmeleri anlamlarını korur, yalnızca yönleri değişir. -------------------------------------------------------------------------- */ [dir="rtl"] .theme-genovitech :is( .mi-arrow-right, .mi-arrow-left, .mi-chevron-right, .mi-chevron-left, .mi-arrow-circle-right, .mi-arrow-circle-left ) { display: inline-block; transform: scaleX(-1); } /* Çevirme, ikonun kendi hover hareketiyle çakışmasın. */ [dir="rtl"] .theme-genovitech .bio-field-controls button:hover :is(.mi-arrow-right, .mi-arrow-left) { transform: scaleX(-1); } /* -------------------------------------------------------------------------- 6. KEYFRAME İKİZİ — gvSheen -------------------------------------------------------------------------- `[dir="rtl"] .seçici` bir `@keyframes` GÖVDESİNE ulaşamaz: keyframe'ler seçici değil, animasyon adıyla eşleşir. `gvSheen` parlamayı soldan sağa süpürür (`translateX(-38%)` → `translateX(38%)`); RTL'de aynı hareketin sağdan sola olması gerekir. Bu yüzden aynalanmış bir ikiz tanımlanır ve animasyon adı değiştirilir. Diğer keyframe'ler (`indSpin`, `indShadow`, `gnv-corporate-menu-enter`) `translate(-50%)` ile ORTALAMA yapar; ortalama yön bağımsız olduğu için ikiz gerekmez. -------------------------------------------------------------------------- */ @keyframes gvSheenRtl { 0%, 100% { transform: translateX(38%); opacity: 0.35; } 50% { transform: translateX(-38%); opacity: 0.8; } } [dir="rtl"] .theme-genovitech .ind-slide-veil::after { animation-name: gvSheenRtl; } /* -------------------------------------------------------------------------- 7. ÜRÜN ŞERİDİ — aynalanmış keyframe -------------------------------------------------------------------------- Şerit LTR'de `translate3d(0)` → `translate3d(-50%)` ile sola akar. RTL'de iz sağdan başlar (satır içi başlangıç sağdadır), bu yüzden SOLA kaydırmak içeriği görünüm penceresinden tamamen çıkarır: şerit boş görünür. `animation-direction: reverse` de yetmez — yön değil, işaret değişmelidir. Bu yüzden aynalanmış bir ikiz tanımlanır: iz `0` → `+50%` arasında, yani sağa doğru akar ve döngü dikişsiz kalır. -------------------------------------------------------------------------- */ @keyframes gnvRailRtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--rail-shift, 50%), 0, 0); } } [dir="rtl"] .theme-genovitech .gnv-rail-track { animation-name: gnvRailRtl; }