/* Vondel Excellence — mobil / tablet düzen katmanı
 *
 * NEDEN AYRI DOSYA: index.html ve iletisim.html Claude Design canvas
 * çıktısıdır; tüm stiller satır içi (style="...") yazılmıştır. Canvas'tan
 * yeniden dışa aktarım yapılınca satır içi stiller değişebilir, bu dosya kalır.
 *
 * NASIL ÇALIŞIR: satır içi stilleri geçebilmek için kurallar `!important` ve
 * `[style*="..."]` seçicileriyle yazıldı.
 *
 * ⚠️ TUZAK 1 — seçicilerdeki değerler NORMALİZE hâlde yazılmalı.
 * Sayfayı React render ettiği için stiller CSSOM üzerinden yazılıyor ve
 * tarayıcı değerleri normalize ediyor: kaynakta `padding: 0 64px` yazsa bile
 * DOM'daki style özniteliği `padding: 0px 64px` olur. Kaynak metne göre
 * yazılan seçici SESSİZCE eşleşmez.
 *
 * ⚠️ TUZAK 2 — kısa desen uzun deseni de eşler
 * ("padding: 130px 64px" deseni "padding: 130px 64px 60px" öğesini de yakalar).
 * Eşit özgüllükte son kural kazandığı için özel olanlar sonra yazılmalı.
 *
 * Değişiklikten sonra her seçicinin gerçekten eşleştiğini doğrula:
 *   document.querySelectorAll('[style*="gap: 80px"]').length   // 0 ise seçici yanlış
 *
 * EŞİK NEDEN 1010px:
 * Üst menü (6 link + dil + CTA) ~1010px altına sığmıyor. Ayrıca iki kolonlu
 * ızgaralar bu aralıkta teknik olarak "taşmıyor" ama okunmuyor: 819px'te
 * `1fr 420px` ızgarasının metin kolonu 181px'e düşüyor (ölçüldü). Bu yüzden
 * tek eşik kullanıldı — 1010px altında tek kolon.
 */

@media (max-width: 1010px) {

  /* ---------- üst bar ----------
     Gezinme linkleri sığmıyor; logo, dil değiştirici ve CTA kalıyor. */
  header {
    padding: clamp(12px, 2vw, 18px) clamp(16px, 3vw, 28px) !important;
    gap: 8px !important;
  }
  header nav {
    display: none !important;
  }
  /* dil değiştirici düğmeleri parmakla basılabilir boyuta çıksın */
  header button {
    padding: 10px 14px !important;
  }

  /* ---------- bölüm iç boşlukları (akışkan) ---------- */
  [style*="padding: 130px 64px"] {
    padding: clamp(56px, 9vw, 96px) clamp(20px, 8vw, 66px) !important;
  }
  [style*="padding: 120px 64px"] {
    padding: clamp(54px, 8.5vw, 90px) clamp(20px, 8vw, 66px) !important;
  }
  [style*="padding: 110px 64px"] {
    padding: clamp(50px, 8vw, 84px) clamp(20px, 8vw, 66px) !important;
  }
  /* — özel durumlar: yukarıdaki kısa desenleri ezmesi için sonra yazıldı — */
  [style*="padding: 130px 64px 60px"] {
    padding: clamp(56px, 9vw, 96px) clamp(20px, 8vw, 66px) clamp(36px, 5vw, 52px) !important;
  }
  [style*="padding: 128px 64px 130px"] {
    padding: clamp(84px, 11vw, 118px) clamp(20px, 8vw, 66px) clamp(56px, 9vw, 96px) !important;
  }
  /* tam genişlik kalması gereken bölüm — yalnız dikey boşluk küçülür */
  [style*="padding: 110px 0px 120px"] {
    padding: clamp(50px, 8vw, 84px) 0px clamp(54px, 8.5vw, 90px) !important;
  }
  [style*="padding: 0px 64px"] {
    padding-left: clamp(20px, 8vw, 66px) !important;
    padding-right: clamp(20px, 8vw, 66px) !important;
  }

  /* ---------- çok kolonlu ızgaralar tek kolona ----------
     `auto-fit` kullananlar zaten kendi kendine sarıyor, onlara dokunma. */
  [style*="grid-template-columns"]:not([style*="auto-fit"]) {
    grid-template-columns: 1fr !important;
  }

  /* ---------- başlık ölçekleri (akışkan) ---------- */
  [style*="font-size: 78px"] { font-size: clamp(30px, 6.4vw, 60px) !important; line-height: 1.12 !important; }
  [style*="font-size: 68px"] { font-size: clamp(28px, 5.6vw, 53px) !important; line-height: 1.14 !important; }
  [style*="font-size: 58px"] { font-size: clamp(25px, 4.8vw, 46px) !important; line-height: 1.16 !important; }
  [style*="font-size: 54px"] { font-size: clamp(24px, 4.5vw, 43px) !important; line-height: 1.16 !important; }
  [style*="font-size: 46px"] { font-size: clamp(23px, 3.8vw, 38px) !important; line-height: 1.20 !important; }
  [style*="font-size: 30px"] { font-size: clamp(19px, 2.5vw, 27px) !important; line-height: 1.32 !important; }
  [style*="font-size: 26px"] { font-size: clamp(18px, 2.2vw, 24px) !important; line-height: 1.34 !important; }
  [style*="font-size: 24px"] { font-size: clamp(17px, 2.0vw, 22px) !important; line-height: 1.38 !important; }

  /* ---------- büyük boşluklar (ölçülen gerçek değerler) ---------- */
  [style*="gap: 90px"] { gap: clamp(26px, 5.0vw, 64px) !important; }
  [style*="gap: 80px"] { gap: clamp(24px, 4.5vw, 58px) !important; }
  [style*="gap: 72px"] { gap: clamp(22px, 4.0vw, 52px) !important; }
  [style*="gap: 56px"] { gap: clamp(20px, 3.4vw, 42px) !important; }
  [style*="gap: 48px"] { gap: clamp(18px, 3.0vw, 36px) !important; }

  /* ---------- kart iç boşlukları ---------- */
  [style*="padding: 40px"] { padding: clamp(22px, 4vw, 36px) !important; }
  [style*="padding: 36px"] { padding: clamp(20px, 3.6vw, 32px) !important; }

  /* ---------- taşma güvenliği ---------- */
  [style*="white-space: nowrap"] { white-space: normal !important; }
  /* dekoratif ışık halkası ekranı taşırıyor */
  [style*="width: 620px"] { width: min(300px, 80vw) !important; height: min(300px, 80vw) !important; }
  img, video, svg { max-width: 100% !important; }
}