html[dir="rtl"] body {
    font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}

html[dir="rtl"] .logo { letter-spacing: 0; }

html[dir="rtl"] .highlight::before {
    transform: rotate(1deg);
    left: auto;
    right: -2%;
}

/* RTL mobile drawer: on screens ≤980px the sidebar is hidden off-screen
   to the LEFT (visible RTL side is left), then `.open` slides it back in.
   CRITICAL: keep these inside a media query — otherwise the sidebar gets
   pushed off-screen at every viewport width and the admin panel loses
   its navigation when the locale flips to Arabic. */
@media (max-width: 980px) {
    html[dir="rtl"] .portal-sidebar { transform: translateX(100%); }
    html[dir="rtl"] .portal-sidebar.open { transform: translateX(0); }
}

html[dir="rtl"] .hero-scroll {
    inset-inline-start: 50%;
}

html[dir="rtl"] .nav-toggle span { transform-origin: right; }

html[dir="rtl"] .kpi-card .value,
html[dir="rtl"] .stat-block .stat-number {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

html[dir="rtl"] .timeline { padding-inline-start: 28px; padding-right: 28px; padding-left: 0; }
html[dir="rtl"] .timeline::before { right: 10px; left: auto; }
html[dir="rtl"] .timeline-item::before { right: -24px; left: auto; }

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
    line-height: 1.35;
}