/* ============================================================================ Right-to-left layer for the Arabic site. Loaded only on pages whose carries dir="rtl", so it is purely additive and cannot affect the Turkish or English trees. Two jobs: give Arabic a typeface that actually has Arabic glyphs (Archivo and Space Grotesk have none), and mirror the directional layout. ========================================================================== */ :root[dir="rtl"] { /* IBM Plex Sans Arabic is a technical family that sits naturally next to the geometric Latin faces used elsewhere on the site. Latin fallbacks stay in the stack so product codes and numbers keep their original shapes. */ --font-body: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --font-head: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; /* The design uses JetBrains Mono for eyebrow labels, some nav links and codes. It has no Arabic glyphs, so Arabic text fell through to the generic `monospace` face, which puts every letter in its own fixed-width cell and breaks the joins — "مركز المعرفة" rendered as separated letters. Keep JetBrains Mono first so Latin codes stay monospaced, then hand Arabic runs to a proportional Arabic face instead of a monospace fallback. */ --font-mono: 'JetBrains Mono', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif; } [dir="rtl"] body { text-align: right; } /* Arabic script needs more leading than Latin at the same size; ascenders and descenders are taller and diacritics sit above the line. */ [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] .hero-subtitle, [dir="rtl"] .section-desc { line-height: 1.85; } /* Display headings are the worst case. The Latin design sets the hero at 88px with a 1.06 line-height, which is fine for Latin caps but clips Arabic: measured 392px of glyphs inside a 373px box, so the lines visibly collided. 1.35 clears the ascenders and the hamza without loosening the design. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .hero-title, [dir="rtl"] .section-title { line-height: 1.35; padding-bottom: 0.08em; } /* Letter-spacing is actively harmful in Arabic — it breaks the joins between connected letters. Anything the Latin design tracked out must be reset. */ [dir="rtl"] * { letter-spacing: normal !important; } /* ── Directional mirroring ──────────────────────────────────────────────── Deliberately NOT using flex-direction: row-reverse here. `flex-direction: row` means "along the inline axis IN THE WRITING DIRECTION". Under dir="rtl" that is already right-to-left, so the browser mirrors every flex row for free. Adding row-reverse flips it a second time and lands back at left-to-right — which is exactly how the logo ended up on the left of an Arabic page with the nav unmirrored. Let RTL do its job. */ [dir="rtl"] .hero, [dir="rtl"] .section-head, [dir="rtl"] .product-card, [dir="rtl"] .kc-card, [dir="rtl"] .news-card { text-align: right; } /* Lists: the marker moves to the right edge. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.25rem; padding-left: 0; } /* Accent rules and quote bars drawn on the left edge belong on the right. */ [dir="rtl"] .finding-rec, [dir="rtl"] .accent-bar, [dir="rtl"] blockquote { border-left: none; border-right: 3px solid var(--accent, #E01020); padding-left: 0; padding-right: 1rem; } /* Arrows in CTAs point the other way in RTL. The glyph itself is mirrored by the browser only inside an RTL run, so flip the ones we draw ourselves. */ [dir="rtl"] .cta-arrow, [dir="rtl"] .arrow-right { transform: scaleX(-1); } /* ── Bidirectional isolation ────────────────────────────────────────────── Product codes, model numbers, units and any deliberately Latin run must not be reordered by the bidi algorithm when they sit inside Arabic text. Without this, "JİTPOL PNL 2168" can render as "2168 PNL JİTPOL". */ [dir="rtl"] code, [dir="rtl"] .mono, [dir="rtl"] .product-code, [dir="rtl"] [lang="en"], [dir="rtl"] [dir="ltr"] { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono, monospace); } /* Phone numbers and e-mail addresses are Latin runs too. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* The language switcher stays in a fixed reading order in every language, so its row is NOT reversed — only its alignment moves. */ [dir="rtl"] .nav-lang, [dir="rtl"] .lang-switcher, [dir="rtl"] .lang-toggle { flex-direction: row; /* Keep TR · EN · AR in the same order in every language. Without an explicit LTR run the bidi algorithm reverses them, so the switcher moves under the reader's cursor depending on which language they are currently viewing. */ direction: ltr; unicode-bidi: isolate; } /* Forms */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { text-align: left; direction: ltr; } /* Scroll-driven frame stack and other absolutely positioned canvases are coordinate-based, not text-based — leave their geometry untouched. */ [dir="rtl"] .frame-stack, [dir="rtl"] canvas, [dir="rtl"] svg { direction: ltr; } /* The homepage product animations label themselves with SVG carrying a hard-coded font-family="monospace" attribute, so the --font-mono fix above never reached them and Arabic tags like "ألواح ساندوتش بانل" were set in a monospace fallback with broken joins. CSS overrides SVG presentation attributes, so route them through the same Arabic-safe stack. */ [dir="rtl"] svg text { font-family: var(--font-mono); letter-spacing: normal; } /* The floating payment and WhatsApp buttons are fixed to the right edge. In a right-to-left page that is where every line STARTS, so on a phone they sat on top of the first words of headings. Mirror them to the left, as RTL layouts do. (Specificity beats the rule float-buttons.js injects later.) */ [dir="rtl"] .qnb-btn, [dir="rtl"] .wa-btn { right: auto; left: 28px; } /* Blocks the base stylesheet pins to text-align:left — which wins over the body's right alignment — so on /ar/ the About heading, the export-region cards and the footer still read from the left edge. Mirror them, and the margins that pushed items to the right-hand end of their row. */ [dir="rtl"] .about-content .section-eyebrow, [dir="rtl"] .about-content .section-title, [dir="rtl"] .map-region-card, [dir="rtl"] footer { text-align: right; } [dir="rtl"] .about-content .section-divider { margin: 0 0 40px auto; } /* The contact column sits on the outer edge and aligns to it: the right edge in LTR, the left edge once the grid mirrors. */ [dir="rtl"] .footer-col-contact { text-align: left; } [dir="rtl"] .footer-contact-address { margin-left: 0; margin-right: auto; } [dir="rtl"] .quote-btn-next { margin-left: 0; margin-right: auto; } @media (max-width: 768px) { [dir="rtl"] footer, [dir="rtl"] .footer-col-contact { text-align: center; } [dir="rtl"] .footer-contact-address { margin-left: auto; margin-right: auto; } }