/* Shared responsive rules for TR, EN and DE. Loaded after page-specific styles.
   Desktop branding is retained; grids reflow instead of hiding their content.
   !important is limited to existing inline/legacy !important declarations. */

.header-inner > .logo { min-width: 0; }
.lang-selector .lang-btn { border: 0; font-family: inherit; cursor: pointer; }
.nav-dropdown.lang-selector .dropdown-menu { left: auto; right: 0; }
.nav-dropdown.lang-selector.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu-toggle { display: none; }
#main-header.menu-open { background: rgba(5, 8, 14, 0.98); }
.error-page #main-header { background: var(--navy); }
.error-section { padding-top: 128px !important; }
a:focus-visible, button:focus-visible {
  outline: 2px solid #4a9eff;
  outline-offset: 4px;
}
/* Keep the native file control reachable by keyboard without changing the card. */
.file-upload { position: relative; }
.file-upload input[type="file"] {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.file-upload:focus-within { outline: 2px solid #1a6fff; outline-offset: 4px; }
.form-status { color: #b42318; font-size: 0.9rem; margin-top: 12px; }
.contact-form-card .cf-turnstile { width: 300px; min-height: 65px; line-height: 0; }
.form-status:empty { display: none; }
.mega-panel-shared { max-height: calc(100dvh - 115px); overflow: clip; }
/* Animate the outer panel; only its inner track scrolls on short screens.
   This prevents a scrollbar flashing while the panel changes height. */
.mega-panel-shared .mega-panel-track {
  max-height: inherit;
  overflow-y: auto;
  scrollbar-width: none;
}
.mega-panel-shared .mega-panel-track::-webkit-scrollbar { display: none; }
.feature-divider {
  width: 1px;
  height: 40px;
  flex: 0 0 1px;
  background: #39414c;
  transform: translateX(var(--divider-offset, 0px));
}
.production-grid > *, .supply-process-grid > *, .contact-grid > *,
.form-row > *, .quality-intro-grid > *, .quality-pillars > *,
.about-grid > *, .certs-grid > * { min-width: 0; }
.supply-process-grid h4 { overflow-wrap: anywhere; hyphens: auto; }

/* Keep seven navigation entries balanced, with contiguous hover targets. */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  #main-header .header-inner { padding-left: 24px; padding-right: 24px; }
  #main-header #nav-links { gap: 24px; }
  #main-header .mega-group .nav-dropdown.mega { padding: 0 12px; }
  #main-header .mega-group .nav-dropdown.mega:first-child { padding-left: 0; }
  #main-header .mega-group .nav-dropdown.mega:last-child { padding-right: 0; }
  #main-header .nav-dropdown.mega > a { white-space: nowrap; }
}

@media (max-width: 900px) {
  .solutions-hero-grid { gap: 28px; grid-template-columns: 1fr 1fr; }
  .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .collection-heading { align-items: start; flex-direction: column; gap: 12px; }
  .solutions-cta { align-items: start; flex-direction: column; gap: 22px; padding: 26px; }
  .solution-path-copy { padding: 22px; }
}
@media (max-width: 600px) {
  .solutions-intro { padding: 110px 0 32px; }
  .solutions-breadcrumb { margin-bottom: 24px; }
  .solutions-intro h1 { font-size: clamp(1.65rem, 6.3vw, 2.35rem); }
  .solutions-hero-grid, .solution-paths, .solutions-grid { grid-template-columns: minmax(0, 1fr); }
  .solutions-hero-image { max-height: 260px; }
  .solutions-content { padding-top: 28px; padding-bottom: 32px; }
  .solution-card-copy { padding: 20px; }
  .solution-filters { gap: 7px; }
  .solution-filters button { padding: 10px 12px; font-size: .77rem; }
  .solutions-cta { padding: 22px; margin-top: 32px; }
  .solutions-cta .btn { max-width: 100%; white-space: normal; }
  .solution-gallery { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .gallery-shell { padding: 16px; }
  .gallery-header { gap: 12px; }
  .gallery-header h2 { font-size: 1rem; }
  .gallery-stage { height: min(40dvh, 350px); }
  .gallery-thumbnails button { flex-basis: 58px; height: 46px; }
}
@media (max-height: 550px) and (min-width: 601px) {
  .solution-gallery { width: min(900px, calc(100% - 24px)); }
  .gallery-stage { height: 40dvh; }
  .gallery-shell { padding: 16px; }
}

@media (max-width: 1280px) {
  .rau-intro-banner { margin-left: 0; margin-right: 0; }
}

@media (min-width: 1101px) and (max-width: 1280px) {
  .header-inner { padding: 4px 24px; }
  #nav-links { gap: 20px; }
  #nav-links > a { white-space: nowrap; }
  .mega-group .nav-dropdown.mega:first-child { padding-right: 10px; }
  .mega-group .nav-dropdown.mega:last-child { padding-left: 10px; }
}

/* One navigation breakpoint for layout and JS, including large touch tablets. */
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  #main-header { top: 12px; width: calc(100% - 32px); }
  .header-inner { padding: 8px 16px; gap: 12px; }
  #main-header .logo { flex: 0 0 auto; display: inline-flex; }
  #main-header .logo-img { width: 128px; height: auto; }
  #menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    margin-left: auto;
  }
  .header-inner > .lang-selector {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0 !important;
  }
  .lang-selector .lang-btn { min-height: 44px; padding: 8px; }
  .nav-dropdown.lang-selector .dropdown-menu {
    position: absolute;
    margin-top: 4px !important;
    top: 100%;
    left: auto;
    right: 0;
  }
  .lang-selector .dropdown-menu a { min-height: 44px; }
  #nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 16px 20px;
    border-radius: 0 0 12px 12px;
    background: rgba(5, 8, 14, 0.98);
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #nav-links.open { display: flex; }
  #nav-links::-webkit-scrollbar { display: none; }
  #nav-links > a, #nav-links .nav-dropdown.mega > a {
    display: flex;
    align-items: center;
    padding: 12px;
    min-height: 44px;
    font-size: 15px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .mega-group { display: flex; flex-direction: column; align-items: stretch; }
  #nav-links .nav-dropdown.mega {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    width: 100%;
    padding: 0;
  }
  #nav-links .nav-dropdown.mega > a .dropdown-arrow { display: none; }
  .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 44px;
    border: 0;
    border-radius: 6px;
    color: var(--on-dark);
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    font-size: 20px;
  }
  .submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }
  #nav-links .nav-dropdown.mega.open .mega-source {
    display: block !important;
    grid-column: 1 / -1;
    position: static;
    margin: 0;
    min-width: 0;
    padding: 4px;
    background: rgba(255,255,255,0.04);
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  .nav-dropdown.mega .mega-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    gap: 4px;
  }
  .nav-dropdown.mega .mega-grid a { padding: 12px; min-height: 44px; }
  .mega-panel-shared, .mega-overlay { display: none; }
}

