/* RoRo Web · mobil düzen v2 · 19 Eylül 2026
   Amaç: telefonda sayfanın tek sıra halinde aşağı uzamasını kesmek.
   Kural: hiçbir metin gizlenmez, yalnız yerleşim ve boşluk değişir.
   Ölçüm (Türkçe ana sayfa, 358 piksel genişlik): 11.506 -> 8.712 piksel. Yatay taşma 0. */

/* 1) Tablet ve telefon: portföy kartında görsel ile metin yan yana */
@media (max-width: 900px) {
  #isler .ref { grid-template-columns: 1fr !important; gap: 14px; }
  #isler .r { display: grid !important; grid-template-columns: minmax(0,42%) minmax(0,1fr);
              column-gap: 14px; row-gap: 6px; align-items: start; padding: 12px; }
  #isler .r .rg { grid-column: 1; grid-row: 1/5; align-self: stretch; margin: 0;
                  width: auto !important; max-width: 100% !important; height: auto !important;
                  transform: none !important; min-width: 0; border-radius: 10px; overflow: hidden; }
  #isler .r .rg img { display: block; width: 100%; max-width: 100%; height: 100%;
                      min-height: 150px; object-fit: cover; object-position: left top; }
  #isler .r .ad, #isler .r .ne, #isler .r .et, #isler .r .git { grid-column: 2; margin: 0; min-width: 0; }
  #isler .r .ne { font-size: .86rem; line-height: 1.5; }
  #isler .r .et span { font-size: .7rem; }
}

/* 2) Telefon */
@media (max-width: 640px) {

  /* 2.1 Bölüm boşluğu ve başlıkları. Yalnız ana sayfanın bölümleri (body > section);
         teklif sihirbazı ve hukuk sayfaları bundan etkilenmez. */
  body > section { padding-top: 44px; padding-bottom: 44px; }
  body > section .eyebrow { font-size: .66rem; letter-spacing: .14em; }
  body > section h2 { font-size: 1.34rem; line-height: 1.26; margin: 6px 0 6px; }
  body > section p.alt { font-size: .9rem; line-height: 1.5; margin: 0 0 14px; }

  /* 2.2 Üst bölüm: iki düğme yan yana, başlık bir ekrana sığar */
  .hero { padding-top: 40px; padding-bottom: 34px; }
  .hero h1 { font-size: 2rem; line-height: 1.1; margin-bottom: 12px; }
  .hero .cta { gap: 10px; margin: 22px 0 18px; }
  .hero .cta .btn { flex: 1 1 0; min-width: 0; text-align: center; padding: 13px 8px; font-size: .92rem; }
  .hero .cta .hero-serit { flex: 1 0 100%; font-size: 1rem; line-height: 1.45; margin: 10px 0 0; }
  .hero .wrap > p { font-size: .95rem; line-height: 1.55; }
  .hero .rakamlar { margin-top: 20px; }

  /* 2.3 "Farkımız nerede": dört kart tek ekrana yaklaşır */
  .fark { gap: 18px; }
  .fark .f h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 6px; }
  .fark .f p { font-size: .9rem; line-height: 1.52; margin: 0; }

  /* 2.4 Hizmet kartları */
  #hizmetler .hizmet { padding: 14px; }
  #hizmetler .hizmet h3 { font-size: 1rem; line-height: 1.34; margin: 8px 0 6px; }
  #hizmetler .hizmet p { font-size: .9rem; line-height: 1.55; }
  #hizmetler .hizmet ul { margin: 10px 0 0; }
  #hizmetler .hizmet ul li { font-size: .86rem; line-height: 1.42; padding: 5px 0 5px 22px; }
  #hizmetler .hizmet p.not { font-size: .79rem; line-height: 1.42; }

  /* 2.5 Portföy: sabit oranlı küçük görsel, yanında ad ve etiketler,
         açıklama tam genişlikte. Dar sütunda 5-6 satıra inen metin 3 satıra düşer. */
  #isler .r { grid-template-columns: 108px minmax(0,1fr); column-gap: 12px; row-gap: 8px; }
  #isler .r .rg { grid-column: 1; grid-row: 1/3; align-self: start; aspect-ratio: 3/4; }
  #isler .r .rg img { height: 100%; min-height: 0; object-position: top center; }
  #isler .r .ad { grid-column: 2; grid-row: 1; }
  #isler .r .et { grid-column: 2; grid-row: 2; align-self: start; }
  #isler .r .ne { grid-column: 1/-1; grid-row: 3; font-size: .9rem; line-height: 1.52; }
  #isler .r .git { grid-column: 1/-1; grid-row: 4; }

  /* 2.6 Sektörler: beş kart alt alta 2.311 piksel yerine yana kayan şerit.
         Sonraki kartın kenarı görünür kalır, kaydırılacağı anlaşılır. */
  #sektor .sektorler { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
                       -webkit-overflow-scrolling: touch; padding: 2px 0 12px; scrollbar-width: thin; }
  #sektor .sektorler .sk { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; margin: 0; padding: 14px; }
  #sektor .sk ul li { padding: 6px 0; line-height: 1.42; font-size: .92rem; }

  /* 2.7 Süreç: numara solda, başlık ve metin sağda */
  .adimlar .adim { display: grid; grid-template-columns: 46px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; }
  .adimlar .adim .adim-no { grid-column: 1; grid-row: 1/3; font-size: 1.45rem; line-height: 1.1; margin: 0; }
  .adimlar .adim h3 { grid-column: 2; margin: 0; }
  .adimlar .adim p { grid-column: 2; margin: 4px 0 0; }

  /* 2.8 İletişim: dört telefon satırı iki sütun; WhatsApp, e-posta ve diller tam satır */
  #iletisim .ile { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 2px; }
  #iletisim .ile .sat { min-width: 0; font-size: .9rem; }
  #iletisim .ile .sat:last-child { grid-column: 1/-1; }
  #iletisim .ile .sat .v { overflow-wrap: anywhere; }
  #iletisim .ile .sat:has(a[href^="mailto:"]) { grid-column: 1/-1; }
  #iletisim .ile .sat:nth-last-child(3) { grid-column: 1/-1; }
}

/* RoRo Web · Arapca hero duzeni · 22 Eylul 2026
   Amac: RTL'de kahraman metni sagda, gorsel mozaik solda dursun; ust ulke satiri Arapcada gizlensin.
   Olcum (1314 px): mozaik sol kenar 631 -> 50, h1 sol kenar 667, ortusme 0. Telefonda (385 px) mozaik zaten ekran disinda. */
[dir="rtl"] .hero-mozaik { left: 0 !important; right: 582.384px !important; }
[dir="rtl"] .hero-ulke { display: none !important; }