/* ================================================================
   movil.css — v2  (REVISIÓN INTEGRAL)
   Target Consulting — Responsive completo
   
   CAMBIOS RESPECTO A v1:
   ─ NUEVA §2b: fix font-size en rem de team-section / experience /
     titulos-unificados cuando html{font-size:30%} en <640px.
     Se agregan overrides en px para TODOS los textos en rem que
     dependen del font-size de html.
   ─ NUEVA §10b: ozellika px en móvil (rem → px).
   ─ NUEVA §18: it-services.html sin movil.css (inyección equivalente).
   ─ §12: se agrega .tc-contact-icons-wrapper padding lateral.
   ─ §4: se amplía lista de secciones con margin-top negativo para
     cubrir también tracing / analisis2.
   ─ §16: se mantiene Swiper pero se corrige nav-button slider.
   ─ §19: NUEVA — plataforma.css slider altura fija corregida en móvil.
   ─ §20: NUEVA — página de contacto, form card padding lateral.
   ─ §21: NUEVA — tablas y artículos de estudio en móvil.
   ─ §22: NUEVA — .news-alani-sayfa padding lateral en 320px.
   ================================================================ */

/* ================================================================
   SECCIÓN 1 — CORRECCIÓN CRÍTICA font-size
   style.css pone html{font-size:30%} en ≤640px → 1rem = 4.8px
   Restauramos a 62.5% (1rem=10px) en TODOS los breakpoints móvil
   ================================================================ */

@media only screen and (max-width: 75em)   { html { font-size: 62.5% !important; } }
@media only screen and (max-width: 56.25em){ html { font-size: 62.5% !important; } }
@media only screen and (max-width: 40em)   { html { font-size: 62.5% !important; } }

/* body padding:3rem del template → 0 en móvil */
@media (max-width: 900px) { body { padding: 0 !important; } }

/* ================================================================
   SECCIÓN 2 — BASE GLOBAL
   ================================================================ */

html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; -webkit-text-size-adjust: 100%; }
img  { max-width: 100%; height: auto; }

/* ================================================================
   SECCIÓN 2b — OVERRIDE px para todos los rem que dependen del
   font-size de html.  Estos valores son idénticos al resultado
   esperado si font-size fuera 62.5%:  X rem × 10 = Y px.
   Aplica principalmente en <640px donde html era 30% (4.8px/rem).
   ================================================================ */

/* ── titulos-unificados.css ── */
@media (max-width: 640px) {
  /* clamp(2.2rem..3.6rem) → mín 22px en pantallas pequeñas */
  .h2-baslik-anasayfa-ozel         { font-size: 22px !important; }
  /* clamp(2rem..3.2rem) → 20px */
  .h2-baslik-hizmetler,
  .h2-baslik-hizmetler-4,
  .h2-baslik-hizmetler-2,
  .h2-baslik-hizmetler-yorum,
  .h2-baslik-hizmetler-21,
  .h2-baslik-ahb,
  .h2-baslik-bottom,
  .h2-baslik-projeler-ozel,
  .h2-baslik-iletisim-ozel          { font-size: 20px !important; }
  /* 1.6rem → 16px */
  .h2-baslik-hizmetler__paragraf,
  .h2-baslik-hizmetler-2__paragraf,
  .h2-baslik-hizmetler-21__paragraf,
  .h2-baslik-hizmetler-4__paragraf  { font-size: 14px !important; line-height: 1.65 !important; }
  /* clamp(3rem..5rem) → 28px hero */
  .h2-baslik-anasayfa               { font-size: 28px !important; }
}

/* ── team-section.css  (rem) ── */
@media (max-width: 640px) {
  /* ozellika */
  .ozellika .h2-baslik-hizmetler-21          { font-size: 20px !important; }
  .ozellika .h2-baslik-hizmetler-21__paragraf{ font-size: 13px !important; }

  /* figcaption */
  .team-section .member-box figcaption h6              { font-size: 15px !important; }
  .team-section .member-box figcaption .paragraf-sol-beyaz-orta { font-size: 12px !important; }
  .team-section .member-box figcaption ul li a          { font-size: 13px !important; }
}

