/* ======================================================
   YOSKA — Mobile-first, premium optimize stylesheet
   (TAM SÜRÜM • style.css’i bununla değiştir)
====================================================== */

/* 0) Reset & base */
:root{
  --radius: 12px;
  --border: #e5e7eb;
  --ink: #0f0f0f;
  --muted: #6b7280;
  --bg: #ffffff;
}
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }

/* 1) Header */
header{
  position: sticky; top:0; z-index:1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #f1f1f3;
  min-height:56px;
  box-sizing:border-box;
}
.logo{ height: clamp(20px,5vw,24px); width:auto; object-fit:contain; }
@media (min-width:768px){ .logo{ height:26px; } }
@media (min-width:1024px){ .logo{ height:28px; } }
nav a{ font-size:13px; letter-spacing:.4px; }

/* 2) HERO (slider) */
#heroSlider{ position:relative; height:70vh; max-height:780px; }
@media (min-width:768px){ #heroSlider{ height:78vh; } }
@media (min-width:1024px){ #heroSlider{ height:86vh; max-height:920px; } }

/* slide stacking + fade */
#heroSlider .slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; z-index:0;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}
#heroSlider .slide.active{
  opacity:1; visibility:visible; z-index:1;
  transition: opacity 900ms ease, visibility 0s linear 0s;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.04);
  transition: transform 7000ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.slide.active .hero-img{ transform: scale(1); }

/* overlay vignette */
.hero-overlay::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.50) 60%, rgba(0,0,0,.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.48) 60%, rgba(0,0,0,.70) 100%);
  mix-blend-mode:multiply;
}

/* hero text */
.hero-heading{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700; letter-spacing:.1px; opacity:0;
  transform: translateY(10px); filter: blur(2px);
  transition: all 700ms ease 120ms;
}
.slide.active .hero-heading{ opacity:1; transform:none; filter:none; }
.hero-sub{
  font-weight:500; letter-spacing:.2px; opacity:0;
  transform: translateY(8px);
  transition: all 700ms ease 220ms;
}
.slide.active .hero-sub{ opacity:.94; transform:none; }

/* dots */
.dot{
  width:.55rem; height:.55rem; border-radius:999px;
  background: rgba(255,255,255,.30);
  transition: background .3s, transform .3s;
}
.dot.active{ background: rgba(255,255,255,.95); transform: none; }

/* hero-logo boşluk fix */
header + section,
header + .relative,
#heroSlider{ margin-top:0 !important; padding-top:0 !important; }

/* 3) Divider (masaüstü) */
.vitrin-divider{ display:none; align-items:center; justify-content:center; padding:16px 0 6px; }
@media (min-width:1024px){
  .vitrin-divider{ display:flex; }
  .vitrin-divider h2{
    font-family:'Playfair Display',Georgia,serif; margin:0; padding:.2rem 1rem;
    font-size:clamp(18px,2.2vw,22px); font-weight:700; letter-spacing:.3px; color:#111827; position:relative;
  }
  .vitrin-divider h2::before,
  .vitrin-divider h2::after{
    content:""; position:absolute; top:50%; width:72px; height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,0,0,.18));
    transform:translateY(-50%);
  }
  .vitrin-divider h2::before{ right:100%; margin-right:12px; }
  .vitrin-divider h2::after{ left:100%; margin-left:12px; transform:translateY(-50%) scaleX(-1); }
}

/* 4) Vitrin grid */
.vitrin-container{ max-width:960px; margin:0 auto; padding:0 16px; }
.vitrin-grid{
  display:grid; grid-template-columns:1fr; gap:24px;
}
@media (max-width:340px){ .vitrin-grid{ grid-template-columns:1fr; } }
@media (min-width:768px){
  .vitrin-container{ max-width:960px; }
  .vitrin-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
}
@media (min-width:1024px){
  .vitrin-container{ max-width:none; width:100%; padding-left:24px; padding-right:24px; }
  .vitrin-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
    border-top:1px solid var(--border); border-left:1px solid var(--border);
  }
  .vitrin-grid > .vitrin-item{
    border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:18px; align-items:stretch !important;
  }
}

/* vitrin item + figure */
.vitrin-item{ display:flex; flex-direction:column; gap:8px; align-items:center; position:relative; }
.product-figure.single{
  position:relative; width:100%; max-width:520px; aspect-ratio:2/3;
  border-radius:12px; overflow:hidden; background:#f1f1f1;
}
/* style.css dosyanızda bu bölümü bulun ve değiştirin */

