/* ==========================================================================
   ASVARIS · mobil.css
   Yalnızca küçük ekran düzeltmeleri. Masaüstü görünümüne dokunmaz;
   tüm kurallar medya sorgusu içindedir ve en son yüklenir.
   ========================================================================== */

/* ---------------------------------------------------- 900px ve altı ------ */
@media (max-width: 900px) {
  /* Geniş tablolar ekranı kırpmasın, kendi içinde yatay kaysın */
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Kaydırılabilir tabloda hücreler sıkışıp okunmaz hale gelmesin */
  main table th,
  main table td { white-space: nowrap; }

  /* VIXION karşılaştırma çubukları: açıkken topuz sağa geçer. Mavi metin sarılsın ve
     topuzdan önce bitsin; genişliği çubuğa göre sabit olduğu için sürüklerken yeniden
     sarılmaz (cqw desteklenmezse right değeri devreye girer). */
  #vxRoot .vx-cmp { container-type: inline-size; }
  #vxRoot .vx-cmp-fill > span { white-space: normal !important; right: 89px; width: calc(100cqw - 181px); }
}

/* ---------------------------------------------------- 760px ve altı ------ */
@media (max-width: 760px) {
  /* Görsel ve SVG'ler kutularını aşmasın */
  main img,
  main svg,
  main video { max-width: 100%; }

  /* Kahraman piramit videosu: 134% genişlik mobilde ekranı taşırıyordu */
  .pyramid-turntable { width: min(440px, 100%) !important; }

  /* Uzun başlık/kelimeler kutudan taşmasın */
  main h1, main h2, main h3, main p, main li, main b, main span { overflow-wrap: anywhere; }

  /* Kart ve rozetler negatif konuma kayıp kırpılmasın */
  .info-pill { min-width: 0; max-width: 100%; }

  /* IXI sohbet paneli: dokunma hedefleri ve okunabilir punto */
  .ixi-quick button { font-size: 11.5px; padding: 9px 13px; }
  .ixi-chat-subtitle { font-size: 11px; }
  .ixi-chat-note { font-size: 11px; }
  .ixi-chat-form input { font-size: 16px; }   /* iOS'ta odakta sayfayı yakınlaştırmaz */

  /* Form alanları: iOS otomatik yakınlaştırmasını engelle */
  input, select, textarea { font-size: 16px !important; }
}

/* ---------------------------------------------------- 620px ve altı ------ */
@media (max-width: 620px) {
  /* VIXION karşılaştırma çubukları: metin tek satıra sıkışıp kırpılıyordu.
     Çubuk yüksekliği ve topuz konumu korunur (JS sürükleme oradan hesaplıyor).
     Dolgu (.vx-cmp-fill) ve topuz (.vx-cmp-knob) da çubuğun doğrudan <span> çocuğu;
     bu kurallara girerlerse JS konumu ezilir, topuz yazının üstüne biner. */
  #vxRoot .vx-cmp > span:not(.vx-cmp-fill):not(.vx-cmp-knob),
  #vxRoot .vx-cmp-fill > span {
    white-space: normal !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }
  /* Kapalıyken gri metin topuzun sağından başlar */
  #vxRoot .vx-cmp > span:not(.vx-cmp-fill):not(.vx-cmp-knob) { left: 78px !important; right: 14px !important; }
  /* Açıkken topuz sağdadır: mavi metin soldan başlar, topuzdan önce biter */
  #vxRoot .vx-cmp-fill > span { left: 20px !important; width: calc(100cqw - 109px); }
}

/* ---------------------------------------------------- 560px ve altı ------ */
@media (max-width: 560px) {
  /* Platform geçiş çubuğu kenardan başlasın, ortalama boşluk yemesin */
  .academy-switcher .wrap { padding-left: 16px; padding-right: 16px; }

  /* Maskot mascot.css'te top:100px ile sol üstte duruyor ve mobilde kahraman
     metninin üstüne biniyordu. top sıfırlanınca bottom/right kuralı geçerli olur;
     !important kullanılmaz ki gezinme ve sürükleme JS'i konumu değiştirebilsin. */
  .mascot { top: auto; left: auto; bottom: 16px; right: 16px; }
}

/* ---------------------------------------------------- 760px ve altı ------ */
@media (max-width: 760px) {
  /* Etiket/rozet yazıları mobilde 9.5–10.5px'e düşüp okunmaz hale geliyordu.
     Küçük ekranda 11px tabanına çekilir; kutular esnek olduğu için düzen bozulmaz. */
  .badge,
  .zr-ph, .zr-chip,
  .ai-chip, .ddp-tag,
  .ko-cstep small,
  .az-quad > div, .az-qaxis span,
  .rf-eco-card span,
  .yz-scope-foot span, .yz-scope-bar em,
  .dc-out b,
  .architecture-result b { font-size: 11px !important; }
}