/* ── experience-section.css (rem) ── */
@media (max-width: 640px) {
  .h2-baslik-hizmetler-yorum          { font-size: 18px !important; }
  .h2-baslik-hizmetler-yorum__yorum   { font-size: 13px !important; }
  .yorumlar-alani-sayfa .h-yazi-ortalama .icon i { font-size: 24px !important; }
}

/* ── services-modern.css (rem en tarjeta reverso) ── */
@media (max-width: 640px) {
  .services1 .h2-baslik-hizmetler-21  { font-size: 20px !important; }
  .services-it .h2-baslik-hizmetler-2 { font-size: 20px !important; }
}

/* ── paketler (sin número) — tarjetas Quality del index ──
   .baslik-3: style.css pone font-size:3.9rem en ≤56.25em → 39px
   .paketler__gorsel: height:44rem → 440px
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Altura del gorsel */
  .paketler__gorsel {
    height: auto !important;
    min-height: unset !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  /* Contenedor icerik */
  .paketler__icerik {
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Ícono flaticon */
  .paketler__icerik .icon i {
    font-size: 40px !important;
  }

  /* Título frontal .baslik-3 */
  .baslik-3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
  }

  /* Lista items */
  .paketler__icerik ul li {
    font-size: 14px !important;
    padding: 8px 6px !important;
    line-height: 1.45 !important;
  }
  .paketler__icerik ul { width: 100% !important; }

  /* Padding pr (cara trasera) */
  .paketler__pr {
    padding: 20px 16px !important;
  }
  .paketler__pr-yazi  { font-size: 15px !important; }
  .paketler__pr-degeri{ font-size: 28px !important; }
}
@media (max-width: 480px) {
  .baslik-3 { font-size: 15px !important; }
  .paketler__icerik .icon i { font-size: 34px !important; }
}
@media (max-width: 360px) {
  .baslik-3 { font-size: 14px !important; }
  .paketler__icerik .icon i { font-size: 30px !important; }
}

