/* ============================================================
   ORD Kurye — Mobil uyumluluk katmanı
   Eklendi: 2026-08-20
   Mevcut stilleri EZMEZ, sadece küçük ekranlarda üzerine yazar.
   Bu dosyayı silerseniz site eski hâline döner.
   ============================================================ */

/* ---------- 1. Yatay taşma koruması (tüm ekranlar) ---------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html, body{ max-width:100%; overflow-x:clip; }
img, svg, video, canvas, iframe{ max-width:100%; height:auto; }

/* Flex/grid çocuklarının içeriğe göre şişmesini engelle */
.wrap > *, .s-in > *, .f-in > *,
.svc-grid > *, .pkg-grid > *, .test-grid > *,
.sec-grid > *, .steps > *, .blog-grid > *{ min-width:0; }

/* Kayan şerit (ticker) sayfayı genişletmesin */
.ticker{ overflow:hidden; }
.t-marquee{ overflow:hidden; max-width:100%; }

/* Uzun kelime / URL kırılması */
p, li, td, th, h1, h2, h3, h4, .cc-val, .test p{ overflow-wrap:break-word; }

/* Geniş içerik kendi içinde kaysın, sayfayı kaydırmasın */
table{ width:100%; }
.table-scroll, .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }


/* ============================================================
   2. TABLET VE ALTI  (≤ 900px)
   ============================================================ */
@media (max-width:900px){
  .wrap{ padding-left:18px; padding-right:18px; }

  /* Fiyat hesaplama iki kolonu tek kolona insin */
  .calc-left, .calc-right{ width:100% !important; min-width:0 !important; }
  .calc-grid, .calc-wrap{ grid-template-columns:1fr !important; }

  /* Blog ızgarası */
  .blog-grid{ grid-template-columns:repeat(2,1fr) !important; }
}


/* ============================================================
   3. TELEFON  (≤ 640px)
   ============================================================ */
@media (max-width:640px){

  /* ---- Tipografi: 13px altı metin bırakma ---- */
  body{ font-size:15.5px; line-height:1.62; }
  p, li, td, th, span, .sec-head p, .test p{ font-size:15px; }
  .mini-trust span, .stat span, .f-in span, .f-in a,
  .chip, .chip-pill, .pill, .badge, .tag{ font-size:13.5px; }
  .eyebrow{ font-size:11.5px; letter-spacing:.14em; }
  h1, .slide h1{ font-size:clamp(30px,8.4vw,38px); line-height:1.14; letter-spacing:-.02em; }
  .sec-head h2{ font-size:clamp(25px,7vw,31px); line-height:1.16; }
  .sec-head{ margin-bottom:30px; }

  /* ---- Dokunma alanları: en az 44px ---- */
  .btn, .btn-sm,
  .mobile-nav a, .mobile-foot a, .mobile-foot button,
  .nav-phone, .t-phone, .f-in a,
  .contact-card, .dots button, .arrows{
    min-height:44px;
  }
  .btn{ padding:14px 20px; font-size:15px; }
  .btn-sm{ padding:12px 16px; font-size:14px; }
  .mobile-nav a{ display:flex; align-items:center; padding:13px 4px; }
  input, select, textarea{
    min-height:46px;
    font-size:16px;           /* iOS'ta odaklanınca sayfayı yakınlaştırmasın */
    padding:11px 13px;
  }
  input[type="checkbox"], input[type="radio"]{ min-height:0; width:20px; height:20px; }
  label{ line-height:1.5; }

  /* ---- Hero ---- */
  .hero .wrap, .slide .wrap{ padding-top:26px; padding-bottom:26px; }
  .cta-row{ display:flex; flex-direction:column; gap:11px; }
  .cta-row .btn{ width:100%; }
  .mini-trust{
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
    text-align:center; margin-top:20px;
  }
  .mini-trust b{ display:block; font-size:17px; }
  .mini-trust span{ display:block; font-size:12.5px; line-height:1.35; }

  /* ---- İstatistik bandı: 2 kolon, hepsi görünsün ---- */
  .stats .s-in{ grid-template-columns:repeat(2,1fr) !important; gap:6px; }
  .stats .stat{ display:block !important; padding:14px 8px; }
  .stats .stat b, .stats .stat i{ font-size:26px; }
  .stats .stat span{ font-size:12.5px; }

  /* ---- Tüm ızgaralar tek kolon ---- */
  .blog-grid, .svc-grid, .pkg-grid, .test-grid,
  .sec-grid, .steps, .calc-grid{ grid-template-columns:1fr !important; }

  /* ---- Bölüm boşlukları ---- */
  section.block{ padding-top:44px; padding-bottom:44px; }
  .cta-band{ padding:28px 20px; }

  /* ---- Mobil menü çekmecesi ---- */
  .mobile-drawer{ width:min(320px,88vw) !important; }

  /* ---- Footer ---- */
  footer .f-in{ grid-template-columns:1fr !important; gap:26px; text-align:left; }

  /* ---- Fiyat tablosu okunabilirliği ---- */
  .price-table, .tbl{ font-size:14px; }
  .price-table td, .price-table th, .tbl td, .tbl th{ padding:9px 10px; }
}


