/* ============================================================================
 * mobile.css — Mobile-only UX/UI overrides (below 768px)
 * Desktop styles are left completely intact.
 * Loaded AFTER styles.css so these rules win on cascade.
 * ==========================================================================*/

@media (max-width: 767.98px) {

  /* -------------------------------------------------------------------------
   * 0. Defensive: prevent any accidental horizontal scroll on small screens
   * ---------------------------------------------------------------------- */
  html, body { overflow-x: clip; max-width: 100vw; }

  /* -------------------------------------------------------------------------
   * 1. Typography — readability, min 16px body, tighter heading line-height
   * ---------------------------------------------------------------------- */
  html { -webkit-text-size-adjust: 100%; }

  body {
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  p,
  li,
  dd {
    font-size: 1rem;
    line-height: 1.65;
  }

  .text-xs  { font-size: 0.8125rem; line-height: 1.45; }
  .text-sm  { font-size: 0.9375rem; line-height: 1.55; }
  .text-base { font-size: 1rem; line-height: 1.65; }

  h1, .text-2xl, .text-3xl, .text-4xl {
    line-height: 1.2;
    letter-spacing: -0.01em;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  h1 {
    font-size: clamp(1.75rem, 7vw, 2.125rem);
  }

  h2 {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    line-height: 1.25;
  }

  h3 {
    font-size: 1.125rem;
    line-height: 1.3;
  }

  .tracking-\[0\.2em\] { letter-spacing: 0.16em; }

  /* Wider reading measure in bodies */
  main p {
    max-width: 62ch;
  }

  /* -------------------------------------------------------------------------
   * 2. Section vertical rhythm — add breathing room between sections
   * ---------------------------------------------------------------------- */
  section {
    scroll-margin-top: 4.5rem;
  }

  main > section + section {
    border-top-width: 1px;
  }

  /* Hero + first content section — tighter on very small screens */
  .py-12   { padding-top: 2rem;   padding-bottom: 2rem; }
  .py-14   { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .py-16   { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .py-10   { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .py-7    { padding-top: 1.5rem; padding-bottom: 1.5rem; }

  /* Horizontal page gutter — ensure consistent safe-area insets */
  .mx-auto.max-w-screen-xl,
  .max-w-screen-xl {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  /* -------------------------------------------------------------------------
   * 3. Stats cards — 2 columns instead of single tall column
   * ---------------------------------------------------------------------- */
  section .grid.gap-6.sm\:grid-cols-2.lg\:grid-cols-4,
  section .grid.gap-6.sm\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  /* Hero inline stats dl (3-col) — comfortable line-breaking on small screens */
  dl.grid.grid-cols-3 {
    gap: 0.875rem;
  }

  dl.grid.grid-cols-3 dt,
  dl.grid.grid-cols-3 dd {
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  dl.grid.grid-cols-3 dt {
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
  }

  dl.grid.grid-cols-3 dd {
    font-size: 0.8125rem;
  }

  /* Stat card padding — compact but readable */
  section .grid .rounded-2xl.border.bg-white\/90 {
    padding: 0.875rem 0.5rem;
    overflow: hidden;
  }

  section .grid .rounded-2xl .text-2xl,
  section .grid .rounded-2xl .text-3xl {
    font-size: 1.5rem;
    line-height: 1.1;
  }

  /* Stat card label — smaller + wrap safely */
  section .grid .rounded-2xl.border.bg-white\/90 .text-xs {
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* -------------------------------------------------------------------------
   * 4. Buttons / CTAs — min 44px tap target, full-width, high contrast
   * ---------------------------------------------------------------------- */
  a[class*="inline-flex"][class*="rounded-"][class*="px-"],
  button[class*="inline-flex"][class*="rounded-"][class*="px-"],
  a.inline-flex.items-center.justify-center,
  button.inline-flex.items-center.justify-center {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.2;
  }

  /* Card action buttons — stacked, equal width, clear spacing */
  article .mt-auto.flex.flex-col.gap-2,
  article .flex.flex-col.gap-2.sm\:flex-row {
    flex-direction: column !important;
    gap: 0.625rem;
  }

  article .mt-auto a,
  article .mt-auto button,
  article .mt-auto [role="button"] {
    width: 100%;
    justify-content: center;
  }

  /* Hero CTA row in home page */
  .flex.flex-col.gap-3.sm\:flex-row,
  .flex.flex-wrap.items-center.gap-3 {
    gap: 0.625rem;
  }

  /* -------------------------------------------------------------------------
   * 5. Cards — breathing room + tap-friendly sizes
   * ---------------------------------------------------------------------- */
  article.rounded-2xl,
  article.rounded-3xl {
    padding: 1rem;
  }

  article.rounded-2xl .p-5,
  article.rounded-2xl .p-6,
  article.rounded-3xl .p-8 {
    padding: 1rem;
  }

  article h3 {
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  article p.text-sm,
  article p.line-clamp-4 {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  /* Grid gaps - slightly tighter */
  .gap-8  { gap: 1.25rem; }
  .gap-10 { gap: 1.5rem; }

  /* -------------------------------------------------------------------------
   * 6. Navigation — navbar sticky comfort & touch target
   * ---------------------------------------------------------------------- */
  header nav a,
  header nav button {
    min-height: 44px;
  }

  header [data-mobile-nav-toggle] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Full-screen mobile menu — larger tap targets + generous spacing */
  [data-mobile-nav] {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    overflow-y: auto;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  [data-mobile-nav] a,
  [data-mobile-nav] button {
    min-height: 48px;
    font-size: 1.0625rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  /* Prevent body scroll while menu is open (added via JS) */
  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }

  /* -------------------------------------------------------------------------
   * 7. Hero banner (home) — readable, less cramped
   *    Slayt kartı içerikten gelen min(26rem,72vh) ile zaten yeterli yüksekliğe
   *    sahip; burada ek min-height vermiyoruz ki kısa içerikli slaytlarda
   *    altta boşluk oluşmasın.
   * ---------------------------------------------------------------------- */
  [data-hero-slider] p {
    font-size: 1rem;
    line-height: 1.55;
  }

  /* Slayt içindeki "flex-1" stretch'ini mobilde etkisizleştir: listeler
     kartın alt kısmına yayılmak yerine doğal yüksekliklerinde kalır.
     Slayt içeriği absolute inset-0 ile parent min-h'a bağlı olduğundan
     iç banner track'inin Tailwind min-h-[min(26rem,72vh)] değerine
     dokunmuyoruz — aksi halde uzun slaytlar (örn. "Çalışma biçimi")
     kartın dışına taşar. */
  [data-hero-slider] ul.flex-1 {
    flex: 0 0 auto !important;
    margin-top: 1.25rem !important;
  }

  [data-hero-prev],
  [data-hero-next] {
    width: 48px;
    height: 48px;
  }

  [data-hero-dot] {
    min-width: 28px;
    min-height: 28px;
  }

  /* -------------------------------------------------------------------------
   * 8. Filter / tab pills — horizontal scroll on overflow, tap-friendly
   * ---------------------------------------------------------------------- */
  .-mx-1.flex.flex-wrap.justify-center,
  .flex.flex-wrap.justify-center.gap-2,
  .flex.flex-wrap.justify-center.gap-3 {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-bottom: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .-mx-1.flex.flex-wrap.justify-center::-webkit-scrollbar,
  .flex.flex-wrap.justify-center.gap-2::-webkit-scrollbar,
  .flex.flex-wrap.justify-center.gap-3::-webkit-scrollbar {
    display: none;
  }

  .rounded-full.border.px-3\.5.py-2 {
    scroll-snap-align: start;
    min-height: 40px;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    font-size: 0.875rem;
  }

  /* -------------------------------------------------------------------------
   * 9. Tables — fix cramped comparison tables
   * ---------------------------------------------------------------------- */
  .overflow-x-auto {
    border-radius: 0.75rem;
  }

  .overflow-x-auto table th,
  .overflow-x-auto table td {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }

  /* -------------------------------------------------------------------------
   * 10. Forms (contact) — iOS zoom prevention + min 44px height
   * ---------------------------------------------------------------------- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.4;
    min-height: 44px;
    padding: 0.75rem 0.875rem;
    width: 100%;
  }

  textarea {
    min-height: 120px;
    padding-top: 0.75rem;
  }

  label {
    font-size: 0.9375rem;
    display: block;
    margin-bottom: 0.375rem;
  }

  form .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  form button[type="submit"] {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }

  /* -------------------------------------------------------------------------
   * 11. Footer — single column, readable
   * ---------------------------------------------------------------------- */
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  footer a,
  footer button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* -------------------------------------------------------------------------
   * 12. Images — prevent horizontal overflow only; do NOT touch height so
   * Tailwind utilities like .h-9 / .h-10 keep working.
   * ---------------------------------------------------------------------- */
  img {
    max-width: 100%;
  }

  /* -------------------------------------------------------------------------
   * 13. Accessibility — focus visibility (strong, high-contrast halo)
   *     Two-ring technique: inner dark ring + outer white halo to stay
   *     visible on both light and red/brand backgrounds.
   * ---------------------------------------------------------------------- */
  :focus-visible {
    outline: 3px solid #0b3dc3;
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.95),
                0 0 0 9px rgba(11, 61, 195, 0.35);
  }

  /* On brand-colored / dark backgrounds, swap ring color for contrast */
  .bg-brand *:focus-visible,
  [class*="bg-neutral-9"] *:focus-visible,
  .bg-neutral-900:focus-visible,
  .bg-brand:focus-visible {
    outline-color: #ffffff;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.55),
                0 0 0 9px rgba(255, 255, 255, 0.35);
  }

  /* Make the skip-to-content link actually prominent on focus */
  a[href="#main-content"]:focus,
  a[href="#main-content"]:focus-visible {
    position: fixed !important;
    top: max(0.75rem, env(safe-area-inset-top)) !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    padding: 0.875rem 1rem !important;
    background: #0b1221 !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 10px !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    outline: 3px solid #e30a17 !important;
    outline-offset: 2px !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  /* Respect user motion preferences — keep animations minimal */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    [data-hero-slider] * { transition: none !important; }
  }

  /* On devices without hover (touch), suppress desktop-only hover lifts */
  @media (hover: none) {
    article:hover,
    [class*="hover\\:-translate"]:hover,
    [class*="hover\\:shadow"]:hover {
      transform: none !important;
      box-shadow: inherit !important;
    }
  }

  /* -------------------------------------------------------------------------
   * 13a. Higher contrast for secondary text & borders — WCAG AA on white
   *      Tailwind defaults:
   *        text-neutral-500 = #737373 (4.83:1 on #fff — borderline)
   *        text-neutral-400 = #a3a3a3 (fails AA for body)
   *      On mobile we darken them a step so labels stay readable.
   * ---------------------------------------------------------------------- */
  .text-neutral-500 { color: #525252; }
  .text-neutral-400 { color: #595959; }

  /* Keep stat-card numeric value in full brand contrast */
  .rounded-2xl .text-brand { color: #c9071a; }

  /* Stronger neutral-200 borders so card edges don't wash out */
  .border-slate-200 { border-color: #d1d5db; }

  /* -------------------------------------------------------------------------
   * 13b. Tap targets — WCAG 2.5.5 (AAA) — 48×48 for primary controls
   *      Exceptions: inline prose links, hero slider dots, filter pills
   *      (all still ≥24px for WCAG 2.5.8 and generous padding around them).
   * ---------------------------------------------------------------------- */
  a[class*="px-"][class*="py-"],
  button[class*="px-"][class*="py-"],
  [role="button"] {
    min-height: 48px;
  }

  /* Inline prose links — keep compact but readable (underlined) */
  p a, li a, dd a, span a {
    min-height: 0 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-skip-ink: auto;
  }

  /* Icon-only buttons (e.g., hero prev/next, scroll-top) */
  button[aria-label]:not([class*="w-full"]),
  a[aria-label]:not([class*="w-full"]) {
    min-width: 48px;
    min-height: 48px;
  }

  /* Hero slider prev/next — boost from 40→48 for accessibility */
  [data-hero-prev],
  [data-hero-next] {
    width: 48px;
    height: 48px;
  }

  /* Hero dots — keep compact pill but give generous 24px hit area */
  [data-hero-dot] {
    min-width: 32px;
    min-height: 32px;
    padding: 10px 0;
    background-clip: content-box !important;
  }

  /* Cards gain a subtle focus ring when any child is focused */
  article:focus-within {
    box-shadow: 0 0 0 3px rgba(11, 61, 195, 0.35);
  }

  /* -------------------------------------------------------------------------
   * 13c. Current-page indicator (aria-current="page")
   *      Keep it subtle: just bold weight. Color must NOT be forced — the
   *      nav link itself may already be on a dark/branded background.
   * ---------------------------------------------------------------------- */
  [aria-current="page"] { font-weight: 700; }

  /* -------------------------------------------------------------------------
   * 13d. Form validation / error cues — visible without relying on color
   * ---------------------------------------------------------------------- */
  input[aria-invalid="true"],
  textarea[aria-invalid="true"],
  select[aria-invalid="true"] {
    border-color: #b42318 !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18) !important;
    background-image:
      radial-gradient(circle at 1rem 50%, #b42318 3px, transparent 4px);
    background-repeat: no-repeat;
    padding-left: 2.25rem !important;
  }

  /* Required-field marker gains contrast */
  label [aria-hidden="true"],
  .text-brand:where(label *) {
    color: #c9071a;
    font-weight: 700;
  }

  /* -------------------------------------------------------------------------
   * 13e. Windows High-Contrast / Forced Colors
   * ---------------------------------------------------------------------- */
  @media (forced-colors: active) {
    a, button, [role="button"] {
      forced-color-adjust: none;
      border: 1px solid ButtonText;
      color: ButtonText;
      background: ButtonFace;
    }
    .bg-brand,
    button[type="submit"],
    a[class*="bg-brand"] {
      background: Highlight !important;
      color: HighlightText !important;
      border-color: HighlightText !important;
    }
    :focus-visible {
      outline: 3px solid Highlight !important;
      outline-offset: 2px !important;
      box-shadow: none !important;
    }
  }

  /* -------------------------------------------------------------------------
   * 13f. prefers-contrast: more — bump body/link contrast further
   * ---------------------------------------------------------------------- */
  @media (prefers-contrast: more) {
    body { color: #000; }
    .text-neutral-600,
    .text-neutral-500,
    .text-neutral-400 { color: #0b1221 !important; }
    .border, [class*="border-slate-"], [class*="border-neutral-"] {
      border-color: #0b1221 !important;
    }
    p a, li a, dd a { text-decoration-thickness: 2px; }
  }

  /* -------------------------------------------------------------------------
   * 14. Hide visual-only decor on mobile to save space
   * ---------------------------------------------------------------------- */
  [aria-hidden="true"].pointer-events-none.absolute.inset-0 {
    opacity: 0.5;
  }

  /* -------------------------------------------------------------------------
   * 15. Sticky CTA / back-to-top spacing from bottom (iOS safe area)
   * ---------------------------------------------------------------------- */
  .fixed.bottom-4,
  .fixed.bottom-6 {
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ----------------------------------------------------------------------------
 * Very small screens (<=380px) — extra tightening
 * ------------------------------------------------------------------------- */
@media (max-width: 380px) {
  h1 { font-size: 1.625rem; }
  .text-2xl { font-size: 1.375rem; }

  section .grid .rounded-2xl .text-2xl,
  section .grid .rounded-2xl .text-3xl {
    font-size: 1.25rem;
  }

  .mx-auto.max-w-screen-xl,
  .max-w-screen-xl {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}