@media (max-width: 1100px) {
  h1, h2, h3, h4, p, li, .cert-detail-name, .testing-name {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .container { padding-left: 24px; padding-right: 24px; }
  .hero { min-height: min(100vh, 960px); min-height: min(100svh, 960px); }
  .hero-bg { height: 100%; background-position: 65% center; }
  .hero-inner { max-width: 100%; padding: 128px 0 64px; }
  .hero-slogan { white-space: normal; }
  .hero-slogan span {
    font-size: clamp(2.6rem, 7vw, 5rem) !important;
    overflow-wrap: break-word;
  }
  .hero-features { padding: 24px 0; }
  .hero-features-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: start;
  }
  .hero-features-grid > div:not(.feature-item) { display: none; }
  .feature-item { min-width: 0; gap: 12px; }
  .hero-features .feature-icon img { width: 60px; height: 60px; object-fit: contain; }
  .feature-title { font-size: 0.95rem; white-space: normal; }
  .feature-item > div > span { font-size: 0.875rem !important; }
  .supply-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .supply-process-grid > div:last-child { grid-column: 1 / -1; }
  .supply-process-container { padding: 0 24px !important; }
  .rau-intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rau-intro-banner { margin: 0; padding: 24px 0; }
  .production-grid { gap: 32px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .about-grid { gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-intro-grid { gap: 24px; grid-template-columns: minmax(0, 1fr); }
  .quality-intro { min-height: 0; padding: 40px 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .certs-grid, .testing-section .certs-grid, .lab-equipment-grid,
  .qc-steps, .testing-grid, .machines-grid, .values-grid,
  .stats-grid, .capacity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
  }
  .footer-row > * {
    min-width: 0;
    grid-column: auto !important;
    align-self: start !important;
    justify-self: start !important;
    margin-top: 0 !important;
  }
  .footer-cta h2 span { white-space: normal !important; }
  .footer-about { padding: 0; max-width: 100%; }
  .footer-about .logo { margin-left: 0; max-width: 100%; }
  .footer-about p { max-width: 100%; }
  .footer-logo { width: 250px; height: auto; }
  .footer-social-links { max-width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .footer-contact-info .contact-row p span { overflow-wrap: anywhere; }
  .footer-nav a { padding: 8px 0; }
  .footer-social-link { width: 44px; height: 44px; }
}

@media (max-width: 800px) {
  .production-grid, .about-grid, .quality-intro-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .production-section { padding: 40px 0 !important; }
  .production-visual { height: clamp(220px, 55vw, 420px) !important; }
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; min-width: 0; }
  .contact-form-card { padding: 28px; }
  .kvkk-inner { padding: 28px; overflow-wrap: anywhere; }
  .section-header { flex-direction: column; align-items: flex-start; }
  .step-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 600px) {
  .container { padding-left: 20px; padding-right: 20px; }
  #main-header { top: 8px; width: calc(100% - 24px); }
  .header-inner { gap: 8px; padding: 8px 10px; }
  #main-header .logo-img { width: 112px; }
  .hero-inner { padding: 116px 0 48px; }
  .hero-label { font-size: 0.7rem !important; letter-spacing: 1.2px !important; }
  .hero-slogan span { font-size: clamp(2.4rem, 9.3vw, 3.5rem) !important; line-height: 1.12 !important; }
  .hero-actions { gap: 12px !important; }
  .hero-actions a { min-height: 44px; padding: 12px 16px !important; }
  .hero-features-grid { gap: 24px 16px !important; }
  .feature-item { flex-direction: column; align-items: flex-start !important; gap: 8px; }
  .feature-title { font-size: 0.875rem; }
  .feature-item > div > span { font-size: 0.8125rem !important; }
  .hero-features .feature-icon img { width: 48px; height: 48px; }
  .supply-process-container { padding: 0 20px !important; }
  .supply-process-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .supply-process-grid > div { text-align: left !important; padding: 24px !important; }
  .sector-grid, .rau-intro-grid, .quality-pillars, .certs-grid,
  .testing-section .certs-grid, .lab-equipment-grid, .qc-steps,
  .testing-grid, .machines-grid, .values-grid, .form-row { grid-template-columns: minmax(0, 1fr); }
  .quality-pillars { grid-auto-rows: auto; }
  .sector-card { aspect-ratio: 4 / 3; }
  .rau-intro-text { padding: 0 0 24px; }
  .contact-section { padding: 32px 0; }
  .contact-form-card { padding: 20px; }
  .info-card { padding: 16px; gap: 12px; }
  .info-card-value { overflow-wrap: anywhere; }
  .info-card > div:last-child { min-width: 0; }
  .file-upload { padding: 16px 12px; overflow-wrap: anywhere; }
  .kvkk-inner { padding: 24px 18px; }
  .page-hero h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .footer-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    text-align: center;
    margin-bottom: 28px !important;
  }
  .footer-row > * { justify-self: center !important; }
  .footer-about, .footer-nav { align-items: center; }
  .footer-about p { max-width: 100%; text-align: center; }
  .footer-social-links { justify-content: center; flex-wrap: wrap; }
  .footer-contact-info .contact-row { align-items: center; }
  .footer-contact-info .contact-row p { justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }
  .footer-links { overflow-wrap: anywhere; }
}

/* Turnstile's horizontal widget needs 300px. Share the remaining width between
   the page and card gutters, including both card borders, on narrow phones. */
@media (max-width: 600px) {
  .contact-section > .container {
    padding-left: clamp(0px, calc((100% - 302px) / 4), 20px);
    padding-right: clamp(0px, calc((100% - 302px) / 4), 20px);
  }
  .contact-form-card {
    padding-left: clamp(0px, calc((100% - 302px) / 2), 20px);
    padding-right: clamp(0px, calc((100% - 302px) / 2), 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-animate] { opacity: 1; transform: none; transition: none; }
  .mega-panel-shared, #megaGridContent { transition: none; }
}

@media (hover: none) and (pointer: coarse) {
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; }
}

/* Desktop balance trial: the proportions preferred at 90% browser zoom,
   expressed as layout sizes at normal zoom. Keep compact/touch layouts intact.
   Percentage font sizing respects the visitor's default font preference.
   Do not use CSS zoom, page transforms or viewport scaling here. */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  html { font-size: 90%; }
  .container { max-width: 1116px; padding-left: 14.4px; padding-right: 14.4px; }

  /* The fixed navigation and its separate dropdown must meet at the same edge. */
  #main-header { top: 14.4px; max-width: 1188px; }
  .header-inner { padding: 3.6px clamp(21.6px, 3.75vw, 54px); }
  #main-header .logo-img { height: 67.5px; }
  #nav-links { gap: clamp(18px, 3vw, 36px); }
  #nav-links > a, .nav-dropdown.mega > a, .mega-title { font-size: 13.5px; }
  .mega-panel-shared { top: 89.1px; max-width: 1188px; }
  .mega-grid { padding: 36px 43.2px; gap: 25.2px 36px; }
  .mega-panel-shared .mega-grid a { padding: 14.4px; }

  .hero-inner { max-width: 612px; padding: 144px 0 72px; }
  .hero-label { letter-spacing: 2.7px !important; margin-bottom: 10.8px !important; }
  .hero-actions { gap: 14.4px !important; margin-top: 25.2px !important; }
  .hero-actions a, #sureci-incele-btn { padding: 9px 21.6px !important; }
  .hero-features { padding: 23.4px 0 !important; }
  .hero-features > div { padding: 0 54px !important; }
  .hero-features-grid { gap: 18px !important; }
  .feature-item { gap: 10.8px; }
  /* Live icons are 72px square. Scale both axes equally; a separate height
     cap with a wider fixed width stretches the artwork and spreads the row. */
  .hero-features .feature-icon img {
    width: 64.8px;
    height: 64.8px;
    max-height: none;
    object-fit: contain;
  }

  /* Shared content widths, section rhythm and large imagery. */
  .page-hero { padding: 81px 0 27px; }
  .page-hero h1 { margin-bottom: 12.6px; }
  .page-hero p { max-width: 522px; }
  .supply-process-container { max-width: 1188px !important; padding: 0 36px !important; }
  #surec { padding: 43.2px 0 !important; }
  .supply-process-grid { gap: 14.4px !important; }
  .about-grid, .quality-intro-grid, .contact-grid { gap: 54px; }
  .production-grid { gap: 54px !important; }
  .production-section { padding: 72px 0 !important; }
  .production-visual { height: 378px !important; }
  .about-img { min-height: 342px; }
  .about-img img { height: 342px; }
  .quality-intro { min-height: 513px; }
  .contact-section { padding: 54px 0; }
  .contact-form-card { padding: 36px; }
  .info-card { padding: 18px; gap: 14.4px; margin-bottom: 21.6px; }
  .form-row { gap: 14.4px; }
  .form-group { margin-bottom: 16.2px; }
  .form-group input, .form-group select, .form-group textarea { padding: 10.8px 12.6px; }
  .btn { font-size: 12.6px; padding: 12.6px 25.2px; }
  .form-submit { font-size: 1rem; padding: 13.5px; }

  footer { padding-top: 28.8px; }
  .footer-row { gap: 36px !important; margin-bottom: 36px !important; }
  .footer-logo { height: 63px; width: 219.6px; }
  .footer-contact-info { margin-top: 50.4px !important; }
}