/* ============================================================
   Mobile & tablet responsiveness — overrides inline JSX styles.
   Most visitors are on mobile.
   ============================================================ */

html, body { overflow-x: hidden; max-width: 100vw; }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- HAMBURGER BUTTON (default: hidden on desktop) ---------- */
.site-nav-hamburger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.site-nav-hamburger span {
  position: absolute;
  left: 9px; right: 9px;
  height: 2px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform .2s ease, opacity .15s ease;
}
.site-nav-hamburger span:nth-child(1) { top: 12px; }
.site-nav-hamburger span:nth-child(2) { top: 18px; }
.site-nav-hamburger span:nth-child(3) { top: 24px; }

/* Mobile menu panel — populated by React when menu is open */
.site-nav-mobile-panel {
  display: none;
  border-top: 1px solid var(--line);
  padding: 14px 20px 20px;
  background: var(--bg-2);
}
.site-nav-mobile-panel a {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 4px;
  font-size: 15px;
  color: var(--fg);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.site-nav-mobile-panel a:last-child {
  border-bottom: 0;
  margin-top: 10px;
}
.site-nav-mobile-panel a.btn-primary {
  background: var(--accent);
  color: #001319;
  border: 0;
  border-radius: 10px;
  padding: 14px 20px;
  font-weight: 600;
}

/* ---------- TABLET BREAKPOINT (≤ 980px) ---------- */
@media (max-width: 980px) {
  .container { padding: 0 20px !important; max-width: 100% !important; }

  /* Collapse any 2+ column inline grid to one column */
  [style*="gridTemplateColumns"],
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer link grid — keep 2 cols on tablet */
  footer [style*="gridTemplateColumns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  section { padding-top: 64px !important; padding-bottom: 64px !important; }
  aside { position: static !important; margin-top: 32px !important; width: 100% !important; }
  [class*="PhoneFrame"] { margin: 0 auto !important; }
}

/* ---------- MOBILE BREAKPOINT (≤ 820px) ---------- */
@media (max-width: 900px) {
  .container { padding: 0 16px !important; }

  /* === NAVIGATION: hamburger mode === */
  .site-nav-row { padding: 12px 16px !important; }

  /* Hide the inline desktop nav links and download CTA in the bar */
  .site-nav-links { display: none !important; }
  .site-nav-cta { display: none !important; }

  /* Show hamburger */
  .site-nav-hamburger { display: inline-flex !important; align-items: center; justify-content: center; }

  /* Show the panel container when React mounts it (the [menuOpen && ...] guard) */
  .site-nav-mobile-panel { display: block; }

  /* The left side now only has the logo */
  .site-nav-left { gap: 0 !important; }

  /* Right side: just language + hamburger */
  .site-nav-right { gap: 8px !important; }

  /* === TYPOGRAPHY === */
  h1, .display {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
  }
  h2 { font-size: clamp(24px, 7vw, 36px) !important; line-height: 1.1 !important; }
  h3 { font-size: clamp(18px, 5vw, 22px) !important; }
  p { font-size: 15px !important; line-height: 1.6 !important; }
  .eyebrow { font-size: 10px !important; padding: 5px 9px !important; }

  /* === BUTTONS === */
  .btn { padding: 12px 18px !important; font-size: 13px !important; }
  [style*="display:\"inline-flex\""][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* === SECTIONS / SPACING === */
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding:\"140px"],
  [style*="padding:\"120px"],
  [style*="padding:\"100px"],
  [style*="padding: 140px"],
  [style*="padding: 120px"],
  [style*="padding: 100px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* === HERO === */
  section [style*="grid"][style*="repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* === PHONE MOCKUPS === */
  [class*="PhoneFrame"] {
    transform: scale(0.78);
    transform-origin: top center;
    margin: 0 auto !important;
  }
  [style*="display:\"flex\""][style*="alignItems:\"end\""] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* === CARDS / GRIDS === */
  .adapter-card .illus { aspect-ratio: 16/10 !important; }

  /* Footer */
  footer [style*="gridTemplateColumns"],
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  footer { padding: 40px 0 28px !important; }
  footer .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  footer .container > div:last-child {
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
  }

  /* Filter chips */
  .filter-chip { padding: 7px 12px !important; font-size: 11px !important; }

  /* Language dropdown — clamp width and position */
  nav [role="listbox"] {
    right: 0 !important;
    min-width: 160px !important;
    max-width: calc(100vw - 32px);
  }

  /* Blog post tables */
  table { display: block !important; overflow-x: auto !important; white-space: nowrap; }
}

/* ---------- SMALL PHONE BREAKPOINT (≤ 420px) ---------- */
@media (max-width: 420px) {
  .container { padding: 0 12px !important; }
  h1, .display { font-size: clamp(26px, 9vw, 38px) !important; }
  .btn { padding: 11px 14px !important; font-size: 12px !important; gap: 6px !important; }

  /* Tighter language dropdown trigger */
  nav [aria-haspopup="listbox"] {
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  /* Hide the full language name in trigger, keep the 2-letter code */
  nav [aria-haspopup="listbox"] span:nth-of-type(2) { display: none; }

  [class*="PhoneFrame"] { transform: scale(0.7); margin-top: -20px !important; }
}

/* ---------- BLOG & ADMIN — mobile rules ---------- */
@media (max-width: 900px) {
  /* Blog featured card → tek kolon */
  .blog-featured-card { grid-template-columns: 1fr !important; }

  /* Blog detay grid (içerik + sidebar) → tek kolon */
  .blog-post-grid { grid-template-columns: 1fr !important; gap: 32px !important; max-width: 100% !important; }

  /* Blog kart grid mobil için tek kolon (zaten auto-fill ama açıkça) */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* Admin shell bar */
  .admin-shell-bar { padding: 12px 16px !important; gap: 10px !important; }
  .admin-shell-bar > div:last-child { margin-left: auto; }

  /* Admin edit: meta panel inline akar */
  .admin-edit-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .admin-edit-meta > div { position: static !important; }

  /* Admin posts list satırı */
  .admin-post-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .admin-post-row > div:nth-child(2) { /* lang badges */
    overflow-x: auto;
    flex-wrap: nowrap !important;
  }

  /* Dil sekmeleri — yatay scroll */
  .admin-lang-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .admin-lang-tabs button { flex-shrink: 0; }
}

@media (max-width: 420px) {
  .blog-featured-card { border-radius: 12px !important; }
  .blog-featured-card > div:nth-child(2) { padding: 28px 22px !important; }
  .admin-shell-bar { padding: 10px 12px !important; }
  .admin-shell-bar > a span { display: none; } /* "ObdCmsSys" yazısını gizle, sadece logo */
}

/* ---------- TOUCH-DEVICE TWEAKS ---------- */
@media (hover: none) and (pointer: coarse) {
  a, button { -webkit-tap-highlight-color: rgba(255,106,46,0.15); }
  .btn, .filter-chip, nav a { min-height: 40px; }
  /* Admin form input'ları yeterince büyük olsun */
  input, select, textarea, button { min-height: 38px; }
}