.product-figure.single > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  
  /* DÜZELTME: Geçişi daha pürüzsüz hale getirdik.
    Süreyi 450ms'ye çıkardık, 'ease-in-out' zamanlaması kullandık 
    ve geçişe 'transform' (ölçek) animasyonunu ekledik.
  */
  transition: opacity 450ms ease-in-out, transform 450ms ease-in-out;
  will-change: opacity, transform;
}

/* DÜZELTME: state-a (ilk resim) normal başlasın.
  state-b (ikinci resim) ise gizli ve hafifçe BÜYÜTÜLMÜŞ başlasın.
*/
.product-figure.single .state-a{ 
  opacity: 1; 
  transform: scale(1); 
}
.product-figure.single .state-b{ 
  opacity: 0; 
  transform: scale(1.05); /* Hafif zoomlu başlar */
}

/* DÜZELTME: Fare üzerine gelindiğinde (.show-b eklendiğinde)
  state-a (ilk resim) kaybolurken hafifçe BÜYÜSÜN.
  state-b (ikinci resim) görünür hale gelirken normal ölçeğine (1) DÖNSÜN.
*/
.product-figure.single.show-b .state-a{ 
  opacity: 0; 
  transform: scale(1.05); /* Dışa doğru zoom yaparak kaybolur */
}
.product-figure.single.show-b .state-b{ 
  opacity: 1; 
  transform: scale(1); /* İçe doğru zoom yaparak belirir */
}

/* Bu kural mevcutsa kalsın (masaüstü için) */
@media (min-width:1024px){
  .product-figure.single{ max-width:none; border-radius:14px; }
}

/* Bu kural mevcutsa kalsın */
.product-title{
  position:relative; margin:6px 0 0; font-size:13.5px; color:#2b2b2b;
  font-weight:600; letter-spacing:.2px; text-transform:none;
}
/* ... (kalan stilleriniz) ... */

.product-title::after{
  content:""; display:block; width:32px; height:1px; background:#e7e7ea; margin:6px auto 0;
}

/* === Masaüstü için modern iletişim düzeni === */
@media (min-width: 1024px) {
  .contact-wrap {
    max-width: none;
    padding: 80px 60px;
    background: #f9fafb;
  }

  /* Kart ızgarası yerine daha ferah hizalama */
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .contact-card {
    border: none;
    border-radius: 18px;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.06);
    padding: 28px 24px;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
  }

  /* Kart başlıklarını öne çıkar */
  .contact-card .card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  /* Bağlantılar tıklanabilir olduğunu belli etsin */
  .contact-card a {
    display: inline-block;
    transition: color .2s, transform .2s;
  }
  .contact-card a:hover {
    color: #111827;
    transform: translateY(-1px);
  }

  /* Sosyal medya ikonları yan yana */
  .contact-social {
    display: flex;
    gap: 14px;
    margin-top: 12px;
  }
  .contact-social a {
    font-size: 20px;
    color: #111827;
    opacity: 0.8;
  }
  .contact-social a:hover {
    opacity: 1;
    transform: scale(1.1);
  }
}

