/* ============================================================
   SITE-WIDE MOBILE RESPONSIVE OVERRIDE LAYER
   Shared, additive, mobile-only layer for all 13 active pages.
   Every rule in this file is scoped inside a max-width media query
   (or is a universal safe primitive with no visual effect above
   that width) — nothing here changes desktop rendering.
   Do NOT delete/rewrite page content to fix a problem from here;
   this file only adjusts layout/sizing for small viewports.
   Linked once, near </head>, on: index, hakkimizda, chatboss,
   temeluzmanailesi, akilliuzmansistemi, aipin, bilgekaan,
   bilge-ops, gokkaan, pence, predy, spoty, geolm.
   ============================================================ */

/* ---- 1. Universal safe primitives (mobile-scoped) ---- */
@media (max-width: 760px) {
  /* Common flex/grid two-up rows used across product pages sometimes lack
     min-width:0 on their children, which stops long headings/labels from
     shrinking below their intrinsic width and causes the row to overflow. */
  .ap-video-inner > *, .gk-cta-card > *, .footer-top > * { min-width: 0; }

  /* Images/SVGs dropped at a fixed intrinsic size never got a mobile cap. */
  img, svg, video, canvas { max-width: 100%; }

  /* Long inline TR/EN copy occasionally lacks a wrap fallback. */
  h1, h2, h3, h4, p, li, blockquote { overflow-wrap: break-word; }
}

/* ---- 2. Shared header / mobile menu / ChatBoss sheet ----
   These markup blocks and classes are identical across all 13 pages
   (shared Header component), so the fix belongs here once, not per page. */
