/* ========================================================== HBK — Arapça (RTL) düzeltmeleri ---------------------------------------------------------- Tema Bootstrap 3 tabanlı ve tamamen LTR yazılmış: grid float:left ile diziliyor, listelerin girintisi solda, metin sola hizalı. tek başına yalnız metin yönünü çevirir; düzenin kendisi bu dosyayla aynalanır. KAPSAM KARARI — yüzen düğmeler AYNALANMAZ. WhatsApp + yukarı-çık sağ altta, çerez paneli sol altta kalır (global kural: çerez paneli sol-alt, WhatsApp'ın üstünde). RTL'de bunları yer değiştirmek ikisini üst üste bindirirdi. Yüzen katman dil-nötr kabul edilir. Yalnızca [dir="rtl"] altında çalışır — Türkçe/İngilizce sayfalar bu dosyayı zaten yüklemez. ========================================================== */ /* ---------- Temel akış ---------- */ [dir="rtl"] body { direction: rtl; text-align: right; /* Courgette (tema başlık fontu) Arapça harf içermez — Arapça metinde latin'e düşer ve karışık görünür. Sistem Arapça fontlarına devret. */ font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Dubai", "Geeza Pro", Arial, sans-serif; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .section-title h2, [dir="rtl"] .heading h2 { font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; text-align: right; } /* Arapça harfler latin'e göre kısa görünür; satır aralığı biraz açılır */ [dir="rtl"] p, [dir="rtl"] li { line-height: 1.9; } /* ---------- Bootstrap 3 grid ---------- */ [dir="rtl"] .col-xs-1, [dir="rtl"] .col-sm-1, [dir="rtl"] .col-md-1, [dir="rtl"] .col-lg-1, [dir="rtl"] .col-xs-2, [dir="rtl"] .col-sm-2, [dir="rtl"] .col-md-2, [dir="rtl"] .col-lg-2, [dir="rtl"] .col-xs-3, [dir="rtl"] .col-sm-3, [dir="rtl"] .col-md-3, [dir="rtl"] .col-lg-3, [dir="rtl"] .col-xs-4, [dir="rtl"] .col-sm-4, [dir="rtl"] .col-md-4, [dir="rtl"] .col-lg-4, [dir="rtl"] .col-xs-5, [dir="rtl"] .col-sm-5, [dir="rtl"] .col-md-5, [dir="rtl"] .col-lg-5, [dir="rtl"] .col-xs-6, [dir="rtl"] .col-sm-6, [dir="rtl"] .col-md-6, [dir="rtl"] .col-lg-6, [dir="rtl"] .col-xs-7, [dir="rtl"] .col-sm-7, [dir="rtl"] .col-md-7, [dir="rtl"] .col-lg-7, [dir="rtl"] .col-xs-8, [dir="rtl"] .col-sm-8, [dir="rtl"] .col-md-8, [dir="rtl"] .col-lg-8, [dir="rtl"] .col-xs-9, [dir="rtl"] .col-sm-9, [dir="rtl"] .col-md-9, [dir="rtl"] .col-lg-9, [dir="rtl"] .col-xs-10, [dir="rtl"] .col-sm-10, [dir="rtl"] .col-md-10, [dir="rtl"] .col-lg-10, [dir="rtl"] .col-xs-11, [dir="rtl"] .col-sm-11, [dir="rtl"] .col-md-11, [dir="rtl"] .col-lg-11, [dir="rtl"] .col-xs-12, [dir="rtl"] .col-sm-12, [dir="rtl"] .col-md-12, [dir="rtl"] .col-lg-12 { float: right; } [dir="rtl"] .pull-left { float: right !important; } [dir="rtl"] .pull-right { float: left !important; } [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* ---------- Listeler ---------- */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 20px; padding-left: 0; } [dir="rtl"] .nav, [dir="rtl"] .navbar-nav, [dir="rtl"] .dropdown-menu, [dir="rtl"] .list-unstyled, [dir="rtl"] .hbk-area__cities { padding-right: 0; } /* İkonlu madde listeleri: tema ikonu solda konumluyor */ [dir="rtl"] .list-style li, [dir="rtl"] .service-list li, [dir="rtl"] .check-list li { padding-right: 26px; padding-left: 0; } [dir="rtl"] .list-style li:before, [dir="rtl"] .service-list li:before, [dir="rtl"] .check-list li:before { right: 0; left: auto; } /* ---------- Menü / header ---------- */ [dir="rtl"] .navbar-nav > li { float: right; } [dir="rtl"] .navbar-header { float: right; } [dir="rtl"] .navbar-brand, [dir="rtl"] .logo { float: right; } [dir="rtl"] .navbar-toggle { float: left; } [dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; } [dir="rtl"] .dropdown-menu li a { text-align: right; } /* bootsnav ikinci seviye menü sağa açılmalı */ [dir="rtl"] .dropdown-menu .dropdown-menu { right: 100%; left: auto; } [dir="rtl"] .caret { margin-right: 4px; margin-left: 0; } [dir="rtl"] #header-top .pull-left, [dir="rtl"] #header-top ul { float: right; } [dir="rtl"] #header-top .pull-right { float: left; } /* KRİTİK — logo/menü çakışması. Tema logoyu .navbar-header (Bootstrap'te float:left) ile, menüyü .navbar-nav.navbar-right (float:right !important) ile yerleştiriyor. RTL'de .navbar-header'ı sağa aldığımızda menü de sağda kalıyor ve ikisi üst üste biniyordu. Bootstrap bu iki yardımcı sınıfı !important ile yazdığı için ezmek de !important istiyor. */ [dir="rtl"] .navbar-right { float: left !important; } [dir="rtl"] .navbar-left { float: right !important; } /* Instagram kutusu satır içi style="margin-left:30px" taşıyor; RTL'de o boşluk yanlış tarafta kalır. Satır içi stili ezmek için !important şart. */ [dir="rtl"] .social-icons { margin-left: 0 !important; margin-right: 30px !important; } /* ========================================================== Üst banttaki iletişim satırı (telefon / adres / e-posta) ---------------------------------------------------------- DİKKAT — İKİ AYRI ŞABLON VAR, ikisini de hedeflemek şart: · Ana sayfa : header#header-top_2 > .header_set > .col-md-12 · İç sayfalar : header#header-top_3 > #header-bottom > .col-md-9 (48 sayfanın tamamı ikinci şablonu kullanıyor.) Kural yalnız birine yazılırsa diğerinde hiç çalışmaz ve hata "düzelmemiş" görünür. Tema blokları `inline-block` + margin ile diziyor; RTL'de boşluk ters tarafa düşüyor ve satır sığmayıp e-posta bloğu alta kayıyordu. Ölçü ayarlamak yerine düzen flex'e çevrildi: `flex-wrap:nowrap` ile satır kırılması imkânsız — yer daralırsa bloklar sıkışır. ========================================================== */ [dir="rtl"] #header-top_2 .header_set .col-md-12, [dir="rtl"] #header-bottom .col-md-9, [dir="rtl"] #header-bottom .col-md-10{ display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 26px; text-align: right; } /* Ana sayfada logo bu satırın hizasında duruyor — ona yer ayır. İç sayfalarda logo ayrı kolonda, pay gerekmez. */ [dir="rtl"] #header-top_2 .header_set .col-md-12{ padding-right: 190px; padding-left: 0; } /* Tema margin'leri iptal; boşluğu gap veriyor */ [dir="rtl"] #header-top_2 .get-tuch, [dir="rtl"] #header-bottom .get-tuch{ margin: 0 !important; flex: 0 1 auto; min-width: 0; } /* İkon metnin sağında; tema margin'i RTL'de yanlış tarafta */ [dir="rtl"] #header-top_2 .get-tuch i, [dir="rtl"] #header-bottom .get-tuch i{ margin-right: 0 !important; margin-left: 10px; font-size: 28px; } [dir="rtl"] #header-top_2 .get-tuch ul li h4, [dir="rtl"] #header-bottom .get-tuch ul li h4{ font-size: 15px; white-space: nowrap; } [dir="rtl"] #header-top_2 .get-tuch ul li p, [dir="rtl"] #header-bottom .get-tuch ul li p{ font-size: 12.5px; } /* Ayraç çizgisi de yön içeriyor */ [dir="rtl"] #header-bottom .get-tech-line{ padding: 0 10px; } @media (max-width: 1199px){ [dir="rtl"] #header-top_2 .header_set .col-md-12, [dir="rtl"] #header-bottom .col-md-9, [dir="rtl"] #header-bottom .col-md-10{ gap: 16px; } [dir="rtl"] #header-top_2 .header_set .col-md-12{ padding-right: 150px; } [dir="rtl"] #header-top_2 .get-tuch i, [dir="rtl"] #header-bottom .get-tuch i{ font-size: 23px; margin-left: 7px; } } /* Daha darda adres bloğu (en geniş) çıkarılır — footer'da, iletişim sayfasında ve schema'da zaten var */ @media (max-width: 1050px){ [dir="rtl"] #header-top_2 .get-tuch:nth-child(2), [dir="rtl"] #header-bottom .get-tuch:nth-child(2){ display: none; } } /* ---------- Formlar ---------- */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] .form-control { text-align: right; direction: rtl; } /* Telefon ve e-posta alanları latin girdi alır — LTR kalsınlar */ [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[name="phone"] { direction: ltr; text-align: right; } [dir="rtl"] .checkbox label, [dir="rtl"] .radio label { padding-right: 20px; padding-left: 0; } /* ---------- Tablolar ---------- */ [dir="rtl"] table th, [dir="rtl"] table td { text-align: right; } /* ---------- Alıntı / kenar çizgisi taşıyan bloklar ---------- */ [dir="rtl"] blockquote { border-right: 4px solid #ed2a28; border-left: 0; padding-right: 18px; padding-left: 0; } /* ---------- HBK'nın kendi blokları ---------- */ [dir="rtl"] .hbk-faq, [dir="rtl"] .hbk-area { text-align: right; } [dir="rtl"] .hbk-area__cities li { margin-left: 8px; margin-right: 0; } /* Kırıntı yolu (breadcrumb) sağdan başlar */ [dir="rtl"] .breadcrumb { padding-right: 0; text-align: right; } [dir="rtl"] .breadcrumb > li { float: right; } [dir="rtl"] .breadcrumb > li + li:before { padding: 0 5px; } /* ---------- Yüzen katman ---------- */ /* .short-msg (WhatsApp + yukarı çık), .hbk-ai-*, .hbk-cookie-* konumlarını korur. Mobil dil değiştirici ise sol taraftaki hamburger butonuyla çakışmamak için sola aynalanır. */ [dir="rtl"] .hbk-ai-panel, [dir="rtl"] .hbk-ai-msg, [dir="rtl"] .hbk-cookie, [dir="rtl"] .hbk-cookie__panel { direction: rtl; text-align: right; } @media(max-width:991px){ [dir="rtl"] .hbk-lang-fixedwrap { float: left !important; margin-left: 10px !important; margin-right: 0 !important; left: auto !important; right: auto !important; } [dir="rtl"] nav.navbar.bootsnav .navbar-toggle { float: left !important; margin-left: 0 !important; margin-right: 0 !important; } } @media(max-width:480px){ [dir="rtl"] .hbk-lang-fixedwrap { margin-left: 8px !important; margin-right: 0 !important; } } /* ---------- Sayı ve ölçüler ---------- */ /* "0.2–1.0 mm", "+120 °C", "500 m²" gibi latin ölçüler RTL akışta ters görünebilir; yalıtarak LTR bırakılır. */ [dir="rtl"] .ltr, [dir="rtl"] bdi { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }