/* ========================================================================== Sağdan sola diller (Arapça, Farsça) — yalnızca sayfalarında, app.css'ten SONRA yüklenir (views/partials/i18n-head.php). app.css fiziksel yönlerle (left/right) yazıldığı için burada aynalanır; soldan sağa sayfalar bu dosyadan etkilenmez. Grid/flex düzenleri dir="rtl" ile zaten kendiliğinden döner; burada yalnızca konumlar, kenar boşlukları, hizalamalar ve yön bildiren simgeler var (kaydırıcıların yönünü JS öğenin hesaplanmış yönünden okur). app.css'te bir kuralın dar ekran (media) karşılığı varsa aşağıda aynı kırılımda yeniden yazılır. 1 Tipografi 2 Simgeler 3 Form 4 Üst bilgi 5 Çekmece/modal/bant 7 Ana sayfa 8 Ürün kartı 9 Listeleme 10 Ürün sayfası 11 Sepet 12 Ödeme 13 Hesabım 15 İçerik 16 Görünümlerdeki satır içi stiller 17 Duyarlı (numaralar app.css bölümleriyle aynı; alt bilgi ve cilt analizi kendiliğinden döner) ========================================================================== */ /* ---------------------------------------------------------------- 1 tipografi */ /* Arap yazısı bitişiktir: harf aralığı harfleri koparır, italik yapay eğikliğe döner */ html[dir="rtl"] body, html[dir="rtl"] body * { letter-spacing: normal !important; } html[dir="rtl"] :is(em, [style*="font-style:italic"]) { font-style: normal !important; } /* Nokta ve harekeler için iri başlıklarda daha geniş satır aralığı */ html[dir="rtl"] :is(.display, .hero-title, .section-title, .plp-title, .pdp-title, .page-title, .acc-head h1, .auth-panel h1, .auth-aside h2, .quiz-cta-copy h2, .quiz-intro h1, .quiz-step h2, .quiz-result-head h1, .article-head h1, .promo h3, .newsletter-copy h2, .success-hero h1, .error-page h1, .mega-promo-text strong, .post-card h3, .ing-card h3, .content-title, .loyalty-hero h1, .status-page h1, .status-page h2, .blog-featured h2, .glossary-grid .ing-card h2, .campaign-card h3) { line-height: 1.32; } /* Tutar, kod ve numaralar sağdan sola metnin içinde de soldan sağa okunur ("−1.299,90 TL", IBAN, sipariş no) */ html[dir="rtl"] :is(.price, .price-old, .ci-price .now, .ci-price s, .rc-side, .bundle-total .t, .routine-total .t, .order-no > span, .sum-row > :last-child:not(:first-child), .sum-item > .strong:last-child, [data-place-total], [data-sticky-price], .d-rec .n .strong, .sp-product .p, .order-row-total, .bundle-item .pr, .lb-count, .countdown, code, kbd, samp, a[href^="tel:"], a[href^="mailto:"]) { unicode-bidi: isolate; direction: ltr; } html[dir="rtl"] :is([data-sticky-price], .routine-total .t, .bundle-item .pr, .d-rec .n .strong) { text-align: right; } /* blok olanlar sağa yaslı kalsın */ /* Kimi zaman tutar/numara kimi zaman metin olan değerler: yön içeriğin ilk güçlü harfinden belirlenir */ html[dir="rtl"] :is(.stat-tile strong, .pt-row .plus, .pt-row .minus, .order-row-no, .rv-author strong, .account-user strong, .data-table td:not(.muted)) { unicode-bidi: plaintext; text-align: right; } /* Latin harfli ürün verisi: hacim ("30 ml", "12 x 1,2 g") ve marka adları ("BARBER & CO.") noktalamasıyla birlikte düz kalsın */ html[dir="rtl"] :is(.p-volume, .pdp-rating > span.muted:last-child, .p-brand, .ci-brand, .d-brand, .sum-brand, .sp-product .b) { unicode-bidi: isolate; direction: ltr; text-align: right; } /* E-posta, telefon, adres (URL) ve sayısal alanlar soldan sağa yazılır; yer tutucu sağdan sola kalır */ html[dir="rtl"] input:is([type="email"], [type="tel"], [type="url"], [type="number"], [inputmode="numeric"], [inputmode="decimal"], [inputmode="tel"]) { direction: ltr; text-align: right; } html[dir="rtl"] input:is([type="email"], [type="tel"], [type="url"], [type="number"])::placeholder { direction: rtl; } html[dir="rtl"] .qty input { text-align: center; } /* ---------------------------------------------------------------- 2 yön bildiren simgeler */ /* scale ayrı bir özellik olduğundan hover'daki transform'larla (ör. .link-arrow kayması) birleşir; kayma da aynalanır */ html[dir="rtl"] svg.i:has(> use[href="#i-chevron-left"]), html[dir="rtl"] svg.i:has(> use[href="#i-chevron-right"]), html[dir="rtl"] svg.i:has(> use[href="#i-arrow-left"]), html[dir="rtl"] svg.i:has(> use[href="#i-arrow-right"]), html[dir="rtl"] svg.i:has(> use[href="#i-login"]), html[dir="rtl"] svg.i:has(> use[href="#i-logout"]), html[dir="rtl"] svg.i:has(> use[href="#i-send"]) { scale: -1 1; } /* ---------------------------------------------------------------- 3 form */ html[dir="rtl"] .skip-link { left: auto; right: 16px; } html[dir="rtl"] .stars-fill { inset: 0 0 0 auto; } html[dir="rtl"] .select { padding-right: 16px; padding-left: 40px; background-position: left 16px center; } html[dir="rtl"] .sort-select { padding: 0 14px 0 40px; background-position: left 14px center; } html[dir="rtl"] .pw-field .input { padding-right: 16px; padding-left: 48px; } html[dir="rtl"] .pw-toggle { right: auto; left: 6px; } /* Anahtar (toggle): kapalıyken düğme sağda, açılınca sola kayar */ html[dir="rtl"] .toggle input::after { left: auto; right: 3px; } html[dir="rtl"] .toggle input:checked::after { transform: translateX(-16px); } /* ---------------------------------------------------------------- 4 üst bilgi */ html[dir="rtl"] .search .search-icon { left: auto; right: 17px; } html[dir="rtl"] .search-clear { right: auto; left: 8px; } html[dir="rtl"] .sp-product .p { text-align: left; } html[dir="rtl"] .nav-link::after { transform-origin: right; } /* ---------------------------------------------------------------- 5 çekmece, modal, bildirim, bantlar */ /* Menü çekmecesi sağdan, sepet çekmecesi soldan açılır */ html[dir="rtl"] .drawer-left .drawer-panel { left: auto; right: 0; transform: translateX(100%); } html[dir="rtl"] .drawer-right .drawer-panel { right: auto; left: 0; transform: translateX(-100%); } html[dir="rtl"] .drawer.is-open .drawer-panel { transform: none; } /* Menü ağacı, modal kapatma düğmesi, bildirim bağlantısı ve çerez bandı mantıksal özelliklerle yazıldı: kendiliğinden aynalanır */ html[dir="rtl"] .wa-float { right: auto; left: 24px; padding: 0 15px 0 18px; } /* ---------------------------------------------------------------- 7 ana sayfa & raylar */ html[dir="rtl"] .hero-copy { padding: 56px clamp(28px, 5vw, 72px) 110px 0; } html[dir="rtl"] .hero-controls { left: auto; right: clamp(28px, 5vw, 72px); } html[dir="rtl"] .hero-dots button.is-active::after { transform-origin: right; } /* Raylar, ürün galerisi ve fiyat aralığı doğal sağdan sola düzende çalışır: app.js / product.js / listing.js yönü öğenin hesaplanmış yönünden okur (core.js isRtl) — burada aynalama yapılmaz. */ /* ---------------------------------------------------------------- 8 ürün kartı */ html[dir="rtl"] .p-swatches { margin-left: 0; margin-right: auto; } html[dir="rtl"] .p-swatches em { margin-left: 0; margin-right: 2px; } html[dir="rtl"] :is(.p-variants, .p-volume) { margin-left: 0; margin-right: auto; } /* ---------------------------------------------------------------- 9 listeleme */ /* Listeleme başlığı, filtreler, araç çubuğu ve A–Z mantıksal özelliklerle (inline-start/end) yazıldı: kendiliğinden aynalanır. Başlık görseli LTR'ye göre çizildiğinden (ürünler sağda) sağ tarafı gösterilir; görsel kutusu RTL'de solda durur. */ /* ---------------------------------------------------------------- 10 ürün sayfası */ /* Galeri, ışık kutusu, kampanya satırı, paket, yorum ve soru-cevap öğeleri app.css'te mantıksal özelliklerle (inset-inline, margin-inline, border-inline…) yazıldı: kendiliğinden aynalanır. Akordeon gövdesindeki liste SSS ve içerik sayfalarıyla ortaktır. */ html[dir="rtl"] .acc-body ul { padding-left: 0; padding-right: 20px; } /* ---------------------------------------------------------------- 11 sepet */ /* Sepet: tutar sütunu text-align: end, numune işareti inset-inline-end ile yazıldı; soldan sağa yalıtılan tutar satırları kendi yönlerine göre hizalandığından sütunun dış kenarına (sola) açıkça yaslanır */ html[dir="rtl"] :is(.ci-price .now, .ci-price s, .d-price .price) { text-align: left; } /* ---------------------------------------------------------------- 12 ödeme */ /* Ödeme: adım göstergesi, bölüm başlıkları ve özet mantıksal özelliklerle yazıldı */ /* ---------------------------------------------------------------- 13 hesabım */ /* Hesabım ve üyelik: menü, durum adımları, geçmiş çizelgesi ve tablolar mantıksal özelliklerle yazıldı */ /* ---------------------------------------------------------------- 15 içerik sayfaları */ /* Uzun metin (prose), içindekiler, sayfa gezinmesi, SSS ve iletişim mantıksal özelliklerle yazıldı: burada kural gerekmez. Sadakat sayfasındaki örnek hesap tablosunda tutar sütunu satır sonuna (RTL'de sola) yaslanır. */ html[dir="rtl"] .calc-table :is(td, th):last-child { text-align: left; } /* ---------------------------------------------------------------- 16 görünümlerdeki satır içi stiller */ html[dir="rtl"] [style*="text-align:right"] { text-align: left !important; } html[dir="rtl"] [style*="text-align:left"] { text-align: right !important; } html[dir="rtl"] [style*="margin-left:auto"]:not([style*="margin-right:auto"]) { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] [style*="margin-left:4px"] { margin-left: 0 !important; margin-right: 4px !important; } html[dir="rtl"] :is(ul, ol)[style*="padding-left"] { padding-left: 0 !important; padding-right: 20px !important; } html[dir="rtl"] [style*="padding-right:16px"] { padding-right: 0 !important; padding-left: 16px !important; } html[dir="rtl"] [style*="float:left"] { float: right !important; } /* Bal küpü alanları: sola -9999px RTL'de yatay kaydırma alanı açar */ html[dir="rtl"] [style*="left:-9999px"] { left: auto !important; right: -9999px !important; } /* ---------------------------------------------------------------- 17 duyarlı (app.css kırılımlarının aynası) */ @media (max-width: 1024px) { html[dir="rtl"] .filters { padding: 0; transform: translateX(100%); } html[dir="rtl"] .filters.is-open { transform: none; } html[dir="rtl"] .hero-copy { padding: 30px 28px 80px; } html[dir="rtl"] .wa-float { right: auto; left: 14px; padding: 0; } } @media (max-width: 768px) { html[dir="rtl"] .p-swatches { margin-right: 0; } }