/* ============================================================
   4. KÜÇÜK TELEFON  (≤ 400px)
   ============================================================ */
@media (max-width:400px){
  .wrap{ padding-left:15px; padding-right:15px; }
  h1, .slide h1{ font-size:28px; }
  .sec-head h2{ font-size:23px; }
  .stats .stat b, .stats .stat i{ font-size:23px; }
  .btn{ padding:13px 16px; font-size:14.5px; }
  .mini-trust{ gap:7px; }
  .mini-trust b{ font-size:15.5px; }
  .mini-trust span{ font-size:11.5px; }
}


/* ============================================================
   5. Anlık fiyat teklifi widget'ı — telefonda alt sayfa (sheet)
   Masaüstünde sağ altta panel olarak kalır.
   ============================================================ */
@media (max-width:640px){
  #ordQwPanel{
    right:0 !important; left:0 !important; bottom:0 !important;
    width:100% !important; max-width:100% !important;
    border-radius:20px 20px 0 0 !important;
    max-height:82vh !important;
    max-height:82dvh !important;
  }
  #ordQwBtn{ bottom:80px !important; right:14px !important; }
  #ordQwBody{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  #ordQwBody .qw-row{ grid-template-columns:1fr !important; }
  #ordQwBody input, #ordQwBody select{ width:100% !important; min-width:0 !important; }
}

/* WhatsApp / telefon yüzen düğmeleri çakışmasın */
@media (max-width:640px){
  .fab, .wa-fab, .float-wa{ bottom:16px !important; }
}


/* ============================================================
   6. Erişilebilirlik
   ============================================================ */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid #2563EB;
  outline-offset:2px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ============================================================
   7. İkinci tur düzeltmeler (ölçüm sonrası)
   ============================================================ */
@media (max-width:640px){

  /* --- Dokunma alanları (44px kuralı) --- */
  .burger-btn{ width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; }
  .mobile-close{ width:46px; height:46px; font-size:26px; line-height:1; }
  .svc .to, a.to{ display:inline-flex; align-items:center; min-height:44px; padding:6px 2px; }
  #kapsama .chips a, #kapsama .chips span{ display:inline-flex; align-items:center; min-height:40px; padding:9px 14px; }
  .f-bottom .admin-link{ display:inline-flex; align-items:center; min-height:44px; }
  .dots button{ width:14px; height:14px; margin:0 5px; }

  /* --- Anlık fiyat teklifi widget'ı: dokunulabilir ve iOS-zoom'suz --- */
  #ordQwPanel select,
  #ordQwPanel input[type="text"],
  #ordQwPanel input[type="tel"],
  #ordQwPanel input[type="number"],
  #ordQwBody select,
  #ordQwBody input:not([type="checkbox"]):not([type="radio"]){
    font-size:16px !important;
    min-height:46px !important;
    padding:11px 12px !important;
  }
  #ordQwPanel button.qw-svc{ min-height:44px !important; font-size:13.5px; }
  #ordQwPanel #ordQwX, button#ordQwX{ width:44px !important; height:44px !important; font-size:24px !important; }
  button#ordQwBtn{ min-height:48px !important; }
  #ordQwPanel a#ordQwMore, a#ordQwMore{ display:inline-flex; align-items:center; min-height:44px; font-size:13.5px !important; }
  #ordQwPanel .qw-sub, #ordQwPanel .qw-head span{ font-size:12.5px !important; }
}