/* ── paketler2 (index.html) cara frontal: gorsel altura + ícono + título ──
   style.css línea 6758: height:44rem al gorsel en ≤56.25em → 440px
   style.css línea 6823: font-size:3.5rem a los li → 35px
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Altura del gorsel — contenedor de la cara frontal */
  .paketler2__gorsel,
  .paketler2__gorsel--1,
  .paketler2__gorsel--2,
  .paketler2__gorsel--3,
  .paketler2__gorsel--4,
  .paketler2__gorsel--5,
  .paketler2__gorsel--6 {
    height: auto !important;
    min-height: unset !important;
  }

  /* Ícono frontal */
  .paketler2__icerik .iconw {
    width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    margin: 0 auto 12px !important;
  }
  .paketler2__icerik .iconw img {
    width: 28px !important;
    height: 28px !important;
  }
  .paketler2__icerik .iconw i {
    font-size: 22px !important;
  }

  /* Título frontal (baslik-3white) */
  .paketler2__icerik .baslik-3white {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  /* Subtítulo frontal */
  .paketler2__icerik .services-kutu2--yazi {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  /* Padding del contenedor icerik */
  .paketler2__icerik {
    padding: 20px 16px !important;
  }

  /* Lista de items cara trasera */
  .paketler2__icerik ul li {
    font-size: 14px !important;
    padding: 9px 6px !important;
    line-height: 1.45 !important;
  }
  .paketler2__icerik ul {
    width: 100% !important;
  }
  /* Texto valor/precio cara trasera */
  .paketler2__pr-yazi  { font-size: 16px !important; }
  .paketler2__pr-degeri{ font-size: 32px !important; }
}
@media (max-width: 480px) {
  .paketler2__icerik .baslik-3white { font-size: 15px !important; }
  .paketler2__icerik .iconw         { width: 50px !important; height: 50px !important; }
  .paketler2__icerik ul li          { font-size: 13px !important; }
}
@media (max-width: 360px) {
  .paketler2__icerik .baslik-3white { font-size: 14px !important; }
  .paketler2__icerik .iconw         { width: 44px !important; height: 44px !important; }
}

/* ── paketler5 cara frontal: gorsel altura + ícono + título ──
   style.css línea 7278 pone height:44rem al gorsel en ≤56.25em,
   y línea 7338 pone font-size:3.5rem a los li.
   Con html{font-size:62.5%} → gorsel 440px, texto 35px.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Altura del gorsel (contenedor de imagen + ícono + título frontal) */
  .paketler5__gorsel,
  .paketler5__gorsel--1,
  .paketler5__gorsel--2,
  .paketler5__gorsel--3,
  .paketler5__gorsel--4,
  .paketler5__gorsel--5,
  .paketler5__gorsel--6 {
    height: auto !important;
    min-height: unset !important;
  }

  /* Ícono — no demasiado grande */
  .paketler5__icerik .iconw {
    width: 56px !important;
    height: 56px !important;
    line-height: 56px !important;
    margin: 0 auto 12px !important;
  }
  .paketler5__icerik .iconw img {
    width: 28px !important;
    height: 28px !important;
  }
  .paketler5__icerik .iconw i {
    font-size: 22px !important;
  }

  /* Título frontal */
  .paketler5__icerik .baslik-3 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  /* Subtítulo frontal */
  .paketler5__icerik .services-kutu2--yazi1 {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  /* Padding del contenedor icerik */
  .paketler5__icerik {
    padding: 20px 16px !important;
  }
  /* Lista de items cara trasera */
  .paketler5__icerik ul li {
    font-size: 14px !important;
    padding: 9px 6px !important;
    line-height: 1.45 !important;
  }
  .paketler5__icerik ul {
    width: 100% !important;
  }
  /* Texto precio/valor cara trasera */
  .paketler5__pr-yazi {
    font-size: 16px !important;
  }
}
@media (max-width: 480px) {
  .paketler5__icerik .baslik-3     { font-size: 15px !important; }
  .paketler5__icerik .iconw        { width: 50px !important; height: 50px !important; }
  .paketler5__icerik ul li         { font-size: 13px !important; }
}
@media (max-width: 360px) {
  .paketler5__icerik .baslik-3     { font-size: 14px !important; }
  .paketler5__icerik .iconw        { width: 44px !important; height: 44px !important; }
}

/* ── paketler3 cara trasera: lista de items con checkmarks ──
   style.css línea 6988 pone font-size:3.5rem en ≤56.25em (~900px).
   Con html{font-size:62.5%} eso da 35px — demasiado grande en móvil.
   La imagen muestra ~26px, reducimos a 15px para proporcionar al contenedor.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .paketler3__icerik ul li {
    font-size: 15px !important;
    padding: 10px 8px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }
  .paketler3__icerik ul li::before {
    top: 14px !important;
    width: 10px !important;
    height: 10px !important;
  }
  /* El contenedor icerik también tiene padding:3rem → reducir */
  .paketler3__icerik {
    padding: 20px 16px !important;
  }
  /* Ancho de la lista al 100% para evitar cortes laterales */
  .paketler3__icerik ul {
    width: 100% !important;
  }
}
@media (max-width: 480px) {
  .paketler3__icerik ul li {
    font-size: 14px !important;
    padding: 9px 6px !important;
  }
}
@media (max-width: 360px) {
  .paketler3__icerik ul li {
    font-size: 13px !important;
    padding: 8px 4px !important;
  }
}

/* ================================================================
   SECCIÓN 3 — BOSLUK: neutralizar TODOS los espaciadores turcos
   ================================================================ */

[class*="bosluk"] {
  margin-top:    0 !important;
  margin-bottom: 0 !important;
  padding:       0 !important;
  height:        0 !important;
  min-height:    0 !important;
  display:       block !important;
  overflow:      hidden !important;
}

/* ================================================================
   SECCIÓN 4 — SECCIONES: anular margin-top negativos
   ================================================================ */

.hakkimizda-bolumu-anasayfa,
.hakkimizda-bolumu-hakkimizda,
.quality-bolumu-anasayfa,
.team-section,
.ozellika,
.count-bolumu,
.hizmetler-alani,
.hizmetlerr-bolumu,
.h-yazi-margin-5,
.paketler-alani,
.paketler-alani-about,
.markalar,
.markalarw,
.bottom,
.news-alani-sayfa,
.seccion-estudios,
.yorumlar-alani-sayfa,
.services1,
.services-it,
.hizmetler-detay-sayfasi-alani,
section.iletisim-icon-alani,
section.iletisim-form-alani,
section.hizmetlerr-bolumu,
.boslukhm {
  margin-top: 0 !important;
}

