/* ========================================================================== Sağdan sola (RTL) düzeltmeleri — YALNIZCA Arapça sayfalarda yüklenir. Neden ayrı dosya? style.css bin küçük ölçüm ve düzeltmeyle bugünkü haline geldi; onu mantıksal özelliklere (margin-inline vb.) çevirmek Türkçe ve İngilizce sayfaları da riske atardı. Bu dosya yalnızca olan sayfalara ediliyor (bkz. layouts/base.njk), yani diğer iki dil bu satırların hiçbirini indirmiyor bile. İçindeki her kural style.css'te FİZİKSEL yön taşıyan bir kuralın karşılığıdır. style.css'e yön taşıyan yeni bir kural eklerseniz (left, right, margin-left, text-align, translateX...) buraya da karşılığını ekleyin. ========================================================================== */ /* -------------------------------------------------------------------------- Arapça yazı tipi — Cairo (SIL Open Font License 1.1) Google Fonts'un "arabic" alt kümesi: 30 KB, değişken ağırlık 200–1000. Latin harfler ve RAKAMLAR bilerek bu dosyada YOK; onlar sitenin geri kalanıyla aynı kalsın diye Plus Jakarta Sans'a düşüyor. Böylece "1300 ورقة/دقيقة" gibi karışık satırlarda rakamlar Türkçe ve İngilizce sayfalardakiyle birebir aynı görünüyor. -------------------------------------------------------------------------- */ @font-face { font-family: 'Cairo'; src: url('/fonts/cairo-arabic.woff2') format('woff2'); font-weight: 200 1000; font-style: normal; font-display: swap; } :root { --font: 'Cairo', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; } /* Arapça harfler Latin'e göre daha küçük görünür; gövde metni bir tık büyütülmezse Türkçe sayfayla aynı puntoda daha zor okunuyor. */ body { font-size: 17px; } /* -------------------------------------------------------------------------- Bölüm başlıklarının altındaki vurgu çizgisi -------------------------------------------------------------------------- */ [dir="rtl"] .bolum-basligi h1::after, [dir="rtl"] .bolum-basligi h2::after { left: auto; right: 0; background: linear-gradient(270deg, var(--brand-600), var(--brand-400)); } [dir="rtl"] .bolum-basligi.ortala h1::after, [dir="rtl"] .bolum-basligi.ortala h2::after { left: 50%; right: auto; transform: translateX(-50%); } [dir="rtl"] .section--navy .bolum-basligi h1::after, [dir="rtl"] .section--navy .bolum-basligi h2::after, [dir="rtl"] .section--blue .bolum-basligi h1::after, [dir="rtl"] .section--blue .bolum-basligi h2::after { background: linear-gradient(270deg, var(--brand-400), rgba(255,255,255,.5)); } /* Rozetin sol/sağ iç boşluğu asimetrik (nokta tarafı dar) */ [dir="rtl"] .rozet { padding: 6px 11px 6px 15px; } [dir="rtl"] .urun-rozet { padding: 6px 10px 6px 12px; } /* -------------------------------------------------------------------------- Butonlar — oku ters çevir -------------------------------------------------------------------------- */ [dir="rtl"] .btn::after { content: "←"; } [dir="rtl"] .btn:hover::after { transform: translateX(-3px); } /* DIKKAT: urun kartindaki butonun ::after'i ok DEGIL, kartin tamamini kaplayan gorunmez tiklama katmani (style.css: .urun-kart-govde .btn::after -> content:""; position:absolute; inset:0). Yukaridaki kural onunla ayni ozgullukte oldugu ve sonra yuklendigi icin oku geri getiriyor, ok da mutlak konumlu kutunun sol ust kosesine — yani kartin kosesine — basiliyordu. Katmanin bos icerigi burada geri veriliyor. */ [dir="rtl"] .urun-kart-govde .btn::after { content: ""; } /* -------------------------------------------------------------------------- "İçeriğe geç" bağlantısı — RTL'de sayfanın sağ üst köşesinden inmeli -------------------------------------------------------------------------- */ [dir="rtl"] .atla-baglantisi { left: auto; right: 12px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } /* -------------------------------------------------------------------------- Üst şerit ve menü -------------------------------------------------------------------------- */ [dir="rtl"] .serit-ikon { margin-right: 0; margin-left: 6px; } /* Esnek satırda "auto" kenar boşluğu fiziksel yön taşıyor: RTL'de menüyü satır sonuna (sola) itmek için sağ tarafa verilmeli. */ [dir="rtl"] .main-nav { margin-left: 0; margin-right: auto; } [dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; } [dir="rtl"] .main-nav a::after { left: auto; right: 0; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ [dir="rtl"] .hero::after { left: auto; right: -12%; } /* Video alanı metnin karşı tarafında dursun: metin sağda, medya solda */ [dir="rtl"] .hero-medya { right: auto; left: 0; } [dir="rtl"] .hero-medya-yer { border-left: 0; border-right: 1px dashed rgba(255,255,255,.22); } /* -------------------------------------------------------------------------- Tanıtım bloğu ve öne çıkan kutular -------------------------------------------------------------------------- */ [dir="rtl"] .deneyim-rozeti { left: auto; right: 0; border-radius: 0 var(--radius) var(--radius) var(--radius); } [dir="rtl"] .feature::before { transform-origin: right; } [dir="rtl"] .feature-tik { right: auto; left: -26px; } [dir="rtl"] .feature:hover .feature-tik { transform: translate(4px, -4px); } /* -------------------------------------------------------------------------- Ürün kartı ve ürün sayfası -------------------------------------------------------------------------- */ [dir="rtl"] .urun-kart-gorsel .urun-rozet { left: auto; right: 12px; } [dir="rtl"] .urun-rozet--satir { margin: 0 8px 12px 0; } [dir="rtl"] .ozellik-listesi li span:last-child { text-align: left; } /* -------------------------------------------------------------------------- Yorumlar -------------------------------------------------------------------------- */ [dir="rtl"] .yorum-kart::before { right: auto; left: 22px; } /* Oklar akış yönünü göstermeli: RTL'de "sonraki" sola bakar */ [dir="rtl"] .yorum-ok svg { transform: scaleX(-1); } /* -------------------------------------------------------------------------- Blog / yazı gövdesi -------------------------------------------------------------------------- */ [dir="rtl"] .blog-icerik ul, [dir="rtl"] .blog-icerik ol { padding-left: 0; padding-right: 22px; } /* -------------------------------------------------------------------------- İletişim ve harita -------------------------------------------------------------------------- */ [dir="rtl"] .ulasim-karti::before { right: auto; left: -18%; } /* Kart FİZİKSEL olarak sağda kalmalı: Google'ın gömülü haritası kendi işletme kutusunu sol üste sabitliyor ve dili değişse de orada duruyor. RTL'de flex-end sol tarafa denk geldiği için burada flex-start deniyor. */ [dir="rtl"] .harita-banner .container { justify-content: flex-start; } /* -------------------------------------------------------------------------- Footer ve uyarı kutusu -------------------------------------------------------------------------- */ [dir="rtl"] .footer-etiket { margin-right: 0; margin-left: 4px; } [dir="rtl"] .icerik-alani { border-left: 1px dashed #E9C87A; border-right: 4px solid #E9A93B; } /* -------------------------------------------------------------------------- Yüzen WhatsApp butonu -------------------------------------------------------------------------- */ [dir="rtl"] .wa-float { right: auto; left: 22px; } /* -------------------------------------------------------------------------- Dar ekran karşılıkları — style.css'teki aynı kırılma noktaları -------------------------------------------------------------------------- */ @media (max-width: 900px) { [dir="rtl"] .hero-medya-yer { border-right: 0; } } @media (max-width: 560px) { /* style.css bu genişlikte "etiket / değer" çiftini alt alta alıyor ve değeri sola yaslıyor; RTL'de sağa yaslanmalı. */ [dir="rtl"] .ozellik-listesi li span:last-child { text-align: right; } }