/**
 * Başarı Elektronik - Corporate Website RTL Stylesheet (Arabic Edition)
 * Enhances Vanilla CSS for true native Right-to-Left (RTL) reading & typography
 * Font 'Cairo' is preloaded and linked in the HTML head for optimal performance.
 */

:root {
  --font-sans: 'Cairo', system-ui, -apple-system, sans-serif !important;
  --font-heading: 'Cairo', system-ui, -apple-system, sans-serif !important;
}

html[dir="rtl"],
body[dir="rtl"],
body.rtl-mode {
  direction: rtl;
  text-align: right;
  font-family: var(--font-sans);
}

/* ==========================================================================
   Header & Navigation (RTL)
   ========================================================================== */
.site-header {
  direction: rtl;
}

.brand-logo {
  flex-direction: row;
}

.desktop-nav {
  margin-left: 0;
  margin-right: 2.5rem;
}

.header-portals {
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 1.5rem;
}

.lang-switcher {
  margin-left: 0;
  margin-right: 0.85rem;
}

/* Flip external indicator arrows in RTL */
.portal-icon,
.btn-ext-icon,
.cert-arrow,
.map-open-link .material-symbols-outlined,
.btn-admin .material-symbols-outlined:last-child {
  transform: scaleX(-1);
}

.portal-link:hover .portal-icon {
  transform: scaleX(-1) translate(1px, -1px);
}

/* Navigation active indicator underline from right to left */
.nav-link::after {
  left: auto;
  right: 0;
}

/* Mobile Toggle in Header */
.mobile-toggle {
  margin-left: 0;
  margin-right: 0.75rem;
}

.mobile-drawer {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}

.mobile-drawer.open {
  transform: translateX(0);
}

/* ==========================================================================
   Floating Elements (Back-to-top & Toast)
   ========================================================================== */
.back-to-top {
  right: auto;
  left: 1.5rem;
}

/* ==========================================================================
   Section Headers & Badges (RTL)
   ========================================================================== */
.section-header-split {
  flex-direction: row;
}

.certified-badge,
.partner-badge,
.step-indicator {
  margin-right: 0;
}

/* ==========================================================================
   Solutions & Diagonal Showcase (RTL)
   ========================================================================== */
.solution-step {
  flex-direction: row;
}

.capsule-num {
  direction: ltr; /* keep numerals aligned */
  display: inline-block;
}

/* ==========================================================================
   Brands Grid & Certificates Bar (RTL)
   ========================================================================== */
.brand-cert-badge {
  flex-direction: row;
}

.brand-cert-badge .cert-icon {
  margin-right: 0;
  margin-left: 4px;
}

.ce-cert-info {
  flex-direction: row;
}

.ce-badge-icon {
  margin-right: 0;
  margin-left: 1rem;
}

/* ==========================================================================
   Timeline & History (RTL)
   ========================================================================== */
.journey-header {
  flex-direction: row;
}

.journey-icon {
  margin-right: 0;
  margin-left: 0.75rem;
}

.timeline-year {
  direction: ltr;
  display: inline-block;
}

/* ==========================================================================
   Quality Policy (RTL)
   ========================================================================== */
.policy-badge-wrap {
  flex-direction: row;
}

.policy-shield {
  margin-right: 0;
  margin-left: 1rem;
}

.commitment-item {
  flex-direction: row;
}

.commitment-item .check-icon {
  margin-right: 0;
  margin-left: 0.75rem;
}

.policy-pledge {
  flex-direction: row;
}

.pledge-icon {
  margin-right: 0;
  margin-left: 1rem;
}

.executive-signoff {
  flex-direction: row-reverse;
  text-align: right;
}

.signoff-stamp {
  margin-right: 0;
  margin-left: 1rem;
}

/* ==========================================================================
   Quotation & Contact Form (RTL)
   ========================================================================== */
.hq-item {
  flex-direction: row;
}

.hq-icon {
  margin-right: 0;
  margin-left: 1rem;
}

.quote-accent-bar {
  left: auto;
  right: 0;
}

.checkbox-row {
  flex-direction: row;
}