/* Padding absurdos del template en ≤900px */
@media only screen and (max-width: 56.25em) {
  .hakkimizda-bolumu-anasayfa,
  .quality-bolumu-anasayfa,
  .team-section,
  .count-bolumu,
  .hizmetlerr-bolumu,
  .hizmetler-detay-sayfasi-alani { padding: 40px 0 !important; margin-top: 0 !important; }

  .hakkimizda-bolumu-hakkimizda  { padding: 40px 0 !important; margin-top: 0 !important; }

  .markalar, .markalarw, .bottom {
    display:   block   !important;
    padding:   40px 20px !important;
    margin-top: 0      !important;
    clear:     both    !important;
  }

  .services1, .services-it        { padding: 36px 0 44px !important; margin-top: 0 !important; }
  .paketler-alani                  { padding: 32px 0 36px !important; margin-top: 0 !important; }
}

/* ================================================================
   SECCIÓN 5 — HAMBURGER
   ================================================================ */

.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 999999;
  background: linear-gradient(135deg, #1755C8, #0c3a8f);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  border: none;
  width: 44px; height: 44px;
  transition: background 0.25s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.hamburger-menu:active { transform: scale(0.96); }
.hamburger-menu span {
  width: 22px; height: 2.5px;
  background: #fff;
  margin: 2.5px 0;
  border-radius: 3px;
  transition: transform 0.28s ease, opacity 0.18s, width 0.18s;
  display: block;
}
.hamburger-menu.active span:nth-child(1) { transform: rotate(45deg)  translate(5px, 5.5px);  }
.hamburger-menu.active span:nth-child(2) { opacity: 0; width: 0; }
.hamburger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5.5px); }

/* ================================================================
   SECCIÓN 6 — SIDEBAR
   ================================================================ */

.side-widget {
  position: fixed; top: 0; left: -100%;
  width: 290px; max-width: 85vw; height: 100vh;
  background: #fff; z-index: 99998;
  transition: left 0.3s cubic-bezier(0.23,1,0.32,1);
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 4px 0 30px rgba(0,0,0,0.22);
  -webkit-overflow-scrolling: touch;
}
.side-widget.active { left: 0; }

.menu-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(10,22,40,0.55);
  z-index: 99997; display: none;
}
.menu-overlay.active { display: block; }

