/* Datalys marketing — mobile responsive overrides
 * Strategy: target inline-styled containers via [style*=...] selectors with !important.
 * No JSX surgery — all overrides live here.
 */

/* iOS Safari auto-zooms inputs with font-size < 16px. Bump to 16px on mobile
 * to prevent the viewport scaling that breaks the layout on focus. */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Tablet & phones */
@media (max-width: 900px) {

  /* ── Hero / page header padding ── */
  section[style*="min-height"][style*="780"],
  section[style*="minHeight: 780"] { min-height: auto !important; }

  div[style*="padding: 72px 32px 80px"] { padding: 40px 18px 56px !important; }
  div[style*="padding: 72px 32px 64px"] { padding: 40px 18px 48px !important; }
  div[style*="padding: 56px 32px 80px"] { padding: 32px 18px 48px !important; }

  section[style*="padding-top: 140px"] {
    padding-top: 96px !important;
    padding-bottom: 56px !important;
  }
  section[style*="padding-top: 140px"] > div { padding: 0 18px !important; }

  /* ── Body sections ── */
  section[style*="padding: 100px 32px"]   { padding: 56px 18px !important; }
  section[style*="padding: 120px 32px"]   { padding: 64px 18px !important; }
  section[style*="padding: 80px 32px"]    { padding: 48px 18px !important; }
  section[style*="padding: 60px 32px"]    { padding: 36px 18px !important; }
  section[style*="padding: 40px 32px"]    { padding: 28px 18px !important; }

  /* ── Top status bar inside hero ── */
  div[style*="padding: 12px 32px"] {
    padding: 10px 14px !important;
  }
  div[style*="padding: 12px 32px"] > div {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    font-size: 10px !important;
  }

  /* ── Hero 2-col → 1-col ── */
  div[style*="grid-template-columns: 1fr 1.05fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* ── 3-col grids (problems / features / steps / KPI strip) → 1-col ── */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── 2-col with bias (risk + flow) → 1-col ── */
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: 1.2fr 1fr"] > div[style*="border-right"],
  div[style*="grid-template-columns: 1.4fr 1fr"] > div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* ── 2-col security/integrations grid → 1-col ── */
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* ── Pricing 4-col → 1-col ── */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* ── Pricing 2-col plan cards already covered by 1fr 1fr ── */

  /* ── Footer 5-col → 2-col ── */
  div[style*="grid-template-columns: 1.4fr repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    padding-bottom: 28px !important;
  }
  footer[style*="padding: 72px 32px 28px"] { padding: 48px 18px 22px !important; }

  /* ── Floating chips (decorative, hide on mobile) ── */
  div[aria-hidden][style*="width: 200px"][style*="right: 24px"],
  div[aria-hidden][style*="width:200px"][style*="right:24px"] {
    display: none !important;
  }

  /* ── Hero CTA cluster (Demo button + secondary) ── */
  div[style*="display: flex"][style*="gap: 12px"][style*="flex-wrap: wrap"] {
    gap: 10px !important;
  }

  /* ── Inline-flex CTA pairs (final CTA, contact, etc.) ── */
  div[style*="display: inline-flex"][style*="gap: 12px"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  /* ── Buttons full-width on phones ── */
  a[style*="padding: 15px 26px"],
  a[style*="padding: 15px 22px"],
  button[style*="padding: 15px 26px"],
  button[style*="padding: 15px 22px"] {
    font-size: 14px !important;
    padding: 13px 20px !important;
  }

  /* ── Hero quick badges (1 İŞ GÜNÜ KURULUM …) ── */
  div[style*="margin-top: 36px"][style*="gap: 24px"] {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    margin-top: 24px !important;
    font-size: 11px !important;
  }
}

/* Phones */
@media (max-width: 600px) {

  /* ── Brand nav: collapse to compact, drop labels gap ── */
  header[style*="padding: 18px 32px"] {
    padding: 14px 14px !important;
  }
  header[style*="padding: 18px 32px"] nav {
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }
  header[style*="padding: 18px 32px"] nav a {
    font-size: 12px !important;
    padding-bottom: 2px !important;
  }

  /* ── Top status bar: hide right meta cluster ── */
  div[style*="padding: 12px 32px"] > div > span[style*="display: flex"][style*="gap: 24px"] {
    display: none !important;
  }

  /* ── Live command center: tighten KPI strip ── */
  div[style*="background: rgba(15, 23, 41"] div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  div[style*="background: rgba(15, 23, 41"] div[style*="grid-template-columns: repeat(3, 1fr)"] > div:nth-child(3) {
    grid-column: 1 / -1 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* ── Hero command center inner padding ── */
  div[style*="padding: 18px 22px"] { padding: 14px 16px !important; }
  div[style*="padding: 14px 16px"] { padding: 12px 14px !important; }

  /* ── Big section titles ── */
  h2[style*="font-size: clamp(36px"],
  h2[style*="fontSize: 'clamp(36px"] {
    margin-bottom: 36px !important;
  }

  /* ── Footer compact: 1-col ── */
  div[style*="grid-template-columns: 1.4fr repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  div[style*="grid-template-columns: 1.4fr repeat(4, 1fr)"] > div:first-child {
    margin-bottom: 4px !important;
  }

  /* ── Footer bottom strip ── */
  footer div[style*="justify-content: space-between"][style*="font-family: \"JetBrains Mono"],
  footer div[style*="justify-content: space-between"][style*="font-family:'JetBrains Mono"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* ── Logo strip on body ── */
  section[style*="padding: 28px 18px"] > div,
  section[style*="padding: 40px 32px"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  section[style*="padding: 40px 32px"] > div > div[style*="display: flex"][style*="gap: 36px"] {
    gap: 18px 24px !important;
  }

  /* ── Sign-in / forms ── */
  div[style*="grid-template-columns: 1.1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Testimonial quote sizing handled by clamp; reduce padding ── */

  /* ── Eyebrow / hero badge wrap ── */
  div[style*="display: inline-flex"][style*="border-radius: 999px"] {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  /* ── Hide outer "FloatingChips" container too at small ── */
  div[aria-hidden][style*="position: absolute"][style*="width: 200px"] { display: none !important; }
}

/* Very small phones */
@media (max-width: 380px) {
  section[style*="padding: 100px 32px"] { padding: 48px 14px !important; }
  section[style*="padding: 120px 32px"] { padding: 56px 14px !important; }
  div[style*="padding: 72px 32px 80px"] { padding: 32px 14px 44px !important; }
}