.checkbox-row input {
  margin-right: 0;
  margin-left: 0.6rem;
}

.btn-submit span:last-child {
  transform: scaleX(-1);
}

/* ==========================================================================
   CMS Guarantee Bar (RTL)
   ========================================================================== */
.cms-inner {
  flex-direction: row;
}

.cms-info {
  flex-direction: row;
}

.yerli-uretim-badge {
  margin-right: 0;
  margin-left: 1.25rem;
}

/* ==========================================================================
   Footer (RTL)
   ========================================================================== */
.footer-col {
  text-align: right;
}

.footer-map-header {
  flex-direction: row;
}

.map-label {
  flex-direction: row;
}

.contact-row {
  flex-direction: row;
}

.contact-row .material-symbols-outlined {
  margin-right: 0;
  margin-left: 0.6rem;
}

.footer-bottom {
  flex-direction: row;
}

@media (max-width: 991px) {
  .section-header-split,
  .policy-header,
  .policy-footer,
  .cms-inner,
  .footer-bottom {
    flex-direction: column;
  }
}

/* ==========================================================================
   Hero 1 Programmatic Overlay (RTL Specifics)
   ========================================================================== */
html[dir="rtl"] .hero-overlay-container,
body[dir="rtl"] .hero-overlay-container {
  left: 7.5%;
  right: auto;
  align-items: flex-start;
  text-align: right;
}

html[dir="rtl"] .hero-top-badge,
body[dir="rtl"] .hero-top-badge {
  flex-direction: row;
}

html[dir="rtl"] .hero-main-title,
body[dir="rtl"] .hero-main-title {
  text-align: right;
  align-items: flex-start;
}

html[dir="rtl"] .hero-main-desc,
body[dir="rtl"] .hero-main-desc {
  text-align: right;
}

html[dir="rtl"] .hero-btn-primary .hero-btn-icon,
body[dir="rtl"] .hero-btn-primary .hero-btn-icon {
  transform: scaleX(-1);
}

html[dir="rtl"] .hero-btn-primary:hover .hero-btn-icon,
body[dir="rtl"] .hero-btn-primary:hover .hero-btn-icon {
  transform: scaleX(-1) translateX(4px);
}

html[dir="rtl"] .hero-stat-item,
body[dir="rtl"] .hero-stat-item {
  text-align: right;
}

html[dir="rtl"] .hero-quick-access,
body[dir="rtl"] .hero-quick-access {
  flex-direction: row;
}

@media (max-width: 991px) {
  html[dir="rtl"] .hero-overlay-container,
  body[dir="rtl"] .hero-overlay-container {
    left: auto;
    right: auto;
  }
  
  html[dir="rtl"] .hero-vignette-overlay,
  body[dir="rtl"] .hero-vignette-overlay {
    background: linear-gradient(
      -90deg,
      rgba(3, 13, 30, 0.92) 0%,
      rgba(3, 13, 30, 0.82) 55%,
      rgba(3, 13, 30, 0.4) 100%
    );
  }
}

/* ==========================================================================
   Solution Showcase Cards (RTL Specifics)
   ========================================================================== */
html[dir="rtl"] .solution-showcase-card,
body[dir="rtl"] .solution-showcase-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .solution-card-pills,
body[dir="rtl"] .solution-card-pills {
  flex-direction: row;
}

html[dir="rtl"] .solution-btn-primary .material-symbols-outlined,
body[dir="rtl"] .solution-btn-primary .material-symbols-outlined {
  transform: scaleX(-1);
}

html[dir="rtl"] .solution-btn-primary:hover .material-symbols-outlined,
body[dir="rtl"] .solution-btn-primary:hover .material-symbols-outlined {
  transform: scaleX(-1) translateX(3px);
}

html[dir="rtl"] .solution-btn-quote .material-symbols-outlined,
body[dir="rtl"] .solution-btn-quote .material-symbols-outlined {
  transform: scaleX(-1);
}

html[dir="rtl"] .solution-btn-quote:hover,
body[dir="rtl"] .solution-btn-quote:hover {
  transform: translateX(-3px);
}