.side-widget .inner { padding: 28px 20px 40px; min-height: 100%; display: flex; flex-direction: column; }
.side-widget .logo  { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #edf0f7; }
.side-widget .logo img { max-height: 36px; width: auto; }

.side-widget .menu { list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; }
.side-widget .menu li { margin: 0 !important; border-bottom: 1px solid #f0f3fa; }
.side-widget .menu li:last-child { border-bottom: none; }

.side-widget .menu a {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 13px 4px !important; color: #1a2a4a !important; text-decoration: none !important;
  font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important;
  border: none !important; background: none !important;
}
.side-widget .menu a .border,
.side-widget .menu a [class*="border"] { display: none !important; }
.side-widget .menu a:hover { color: #1755C8 !important; padding-left: 10px !important; }

.side-widget span.sb {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 26px !important; height: 26px !important; border-radius: 6px !important;
  background: #eef3ff !important; color: #1755C8 !important;
  font-size: 18px !important; font-weight: 700 !important; flex-shrink: 0 !important; cursor: pointer !important;
}
.side-widget span.sb:hover { background: #1755C8 !important; color: #fff !important; }

.side-widget .menu .dropdown-menu {
  display: none; padding: 4px 0 8px 16px !important; margin: 0 !important;
  background: none !important; border: none !important; box-shadow: none !important;
  position: static !important; float: none !important; min-width: unset !important;
}
.side-widget .menu .dropdown-menu a {
  padding: 9px 4px !important; font-size: 13px !important; font-weight: 500 !important;
  color: #445270 !important; border-left: 2px solid #dde8f8 !important; margin-left: 4px !important;
}
.side-widget .menu .dropdown-menu a:hover { color: #1755C8 !important; border-left-color: #1755C8 !important; }

.side-widget-lang-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 6px 0 14px; padding: 10px 20px;
  background: linear-gradient(135deg, #1755C8, #0c3a8f);
  color: #fff !important; font-size: 13px !important; font-weight: 700 !important;
  border-radius: 24px; cursor: pointer; border: none; width: 100%;
}

/* ================================================================
   SECCIÓN 7 — NAVBAR
   ================================================================ */

@media (max-width: 1299px) {
  .hamburger-menu { display: flex !important; }
  nav.navbar .container {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important; flex-wrap: nowrap !important;
  }
  nav.navbar .site-menu     { display: none !important; }
  nav.navbar .navbar-button { display: none !important; }
}

@media (max-width: 768px) {
  nav.navbar { padding: 8px 0 !important; }
  nav.navbar .container { padding: 0 14px !important; }
  .navbar .logo img { max-height: 32px !important; }
}

@media (min-width: 1300px) {
  .hamburger-menu { display: none !important; }
  nav.navbar .site-menu { display: block !important; }
  .side-widget { display: none !important; }
  .menu-overlay { display: none !important; }
}

/* ================================================================
   SECCIÓN 8 — HERO (page_hero.css usa clamp con rem — override px)
   ================================================================ */

@media (max-width: 1024px) {
  .tc-page-hero { height: 300px !important; }
  .tc-page-hero__title { font-size: 36px !important; }
}
@media (max-width: 768px) {
  .tc-page-hero { height: 240px !important; }
  .tc-page-hero__content { padding: 0 20px !important; }
  .tc-page-hero__title { font-size: 26px !important; letter-spacing: -0.02em !important; }
  .tc-page-hero__breadcrumb { font-size: 13px !important; }
}
@media (max-width: 480px) {
  .tc-page-hero { height: 200px !important; }
  .tc-page-hero__title { font-size: 20px !important; }
  .tc-page-hero__breadcrumb { font-size: 12px !important; }
}
@media (max-width: 360px) {
  .tc-page-hero { height: 180px !important; }
  .tc-page-hero__title { font-size: 17px !important; }
}

/* ================================================================
   SECCIÓN 9 — TÍTULOS DE SECCIÓN en px (con cascada correcta)
   ================================================================ */

@media (max-width: 768px) {
  .h2-baslik-hizmetler-21,
  .h2-baslik-anasayfa-ozel,
  .h2-baslik-hizmetler,
  .h2-baslik-hizmetler-2,
  .h2-baslik-hizmetler-4,
  .h2-baslik-hizmetler-yorum,
  .h2-baslik-ahb, .h2-baslik-bottom,
  .h2-baslik-projeler-ozel,
  .h2-baslik-iletisim-ozel { font-size: 22px !important; line-height: 1.25 !important; }
  .h2-baslik-anasayfa      { font-size: 26px !important; }

  .h2-baslik-hizmetler__paragraf,
  .h2-baslik-hizmetler-2__paragraf,
  .h2-baslik-hizmetler-21__paragraf,
  .services-kutu2--yazi,
  .services-kutu2--yazi1 { font-size: 14px !important; line-height: 1.65 !important; }
}
@media (max-width: 480px) {
  .h2-baslik-hizmetler-21,
  .h2-baslik-anasayfa-ozel,
  .h2-baslik-hizmetler,
  .h2-baslik-hizmetler-2 { font-size: 19px !important; }
}

/* ================================================================
   SECCIÓN 10 — SECCIONES: padding correcto
   ================================================================ */

@media (max-width: 768px) {
  .services1, .services-it         { padding: 36px 0 44px !important; }
  .paketler-alani                   { padding: 28px 0 32px !important; }
  .markalar, .markalarw, .bottom    { padding: 36px 16px !important; }
  .seccion-estudios,.news-alani-sayfa{ padding: 36px 16px 44px !important; }
  section.hakkimizda-bolumu-anasayfa{ padding: 32px 0 40px !important; }
  .team-section, .experience-section{ padding: 36px 0 !important; }
  section.ozellika, .ozellika       { padding: 28px 16px !important; }
  footer.footer                     { padding: 44px 0 0 !important; }
  section.hakkimizda-bolumu-anasayfa .tc-wrapper { padding: 0 16px !important; }
}
@media (max-width: 480px) {
  .services1, .services-it          { padding: 28px 0 36px !important; }
  .markalar, .markalarw             { padding: 28px 12px !important; }
  section.hakkimizda-bolumu-anasayfa{ padding: 24px 0 32px !important; }
}

/* ================================================================
   SECCIÓN 10b — OZELLIKA: px para textos en rem
   (team-section.css usa rem sin override px)
   ================================================================ */

@media (max-width: 768px) {
  .ozellika {
    padding: 24px 16px !important;
  }
  .ozellika .h2-baslik-hizmetler-21 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }
  .ozellika .h2-baslik-hizmetler-21__paragraf {
    font-size: 13px !important;
    line-height: 1.65 !important;
    padding: 0 !important;
  }
}

/* ================================================================
   SECCIÓN 11 — OVERFLOW: sin scroll horizontal
   ================================================================ */

@media (max-width: 1024px) {
  .services1, .services-it, .paketler-alani, .markalar,
  .seccion-estudios, .news-alani-sayfa,
  section.hakkimizda-bolumu-anasayfa, .team-section,
  .experience-section, footer.footer { overflow-x: hidden !important; }

  .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .row { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ================================================================
   SECCIÓN 12 — GRIDS: colapso a columna única
   ================================================================ */

@media (max-width: 768px) {
  /* About / Nosotros */
  .tc-nos-grid   { grid-template-columns: 1fr !important; gap: 20px !important; }
  .tc-nos-left   { width: 100% !important; overflow: hidden !important; }
  .tc-nos-metrics{ grid-template-columns: repeat(2,1fr) !important; }

  /* Aliados */
  .markalar .h-yazi-margin-kucuk-21 {
    flex-wrap: wrap !important; justify-content: center !important; gap: 14px !important;
  }
  .marka { width: 110px !important; max-height: 70px !important; padding: 10px 8px !important; }

  /* Contacto — tarjetas de iconos */
  .tc-contact-icons-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 16px !important;
    gap: 14px !important;
  }
  .tc-contact-card  { max-width: 100% !important; width: 100% !important; }

  /* Contacto — formulario */
  .tc-form-layout   { grid-template-columns: 1fr !important; }
  .tc-form-grid     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .tc-submit-btn    { width: 100% !important; justify-content: center !important; }

  /* Estudios */
  .tc-estudios-grid { grid-template-columns: 1fr !important; }
  .estudio-card, .tc-study-card { width: 100% !important; min-width: unset !important; }

  /* Footer */
  footer.footer::before, footer.footer::after { display: none !important; }
  footer.footer .row > [class*="col-"] { margin-bottom: 24px !important; }
}

@media (max-width: 480px) {
  .tc-nos-metrics   { grid-template-columns: 1fr !important; }
  .tc-nos-metric    {
    border-right: none !important;
    border-bottom: 1px solid rgba(11,31,74,0.09) !important;
    padding: 12px 0 !important;
  }
  .tc-nos-metric:last-child { border-bottom: none !important; }
  .marka { width: 88px !important; max-height: 58px !important; padding: 7px 5px !important; }
  footer.footer .row > [class*="col-"] {
    width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
  }
}

/* ================================================================
   SECCIÓN 13 — FORMULARIOS táctiles (sin zoom iOS)
   ================================================================ */

@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], select, textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
  button[type="submit"], input[type="submit"], .tc-submit-btn { min-height: 48px !important; }
  .tc-field textarea { min-height: 96px !important; }
}

/* ================================================================
   SECCIÓN 14 — TABLAS y artículos
   ================================================================ */

@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ficha-content-grid { grid-template-columns: 1fr !important; }
  .ficha-logo { float: none !important; margin: 0 auto 14px !important; display: block !important; }
  .tag-link   { width: 100% !important; justify-content: center !important; }
  section.hakkimizda-bolumu p { font-size: 14px !important; line-height: 1.75 !important; }
}

/* ================================================================
   SECCIÓN 15 — ANIMACIONES reducidas en móvil
   ================================================================ */

@media (max-width: 768px) {
  .animated, .wow { animation-duration: 0.4s !important; animation-delay: 0s !important; }
  [data-tilt]     { transform: none !important; }
  .services1::before, .services1::after,
  .paketler-alani::before, .paketler-alani::after { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   SECCIÓN 16 — SWIPER y CAROUSEL
   ================================================================ */

@media (max-width: 480px) {
  .team-section .swiper-button-next,
  .team-section .swiper-button-prev,
  .carousel-classes .swiper-button-next,
  .carousel-classes .swiper-button-prev,
  .yorumlar-alani-sayfa .swiper-button-next,
  .yorumlar-alani-sayfa .swiper-button-prev { display: none !important; }
}

/* ================================================================
   SECCIÓN 27 — TABLOSERVICES: grid de 6 tarjetas colapsa a 1 col
   style.css no tiene media query para .tabloservices en móvil.
   Las tarjetas 3 y 6 no se ven porque el float+calc falla.
   ================================================================ */

@media (max-width: 900px) {
  .tabloservices {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .tabloservices .tablo--1-ve-3 {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  /* En tablet: 2 columnas */
  .tabloservices {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .tabloservices .tablo--1-ve-3 {
    width: calc(50% - 8px) !important;
  }
}

/* ================================================================
   SECCIÓN 26 — TARJETAS FLIP: ocultar reverso POR CSS en móvil
   No depende de JS ni de timing. El reverso solo se muestra
   cuando la tarjeta tiene la clase .tc-flipped (añadida por JS).
   Esto elimina el "dos tarjetas encimadas" definitivamente.
   ================================================================ */

@media (max-width: 900px), (hover: none) {

  /* Ocultar reverso por defecto */
  .paketler__on--arkayazi,
  .paketler2__on--arkayazi,
  .paketler3__on--arkayazi,
  .paketler5__on--arkayazi {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Mostrar reverso cuando la tarjeta está volteada */
  .paketler.tc-flipped   .paketler__on--arkayazi,
  .paketler2.tc-flipped  .paketler2__on--arkayazi,
  .paketler3.tc-flipped  .paketler3__on--arkayazi,
  .paketler5.tc-flipped  .paketler5__on--arkayazi {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Ocultar frente cuando la tarjeta está volteada */
  .paketler.tc-flipped   .paketler__on--onyazi,
  .paketler2.tc-flipped  .paketler2__on--onyazi,
  .paketler3.tc-flipped  .paketler3__on--onyazi,
  .paketler5.tc-flipped  .paketler5__on--onyazi {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #1755C8 !important;
  outline-offset: 2px !important;
}

/* ================================================================
   SECCIÓN 18 — it-services.html: NO incluye movil.css en v1.
   Se agregan correcciones equivalentes de forma segura aquí.
   Si el HTML ya fue actualizado para incluir movil.css, estas
   reglas son inofensivas (idempotentes).
   ================================================================ */

/* Navbar hamburger en it-services */
@media (max-width: 1299px) {
  /* Las reglas de §7 ya cubren esto — sección de refuerzo */
  nav.navbar .site-menu { display: none !important; }
}

/* Tarjetas de servicio en columna única */
@media (max-width: 768px) {
  .services-it .tabloservices {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 14px !important;
  }
  .services-it .tabloservices .tablo--1-ve-3,
  .services-it .tablo > .tablo--1-ve-3 {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: unset !important;
  }
}

/* ================================================================
   SECCIÓN 19 — PLATAFORMA: slider altura fija → responsive
   (plataforma.css usa height:400px en .slider-container, sin MQ)
   ================================================================ */

@media (max-width: 768px) {
  .slider-container { height: 260px !important; }
  .nav-button       { padding: 10px 14px !important; font-size: 14px !important; }
}
@media (max-width: 480px) {
  .slider-container { height: 200px !important; }
  .nav-button       { padding: 8px 11px !important; font-size: 12px !important; }
  /* Tarjetas paketler4 sin altura fija en móvil */
  .paketler4        { height: auto !important; min-height: 180px !important; }
}
@media (max-width: 360px) {
  .slider-container { height: 170px !important; }
}

/* ================================================================
   SECCIÓN 20 — CONTACTO: form-card padding lateral excesivo
   contacto.css usa padding:48px 44px en .tc-form-card
   En móvil eso desborda la pantalla.
   ================================================================ */

@media (max-width: 480px) {
  .tc-form-card {
    padding: 24px 14px !important;
    border-radius: 14px !important;
  }
  /* Sección de íconos: sin padding horizontal para que las tarjetas
     se apilen sin corte lateral */
  .tc-contact-icons-wrapper {
    padding: 0 10px !important;
    gap: 10px !important;
  }
  /* Botones de contacto táctiles */
  .tc-contact-cta {
    width: 100% !important;
    justify-content: center !important;
    font-size: 13px !important;
  }
}
@media (max-width: 360px) {
  .tc-form-card { padding: 20px 10px !important; }
}

/* ================================================================
   SECCIÓN 21 — ESTUDIOS: .news-alani-sayfa padding lateral
   estudios.css usa padding:72px 40px — en 320px eso recorta.
   ================================================================ */

@media (max-width: 480px) {
  .news-alani-sayfa {
    padding: 32px 12px 44px !important;
  }
  .tc-estudios-header {
    padding: 0 4px !important;
    margin-bottom: 32px !important;
  }
  /* Tarjeta estudio ancho completo */
  .estudio-card {
    width: 100% !important;
    min-width: unset !important;
  }
}
@media (max-width: 360px) {
  .news-alani-sayfa { padding: 24px 8px 36px !important; }
}

/* ================================================================
   SECCIÓN 22 — TRACING / ANALISIS2: sidebar de servicios
   En pantallas <768px el sidebar flota a la izquierda del contenido,
   rompiendo el layout de 2 columnas del template.
   ================================================================ */

@media (max-width: 768px) {
  /* Sidebar de servicios: va primero, ancho completo */
  .sidebar-service {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-bottom: 24px !important;
  }
  /* Menú sidebar: flex horizontal + scroll */
  .sidebar-service .menu-service-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  .sidebar-service .menu-service {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  /* Columna de contenido principal: ancho completo */
  .hizmetlerr-bolumu .tablo--1-ve-3,
  .hizmetler-detay-sayfasi-alani .tablo--1-ve-3 {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  /* Imagen principal de servicio */
  .galeri__gorsel--3 {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
  }
  /* Tarjetas característica paketler4: columna única */
  .tabloozellik {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .tabloozellik .tablo--1-ve-2 {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}

/* ================================================================
   SECCIÓN 23 — AVISO DE PRIVACIDAD y páginas de artículo
   ================================================================ */

@media (max-width: 768px) {
  .aviso-content,
  .articulo-content,
  .hizmetler-detay-sayfasi-alani .tablo--1-ve-4 {
    padding: 0 14px !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
  /* Índice / tabla de contenidos — scroll horizontal si hay tabla ancha */
  .aviso-tabla, .tabla-indice {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
}

/* ================================================================
   SECCIÓN 24 — 1920px+ : escalar contenido correctamente
   El template base fija max-width en containers,
   en monitores grandes el contenido queda centrado. OK.
   Solo aseguramos que el hero no se estire demasiado.
   ================================================================ */

@media (min-width: 1800px) {
  .tc-page-hero { height: 420px !important; }
  .tc-page-hero__title { font-size: 52px !important; }
  /* Footer: el svg decorativo no se extiende más de 320px */
  footer.footer::before { width: 320px !important; height: 220px !important; }
}

/* ================================================================
   SECCIÓN 25 — 320px: correcciones de mínimo absoluto
   ================================================================ */

@media (max-width: 360px) {
  /* Navbar logo más pequeño */
  .navbar .logo img { max-height: 26px !important; }
  /* Hamburger toca el borde — ajuste de padding */
  nav.navbar .container { padding: 0 10px !important; }
  /* Side-widget ancho máximo */
  .side-widget { width: 100vw !important; max-width: 100vw !important; }
  /* Botón de idioma en navbar — no overflow */
  #tc-lang-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  /* Tarjetas aliados en columna única */
  .markalar .h-yazi-margin-kucuk-21 {
    flex-direction: column !important;
    align-items: center !important;
  }
  .marka { width: 140px !important; max-height: 80px !important; }
  /* Footer columnas */
  footer.footer .row > [class*="col-"] {
    padding: 0 10px !important;
  }
}