.contact-card.span-2{ grid-column:span 1; }
@media (min-width:720px){ .contact-card.span-2{ grid-column:span 2; } }
.card-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.chip{ display:inline-block; font-size:12px; padding:4px 8px; background:#f3f4f6; border:1px solid var(--border); border-radius:999px; }
.card-title{ font-weight:600; margin:6px 0 8px; }
.btn{
  appearance:none; border:1px solid #111827; background:#111827; color:#fff;
  height:40px; padding:0 14px; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; font-size:14px;
}
.btn:hover{ filter:brightness(.95); }
.btn.ghost{ background:transparent; color:#111827; border-color:#d1d5db; }
.btn.ghost:hover{ background:#f8fafc; }
.card-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.list{ list-style:none; padding:0; margin:0 0 6px; }
.list li{ margin:4px 0; }
.list a{ color:#111827; text-decoration:none; border-bottom:1px solid transparent; }
.list a:hover{ border-color:#111827; }
.contact-form{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.grid-2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:720px){ .grid-2{ grid-template-columns:1fr 1fr; } }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; height:44px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; background:#fff; font:inherit; color:#111827;
}
.contact-form textarea{ height:auto; resize:vertical; min-height:100px; }
.contact-form :is(input,select,textarea):focus{
  outline:none; border-color:#111827; box-shadow:0 0 0 3px rgba(17,24,39,.08);
}
.form-actions{ display:flex; align-items:center; gap:12px; }

/* === Footer (mobil sade, masaüstü modern) === */
.site-footer {
  background: #0b0c0e;
  color: #e5e7eb;
  margin-top: 60px;
  font-size: 14px;
  line-height: 1.6;
}

.footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Başlıklar */
.footer-title {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  margin-bottom: 12px;
  position: relative;
}
.footer-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: #3b82f6;
  margin-top: 6px;
  border-radius: 1px;
}

/* Link listesi */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.footer-links a {
  color: #d1d5db;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.footer-links a:hover {
  color: #fff;
  transform: translateX(2px);
}

/* İletişim veya sosyal alan */
.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}
.footer-social a {
  color: #d1d5db;
  font-size: 20px;
  transition: color .2s ease, transform .2s ease;
}
.footer-social a:hover {
  color: #fff;
  transform: scale(1.1);
}

/* Masaüstü düzeni */
@media (min-width: 1024px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: flex-start;
    gap: 60px;
    padding: 60px 32px;
  }

  .footer-title {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .footer-links a {
    font-size: 14px;
  }

  /* Görsel hiyerarşi */
  .footer-inner > div:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding-right: 40px;
  }
}

.footer-bottom {
  border-top: 1px solid #1f2937;
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
}
.footer-bottom a {
  color: #9ca3af;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-bottom a:hover {
  color: #fff;
  border-color: #fff;
}


/* Dil menüsü genel stil */
.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  width: 180px;
  z-index: 99999;
  overflow: hidden;
  transform-origin: top right;
}
@media (max-width: 900px) {
  .lang-menu {
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    max-width: 90%;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    padding: 10px 0;
    animation: fadeIn 0.25s ease;
  }

  .lang-backdrop {
    position: fixed !important;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    z-index: 99998;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
}


.lang-menu.hidden{ display:none; }
.lang-menu::before{
  content:""; position:absolute; top:-8px; right:56px; width:12px; height:12px; transform:rotate(45deg);
  background:inherit; border-left:1px solid rgba(17,24,39,.08); border-top:1px solid rgba(17,24,39,.08);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.05));
}
.lang-head{ font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); padding:4px 10px 6px; margin-bottom:4px; }
.lang-item{
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:10px; background:transparent; border:0; cursor:pointer; color:var(--ink); font-size:14px; position:relative;
}
.lang-item:hover{ background: rgba(17,24,39,.04); }
.lang-item:focus-visible{ outline:2px solid #111827; outline-offset:2px; background: rgba(17,24,39,.05); }
.lang-item .code{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:24px; border-radius:8px; background:#f3f4f6; color:#111827; font-size:12px; letter-spacing:.6px;
}
.lang-item .label{ flex:1; }
.lang-item .check{ width:18px; height:18px; fill:#111827; opacity:0; transition:opacity .15s ease; }
.lang-item.active .check{ opacity:1; }
@media (max-width:420px){
  .lang-menu{
    position:fixed !important; left:12px; right:12px; bottom:12px; top:auto !important;
    border-radius:16px; padding:10px 8px;
  }
  .lang-menu::before{ display:none; }
}
html[dir="rtl"] .lang-menu{ right:auto; left:40px; }
html[dir="rtl"] .lang-menu::before{ right:auto; left:56px; }

/* Varsayılan: kapalı */
.pd { display: none !important; }
/* JS açtığında: */
.pd.is-open { display: grid !important; }

/* hidden attribute her zaman kazanır */
[hidden] { display: none !important; }

/* z-index / düzen aynen kalsın */
#pdOverlay.pd {
  position: fixed; inset: 0; z-index: 1200;
  place-items: center;
}

.pd-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
}
.pd-sheet{
  position:relative; background:#fff; width:100%; max-width:96vw; max-height:90vh;
  border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}
