/* ═══════════════════════════════════════
   BatuhanWeb — rtl.css
   Arapça RTL Özel Stiller
   Yalnızca dir="rtl" olduğunda aktif
   ═══════════════════════════════════════ */

[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-family: 'Noto Sans Arabic', 'Sora', sans-serif;
}

/* ── NAV ── */
[dir="rtl"] nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}

[dir="rtl"] .nav-links a::after {
  transform-origin: right;
}

[dir="rtl"] .nav-right {
  flex-direction: row-reverse;
}

/* ── HERO ── */
/* Metin sağda, orb solda */


[dir="rtl"] .hero-orb {
  right: auto;
  left: -80px;
}

[dir="rtl"] .hero-content {
  text-align: right;
}

[dir="rtl"] .hero-sub {
  margin-left: auto;
  margin-right: 0;
}

/* Desktop: use a 2-column grid so the hero text sits in the right column (purple area) */
@media (min-width: 900px) {
  [dir="rtl"] .hero {
    display: -moz-grid-line;
    grid-template-columns: 1fr minmax(320px, 680px);
    align-items: center;
    text-align: right;
  }

  [dir="rtl"] .hero-content {
    grid-column: 2;
    justify-self: end;
    text-align: right;
  }

  /* Place the orb visually to the left column */
  [dir="rtl"] .hero-orb {
    position: absolute;
    left: -80px;
    right: auto;
  }
}

/* ── BADGE ── */
[dir="rtl"] .badge {
  letter-spacing: .06em; /* Arapça için azalt */
}

/* ── SECTION LABEL ── */
[dir="rtl"] .section-label {
  letter-spacing: .06em;
}

/* ── SERVİS KARTI çizgi sola ── */
[dir="rtl"] .s-card::after {
  transform-origin: right;
}

/* ── SÜREÇ adımları ── */
[dir="rtl"] .process-grid::before {
  background: linear-gradient(270deg, transparent, var(--red), transparent);
}

/* ── HAKKIMDA ── */
[dir="rtl"] .about-grid {
  direction: rtl;
}

[dir="rtl"] .about-text {
  text-align: right;
}

[dir="rtl"] .skills {
  flex-direction: row-reverse;
}

/* ── İLETİŞİM ── */
[dir="rtl"] .contact-grid {
  direction: rtl;
}

[dir="rtl"] .c-info {
  text-align: right;
}

[dir="rtl"] .c-item {
  flex-direction: row-reverse;
}

[dir="rtl"] .fg label {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir="rtl"] .fg input,
[dir="rtl"] .fg textarea,
[dir="rtl"] .fg select {
  text-align: right;
  direction: rtl;
}

/* ── MOBİL MENÜ ── */
[dir="rtl"] .mobile-menu a {
  text-align: right;
}

[dir="rtl"] .mobile-lang {
  flex-direction: row-reverse;
}

/* ── FOOTER ── */
[dir="rtl"] footer {
  direction: rtl;
}

/* ── MOBİL RTL ── */
@media (max-width: 780px) {
  [dir="rtl"] .hero-content {
    text-align: right;
  }

  [dir="rtl"] .process-step {
    flex-direction: row-reverse;
    text-align: right;
  }
}

/* ── RTL overrides: preserve visual order and avoid full mirroring ── */
/* Keep language buttons in the same visual order (TR, EN, KO, AR) */
[dir="rtl"] .lang-switcher,
[dir="rtl"] .mobile-lang {
  direction: ltr; /* prevent inherited RTL flipping */
  flex-direction: row; /* keep internal order left-to-right */
}

[dir="rtl"] .lang-switcher .lang-btn,
[dir="rtl"] .mobile-lang .lang-btn {
  direction: ltr;
}

/* Prevent grid containers from mirroring their columns — keep boxes fixed */
[dir="rtl"] .about-grid,
[dir="rtl"] .contact-grid {
  direction: ltr; /* override earlier mirroring rule */
}

/* Only right-align textual content inside those containers */
[dir="rtl"] .about-text,
[dir="rtl"] .c-info,
[dir="rtl"] .c-form {
  text-align: right;
}

/* Keep contact item icon on the same side as LTR; do not flip child order */
[dir="rtl"] .c-item {
  flex-direction: row;
}

/* Labels: keep label layout similar but align the text to right */
[dir="rtl"] .fg label {
  flex-direction: row;
  justify-content: flex-start;
  text-align: right;
}

/* Ensure hero content is right-aligned in RTL */
[dir="rtl"] .hero-content {
  text-align: right;
}

@media (max-width: 780px) {
  [dir="rtl"] .mobile-lang {
    direction: ltr;
    flex-direction: row;
  }

  [dir="rtl"] .hero-content {
    margin-inline-start: auto;
    margin-inline-end: 0;
    text-align: right;
  }
}

/* Fallback: her zaman sağ sütuna itmek için 780px ve üstünde margin-based hizalama */
@media (min-width: 780px) {
  [dir="rtl"] .hero-content {
    max-width: 680px;
    margin-inline-start: start;
    margin-inline-end: 0;
    text-align: right;
  }
}