/* ========================================================================== RTL (sağdan sola) — yalnızca dir="rtl" dillerde yüklenir (header.php). EN SON yüklenmeli: aşağıdaki kurallar yön-bağımlı olanları eziyor. Buradaki kurallar SADECE tek yönlü olanları çeviriyor. Boşluk ve kenarlık kuralları kaynak CSS'te mantıksal özelliklere (padding-inline-start vb.) çevrildiği için kendiliğinden doğru çalışıyor; onlar burada yok. ========================================================================== */ /* ---------- 1. yazı tipi ------------------------------------------------- Cormorant Garamond, Libre Caslon Text ve Instrument Sans'ta Arap harfi YOK. Değişkenler ezilmezse tarayıcı sessizce sistem yedeğine düşer ve yazı sitenin geri kalanına hiç benzemez. Noto Naskh Arabic naskh geleneğinde bir yüz — sitenin serif karakterine en yakın karşılık. Özgüllük notu: --serif vb. :root'ta (html), --caslon vb. .about-page / .schools-page'te (body). [dir=rtl] html'i (0,1,0) ile eşliyor ve bu dosya sonra yüklendiği için kazanıyor; body'dekiler için [dir=rtl] body (0,1,1). */ [dir="rtl"]{ --serif:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif; --body-serif:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif; --sans:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif; --ui-sans:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif; } [dir="rtl"] body{ --caslon:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif; --cormorant:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif; --isans:"Noto Naskh Arabic","Segoe UI",Tahoma,Arial,sans-serif; } /* Naskh'ta satırlar Latin'e göre daha yüksek: harf üstü/altı işaretler sıkışık satır aralığında üst üste biner. */ [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.35} /* Ana sayfa hero'sundaki h1 clamp(40px,7.4vw,112px) — 1.35, 112px'te satır başına ~151px'e çıkıyor (LTR'de 1.09 = ~122px). İki satırlık başlık ekranın çoğunu kaplayıp CTA butonlarını görünür alanın dışına itiyordu. Bu ölçekte satırlar zaten geniş; Naskh işaretlerine 1.15 fazlasıyla yetiyor. */ [dir="rtl"] .hero h1{line-height:1.15} /* ---------- 1b. sağ kenar boşluğu ---------------------------------------- --gut her iki kenara da aynı veriliyor (LTR'de 95px sol / 95px sağ). RTL'de içerik sağa yaslandığı için sağdaki gut artık "başlangıç" kenarı oluyor ve aynı 95px gereğinden geniş duruyordu. Yalnızca BAŞLANGIÇ (sağ) tarafı daraltılıyor; bitiş (sol) tarafı --gut'ta kalıyor. Dar ekranda fark yok: iki clamp'in de tabanı 20px. Fark ancak yer varken açılıyor — 1512px'te 95px yerine ~60px. Liste elle tutuluyor çünkü kaynak CSS gut'u üç ayrı değişkenle dağıtıyor (--gut / --sc-gut / --ab-gut) ve .wrap fiziksel kısayol kullanıyor; tek bir değişkeni ezmek iki kenarı birden daraltırdı. */ [dir="rtl"]{--gut-rtl:clamp(20px,4vw,76px)} [dir="rtl"] .wrap, [dir="rtl"] .nav, [dir="rtl"] .sc-wrap, [dir="rtl"] .sc-hero__inner, [dir="rtl"] .er__wrap, [dir="rtl"] .ab-wrap, [dir="rtl"] .about-hero__inner, [dir="rtl"] .ab-why__inner, [dir="rtl"] .ab-audience__inner, [dir="rtl"] .ab-experience__inner, [dir="rtl"] .ab-borders__inner{padding-inline-start:var(--gut-rtl)} /* ---------- 1c. ortalanmış içerik ---------------------------------------- Bölüm 1b başlangıç kenarını daraltıyor. Bu yalnızca BAŞLANGICA YASLI metin için doğru: ortalanmış içerikte iki kenarın eşit olmaması, içeriği sayfanın görsel merkezinden kaydırıyor. Ölçüldü — 1440px'te 16px, 1920px'te 22px. CTA bandının arka planındaki silüet viewport'a göre ortalı olduğu için kayma orada gözle görülüyor. Ortalanan KAPLAR simetrik dolguya döndürülüyor; bant içinde ortalanan tek bir BLOK ise (pull-quote) kabın asimetrisi kadar telafi ediliyor: başlangıç tarafına (--gut - --gut-rtl) kadar boşluk eklenince ortalanan içerik yarısı kadar, yani tam merkeze kayıyor. */ [dir="rtl"] .cta .wrap, [dir="rtl"] .sc-band--center .sc-wrap{padding-inline-start:var(--gut)} [dir="rtl"] main:not([dir="ltr"]) .sc-quote{margin-inline-start:calc(var(--gut) - var(--gut-rtl))} /* ---------- 2. üst menü ve footer ----------------------------------------- header.php ve footer.php artık kalıcı dir="ltr" koymuyor; ikisi de sayfanın geri kalanıyla aynı yönü alıyor. Flex/grid akışı (logo/menü sırası, footer sütunları, dil seçici) direction'a göre kendiliğinden doğru sıralanıyor — mantıksal özellikler (padding-inline-start, text-align:start …) de öğenin kendi yönüne göre çözülüyor, o yüzden footer'da hiç ek kural yok. Aşağıdakiler yalnızca FİZİKSEL left/right kullanan ve kendiliğinden aynalanmayan parçalar: açılır menü/dil seçici konumlanması, aktif satırın iç gölgesi, alt çizgi animasyonunun büyüme yönü, skip-link konumu. */ /* right: içeriğin başlangıç kenarıyla aynı hizada (bkz. bölüm 1b). */ [dir="rtl"] .skip-link{left:auto;right:var(--gut-rtl)} /* Üst menüdeki alt çizgi artık sağdan büyümeli (metin sağdan başlıyor). */ [dir="rtl"] .nav-item a::after{transform-origin:right center} /* Açılır menüler tetikleyicinin SAĞINA yaslanmalı — metin de sağdan başlıyor. DOM'daki SON öğe artık RTL akışta en SOLDA kalıyor (flex kendiliğinden ayna); orada sağa değil sola yaslamak gerekiyor, yoksa görünüm alanının solundan taşar. */ [dir="rtl"] .nav-sub{left:auto;right:0} [dir="rtl"] .nav-items > .nav-item-wrapper:last-child .nav-sub{right:auto;left:0} [dir="rtl"] .nav .nav-sub a.active{box-shadow:inset -2px 0 0 var(--red)} /* Dil seçici de aynı sebeple artık en solda; paneli sola yasla. */ [dir="rtl"] .lang-switch__list{right:auto;left:0} [dir="rtl"] .nav .lang-switch__list a.active{box-shadow:inset -2px 0 0 var(--red)} /* Mobil çekmece: alt menü/dil listesi satırlarındaki sol girinti sağa geçmeli. */ @media (max-width:1279px){ [dir="rtl"] .nav .nav-sub a{padding-left:0;padding-right:18px} [dir="rtl"] .nav .nav-sub__label{padding-left:0;padding-right:18px} [dir="rtl"] .nav .lang-switch__list a{padding-left:0;padding-right:18px} } /* ========================================================================== İÇERİK KURALLARI — aşağıdakiler `main:not([dir="ltr"])` ile koşullu. Sayfanın çevirisi henüz yazılmamışsa İngilizce kaynak gösteriliyor ve header.php
'e dir="ltr" koyuyor. O durumda içerik soldan sağa akar; gradyanı, liste işaretini, sütun ayracını çevirmek metni okunmaz hale getirir. Bu yüzden içerikle ilgili her yön kuralı, içeriğin GERÇEKTEN sağdan sola olmasına bağlı. Menü ve footer'ın hiç kuralı yok: onlar kalıcı olarak LTR (bkz. bölüm 2). ========================================================================== */ /* ---------- 3. hero gradyanları ------------------------------------------ Metin sağa geçtiği için koyu taraf da sağa geçmeli, yoksa yazı açık zeminde kalır ve okunmaz. */ [dir="rtl"] main:not([dir="ltr"]) .sc-hero__art::after{ background:linear-gradient(270deg,rgba(14,26,43,.86) 0%,rgba(14,26,43,.62) 42%,rgba(14,26,43,.18) 74%,rgba(14,26,43,.05) 100%)} [dir="rtl"] main:not([dir="ltr"]) .about-hero__art::after{ background:linear-gradient(270deg,rgba(14,26,43,.55) 0%,rgba(14,26,43,.25) 45%,rgba(14,26,43,0) 72%)} /* Ana sayfa hero'su 90deg değil 100deg kullanıyor; aynası 260deg. Fotoğrafın odağı da karşı tarafa alınıyor. Görsel de aynı fotoğrafın kırpılmış hâli değil, özel olarak aynalanmış kompozisyonu: bina ve danışmanlar solda, dağ/göl sağda — background-position:center left o yüzden burada da doğru (solda kalan özneyi çerçevede tutuyor). */ [dir="rtl"] main:not([dir="ltr"]) .hero-art{ background-image:url("../img/hero-rtl.webp");background-position:center left} [dir="rtl"] main:not([dir="ltr"]) .hero-art::after{ background:linear-gradient(260deg,var(--shade) 0%,rgba(14,26,43,.96) 18%,rgba(14,26,43,.86) 32%,rgba(14,26,43,.32) 50%,rgba(14,26,43,.06) 66%), linear-gradient(to top,rgba(14,26,43,.62),transparent 45%)} [dir="rtl"] main:not([dir="ltr"]) .fm-hero .sc-hero__art::after{ background:linear-gradient(270deg,rgba(14,26,43,.90) 0%,rgba(14,26,43,.72) 38%,rgba(14,26,43,.34) 68%,rgba(14,26,43,.16) 100%)} /* ---------- 4. liste işaretleri ve ayraç çizgileri ----------------------- */ [dir="rtl"] main:not([dir="ltr"]) .sc-list li::before, [dir="rtl"] main:not([dir="ltr"]) .sc-checklist li::before, [dir="rtl"] main:not([dir="ltr"]) .ct-firstcall li::before, [dir="rtl"] main:not([dir="ltr"]) .ab-borders__note::before{left:auto;right:0} [dir="rtl"] main:not([dir="ltr"]) .ab-audience li::before{left:auto;right:-.85em} /* .ct-response BİLEREK BURADA DEĞİL: contact.css zaten border-inline-start + padding-inline-start kullanıyor, ikisi de RTL'de kendiliğinden başlangıç (sağ) tarafına geçiyor. Buradaki eski kural border'ı inline-END'e taşıyor, yani RTL'de SOLA; çubuk metinden 1275px uzakta kalıyordu. Aynı desendeki .ty__promise'in override'ı yok ve doğru çalışıyor. */ /* İşaretin girintisi de karşı tarafa geçmeli. Kardeş listeler (.sc-list, .ct-firstcall) girintiyi padding-inline-start ile veriyor ve kendiliğinden dönüyor; aşağıdaki ikisi FİZİKSEL padding-left kullanıyor. Girinti solda kalınca işaret sağda yer bulamayıp metne biniyor, .ab-audience'ta ise madde imi kutunun dışına taşıyordu. */ [dir="rtl"] main:not([dir="ltr"]) .ab-audience ul{padding-left:0;padding-right:1.55em} [dir="rtl"] main:not([dir="ltr"]) .sc-checklist li{padding-left:0;padding-right:1.6em} /* Sütun ayraçları: negatif konum karşı tarafa geçmeli. YALNIZCA 901px VE ÜSTÜ. 900px altında sütunlar alt alta diziliyor ve kaynak CSS ayracı yatay çizgiye çeviriyor (left:0;right:0;width:auto). Bu kural kapsamsız yazılırsa orada da geçerli olup left'i auto'ya döndürüyor; iki yandan da sabitlenmemiş kutunun genişliği 0'a düşüyor ve ÇİZGİ KAYBOLUYOR. (Ölçüldü: RTL 700px'te width 0, LTR'de 612.5px.) Aynı gerekçeyle .sc-diagram__arrow ve .sc-report__steps de 901+ ile sınırlı. */ @media (min-width:901px){ [dir="rtl"] main:not([dir="ltr"]) .sc-split > div + div::before{left:auto;right:calc(-1 * clamp(12px,1.55vw,30px))} [dir="rtl"] main:not([dir="ltr"]) .ab-why__cols > div + div::before{left:auto;right:calc(-1 * clamp(12px,2.8vw,54px))} [dir="rtl"] main:not([dir="ltr"]) .ab-audience__cols > div + div::before{left:auto;right:calc(-1 * clamp(12px,1.25vw,24px))} } /* ---------- 5. enquiry paneli ve form ------------------------------------ */ /* Panel sağdan değil soldan kaysın. */ [dir="rtl"] .eq-panel__sheet{right:auto;left:0;transform:translateX(-100%)} [dir="rtl"] .eq-panel.is-open .eq-panel__sheet{transform:none} [dir="rtl"] .eq-select::after{right:auto;left:15px} /* Ok SVG'leri de aynalanmalı; hover'daki itme transform ile aynı özelliği paylaştığı için çevirmeyle BİRLİKTE yazılıyor, yoksa biri diğerini eziyor. İtme yönü okun gösterdiği yönle aynı kalıyor: seçim oku RTL'de sola, geri oku sağa bakıyor. */ [dir="rtl"] .eq-choice__go svg{transform:scaleX(-1)} [dir="rtl"] .eq-choice:hover .eq-choice__go svg{transform:scaleX(-1) translateX(5px)} [dir="rtl"] .eq-back svg{transform:scaleX(-1)} [dir="rtl"] .eq-back:hover svg{transform:scaleX(-1) translateX(-4px)} /* ---------- 6. yön bildiren oklar ---------------------------------------- */ /* → ve ← karakterleri RTL'de tarayıcı tarafından çevrilmez; elle aynalanıyor. */ /* YALNIZCA OKUN KENDİSİ çevrilir, etiketi taşıyan kutu değil. Önceden .sc-card .go / .ct-card .go çevriliyordu; bu kutularda etiket ile ok AYNI metin düğümünde olduğu için Arapça etiket de aynalanıyor ve okunmaz hâle geliyordu ("استكشف" ters yazılıyordu). Ok artık kendi 'inde; kutu yerinde duruyor, yalnızca ok dönüyor. */ [dir="rtl"] main:not([dir="ltr"]) .er__links a span[aria-hidden], [dir="rtl"] main:not([dir="ltr"]) .sc-card .go span, [dir="rtl"] main:not([dir="ltr"]) .ct-card .go span, [dir="rtl"] main:not([dir="ltr"]) .ty-card .go span{display:inline-block;transform:scaleX(-1)} /* Bölüm sonundaki "diğer sayfalar" kartlarının oku (schools/families crosslinks): .sc-crosslinks__grid a flex olduğu için etiket sağa, ok sola geçiyor — okun da sola bakması gerekiyor. */ [dir="rtl"] main:not([dir="ltr"]) .sc-crosslinks__grid a span{transform:scaleX(-1)} /* DİKKAT — hangisi elle çevrilir, hangisi çevrilmez: → (U+2192) Bidi_Mirrored DEĞİL → tarayıcı çevirmez, elle çevrilmeli. › (U+203A) Bidi_Mirrored → tarayıcı RTL'de kendiliğinden ‹ çiziyor; elle çevirmek onu geri döndürür (çift çevirme) ve yine sağı gösterir. Bu yüzden .sc-flow__sep (›) bilerek listede YOK. .sc-diagram ve .sc-report → kullanıyor, ikisi de çevriliyor. 900px altında bu ikisi rotate(90deg) ile aşağıyı gösteriyor (öğeler alt alta diziliyor); transform tek bir özellik olduğu için buradaki kural o döndürmeyi ezerdi, o yüzden yalnızca 901px ve üstü. */ @media (min-width:901px){ [dir="rtl"] main:not([dir="ltr"]) .sc-diagram__arrow, [dir="rtl"] main:not([dir="ltr"]) .sc-report__steps i{transform:scaleX(-1)} } /* 900px altında akış kutuları alt alta diziliyor ve sections.css ayraca rotate(90deg) veriyor ki aşağıyı göstersin. Bu LTR'de doğru: › sağa bakar, saat yönünde 90° dönünce aşağı bakar. RTL'de DEĞİL: tarayıcı › glifini zaten ‹ olarak çiziyor (Bidi_Mirrored), sola bakan bir glifi saat yönünde döndürünce YUKARI bakıyor — yani akışın tersini gösteriyor. Ters yöne döndürülmesi gerekiyor. .sc-diagram__arrow ve .sc-report__steps burada YOK: onlar → (U+2192) kullanıyor, o mirrored olmadığı için RTL'de de sağa bakmaya devam ediyor ve rotate(90deg) onları doğru şekilde aşağı çeviriyor. */ @media (max-width:900px){ [dir="rtl"] main:not([dir="ltr"]) .sc-flow__sep{transform:rotate(-90deg)} } /* ---------- 6b. üç nokta alıntı bandı (--focus) -------------------------- Kırmızı nokta cümleyi kapatan noktadır: LTR'de en sağda, RTL'de en solda olmalı. Konumlar background-position ile veriliyor ve onun mantıksal (inset-inline) karşılığı yok — bu yüzden sıra burada elle ters çevriliyor. Yalnızca X konumları değişiyor; ölçüler ve renkler aynı. */ [dir="rtl"] main:not([dir="ltr"]) .sc-quote-band--focus::before{ background-image: radial-gradient(circle 7px at calc(50% - var(--fc-d)) var(--fc-y), rgba(232,91,91,.88) 0 5px, rgba(232,91,91,0) 5.5px), radial-gradient(circle 5px at 50% var(--fc-y), rgba(255,255,255,.34) 0 3.5px, rgba(255,255,255,0) 4px), radial-gradient(circle 5px at calc(50% + var(--fc-d)) var(--fc-y), rgba(255,255,255,.34) 0 3.5px, rgba(255,255,255,0) 4px)} /* ---------- 7. mobil çekmece --------------------------------------------- */ /* Çekmece de menünün parçası; onun RTL kuralları da bölüm 2'deki @media (max-width:1279px) içinde (.nav-sub / .lang-switch__list ile birlikte tutuluyor, burada tekrar edilmiyor). */ /* 7. "Çıktı" bandının kadranı (.sc-report-band, sections.css). Konumu inset-inline-end ile verildiği için kutular kendiliğinden sola geçiyor; ama iki şey mantıksal değil: kırmızı yayı bir dilime indiren conic maske ve bandın kırmızı ışıltısını sağa yaslayan radial-gradient. İkisi de elle aynalanıyor — yay sol üst yerine sağ üst çeyrekte kalsın diye. */ [dir="rtl"] main:not([dir="ltr"]) .sc-report-band{ background-image:radial-gradient(46% 120% at 16% 30%, rgba(223,49,49,.13) 0%, rgba(223,49,49,0) 70%)} [dir="rtl"] main:not([dir="ltr"]) .sc-report-band::after{transform:scaleX(-1)} /* 8. "Yolculuğa hazır" bandının skyline dokusu (.fm-journey-band, families.css). Yataydaki maske fiziksel (90deg = soldan sağa): LTR'de metin solda olduğu için görsel sağa açılıyor. RTL'de metin sağa geçiyor, dolayısıyla maskenin yönü de dönmeli — 270deg ile görsel bu kez sola açılıyor. Görselin kendisi aynalanmıyor: maske yön değiştirince kompozisyonun diğer ucu (kubbe) görünür oluyor, zaten doğru taraf. */ [dir="rtl"] main:not([dir="ltr"]) .fm-journey-band::before{ -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 58%), linear-gradient(270deg,rgba(0,0,0,0) 16%,#000 62%); mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 58%), linear-gradient(270deg,rgba(0,0,0,0) 16%,#000 62%)} @media (max-width:900px){ [dir="rtl"] main:not([dir="ltr"]) .fm-journey-band::before{ -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 62%); mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 62%)} } /* 9. Alıntı bandının tırnak filigranı (.sc-quote-band--mark, sections.css). Konum inset-inline-* ile verildiği için işaretler RTL'de kendiliğinden yer değiştiriyor; ama glif şekilleri aynalanmıyor (U+201C/U+201D Bidi_Mirrored DEĞİL, bkz. 6. maddedeki › notu). Sağa geçen açılış işaretinin kuyrukları yanlış yöne bakmasın diye iki glif takas ediliyor. */ [dir="rtl"] main:not([dir="ltr"]) .sc-quote-band--mark::before{content:"\201D"} [dir="rtl"] main:not([dir="ltr"]) .sc-quote-band--mark::after{content:"\201C"} /* 10. "Experience & Expertise" bandının harita dokusu (.fm-exp-band, families.css). .fm-journey-band ile aynı durum: yataydaki maske fiziksel. LTR'de metin solda, harita sağda; RTL'de metin sağa geçtiği için maske de 270deg'e dönüyor. */ [dir="rtl"] main:not([dir="ltr"]) .fm-exp-band::before{ -webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,0) 20%,#000 62%); mask-image:linear-gradient(270deg,rgba(0,0,0,0) 20%,#000 62%)} @media (max-width:900px){ [dir="rtl"] main:not([dir="ltr"]) .fm-exp-band::before{ -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 4%,#000 34%); mask-image:linear-gradient(180deg,rgba(0,0,0,0) 4%,#000 34%)} }