@media (max-width: 1100px) {
  /* Close / menu-toggle controls sized under the ~44px touch-target floor.
     Width/height (not min-width/min-height) because the base rule sets an
     explicit fixed box; the icon glyph inside keeps its own size (centered
     via flex), so only the tappable box grows, not the visible icon. */
  .menu-close, .cb-mobile-close, .mpn-arrow-left, .mpn-arrow-right, .demo-modal-close {
    width: 44px; height: 44px;
  }
  /* Safe-area padding so the fixed header/menu never sits under a notch. */
  nav { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .cb-mobile-sheet { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ---- 3. Shared contact modal ---- */
@media (max-width: 640px) {
  /* Modal must never exceed the viewport height; it should scroll internally
     instead of clipping the submit button or success state off-screen. */
  .cf-modal { max-height: 92vh; overflow-y: auto; }
  .cf-close { min-width: 44px; min-height: 44px; }
  /* iOS auto-zoom guard: only raises fields that were set below 16px. */
  .cf-field input, .cf-field select, .cf-field textarea { font-size: max(16px, 1em); }
  /* .cf-form is a fixed 2-column grid (grid-template-columns: 1fr 1fr) with no
     mobile override anywhere in the shared source -- on real phone widths a
     longer EN label ("Company / Organization") wraps to 2 lines while its
     grid-stretched neighbor doesn't, leaving the row visually cramped/merged.
     Single column removes the constraint entirely. */
  .cf-form { grid-template-columns: 1fr !important; }
}

/* ---- 4. Shared multi-column blocks used across the product-family pages
   (news grid, platform/tech-stack logo grid, capability stat row) ---- */
@media (max-width: 900px) {
  .news-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}
@media (max-width: 640px) {
  .ap-plat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .gk-cap2-row.top { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ---- 4b. Shared "Detaylı Bilgi İçin İletişime Geçin" / contact CTA button ----
   Base per-page rule sets width:100%, height:58px, font-size:17px at 600px --
   full-bleed + that height/font reads oversized against the rest of the
   mobile type scale. Scale it down to match other mobile buttons/controls. */
@media (max-width: 600px) {
  .btn-product-contact {
    width: auto !important;
    max-width: 100%;
    height: 48px !important;
    padding: 0 22px !important;
    font-size: 14.5px !important;
    margin-top: 20px !important;
    gap: 8px !important;
  }
  .btn-product-contact svg { width: 14px !important; height: 14px !important; }
}

/* ============================================================
   PAGE-SCOPED OVERRIDES
   Each block is scoped to that page's own unique root/section id so
   nothing here can leak into another page.
   ============================================================ */

/* ---- INDEX ---- */

/* ---- HAKKIMIZDA ---- */

/* ---- CHATBOSS ---- */
@media (max-width: 900px) {
  /* Right-side scrolling sector ticker crowds/overlaps the hero copy once the
     two-column grid collapses on mobile -- drop it and center the remaining
     title/copy/buttons/stat column instead. */
  #cbSektorHeroMount { display: none !important; }
  #hero > div[style*="grid-template-columns"] { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; }
  #cbHeroTitle, #cbHeroTitle span { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  #hero p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  #hero > div[style*="grid-template-columns"] > div > div[style*="flex-wrap"] { justify-content: center !important; }
  #hero > div[style*="grid-template-columns"] > div > div[style*="grid-template-columns: repeat(4"] { margin-left: auto !important; margin-right: auto !important; max-width: 560px; }
  #hero > div[style*="grid-template-columns"] > div > div[style*="grid-template-columns: repeat(4"] div[style*="width: fit-content"] { margin-left: auto !important; margin-right: auto !important; }
  /* "Beş Uzman Ailesi" 5-card grid: side-by-side columns squeeze to unusable
     slivers on phones -- stack them full-width instead. */
  #mimari div[style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr !important; }
  /* Kurumsal Güvence 4-item strip (Veri Güvenliği / Rol Bazlı Erişim / SSO /
     Ölçeklenebilir Mimari): 4 content + 3 vertical-divider columns squeeze
     unreadably narrow on phones -- stack the items and turn the 1px-wide
     vertical dividers into full-width horizontal rules. */
  #guvence div[style*="grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  #guvence div[style*="grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr"] > div[style*="width: 1px"] {
    width: 100% !important; height: 1px !important; margin: 8px 0 !important;
  }
}

/* ---- TEMEL UZMAN AİLESİ (temeluzmanailesi.html) ---- */

/* ---- AKILLI UZMAN SİSTEMİ (akilliuzmansistemi.html) ---- */

/* ---- AIPIN ---- */

/* ---- BİLGEKAAN ---- */

/* ---- BİLGEKAAN OPS ---- */
@media (max-width: 760px) {
  .hps-pipe { grid-template-columns: 1fr !important; gap: 20px !important; }
}

/* ---- GÖKKAAN ---- */
@media (max-width: 760px) {
  /* Hero photo (9504x6336, landscape) center-crops on narrow/tall mobile
     viewports so the drone subject sits low in frame, leaving plain sky
     visible as dead space above it. Shift the crop down and scale up
     slightly so the subject fills the frame instead of empty sky. */
  #hero-bg { object-position: 50% 78%; transform: scale(1.22); transform-origin: center 78%; }
}

/* ---- PENÇE ---- */
@media (max-width: 920px) {
  /* .pf-stage grid columns (38px spine + 1fr content) lack min-width:0 on the
     content column, so the SVG frame and long copy text can force the row
     wider than the viewport instead of shrinking into the available track. */
  .pf-stage { min-width: 0; }
  .pf-viz, .pf-copy { min-width: 0; }
  .pf-frame { max-width: 100%; }
}
@media (max-width: 900px) {
  /* .pf-title ("Detection to Response<br>Uninterrupted Defense") carries a
     hard text-wrap:nowrap with a 34px font-size floor -- on phone widths
     neither half fits on one line at 34px, so the text overflows off the
     right edge of the section and visually collides with the paragraph and
     the step animations below it. Let each <br>-separated half wrap like a
     normal heading and scale the font down to an actual mobile size. */
  .pence-page .pf-title { text-wrap: balance !important; font-size: clamp(28px, 7.5vw, 44px) !important; }
}

/* ---- PREDY ---- */
@media (max-width: 760px) {
  .j3pins { grid-template-columns: 1fr !important; gap: 18px !important; }
  .scq-track { grid-template-columns: 1fr !important; }
  .scc-kpis { grid-template-columns: 1fr !important; gap: 14px !important; }
}
@media (max-width: 640px) {
  /* .predy-cap-title ("Manage the Entire Forecasting Process / on a Single
     Platform") forces each <br>-separated half onto one nowrap line, sized
     from a flat 44px-floor clamp meant for desktop. On real phone widths
     44px is far too large for either half to fit on one line, so the text
     overflows past the right edge of its container instead of wrapping.
     Lift the nowrap constraint so each half can wrap like every other
     heading on the page, and scale the font down to an actual mobile size. */
  .predy-page .predy-cap-title { font-size: clamp(24px, 8vw, 38px) !important; text-wrap: balance !important; }
  .predy-page .predy-cap-title .tt-fume,
  .predy-page .predy-cap-title .tt-mor { white-space: normal !important; }
  /* Defensive width safety for the two-column intro block collapsing to a
     single column — guarantees the paragraph text always uses the full
     available width rather than any leftover desktop max-width. */
  .ap-video-text, .ap-video-desc { max-width: 100% !important; }
}

/* ---- SPOTY ---- */


/* ---- TEKNOLOJİ UZMANLARI (teknolojiuzmanlari.html) ----
   Fixed-px mock-diagram scenes inside the cap-panel bodies (data flow icons,
   equalizer bars, SQL query blocks, knowledge-graph nodes) are plain divs/SVGs
   sized in px, not percentages -- max-width:100% caps them to their shrunk
   mobile column instead of overflowing it. */
@media (max-width: 900px) {
  .tux-page .g22, .tux-page .g4d { padding: 28px 18px; }
  .tux-page .g17, .tux-page .g3o, .tux-page .g5s { padding: 22px; }
}
@media (max-width: 760px) {
  .tux-page .g23, .tux-page .g2a, .tux-page .g2h, .tux-page .g2m, .tux-page .g2s,
  .tux-page .g2y, .tux-page .g4e, .tux-page .g4t, .tux-page .g4z, .tux-page .g50,
  .tux-page .g54, .tux-page .g63, .tux-page .g6a, .tux-page .g6h, .tux-page .g5t {
    max-width: 100%;
  }
  /* Hero quick-nav cards (gp) and intro/cap grids already reflow via
     auto-fit/minmax -- only the hero title's line-height needs a touch more
     room at the smallest phone widths so descenders on "Uzmanları" don't
     crowd the badge above it. */
  .tux-page .gc { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
  /* .g11 (bolutleme/sql intro split) and .g5o (bilgi-agi intro split) use
     auto-fit minmax(340px,1fr)/minmax(300px,1fr) -- on real narrow phones
     (320-390px) that minimum column width is wider than the viewport itself
     even at a single column, forcing horizontal overflow. Drop the minimum
     to 0 so the single column truly fills the available width. */
  .tux-page .g11, .tux-page .g5o { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 420px) {
  /* .go/.g6s (long CTA button text) use white-space:nowrap -- on the
     narrowest phones the button box can outgrow the viewport since it isn't
     width-constrained. Let these two wrap and center instead of forcing a
     single long line. */
  .tux-page .go, .tux-page .g6s { white-space: normal; text-align: center; }
}
@media (max-width: 760px) {
  /* Every "Nasıl Çalışır?" (How It Works) 5-step flow on this page (.g32/.g33)
     is a wrapping flex row that reflows into an uneven 2-3-per-row grid on
     phones -- stack all 5 steps top to bottom instead, and rotate the "→"
     connector (.g37) to point down between them. */
  .tux-page .g32 { flex-direction: column; align-items: stretch; }
  .tux-page .g33 { flex: none; max-width: none; }
  .tux-page .g37, .tux-page .g5c { transform: rotate(90deg); padding: 0; align-self: center; }
}



/* ---- GEOLM ---- */