/* =================================================================== HEKİM TOWER — SAĞDAN SOLA (RTL) KATMANI 29. oturum, 2026-09-22 · yalnız Arapça sayfalarda yükleniyor ------------------------------------------------------------------- NEDEN AYRI DOSYA, tower.css'i mantıksal özelliklere çevirmek DEĞİL: tower.css 4.223 satır ve yön bağımlı 75 kural taşıyor. `margin-left` → `margin-inline-start` toplu dönüşümü Türkçe ve İngilizce sayfaların HESAPLANAN stilini de değiştirirdi; bu depodaki söz "yayındaki çıktı aynı kalacak" (bkz. dil-donustur.mjs baş yorumu, damga.php'deki Türkçe-bayt-bayt-aynı notu). Ayrı katman o sözü bozmadan yönü çeviriyor ve LTR dillerde dosya HİÇ İSTENMİYOR (parts/head.php). ⚠ BU DOSYA tower.css'TEN SONRA YÜKLENİR. Özgüllük eşitse sonra gelen kazanır; bu yüzden çoğu kuralda `!important` YOK ve olmamalı — `!important` bir sonraki oturumda neyin neyi ezdiğini okunamaz hâle getirir. Özgüllüğü yetmeyen tek tük yerde seçici tower.css'tekiyle BİREBİR aynı yazılıyor. ⚠ YÖNÜ HTML BELİRLİYOR (``, parts/head.php). Buradaki kurallar `[dir="rtl"]` ile KAPILANMIYOR: dosya zaten yalnız o sayfaya iniyor ve her seçiciye kapı yazmak 200 satırı okunmaz yapardı. SIRA: (1) font · (2) tipografi · (3) iki yönlü metin (bidi) · (4) yön çevirisi, tower.css'teki bölüm sırasıyla. =================================================================== */ /* =================================================================== 1) FONT — IBM Plex Sans Arabic (self-host, Google CDN YOK) ------------------------------------------------------------------- Inter Tight ve Source Serif 4 yalnız Latin taşıyor (unicode-range' lerine bak, tower.css satır 92-103): Arapça sayfada tek harf çizmezler ve tarayıcı sistem fontuna düşerdi — cihazdan cihaza değişen, tasarımı hiç tutmayan bir görünüm. Plex Arabic'in LATİN alt kümesi de alınıyor: Arapça cümlelerin içinde Latin öbekler var (onerhekim.com, info@hekimtower.com, 1+1, 09:00, HEKİM TOWER tabelası). Yalnız Arapça alt küme alınsaydı o parçalar Inter Tight'a düşer ve aynı satırda İKİ FARKLI TİPOGRAFİ görünürdü — Plex Arabic tam da bunu önlediği için seçilmişti. Ağırlıklar tower.css'in gerçekten kullandıkları: 400 gövde, 500 etiket/menü (--fw-orta), 600 başlık (--fw-baslik). Ölçüldü; 100/700/900 hiçbir kuralda geçmiyor, indirilmedi. =================================================================== */ @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-400.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-500.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-600.woff2') format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* =================================================================== 2) TİPOGRAFİ — Arap yazısının kendi kuralları =================================================================== */ :root{ --ff-body:'IBM Plex Sans Arabic','Inter Tight',ui-sans-serif,system-ui,sans-serif; /* ⚠ VURGU AİLESİ DE SANS. tower.css'te vurgu kelimesi italik serif (Source Serif 4). ARAP YAZISINDA İTALİK YOKTUR: `font-style:italic` tarayıcıyı gerçek olmayan bir eğim uydurmaya (synthetic oblique) zorlar, harf bağları kırılır ve metin "bozuk yazı tipi" gibi görünür. Vurgu aşağıda ağırlık + renkle veriliyor. */ --ff-script:'IBM Plex Sans Arabic','Inter Tight',ui-sans-serif,system-ui,sans-serif; /* ⚠ HARF ARALIĞI SIFIR. Arapça BİTİŞİK yazılır; letter-spacing harfleri birbirinden koparır ve kelime okunamaz hâle gelir (Latin'de estetik olan ayar, Arap yazısında YAPISAL bir kırılma). tower.css'in dört değişkeni de nötrleniyor; negatif olanlar (--ls-h1 -.02em) ayrıca harfleri üst üste bindiriyordu. */ --ls-h1:normal; --ls-h2:normal; --ls-h3:normal; /* ⚠ ETİKET ARALIĞI DA SIFIR ama AYRI BİR SEBEPLE: değer .09em ve VERSAL (uppercase) etiketler için. Arapçada büyük/küçük harf kavramı yok; text-transform hiçbir şey yapmaz, letter-spacing ise yine bağları kırardı. */ --ls-etiket:normal; /* Arap yazısı Latin'den daha yüksek satır arası ister: harflerin altına inen kuyruklar (ج ح خ ع غ م) ve üstüne çıkan noktalar/ hareke bir sonraki satıra değiyor. tower.css'in 1,65'i Latin için ölçülmüştü; Arapçada 1,9 ile satırlar ayrışıyor. */ --lh-govde:1.9; --lh-kart:1.6; --lh-etiket:1.7; --lh-baslik:1.5; } body{line-height:var(--lh-govde)} /* Başlıklar: tower.css'te line-height 1.18/1.32 SABİT yazılı (değişken değil), o yüzden burada tekrar ediliyor. 1.18 Arapçada "ال" bağının üst noktasını bir üstteki satıra değdiriyordu. */ .h1{line-height:1.45} .h2{line-height:1.45} .h3{line-height:1.55} /* ⚠ VURGU KELİMESİ: italik değil, AĞIRLIK + RENK. tower.css satır 463 ile aynı özgüllük, sonra geldiği için kazanıyor. */ .script{ font-family:var(--ff-script); font-style:normal; /* uydurma eğim KAPALI */ font-weight:600; letter-spacing:normal; color:var(--vurgu); } /* Koyu zemindeki gradyanlı vurgu KORUNUYOR (renk kontrastı ölçülmüştü, tower.css 465-483). Yalnız italik için konmuş sağ omuz payı kaldırılıyor — dik yazıda taşma yok, o pay sağda boşluk bırakırdı. */ @supports ((background-clip:text) or (-webkit-background-clip:text)){ .on-koyu .script{ /* Gradyan AYNALANIYOR: 100deg soldan sağa açılıyor, yani koyu uç LTR'de kelimenin başında. RTL'de kelime sağdan başlar; açı çevrilmezse rampa okuma yönünün TERSİNE akar ve vurgunun ilk hecesi en açık tonla başlar. 360-100 = 260. Renk durakları DEĞİŞMEDİ — kontrast ölçümü (3,83 / 5,2 / 6,4) aynı kalıyor, yalnız yön dönüyor. */ background-image:linear-gradient(260deg,#E09490 0%,#ECB6B2 52%,#F4D0CC 100%); /* İtalik omuz payı kalkıyor: dik yazıda taşma yok, o pay sağda gereksiz boşluk bırakırdı. */ padding-inline-end:0; } } /* Alıntı bloğu da italik serifti (tower.css 1755). */ .alinti p{font-family:var(--ff-body);font-style:normal;font-weight:500} /* ⚠ SABİT YAZILMIŞ HARF ARALIKLARI. Yukarıdaki :root override'ı yalnız `var(--ls-*)` okuyan kuralları düzeltir; tower.css'te sekiz kural değeri DOĞRUDAN yazmış (.04em … .06em) ve o kurallar değişkeni hiç görmez. Listelenmezse o sekiz yerde Arapça harfler kopuk çıkar — ölçüldü, seçicilerin tamamı tower.css'te mevcut. */ .duyuru__grup li, .gorsel__yazi, .katplan__teslim span, .olanak__no, .haber__tarih, .katplan__buyut, .ekmek, .bento__etiket{letter-spacing:normal} /* Negatif aralık taşıyan tek tük kalan (başlık altı değerler). */ .katplan__teslim b{letter-spacing:normal} /* =================================================================== 3) İKİ YÖNLÜ METİN (bidi) — Latin öbeklerin yeri ------------------------------------------------------------------- Unicode bidi algoritması Arapça cümlenin içindeki Latin/rakam öbeklerini kendiliğinden soldan sağa dizer; çeviri metnine SARILMADI (bkz. php/dil/ar.php baş yorumu — sarılsaydı aynı cümle üç dilde üç farklı DOM üretirdi). Algoritmanın tek gerçek zayıf noktası NÖTR karakterlerin (boşluk, nokta, iki nokta, +, /) iki yön arasındaki sınırda hangi tarafa ait olduğudur: "0454 215 55 55." cümlesinde sondaki nokta öbeğin SOLUNA kaçıp ".0454 215 55 55" görünür. Çözüm öbeği YALITMAK. =================================================================== */ /* Telefon, e-posta ve dış bağlantılar: her biri kendi yön adacığı. `isolate` yalnız İÇERİDEKİ yönü dışarıdan ayırır, metni taşımaz. */ a[href^="tel:"], a[href^="mailto:"], .lnk span, code, .form__girdi[type="tel"], .form__girdi[type="email"], .form__girdi[type="date"]{ unicode-bidi:isolate; } /* Telefon numarası HER ZAMAN soldan sağa: rakam dizisi Arapça bağlamda doğru akar ama araya giren boşluklar öbeği parçalayabiliyor. */ a[href^="tel:"]{direction:ltr;unicode-bidi:isolate} /* Saat aralığı ve alan ölçüsü gibi rakam+işaret öbekleri (09:00 – 19:00, 1+1, 1.000 m²). Bunlar sözlükte düz metin olarak duruyor; kapsayıcı düzeyinde yalıtmak metne dokunmadan çözüyor. */ .katplan__teslim, .sayilar__deger, .seri__bas, .haber__tarih, .olanak__no, .planiz__sayac{ unicode-bidi:isolate; } /* Sayılar tablo hizasında kalsın (RTL'de sütunlar sağa yaslı). */ .sayilar__deger,.seri__bas{font-variant-numeric:tabular-nums} /* =================================================================== 4) YÖN ÇEVİRİSİ — tower.css'in bölüm sırasıyla ------------------------------------------------------------------- Aşağıdaki her blok tower.css'teki fiziksel (left/right) bir kuralı aynalıyor. Satır numaraları o dosyadaki YERİ gösteriyor; kural orada değişirse burası da değişmeli. Değişmezse kırılma SESSİZ olur — Arapça sayfa yine 200 döner, yalnız gözle görülür. =================================================================== */ /* ---- Izgara çizgileri (tower.css 405, 421) ---- */ .izgara{border-right:0;border-left:1px solid var(--izgara)} .izgara span::after{border-left:0;border-right:1px solid var(--izgara)} /* ---- Duyuru şeridi (622) ---- Grup dolgusu soldaydı; RTL'de akış sağdan başladığı için dolgu da sağa geçiyor, yoksa ilk madde bara yapışık başlar. Şeridin AKIŞ YÖNÜ CSS'te değil JS'te: --duyuru-adim'ın işareti assets/js/tower.js içinde HK_YON ile çevriliyor. */ .duyuru__grup{padding:0 var(--duyuru-ara) 0 0} /* ---- Üst menü: alt çizgi sağdan büyür (755) ---- */ .menu a::after{left:auto;right:0} /* ---- Dil seçici paneli (834, 849) ---- */ .dil__panel{right:auto;left:0} .dil__sec{text-align:right} /* ---- Sağ kenar rayı → SOL kenar (865, 901, 924, 927) ---- */ .ray{right:auto;left:clamp(10px,1.4vw,20px)} .ray__dugme:hover .ray__etiket, .ray__dugme:focus-visible .ray__etiket{padding-left:0;padding-right:14px} @media(max-width:48rem){ .ray{left:10px;right:auto} .ray__dugme:hover .ray__etiket, .ray__dugme:focus-visible .ray__etiket{padding-right:0} } /* ---- Mobil menüde etkin satırın çubuğu (1067) ---- `inset 2px 0 0` çubuğu SOLA koyuyor; RTL'de sağa alınıyor. */ .mobil-menu nav a[aria-current="page"]{ box-shadow:inset -2px 0 0 var(--vurgu); padding-left:0;padding-right:var(--s-3); } /* ---- İçeriğe atla bağlantısı (2871) ---- */ .atla{left:auto;right:var(--s-4)} /* ---- Sayı şeridi ayırıcıları (1443, 1458, 1490) ---- */ .seri__hucre + .seri__hucre{border-left:0;border-right:1px solid var(--cizgi)} @media(max-width:75rem){ .seri__hucre:nth-child(2n+1){border-right:0} } @media(max-width:48rem){ .seri__hucre:nth-child(n){border-right:0} } /* ---- "Neden" bölümü (1529, 1857) ---- */ .neden__sol{padding-right:0;padding-left:var(--s-7)} @media(max-width:60rem){ .neden__sol{padding-left:0} } /* ---- Kaydırma göstergesi (1580) — ortalı, dokunulmuyor ---- */ /* ---- İkili satır düzeni (1703, 1705) ---- ⚠ GRID SÜTUNLARI ÇEVRİLMİYOR, BİLEREK. `grid-column:1 / 3` RTL'de zaten SAĞDAN sayar (grid satır ekseni yazı yönünü izler), yani metin/görsel sırası kendiliğinden aynalanıyor. Yalnız dolgu fiziksel yazıldığı için elle çevriliyor. */ .satir-ikili__yazi{padding-right:0;padding-left:var(--s-7)} .satir-ikili--ters .satir-ikili__yazi{padding-left:0;padding-right:var(--s-7)} /* ---- Alıntı çubuğu (1752) ---- */ .alinti{ padding:var(--s-6) var(--s-6) var(--s-6) 0; border-left:0;border-right:1px solid var(--vurgu); } .alinti--ortali{border-right:0} /* ---- Özellik listesi (1779, 1869) ---- */ .ozellikler{padding-right:0;padding-left:var(--s-7)} @media(max-width:60rem){ .ozellikler{padding-left:0} } /* ---- Kat planı kartı (1935, 2020, 2095, 3759) ---- */ .katplan__pafta{text-align:right} .cip.katplan__tip{right:auto;left:var(--s-4)} .katplan__teslim{margin-left:0;margin-right:auto;text-align:left} .katplan__buyut{left:auto;right:var(--s-4)} @media(max-width:60rem){ .katplan__teslim{margin-right:0;text-align:right} } /* ---- Olanak rayı taşması (2154, 2155, 2178) ---- Tam-genişlik taşma SAĞ kenardan yapılıyordu; RTL'de akış sola doğru olduğu için taşma da sol kenardan alınıyor. */ .olanaklar{ margin-right:0;padding-right:0; margin-left:calc(-1 * var(--tasma-sag)); padding-left:var(--tasma-sag); } .olanaklar--izgara{margin-left:0;padding-left:0} /* ---- Galeri büyüteci (3276) ---- */ .galeri__buyut{right:auto;left:var(--s-3)} /* ---- Görsel görüntüleyici: OKLAR TERS (2473, 2495, 2496) ---- ⚠ "Önceki" düğmesi RTL'de SAĞDA durur ve oku SAĞA bakar. Oklar yerinde bırakılsaydı sağa bakan ok bir önceki görseli açardı — yön duygusuyla çelişen tek şey navigasyondur. Okun ÇİZİMİ de çevriliyor (scaleX), yoksa "sonraki" düğmesi sola bakan ok taşırdı. */ .planiz__kapat{right:auto;left:var(--s-3)} .planiz__ok--onceki{left:auto;right:var(--s-3)} .planiz__ok--sonraki{right:auto;left:var(--s-3)} .planiz__ok svg{transform:scaleX(-1)} @media(max-width:60rem){ .planiz__ok--onceki{right:6px;left:auto} .planiz__ok--sonraki{left:6px;right:auto} } /* Olanak rayının ok düğmeleri ve tüm "ileri" okları: ok grafiği sağa bakıyor, RTL'de ileri = sol. */ .btn .ok svg, [data-olanak-onceki] svg, [data-olanak-sonraki] svg{transform:scaleX(-1)} /* ---- İç sayfa başlığı (2562, 2596, 2603) ---- */ .ic-bas--gorselli .ic-bas__yazi{padding-right:0;padding-left:var(--s-7)} @media(max-width:60rem){ .ic-bas--gorselli .ic-bas__yazi{padding-left:0} } /* ---- Form (3095, 3114) ---- select'in ok simgesi arka plan görseli; RTL'de sola alınıp dolgu da sola veriliyor. */ select.form__girdi{ background-position:left var(--s-4) center; padding-right:var(--s-4); padding-left:calc(var(--s-4) * 2 + 16px); } .form__durum{border-left:0;border-right:3px solid var(--vurgu)} /* ---- Zaman çizgisi (3395, 3402, 3417, 3826) ---- İlerleme çubuğu soldan büyüyordu; RTL'de sağdan büyümeli, yoksa "geçen süre" yanlış uçtan gösterilir. */ .zaman__adim{padding:var(--s-5) 0 var(--s-5) var(--s-5)} .zaman__adim::before{left:auto;right:0} .zaman__adim:last-child::after{left:auto;right:var(--oran,0%);transform:translateX(50%)} @media(max-width:60rem){ .zaman__adim{padding-left:0} } /* ---- İletişim bölümü (3489, 3496, 3500) ---- */ .iletisim__sol{padding-right:0;padding-left:var(--s-7)} .iletisim__ic--ters .iletisim__sol{padding-left:0;padding-right:var(--s-7)} @media(max-width:60rem){ .iletisim__sol{padding-left:0} .iletisim__ic--ters .iletisim__sol{padding-right:0} } /* ---- Alt bilgi (3580, 3749) ---- */ .dipnot__marka{padding-right:0;padding-left:var(--s-8)} @media(max-width:75rem){ .dipnot__marka{padding-left:0} } /* ---- Alt bilgi sayıları (3869, 3890, 3894) ---- */ .sayilar__hucre + .sayilar__hucre{ border-left:0;border-right:1px solid rgba(237,238,240,.14); } @media(max-width:75rem){ .sayilar__hucre + .sayilar__hucre:nth-child(odd){border-right:0} } @media(max-width:48rem){ .sayilar__hucre + .sayilar__hucre{border-right:0} } /* ---- Logo şeridi (4074) ---- Sonsuz şerit sola akıyordu; RTL'de sağa akması gerekiyor yoksa okuma yönünün tersine hareket eden tek öge olur. */ @keyframes logoAkis{ to{ transform:translateX(50%) } } /* ---- Navbar CTA düğmesi ---- ⚠ ONAYLI ÇEVİRİYE DOKUNULMADI. İngilizcede bu düğmenin metni "Get Information & Appointment" barın dar bandını zorladığı için TEK KELİMEYE indirilmişti (Osman 2026-09-21). Arapça karşılık "احصل على المعلومات واحجز موعدًا" ondan da uzun — ama çeviri metni birebir uygulanıyor, kısaltma YAPILMADI. Yerine düğmenin kendisi bandına sığdırılıyor: 1280px'te bar payı 62px, bu ayarla metin sığıyor. Tercümandan kısa bir karşılık gelirse bu blok silinir. */ .ustbar .btn-acik{ font-size:calc(var(--fs-sm) * .92); padding-inline:var(--s-4); white-space:nowrap; } /* ---- Çerez bandı — left/right ikisi de 0, dokunulmuyor (4157) ---- */ /* =================================================================== 5) MEKANİZMA: kaydırılabilir raylar ------------------------------------------------------------------- `scroll-snap` ve yatay kaydırma RTL'de tarayıcı tarafından zaten çevriliyor (scrollLeft 0'dan NEGATİFE gider). JS tarafı bunu assets/js/tower.js içinde `hkYon()` ile ele alıyor — burada CSS düzeltmesi GEREKMİYOR, not olarak duruyor ki ileride "ray ters çalışıyor" diye buraya bakılmasın. =================================================================== */ /* =================================================================== 6) DENETİM NOTU — "ölü" görünen kurallar ------------------------------------------------------------------- Yukarıdaki kuralların bir bölümü (.seri__*, .planiz__ok--*, .planiz__sayac) statik HTML'de GÖRÜNMEZ: onları assets/js/tower.js çalışma anında üretiyor. Bir bölümü ise (.gorsel__yazi, .sayilar__*, .zaman__*) tower.css'te duran ama hiçbir şablonun kullanmadığı ESKİ kurallardır — RTL karşılıkları, o bölümler geri gelirse hazır olsun diye bilerek bırakıldı. İkisi de "seçici hiçbir şeyi eşlemiyor" denetiminde uyarı üretir; uyarı YAZIM HATASI DEĞİLDİR. Gerçek yazım hatası ayrı ayırt edilir: sınıf tower.css'te de YOKSA yanlış yazılmış demektir (29. oturumda iki tane bu yolla bulunmuştu: .bolum__etiket ve .ozellik__deger). =================================================================== */