.pd-media{ position:relative; background:#0b0c0e; display:flex; align-items:center; justify-content:center; min-height:48vh; }
.pd-media img{ max-height:70vh; width:auto; }
.pd-close{
  position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:10px;
  border:1px solid var(--border); background:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; cursor:pointer; z-index:2;
}
.pd-pager{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:8px; }
.pd-info{ padding:16px; background:#fff; }
.pd-grip{ width:44px; height:4px; border-radius:999px; background:#e5e7eb; margin:8px auto 10px; }
.pd-title{ margin:4px 0 4px; font-size:20px; font-weight:700; }
.pd-meta{ margin:0 0 6px; font-size:13px; color:var(--muted); }
.pd-desc{ margin:0 0 8px; font-size:14px; line-height:1.5; }
.pd-spec{ margin:6px 0 0 16px; padding:0; }
.pd-spec li{ font-size:13px; line-height:1.5; }
.pd-cta{ display:flex; gap:10px; margin-top:12px; }

@media (min-width:1024px){
  .pd-sheet{
    display:grid; grid-template-columns:1.4fr 1fr;
    max-width:min(1100px,92vw); height:min(86vh,820px); border-radius:16px;
  }
  .pd-media{ min-height:unset; }
  .pd-media img{ max-height:100%; }
  .pd-info{ padding:22px; }
}

/* 9) Toast */
.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(20px);
  background:#111827; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18); opacity:0; pointer-events:none;
  transition: opacity .25s, transform .25s; z-index:1300;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* 10) Utility */
.will-reveal{ opacity:0; transform:translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal{ opacity:1; transform:none; }
:focus-visible{ outline:2px solid #111827; outline-offset:3px; }

/* 11) Gradient text vendor fix (VSCode uyarısı) */
.text-gradient{
  background-image: linear-gradient(90deg,#111827,#6b7280);
  -webkit-background-clip: text;
  background-clip: text;   /* standard property — compat */
  color: transparent;
}

/* 12) Reduce motion respect */
@media (prefers-reduced-motion: reduce){
  .hero-img{ transition:none !important; transform:none !important; }
  .will-reveal{ transition:none !important; }
  /* .product-figure.single > img{ transition:none !important; } */
}

/* kart tıklanabilir görünsün */
.vitrin-item { cursor: pointer; }
.vitrin-item:hover .product-figure.single { filter: brightness(.98); transition: filter .2s ease; }


/* Overlay görseli: taşma kilidi (mobil+desktop) */
.pd-media img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* === Mobil menü fix (her pozisyonda açılabilsin) === */
#mobilePanel {
  position: fixed !important;
  top: 56px; /* header yüksekliği kadar */
  left: 0;
  right: 0;
  background: white;
  z-index: 9999;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}


/* === Mobilde vitrin swipe göstergesi (ortada, 10sn sonra başlar, 5sn kalır) === */
@media (max-width: 768px) {
  .vitrin-item {
    position: relative;
    overflow: hidden;
  }

  .vitrin-item.show-hint::after {
    content: "⇆ Kaydır";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 14px;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    opacity: 0;
    animation: swipeHintCenter 5s ease-in-out forwards;
    z-index: 10;
    pointer-events: none;
  }

  @keyframes swipeHintCenter {
    0%   { opacity: 0; transform: translate(-50%, -55%); }
    10%  { opacity: 1; transform: translate(-50%, -50%); }
    90%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
  }
}

/* === Mobilde vitrin swipe göstergesi (ortada - 10sn sonra) === */
@media (max-width: 768px) {
  .vitrin-item {
    position: relative;
    overflow: hidden;
  }

  .vitrin-item::after {
    content: "⇆ Kaydır";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 14px;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    opacity: 0;
    animation: swipeHintCenter 3s ease-in-out 5s forwards; /* <-- 5sn bekleme */
    z-index: 10;
    pointer-events: none;
  }

  @keyframes swipeHintCenter {
    0%   { opacity: 0; transform: translate(-50%, -55%); }
    20%  { opacity: 1; transform: translate(-50%, -50%); }
    40%  { transform: translate(-50%, -48%); }
    60%  { transform: translate(-50%, -52%); }
    80%  { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
  }
}


/* === Mobil dil seçim butonları (sadece mobil) === */
@media (max-width: 767px) {
  .mobile-lang-switch {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: 8px;
  }

  .lang-choice {
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 8px;
    color: #111827;
    transition: all .2s ease;
  }

  .lang-choice.active {
    background: #111827;
    color: #fff;
    border-color: #111827;
  }

  .lang-choice:active {
    transform: scale(0.96);
  }
}

/* Masaüstünde gizle */
@media (min-width: 768px) {
  .mobile-lang-switch {
    display: none !important;
  }
}


/* ==== Arabic text flow (safe) ====
   - Keep layout LTR
   - Right-align only semantic text, not nav/buttons
   - Preserve phone/email direction
*/
.rtl-text { direction: ltr; }
.rtl-text :is(h1,h2,h3,h4,h5,h6,p,li,small,label,th,td) {
  text-align: right;
  unicode-bidi: plaintext;
}
.rtl-text a[href^="tel"],
.rtl-text a[href^="mailto"],
.rtl-text .ltr,
.rtl-text input,
.rtl-text textarea {
  direction: ltr !important;
  unicode-bidi: bidi-override;
  text-align: left;
}


/* ==== RTL per-component fixes ==== */
.rtl-text .contact-block { 
  direction: rtl; 
  text-align: right; 
}
.rtl-text .contact-block .flex.gap-3 { 
  flex-direction: row-reverse; 
}
.rtl-text .contact-block a[href^="tel"],
.rtl-text .contact-block a[href^="mailto"] {
  direction: ltr !important;
  unicode-bidi: bidi-override;
  text-align: left;
  display: inline-block;
}