/* ==========================================================================
   Three languages: the switch, the Arabic letters, right to left
   --------------------------------------------------------------------------
   Arabic is set in IBM Plex Sans Arabic (text) and Noto Naskh Arabic (the
   headings, the serif's counterpart). Both are cut to the Arabic block
   (unicode-range): a Turkish or English page never downloads them. Arabic
   letters join: nothing may space them apart. Right to left, every arrow
   turns round, every corner badge changes side; motion that "leans
   forward" leans the other way.
   ========================================================================== */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../fonts/plex-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
@font-face { font-family: "Noto Naskh Arabic"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/naskh-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF; }
:root {
  --f-display: "Fraunces", "Noto Naskh Arabic", "Iowan Old Style", Georgia, serif;
  --f-body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---- the switch: TR · EN · AR, in the header and in the phone's menu ---- */
.lang__menu a { transition: background var(--d-fast), color var(--d-fast); }
.sheet__top .lang { margin-inline: auto 0.6rem; }
@media (max-width: 1500px) { .tool--kbd span, .tool--kbd kbd { display: none; } .tool--kbd { width: 2.6rem; padding: 0; justify-content: center; } .er small { display: none; } }

/* ---- Arabic letters ---- */
html[lang="ar"] body { font-size: 1.04em; }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; }
html[lang="ar"] em, html[lang="ar"] i:not(.live) { font-style: normal; }
html[lang="ar"] .hero__title, html[lang="ar"] .phead h1, html[lang="ar"] .h2, html[lang="ar"] .feature__title, html[lang="ar"] .area__k { line-height: 1.32; }
html[lang="ar"] .h3, html[lang="ar"] .dept h2, html[lang="ar"] .dept h3, html[lang="ar"] .doc__name, html[lang="ar"] .word blockquote, html[lang="ar"] .step h2, html[lang="ar"] .prose h2 { line-height: 1.45; }
html[lang="ar"] .label, html[lang="ar"] .step__k, html[lang="ar"] .stepper__t, html[lang="ar"] .card--toc h2, html[lang="ar"] .card--links h2 { font-size: 0.86rem; }
html[lang="ar"] .js-split .w { padding-bottom: 0.32em; margin-bottom: -0.32em; padding-top: 0.12em; margin-top: -0.12em; }

/* ---- right to left ---- */
[dir="rtl"] svg:has(use[href$="#i-arrow"]), [dir="rtl"] svg:has(use[href$="#i-left"]) { scale: -1 1; }
[dir="rtl"] .qa .go { right: auto; left: 1.1rem; }
[dir="rtl"] .doc__tag { left: auto; right: 0.8rem; }
[dir="rtl"] .note--er { left: auto; right: 0; }
[dir="rtl"] .note--team { right: auto; left: 0; }
[dir="rtl"] .atab[aria-selected="true"]::after { left: auto; right: 1.8rem; }
[dir="rtl"] .opt[aria-pressed="true"]::after { right: auto; left: 0.6rem; }
[dir="rtl"] .pcard[aria-pressed="true"]::after { right: auto; left: 0.9rem; }
[dir="rtl"] .field > .ok { right: auto; left: 0.95rem; }
[dir="rtl"] .timeline li { padding: 0 1.6rem 1.1rem 0; }
[dir="rtl"] .timeline li::before { left: auto; right: 0.3rem; }
[dir="rtl"] .timeline li::after { left: auto; right: calc(0.3rem + 0.27rem - 0.75px); }
[dir="rtl"] .stepper li + li::before { left: calc(50% + 1.6rem); right: calc(-50% + 1.6rem); background-position: right; }
@media (max-width: 640px) { [dir="rtl"] .stepper li + li::before { left: calc(50% + 1.35rem); right: calc(-50% + 1.35rem); } }
[dir="rtl"] .totop { right: auto; left: clamp(1rem, 2vw, 2rem); }
[dir="rtl"] .hdr__line { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--teal), #5fc9bd); }
[dir="rtl"] .skip { left: auto; right: var(--pad); }
/* the insurers' band, the phone and e-mail fields: Latin, left to right, wherever they stand */
.marq { direction: ltr; }
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }
[dir="rtl"] .reqbox pre { direction: rtl; }

/* the menu never breaks a label in two; on narrower desktops it tightens before anything wraps */
.nav__a { white-space: nowrap; }
@media (max-width: 1460px) { .nav { gap: 0; } .nav__a { padding: 0 0.55rem; font-size: 0.9rem; } .tools { gap: 0.4rem; } .btn--appt { padding: 0 1.05rem; } }
/* Latin words inside an Arabic heading keep their own order */
bdi.wl { unicode-bidi: isolate; }
@media (max-width: 1380px) { .btn--appt { padding: 0 0.95rem; font-size: 0.9rem; } .btn--appt .icon { display: none; } html[lang="en"] .nav__a { padding: 0 0.45rem; font-size: 0.88rem; } }

/* the footer's credit */
.foot__end { display: flex; align-items: center; gap: 1.4rem; }
.foot__social { display: flex; gap: 0.6rem; padding-inline-start: 1.4rem; box-shadow: inset 1px 0 0 rgba(232, 244, 241, 0.14); }
[dir="rtl"] .foot__social { box-shadow: inset -1px 0 0 rgba(232, 244, 241, 0.14); }
/* the studio's signature: quiet until it is pointed at */
.foot__credit { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(232, 244, 241, 0.68); white-space: nowrap; transition: color var(--d-fast); }
.foot__credit b { font-weight: 600; letter-spacing: 0.015em; color: rgba(232, 244, 241, 0.86); padding-bottom: 1px; direction: ltr; unicode-bidi: isolate;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color var(--d-fast), background-size 420ms var(--e-out); }
.foot__credit .foot__go { width: 0.8rem; height: 0.8rem; opacity: 0.55; transform: rotate(-45deg); transition: transform 420ms var(--e-out), opacity var(--d-fast); }
[dir="rtl"] .foot__credit .foot__go { transform: rotate(-135deg); }
.foot__credit:hover { color: rgba(232, 244, 241, 0.86); }
.foot__credit:hover b { color: var(--white); background-size: 100% 1px; }
.foot__credit:hover .foot__go { opacity: 1; transform: rotate(-45deg) translateX(2px); }
[dir="rtl"] .foot__credit:hover .foot__go { transform: rotate(-135deg) translateX(2px); }
.foot__credit:focus-visible { outline: 2px solid rgba(232, 244, 241, 0.6); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 560px) { .foot__end { width: 100%; justify-content: space-between; } .foot__social { padding-inline-start: 0; box-shadow: none; } }
/* the back-to-top button never sits on the footer's last line */
@media (min-width: 761px) { .foot__bottom { padding-inline-end: 4.6rem; } }   /* inline-end is where the "to top" button sits, in either direction */