/* ============================================================ MBS — RTL Düzeltmeleri (Arapça / ) main.min.css'den SONRA çağrılır. Tüm kurallar yalnızca dir="rtl" iken etkindir; LTR dillere dokunmaz. ============================================================ */ /* ------------------------------------------------------------ 1) LİSTE İŞARETLERİ — check ikonu / madde imi sağ tarafa ------------------------------------------------------------ */ /* Flex tabanlı tema listeleri (ikon + metin) */ [dir="rtl"] .list-items li { flex-direction: row-reverse; text-align: right; } /* Standart ul/ol ve WYSIWYG içerik listeleri: imi/check'i metnin sağ başına al, girintiyi sağa ver */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 0; padding-left: 0; } [dir="rtl"] .content ul, [dir="rtl"] .content ol, [dir="rtl"] .editor ul, [dir="rtl"] .editor ol, [dir="rtl"] .entry-content ul, [dir="rtl"] .entry-content ol, [dir="rtl"] .text-content ul, [dir="rtl"] .text-content ol, [dir="rtl"] .description ul, [dir="rtl"] .description ol { padding-right: 20px; padding-left: 0; list-style-position: outside; text-align: right; } /* ::before ile çizilen check imleçleri (Phosphor vb.) sağa */ [dir="rtl"] li::before { right: 0; left: auto; } [dir="rtl"] li::after { left: 0; right: auto; } /* product-description: ✓ imi sağa + yazı ile araya boşluk */ [dir="rtl"] .product-description ul li { padding: 6px 24px 6px 0; } /* hamburger-search: arama butonu sola, input boşluğu sola çevrilir (RTL'de yazı sağdan başlar, ikonun altına girmemesi için) */ [dir="rtl"] .hamburger-search input:not([type=submit]):not([type=radio]):not([type=checkbox]), [dir="rtl"] .hamburger-search input, [dir="rtl"] .hamburger-search select, [dir="rtl"] .hamburger-search .nice-select { padding: 0 16px 0 40px; } [dir="rtl"] .hamburger-search button { right: auto; left: 0; border-left: none; border-right: 1px solid var(--mbs-color-border-1); } /* .mbs-search-wrapper arama kutusu: buton + divider sola/sağa, boşluk çevrilir */ [dir="rtl"] .mbs-search-wrapper .search-form form .search-input .search-box input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]), [dir="rtl"] .mbs-search-wrapper .search-form form .search-input .search-box input[type=text] { padding: 16px 24px 16px 90px; } [dir="rtl"] .mbs-search-wrapper .search-form form .search-input .search-box button { right: auto; left: 0; } [dir="rtl"] .mbs-search-wrapper .search-form form .search-input .search-box button::before { left: auto; right: 0; border-left: none; border-right: 1px solid var(--mbs-color-border-1); } /* Sidebar widget arama kutusu: buton sola, boşluk çevrilir */ [dir="rtl"] .mbs-sidebar-widget.widget-search .search-box form input[type=search] { padding: 18px 20px 18px 65px; } [dir="rtl"] .mbs-sidebar-widget.widget-search .search-box form button { right: auto; left: 0; border-left: none; border-right: 1px solid var(--mbs-color-border-1); } /* ------------------------------------------------------------ 4) SAYFA BAŞLIĞI KÖŞE KESİTİ — üçgen sağ-üst köşeye aynalanır ------------------------------------------------------------ */ [dir="rtl"] .mbs-page-header:before { left: auto; right: 0; border-width: 50px 0 0 250px; } /* ------------------------------------------------------------ 5) LOGO HOVER — eğip kaydıran efekt RTL'de kaldırılır ------------------------------------------------------------ */ [dir="rtl"] .site-logo .logo:hover { transform: none; filter: none; } /* ------------------------------------------------------------ 6) COOKIE MODAL — checkbox sağa, yazı boşluğu sağa ------------------------------------------------------------ */ [dir="rtl"] .cookie-modal-content label span { padding-left: 0; padding-right: 30px; } [dir="rtl"] .cookie-modal-content input[type="checkbox"] { left: auto; right: 0; } /* ------------------------------------------------------------ 7) COPYRIGHT MENÜ — ayraç çizgisi ve boşluk sola çevrilir ------------------------------------------------------------ */ [dir="rtl"] .copyright-content-area .copyright-menu ul li { margin-right: 0; padding-right: 0; margin-left: 15px; padding-left: 10px; } [dir="rtl"] .copyright-content-area .copyright-menu ul li::before { right: auto; left: 0; } [dir="rtl"] .copyright-content-area .copyright-menu ul li:last-child { margin-left: 0; padding-left: 0; } /* ------------------------------------------------------------ 8) FAQ AKORDİYON — başlık sağa hizalanır (+/- butonu sağda kalır) padding-right:60px buton alanını koruduğu için çakışma olmaz ------------------------------------------------------------ */ [dir="rtl"] .mbs-faq .accordion-item .faq-title { text-align: right; } [dir="rtl"] .mbs-faq .accordion-item .faq-title h3 { text-align: right; } /* ------------------------------------------------------------ 9) POLICY BODY — madde imi sağa + yazı ile araya boşluk ------------------------------------------------------------ */ [dir="rtl"] .policy-body li { padding-left: 0; padding-right: 25px; } /* ------------------------------------------------------------ 10) ALT-ALT MENÜ OKU — yön ikonu aynalanır ------------------------------------------------------------ */ [dir="rtl"] .has-sub-sub-menu > a::after { display: inline-block; transform: scaleX(-1); } [dir="rtl"] .has-sub-sub-menu.active > a::after { transform: scaleX(-1) rotate(360deg); } /* ------------------------------------------------------------ 2) YÖN OKLARI — sağ/sol gösteren ikonları aynala (Phosphor glyph'leri dir=rtl ile dönmez) ------------------------------------------------------------ */ [dir="rtl"] .ph-arrow-right::before, [dir="rtl"] .ph-arrow-left::before, [dir="rtl"] .ph-arrow-line-right::before, [dir="rtl"] .ph-arrow-line-left::before, [dir="rtl"] .ph-arrow-up-right::before, [dir="rtl"] .ph-arrow-up-left::before, [dir="rtl"] .ph-arrow-down-right::before, [dir="rtl"] .ph-arrow-down-left::before, [dir="rtl"] .ph-caret-right::before, [dir="rtl"] .ph-caret-left::before, [dir="rtl"] .ph-caret-double-right::before, [dir="rtl"] .ph-caret-double-left::before, [dir="rtl"] .ph-caret-line-right::before, [dir="rtl"] .ph-caret-line-left::before { display: inline-block; transform: scaleX(-1); } /* ------------------------------------------------------------ 3) MENÜ AÇILIR OK KONUMLARI — sağda sabitlenmiş ::after'ları sola ------------------------------------------------------------ */ [dir="rtl"] .mainmenu ul > li.menu-item-has-children > a, [dir="rtl"] .mainmenu ul > li.has-dropdown > a { padding-right: 0; padding-left: 20px; } [dir="rtl"] .mainmenu ul > li.menu-item-has-children > a::after, [dir="rtl"] .mainmenu ul > li.has-dropdown > a::after { right: auto; left: 0; } [dir="rtl"] .mainmenu ul > li > .sub-menu > li.menu-item-has-children > a::after, [dir="rtl"] .mainmenu ul > li > .sub-menu > li.has-dropdown > a::after { right: auto; left: 15px; transform: rotate(90deg); } /* ------------------------------------------------------------ Dil menüsü (2 sütun grid) — RTL hizalama LTR'de sağa (right:0) açılıyor; RTL'de sola sabitleyip sayfaya doğru aç ki ekran dışına taşıp kesilmesin. ------------------------------------------------------------ */ [dir="rtl"] .language-options { left: 0; right: auto; } /* Sütun ayraç çizgisini RTL'de sol tarafa al */ [dir="rtl"] .language-options li a { border-right: none; border-left: 1px solid #f0f0f0; } [dir="rtl"] .language-options li:nth-child(even) a { border-left: none; } [dir="rtl"] .language-options li:last-child a { border-left: none; } /* ------------------------------------------------------------ Politika/çözüm menüsü aktif ok — RTL'de default (sola) kalsın main.css aktif 'ye rotate(90deg) veriyor; bu RTL'de aynalı glyph ile birleşince yukarı sapıyordu. RTL'de rotate'i iptal et → ikon default scaleX(-1) ile sola bakar (inaktiflerle aynı). ------------------------------------------------------------ */ [dir="rtl"] .policies-menu-item.active .policies-menu-link i:last-child { transform: none; } /* ------------------------------------------------------------ Offcanvas/hamburger başlık ikonu (ph-chat-text) — RTL'de sağa LTR'de ikon absolute left:-22px ile metnin solunda; RTL'de metnin sağına al (left→right, padding sağa). scaleX(-1) kalır. ------------------------------------------------------------ */ [dir="rtl"] .hamburger-top .hamburger-title { padding-left: 0; padding-right: 18px; } [dir="rtl"] .hamburger-top .hamburger-title i { left: auto; right: -22px; } /* ------------------------------------------------------------ Modal kapatma butonu (.modal-header .btn-close) — RTL'de sola Bootstrap'te margin-left:auto butonu sağa iter; RTL'de bu, sol boşluğu yutup butonu başlığa yapıştırır. auto'yu sağa alıp butonu sol kenara gönder (negatif sol margin LTR'deki taşmayı yansıtır). ------------------------------------------------------------ */ [dir="rtl"] .modal-header .btn-close { margin-left: calc(-.5 * var(--bs-modal-header-padding-x)); margin-right: auto; } /* ------------------------------------------------------------ Footer CTA (.right-content-inner) — RTL'de metinler sağa Konteyner LTR'de text-align:left; h3/p miras alıyor. RTL'de sağa. ------------------------------------------------------------ */ [dir="rtl"] .mbs-footer-section .right-content-inner, [dir="rtl"] .mbs-footer-cta .right-content-inner { text-align: right; } [dir="rtl"] .mbs-footer-section .right-content-inner h3, [dir="rtl"] .mbs-footer-section .right-content-inner p, [dir="rtl"] .mbs-footer-cta .right-content-inner h3, [dir="rtl"] .mbs-footer-cta .right-content-inner p { text-align: right; } /* ------------------------------------------------------------ Slider köşe üçgeni (.mbs-slider-section:before) — RTL'de kaldır Sol-üstteki beyaz üçgen RTL'de menü altında istenmeyen çıkıntı oluşturuyor; RTL'de tamamen gizle. ------------------------------------------------------------ */ [dir="rtl"] .mbs-slider-section::before { display: none; } /* ------------------------------------------------------------ .header-right-item ayraç çizgisi — RTL'de sağa aynalanır LTR'de border-left + margin/padding-left; RTL'de sağa al. ------------------------------------------------------------ */ [dir="rtl"] .header-right-item { border-left: none; margin-left: 0; padding-left: 0; border-right: 1px solid #333; margin-right: 18px; padding-right: 18px; } /* ------------------------------------------------------------ title-anim (GSAP SplitText) — RTL'de başlıklar gizleniyordu SplitText satır divlerine overflow:hidden veriyor; Arapça'da satır ölçümü hatalı olunca metin kırpılıp görünmez kalıyor (gsap autoAlpha:0 artığı da olabilir). RTL'de koşulsuz görünür yap. ------------------------------------------------------------ */ [dir="rtl"] .title-anim, [dir="rtl"] .title-anim > div, [dir="rtl"] .title-anim .line, [dir="rtl"] .title-anim .word, [dir="rtl"] .title-anim .char { overflow: visible !important; visibility: visible !important; opacity: 1 !important; transform: none !important; }