/* --- Harita ve panel kutuları taşmasın (tüm küçük ekranlar) --- */
@media (max-width:900px){
  .panel, .mapbox, .map-wrap, .map-fallback, .map-tip, #map{
    max-width:100% !important;
    box-sizing:border-box;
  }
  #map, .mapbox, .map-wrap{ width:100% !important; }
}

/* --- Fiyat listesi: birim etiketleri satıra sığsın --- */
@media (max-width:640px){
  .unit, span.unit{ display:inline-block; max-width:100%; white-space:normal; word-break:break-word; }
  .calc-out, .calc-res{ max-width:100%; overflow-wrap:break-word; }
}

/* --- Yüzen WhatsApp düğmesi küçük ekranda taşmasın --- */
@media (max-width:400px){
  .wa-float{ right:12px !important; }
  .wa-float svg{ max-width:26px; max-height:26px; }
}


/* ============================================================
   8. Üçüncü tur — grid/flex çocuklarının içeriğe göre şişmesi
   (CSS grid'de min-width varsayılanı "auto"dur; uzun içerik
    sütunu genişletip sayfayı taşırır. Aşağısı bunu keser.)
   ============================================================ */
@media (max-width:900px){
  [class*="grid"] > *,
  [class*="row"]  > *,
  [class*="quote"] > *,
  [class*="calc"] > *,
  [class*="cols"] > *,
  .panel, .card, .box, .map-wrap, .mapbox{
    min-width:0 !important;
    max-width:100% !important;
  }
  .quote, .km-row, .calc-grid, .how{ min-width:0; }
  .km-row{ flex-wrap:wrap; }
  .panel{ padding:20px 16px !important; }
}

/* iOS'ta odaklanınca yakınlaştırmayı engelle — tüm formlar */
@media (max-width:640px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea{
    font-size:16px !important;
    min-height:46px !important;
  }
  textarea{ min-height:110px !important; }
}

/* Okunabilirlik: gövde metninde 13px altı bırakma
   (büyük harfli etiketler ve rozetler hariç) */
@media (max-width:640px){
  p:not(.eyebrow), li, td{ font-size:15px !important; }
  p.hint, .qw-sub{ font-size:13.5px !important; }
}

/* S.S.S. kategori sekmeleri — dokunma alanı */
@media (max-width:640px){
  .tab{ min-height:44px !important; display:inline-flex; align-items:center; padding:10px 15px !important; }
  .faq-q{ min-height:52px; }
}


/* Widget içindeki onay kutuları (Gece / Köprü / Bekleme / Ek durak) */
@media (max-width:640px){
  #ordQwPanel input[type="checkbox"],
  #ordQwBody input[type="checkbox"]{
    width:20px !important; height:20px !important;
    min-height:20px !important; min-width:20px !important;
    flex:0 0 auto; margin:0 8px 0 0; padding:0 !important;
  }
  #ordQwPanel label, #ordQwBody label{
    display:flex !important; align-items:center; gap:6px;
    min-height:44px; font-size:13.5px !important; line-height:1.3;
  }
}

/* Hero güven satırı: telefonda üç sütun tek satırda */
@media (max-width:640px){
  .mini-trust{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:8px !important; text-align:center;
  }
  .mini-trust > div{ min-width:0; }
  .mini-trust b{ font-size:16px !important; }
  .mini-trust span{ font-size:11.5px !important; display:block; line-height:1.3; }
}