@import url("/assets/ibm-plex.css?v=20260916-1");

/* Shared UX, accessibility and responsive guardrails for every route. */
:root {
  --cm-ink: #173f84;
  --cm-deep: #0e2f6d;
  --cm-cyan: #2db6db;
  --cm-pink: #cb4398;
  --cm-cream: #faeade;
  --cm-paper: #f4f8fc;
  --cm-line: #c8d6e9;
  --cm-focus: #075fe8;
  --cm-font-body: "IBM Plex Sans", "Noto Sans", system-ui, sans-serif;
  --cm-font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", "Noto Sans", system-ui, sans-serif;
  --cm-font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "IBM Plex Sans", sans-serif;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

html[lang^="ar"] {
  direction: rtl;
}

body {
  color: var(--cm-ink);
  background: #fff;
  text-rendering: optimizeLegibility;
  font-family: var(--cm-font-body) !important;
  font-synthesis: none;
}

:where(button, input, select, textarea) {
  font-family: var(--cm-font-body) !important;
}

:where(.font-paragraph, .cm-site-header, .cm-site-header *, .cm-site-footer, .cm-site-footer *, .cm-contact-rail, .cm-contact-rail *, .cm-consent, .cm-consent *, .cm-qf, .cm-qf *, .ad-page, .ad-page *) {
  font-family: var(--cm-font-body) !important;
}

:where(h1, h2, h3, h4, h5, h6),
.font-sans,
.font-display,
.cm-qf :where(h1, h2, h3),
.ad-page :where(h1, h2, h3) {
  font-family: var(--cm-font-display) !important;
}

html:is([lang="ru"], [lang="ru-RU"], [lang="kk"], [lang="kk-KZ"]) :where(h1, h2, h3, h4, h5, h6),
html:is([lang="ru"], [lang="ru-RU"], [lang="kk"], [lang="kk-KZ"]) :where(.font-sans, .font-display) {
  font-family: var(--cm-font-body) !important;
}

html[lang^="ar"] body,
html[lang^="ar"] :where(h1, h2, h3, h4, h5, h6, button, input, select, textarea, .font-sans, .font-display, .font-paragraph) {
  font-family: var(--cm-font-arabic) !important;
  letter-spacing: normal !important;
}

/* Readable initial content while the interactive application loads, and when
   scripts are unavailable. Removed with the root's first React render. */
.cm-initial-content {
  max-width: 1120px;
  margin-inline: auto;
  padding: 100px 24px 96px;
  font-family: var(--cm-font-body);
  color: var(--cm-ink);
  background: #fff;
}
.cm-initial-content h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 24px; }
.cm-initial-content h2 { font-size: 1.6rem; margin-block: 32px 16px; }
.cm-initial-content h3 { font-size: 1.25rem; margin-block: 24px 12px; }
.cm-initial-content p { max-width: 72ch; margin-bottom: 16px; line-height: 1.65; }
.cm-initial-content a { text-decoration: underline; text-underline-offset: 3px; }
.cm-initial-content li { margin-block: 10px; }

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--cm-focus);
  outline-offset: 3px;
}

/* The condensed display face needs a little breathing room for dotted
   Turkish, Cyrillic and Arabic glyphs. Keep body copy comfortably readable. */
:where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

:where(p, li, label, legend, summary, input, select, textarea) {
  line-height: 1.42;
}

html[lang^="ar"] :where(h1, h2, h3, h4, h5, h6),
html[lang^="kk"] :where(h1, h2, h3, h4, h5, h6),
html[lang^="ru"] :where(h1, h2, h3, h4, h5, h6),
html[lang^="sr"] :where(h1, h2, h3, h4, h5, h6),
html[lang^="az"] :where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.14;
  letter-spacing: normal;
}

/* Trust coverflow headlines are intentionally oversized, but must remain in
   their own flow row instead of painting over cards or adjacent glyphs. */
.trust-reveal-section[data-trust-coverflow="true"] .trust-primary-message,
.trust-reveal-section[data-trust-coverflow="true"] .trust-support-message {
  line-height: 1.06 !important;
  padding-block: .06em .1em;
  overflow: visible !important;
  text-wrap: balance;
}

.trust-reveal-section[data-trust-coverflow="true"] .trust-text-scroll h2 {
  line-height: 1.08 !important;
  padding-block: .06em;
}

/* Keep the form compact on large screens and let every question share one
   readable alignment rail. */
.cm-qf {
  --ink: var(--cm-ink);
  --cyan: var(--cm-cyan);
  --pink: var(--cm-pink);
}

.cm-qf__frame {
  width: min(1120px, calc(100% - 2rem)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

.cm-qf__section,
.cm-qf__details {
  min-width: 0;
}

.cm-qf__section-head,
.cm-qf__section-head h3,
.cm-qf__section-head p,
.cm-qf legend {
  text-align: center;
}

.cm-qf__section-head h3 {
  line-height: 1.12 !important;
  padding-block: .04em;
}

.cm-qf__field > span,
.cm-qf__upload > span,
.cm-qf legend {
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

.cm-qf__field input,
.cm-qf__field textarea,
.cm-qf__field select {
  min-width: 0;
  max-width: 100%;
}

.cm-qf__radios label,
.cm-qf__radios span {
  min-width: 0;
}

.cm-qf__radios span {
  line-height: 1.28 !important;
  overflow-wrap: anywhere;
}

.cm-qf__details > summary {
  min-width: 0;
}

.cm-qf__details > summary .cm-qf__section-head {
  min-width: 0;
}

.cm-qf__details > summary .cm-qf__section-head p {
  line-height: 1.25 !important;
}

.cm-qf[aria-hidden="true"],
.cm-qf[inert] {
  pointer-events: none;
}

.cm-qf[inert] :where(input, select, textarea, button, a) {
  pointer-events: none;
}

.cm-qf__conditional[hidden],
.cm-qf__address[hidden] {
  display: none !important;
}

.cm-qf__consents {
  gap: 1rem;
}

.cm-qf__consents label {
  min-width: 0;
  line-height: 1.45 !important;
}

.cm-qf__consents label span {
  overflow-wrap: anywhere;
}

/* Floating contact actions retain the organic cream/blue transition while
   maintaining a real gutter between icons and labels at narrow widths. */
.cm-contact-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.cm-contact-rail a {
  min-width: 0;
  padding-inline: clamp(8px, 3vw, 44px) !important;
}

.cm-contact-rail__icon {
  flex: 0 0 auto;
}

.cm-contact-rail__label {
  min-width: 0;
  line-height: 1.16 !important;
  text-align: center;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.cm-contact-rail__whatsapp {
  margin-inline-start: 1px;
}

/* Product and blog cards keep copy in a separate layer from imagery. */
.products-section .service-card,
.products-section .micro-service-card,
.cm-blog-showcase__grid > a {
  min-width: 0;
  overflow: hidden;
}

.products-section .service-card :where(h2, h3, p),
.products-section .micro-service-card :where(h2, h3, p),
.cm-blog-showcase__grid > a :where(h2, h3, p, span) {
  position: relative;
  z-index: 2;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .cm-qf__frame {
    width: 100% !important;
  }

  .cm-qf__section-head h3 {
    line-height: 1.16 !important;
  }

  .cm-qf__radios span {
    min-height: 3.2rem !important;
  }

  .cm-contact-rail a {
    gap: 7px !important;
    padding-inline: 6px !important;
  }
}

@media (max-width: 360px) {
  .cm-contact-rail a {
    gap: 4px !important;
    padding-inline: 3px !important;
  }

  .cm-contact-rail__label {
    font-size: .68rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Quality-section actions must remain legible on the navy process surface. */
/* Consistent editorial scale and spacing across the homepage. */
.process-quality-section .process-quality-inner,
.products-section .services-inner {
  width: min(1240px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
}
.process-quality-section {
  color: #fff !important;
  padding-block: clamp(56px, 7vw, 104px) !important;
  background: #123a81 !important;
  box-shadow: none !important;
}
/* The navy surface is used on mobile too: foreground rules must not be
   restricted to the desktop-presence media query. */
.process-quality-section .process-quality-heading,
.process-quality-section .process-quality-heading h2,
.process-quality-section .process-quality-copy,
.process-quality-section .process-quality-copy p,
.process-quality-section .process-quality-flow,
.process-quality-section .process-quality-flow article,
.process-quality-section .process-quality-flow :is(h3, p, strong) {
  color: #fff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}
.process-quality-section .process-quality-copy {
  gap: 24px !important;
}
.process-quality-section .process-quality-copy p {
  font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
}
.process-quality-section .process-quality-heading {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
  gap: 24px 48px !important;
  align-items: center !important;
}
.process-quality-section .process-quality-heading > p { display: none; }
.process-quality-section .process-quality-heading h2 {
  font-size: clamp(2.4rem, 4.4vw, 4.8rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em !important;
}
.process-quality-section .process-quality-heading > span {
  max-width: 48ch !important;
  color: #e6effc !important;
  line-height: 1.65 !important;
  border: 0 !important;
  padding: 0 !important;
}
.process-quality-copy p,
.process-quality-flow article p { line-height: 1.65 !important; }
.process-quality-section .process-quality-flow article {
  box-shadow: none !important;
  padding: clamp(20px, 3vw, 36px) !important;
}
.process-quality-flow h3 { line-height: 1.2 !important; }
.process-quality-ctas { gap: 24px !important; }
.process-quality-ctas > a { padding: 28px !important; }
.process-quality-ctas strong { line-height: 1.18 !important; }
.process-quality-ctas em { line-height: 1.6 !important; }
.sample-cta h2,
.video-contact-cta h2 {
  font-size: clamp(2rem, 4vw, 4rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
}
.sample-cta-actions { flex-wrap: wrap; gap: 12px !important; }
.sample-cta-actions > a { min-height: 48px; }
.video-contact-cta-section > .video-contact-cta {
  border-width: 1px !important;
  box-shadow: none !important;
  padding: clamp(24px, 4vw, 56px) !important;
}
.video-contact-cta-section > .cm-form-launcher {
  width: min(1040px, calc(100% - 40px)) !important;
  padding: clamp(24px, 4vw, 40px) !important;
  border: 1px solid var(--cm-ink) !important;
  box-shadow: none !important;
  background: var(--cm-cream) !important;
}
.cm-form-launcher::after { display: none !important; }
.cm-form-launcher span {
  font-size: clamp(1.5rem, 3vw, 2.6rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
}
.cm-form-launcher small { line-height: 1.55 !important; color: var(--cm-ink) !important; }
.cm-qf { max-width: 1040px !important; margin-inline: auto !important; }
.cm-qf__hero h2 { font-size: clamp(2rem, 4vw, 3.5rem) !important; line-height: 1.18 !important; }
.cm-qf__section-head h3 { font-size: clamp(1.5rem, 2.5vw, 2.2rem) !important; line-height: 1.22 !important; }
.cm-qf input:not([type="radio"]):not([type="checkbox"]),
.cm-qf select { min-height: 48px; }
.cm-blog-showcase { background: #f4f8fc !important; }
.cm-blog-showcase > header { border-bottom-width: 1px !important; }
.cm-blog-showcase header h2 { font-size: clamp(2rem, 4vw, 3.75rem) !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }
.cm-blog-showcase header p { color: var(--cm-ink) !important; }
.cm-blog-showcase__grid { gap: 0 24px; }
.cm-blog-showcase__grid > a { background: transparent; border-inline: 0 !important; padding: 28px 8px !important; }
.cm-blog-showcase__grid h3 { line-height: 1.3 !important; }
.cm-blog-showcase__grid > a:hover { background: #e4edf8 !important; color: var(--cm-ink) !important; }
.cm-blog-showcase__grid > a:hover em { color: var(--cm-ink) !important; }
.cm-home-faq-host { background: #fff !important; padding-block: 56px 80px !important; }
.cm-home-faq-host > .contact-faq { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.contact-faq-list summary { padding-block: 24px !important; gap: 20px; }
.contact-faq-list summary span { font-size: clamp(1.25rem, 2vw, 1.9rem) !important; line-height: 1.3 !important; }
.contact-faq-list details > p { max-width: 72ch; line-height: 1.65 !important; padding-bottom: 24px; }

/* Home hierarchy: lead with the sample action, keep the products, close with trust. */
.products-section .services-heading,
.products-section .micro-services-copy {
  display: none !important;
}

.products-section .services-inner[data-cm-home-layout="ready"] > .sample-cta {
  margin-top: 0 !important;
  margin-bottom: clamp(2.5rem, 5vw, 5rem) !important;
}

.products-section .services-inner[data-cm-home-layout="ready"] > .certificate-cta {
  margin-top: clamp(2.5rem, 5vw, 5rem) !important;
  margin-bottom: 0 !important;
}

/* Center the complete FAQ block without displacing the disclosure controls. */
.cm-home-faq-host .contact-faq,
.cm-home-faq-host .contact-faq-heading,
.cm-home-faq-host .contact-faq-heading > div,
.cm-home-faq-host .contact-faq-heading :is(p,h2),
.cm-home-faq-host .contact-faq-list,
.cm-home-faq-host .contact-faq-list details > p {
  margin-inline: auto !important;
  text-align: center !important;
}

.cm-home-faq-host .contact-faq-heading > div {
  max-width: 46rem !important;
}

.cm-home-faq-host .contact-faq-list summary {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 76px;
  padding-inline: clamp(2.5rem, 7vw, 5rem) !important;
}

.cm-home-faq-host .contact-faq-list summary > span {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  text-align: center !important;
  text-wrap: balance;
}

.cm-home-faq-host .contact-faq-list summary > strong {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Identity hero: stable Turkish casing and balanced display typography. */
body[data-cm-route="/kimligimiz"] main > section:first-of-type > div > div:first-child > p:first-child {
  max-width: 48ch !important;
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  padding: 0.45rem 0.7rem !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(53, 185, 213, 0.55);
  color: #123f86 !important;
  box-shadow: 0 8px 24px rgba(9, 43, 92, 0.12);
  font-size: clamp(0.875rem, 1.2vw, 1rem) !important;
  line-height: 1.45 !important;
  letter-spacing: clamp(0.08em, 0.35vw, 0.18em) !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body[data-cm-route="/kimligimiz"] main > section:first-of-type h1 {
  max-width: 14ch !important;
  padding: 0.16em 0.22em 0.2em !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #123f86 !important;
  box-shadow: 0 12px 32px rgba(9, 43, 92, 0.14);
  font-size: clamp(3rem, 9vw, 6rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body[data-cm-route="/kimligimiz"] main > section:first-of-type h1 > span {
  display: block;
}

body[data-cm-route="/kimligimiz"] main > section:first-of-type .cm-identity-copy {
  color: #fff8ef !important;
  font-weight: 600 !important;
  line-height: 1.58 !important;
  letter-spacing: 0.005em !important;
  text-shadow:
    0 1px 2px rgba(5, 30, 72, 0.98),
    0 3px 12px rgba(5, 30, 72, 0.9),
    0 8px 24px rgba(5, 30, 72, 0.62) !important;
}

/* Certificates index: the section label follows the document list on wide
   screens, then releases naturally when the section ends. */
@media (min-width: 761px) {
  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(2) > div > div:first-child {
    position: sticky;
    top: 7.75rem;
    align-self: start;
  }
}

@media (max-width: 760px) {
  /* Certificates: center card content, metadata chips and document actions. */
  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(2) > div {
    text-align: center !important;
  }

  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(2) article {
    padding-inline: 0 !important;
    border-inline-start: 0 !important;
  }

  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(2) article > p,
  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(2) article h3,
  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(2) article article {
    text-align: center !important;
  }

  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(2) article .flex {
    justify-content: center !important;
  }

  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(2) article a {
    width: min(100%, 34rem);
    margin-inline: auto !important;
  }

  /* Certificates contact panel: keep the copy and both actions on one axis. */
  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(5) > div > div {
    justify-items: center !important;
    text-align: center !important;
  }

  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(5) :where(.flex, [class*="flex-wrap"]) {
    justify-content: center !important;
  }

  body[data-cm-route="/sertifikalar"] main > section:nth-of-type(5) a {
    justify-content: center !important;
  }

  body[data-cm-route="/"] .hero-container .hero-content {
    box-sizing: border-box;
    justify-content: center !important;
    align-items: center !important;
    padding: calc(88px + env(safe-area-inset-top)) clamp(1.25rem, 6vw, 2rem) calc(76px + env(safe-area-inset-bottom)) !important;
    text-align: center !important;
  }

  body[data-cm-route="/"] .hero-container .hero-content :where(.hero-title-mask, .hero-text-scroll, .hero-copy) {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route="/"] .hero-container .hero-content .hero-copy {
    padding-inline: 0 !important;
    font-size: clamp(1.05rem, 3.2vw, 1.2rem) !important;
    line-height: 1.5 !important;
    text-wrap: balance;
  }

  body[data-cm-route="/"] .hero-container .hero-content .hero-title {
    font-size: clamp(2.4rem, 8.6vw, 3.55rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
  }

  body[data-cm-route="/"] .hero-container .hero-content .hero-subtitle-text {
    font-size: clamp(2.3rem, 8.2vw, 3.4rem) !important;
    line-height: 1.04 !important;
  }

  body[data-cm-route="/"] .hero-container .hero-content .hero-button {
    align-self: center;
    margin-inline: auto;
    font-size: 0.95rem !important;
  }

  body[data-cm-route="/kimligimiz"] main > section:first-of-type > div > div:first-child > p:first-child,
  body[data-cm-route="/kimligimiz"] main > section:first-of-type h1 {
    margin-inline: auto !important;
    text-align: center !important;
  }
}

/* Homepage sample CTA: one focused, premium conversion surface. */
body[data-cm-route="/"] .products-section .sample-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(136, 221, 241, .55) !important;
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 0%, rgba(45, 182, 219, .24), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(203, 67, 152, .2), transparent 36%),
    #0d3472 !important;
  color: #fff !important;
  box-shadow: 0 22px 52px rgba(9, 39, 88, .2) !important;
}

body[data-cm-route="/"] .products-section .sample-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 30%, transparent 72%, rgba(255,255,255,.05));
}

body[data-cm-route="/"] .products-section .sample-cta-copy {
  align-items: center !important;
  text-align: center !important;
}

body[data-cm-route="/"] .products-section .sample-cta-copy p {
  color: #9fe8f7 !important;
}

body[data-cm-route="/"] .products-section .sample-cta-copy h2 {
  max-width: 15ch !important;
  margin-inline: auto !important;
  color: #fff !important;
  font-size: clamp(2.15rem, 6.2vw, 4.2rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
}

body[data-cm-route="/"] .products-section .sample-cta-copy h2::after {
  width: min(18rem, 64%) !important;
  height: 3px !important;
  bottom: -.28em !important;
  filter: none !important;
  opacity: 1 !important;
  background: linear-gradient(90deg, #2db6db, #cb4398) !important;
}

body[data-cm-route="/"] .products-section .sample-cta-actions {
  justify-content: center !important;
  margin-top: clamp(2.25rem, 5vw, 3.5rem) !important;
}

body[data-cm-route="/"] .products-section .sample-cta-actions > a {
  min-width: 150px;
  border-radius: 12px !important;
  border-color: rgba(255,255,255,.72) !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-cm-route="/"] .products-section .sample-cta-actions > a:first-child {
  border-color: #fff !important;
  background: #fff !important;
  color: #173f84 !important;
}

body[data-cm-route="/"] .products-section .sample-cta-actions > a:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.1) !important;
}

body[data-cm-route="/"] .products-section .sample-cta-actions > a:first-child:hover {
  background: #edf7fb !important;
  color: #0d3472 !important;
}

@media (max-width: 760px) {
  body[data-cm-route="/"] .products-section .sample-cta {
    padding: 2rem 1.25rem !important;
  }

  body[data-cm-route="/"] .products-section .sample-cta-actions {
    width: 100%;
  }

  body[data-cm-route="/"] .products-section .sample-cta-actions > a {
    flex: 1 1 150px;
  }
}
.trust-reveal-section[data-trust-coverflow="true"] .trust-primary-message,
.trust-reveal-section[data-trust-coverflow="true"] .trust-support-message {
  font-size: clamp(2.1rem, 5.2vw, 5rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -.02em !important;
  text-shadow: none !important;
}
.cm-tcf-card.is-active { box-shadow: 0 20px 44px rgba(14,44,102,.2) !important; }

/* Keep all four production promises inside the first viewport on wide, short
   screens. The original 8.5rem type scale pushed the final promise below the
   section edge at common 16:5 and laptop viewport ratios. */
@media (min-width: 768px) {
  body[data-cm-route="/"] .production-support-section {
    min-height: auto !important;
    overflow: hidden !important;
  }

  body[data-cm-route="/"] .production-support-section > .container {
    padding-bottom: clamp(4rem, 8vh, 7rem) !important;
  }

  body[data-cm-route="/"] .production-support-section .general-title {
    max-width: calc(100vw - 4rem);
    font-size: clamp(3.75rem, 5vw, 6.4rem) !important;
    line-height: .9 !important;
    letter-spacing: -.035em !important;
  }

  body[data-cm-route="/"] .production-support-section .general-title > div {
    max-width: 100%;
  }

  body[data-cm-route="/"] .production-support-section .general-title h2 {
    padding-block: .04em .09em;
    line-height: .9 !important;
  }

  body[data-cm-route="/"] .production-support-section .factory-video-section {
    margin-top: 0 !important;
    translate: none !important;
  }
}

@media (min-width: 768px) and (max-height: 850px) {
  body[data-cm-route="/"] .production-support-section > .container {
    padding-top: 3rem !important;
    padding-bottom: 3.5rem !important;
  }

  body[data-cm-route="/"] .production-support-section .container > .col-center > .mt-20 {
    margin-top: 2.75rem !important;
  }

  body[data-cm-route="/"] .production-support-section .general-title {
    font-size: clamp(3.5rem, 4.5vw, 5.5rem) !important;
  }
}

@media (max-width: 760px) {
  body[data-cm-route^="/color-masterbatch/"] main section details > summary {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    min-height: 72px !important;
    padding: 18px 48px !important;
    text-align: center !important;
  }

  body[data-cm-route^="/color-masterbatch/"] main section details > summary > :first-child {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route^="/color-masterbatch/"] main section details > summary :is(h3, p, span) {
    margin-inline: auto !important;
    text-align: center !important;
    text-wrap: balance;
  }

  body[data-cm-route^="/color-masterbatch/"] main section details > summary > :last-child {
    position: absolute !important;
    inset-inline-end: 4px !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%);
  }

  body[data-cm-route^="/color-masterbatch/"] main section details > :not(summary) {
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(2) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(2) > a {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 16px 12px !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(2) > a :is(h2, h3) {
    margin-inline: auto !important;
    font-size: clamp(1.08rem, 4.4vw, 1.45rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -.015em !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(2) > a p {
    display: -webkit-box !important;
    margin-inline: auto !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: .86rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(2) > a > :last-child {
    margin-top: auto !important;
    padding-top: 14px !important;
    font-size: .72rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  body[data-cm-route="/uretim-tesisimiz"] main > section:first-of-type > .relative.z-10 > div:first-child {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route="/uretim-tesisimiz"] main > section:first-of-type > .relative.z-10 > div:first-child :is(h1, p, span) {
    margin-inline: auto !important;
    text-align: center !important;
    text-wrap: balance;
  }

  body[data-cm-route="/uretim-tesisimiz"] main > section.bg-white.px-5 > .mx-auto.max-w-7xl {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route="/uretim-tesisimiz"] main > section.bg-white.px-5 > .mx-auto.max-w-7xl :is(h2, h3, p) {
    margin-inline: auto !important;
    text-align: center !important;
    text-wrap: balance;
  }

  body[data-cm-route="/uretim-tesisimiz"] main > section.bg-white.px-5 > .mx-auto.max-w-7xl > div:first-child {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
  }

  body[data-cm-route^="/nedir/"] div.mx-auto.max-w-7xl > div.grid.gap-10:first-of-type > div.font-paragraph.text-lg > div.mt-6.flex {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route^="/nedir/"] div.mx-auto.max-w-7xl > div.grid.gap-10:first-of-type > div.font-paragraph.text-lg > div.mt-6.flex > * {
    display: grid !important;
    place-items: center !important;
    min-height: 40px !important;
    margin: 0 !important;
    text-align: center !important;
  }

  body[data-cm-route^="/nedir/"] div.mx-auto.max-w-7xl > div.grid.gap-10:nth-of-type(2) aside .border-2.p-6 {
    box-sizing: border-box !important;
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route^="/nedir/"] div.mx-auto.max-w-7xl > div.grid.gap-10:nth-of-type(2) aside .border-2.p-6 :is(h2, h3, p) {
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route^="/nedir/"] div.mx-auto.max-w-7xl > div.grid.gap-10:nth-of-type(2) aside .border-2.p-6 .flex.flex-wrap {
    justify-content: center !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  body[data-cm-route^="/nedir/"] div.mx-auto.max-w-7xl > div.grid.gap-10:nth-of-type(2) aside .border-2.p-6 .flex.flex-wrap > * {
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(3) {
    justify-items: center !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(3) > div {
    box-sizing: border-box !important;
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(3) > div :is(h2, p) {
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(3) > div:first-child > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-inline: auto !important;
  }

  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(3) > div:first-child > div:last-child > a {
    display: grid !important;
    place-items: center !important;
    flex: 1 1 190px !important;
    min-height: 56px !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] div.mx-auto.max-w-7xl > section.mt-16.grid details > summary {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    min-height: 132px !important;
    padding: 24px 48px !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] div.mx-auto.max-w-7xl > section.mt-16.grid details > summary > :first-child {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] div.mx-auto.max-w-7xl > section.mt-16.grid details > summary :is(h3, p, span) {
    margin-inline: auto !important;
    text-align: center !important;
  }

  body[data-cm-route="/nedir"] div.mx-auto.max-w-7xl > section.mt-16.grid details > summary > :last-child {
    position: absolute !important;
    inset-inline-end: 4px !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%);
  }

  .cm-balanced-application-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    margin-inline: auto !important;
  }

  .cm-balanced-application-tags > * {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 1 calc((100% - 16px) / 3) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 7px 6px !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  .process-quality-section .process-quality-heading { grid-template-columns: minmax(0,1fr) !important; }
  .process-quality-ctas { grid-template-columns: minmax(0,1fr) !important; }
  .cm-blog-showcase__grid { grid-template-columns: minmax(0,1fr) !important; }
  .video-contact-cta-section > .cm-form-launcher { grid-template-columns: minmax(0,1fr) 44px !important; gap: 12px !important; }
  .cm-form-launcher i { width: 44px !important; height: 44px !important; }
  .cm-home-faq-host { padding-inline: 20px !important; }
}

.process-quality-section .process-quality-ctas > a {
  color: #123a81 !important;
  background: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, .92) !important;
  box-shadow: 0 14px 34px rgba(4, 20, 48, .22) !important;
}

.process-quality-section .process-quality-ctas > a:nth-child(2) {
  background: #f9e9dc !important;
  border-color: #f9e9dc !important;
}

.process-quality-section .process-quality-ctas > a :where(span, strong, em) {
  color: #123a81 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.process-quality-section .process-quality-ctas > a em {
  color: #274f91 !important;
}

.process-quality-section .process-quality-ctas > a:hover,
.process-quality-section .process-quality-ctas > a:focus-visible {
  background: #76def2 !important;
  border-color: #76def2 !important;
}

/* Dark-theme elevated reading surfaces. The article templates reuse the
   light-only #f8fbff utility for topic boxes; remap it after Tailwind so light
   text never lands on a near-white panel. */
html[data-cm-theme="dark"] body.cm-shared-shell main [class*="bg-[#f8fbff]"] {
  background-color: #102b52 !important;
  border-color: #45678f !important;
  color: #eaf3ff !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell main [class*="bg-[#f8fbff]"] [class*="border-[#1A428A]"] {
  border-color: #5f7fa7 !important;
}

/* Quote/sample form: compose every light-only control surface for dark mode. */
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf {
  --ink: #eaf3ff;
  --paper: #071a33;
  background: #071a33 !important;
  color: #eaf3ff !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__frame,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__section {
  border-color: #45678f !important;
  background: #0b2448 !important;
  color: #eaf3ff !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__section > fieldset,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__field,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__consents {
  border-color: #45678f !important;
  background: #102b52 !important;
  color: #eaf3ff !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__section > fieldset > legend {
  border-color: #58779d !important;
  background: #17365f !important;
  color: #f4f8ff !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__radios span {
  border-color: #5f7fa7 !important;
  background: #0a2142 !important;
  color: #eaf3ff !important;
  box-shadow: none !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__radios span::before {
  border-color: #8bcfe2 !important;
  background: #0a2142 !important;
  box-shadow: inset 0 0 0 3px #0a2142 !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__radios input:checked + span {
  border-color: #62d7f0 !important;
  background: #1a428a !important;
  color: #fff !important;
  box-shadow: inset 4px 0 0 #62d7f0 !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__field > span,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__upload > span,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf legend,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__field small,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__upload small,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__note {
  color: #c5d7ec !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__field input,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__field textarea,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__field select {
  border-color: #6685aa !important;
  background: #081d3b !important;
  color: #f4f8ff !important;
}

html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__upload,
html[data-cm-theme="dark"] body.cm-shared-shell .cm-qf__conditional {
  border-color: #4f789f !important;
  background: #0d294f !important;
  color: #eaf3ff !important;
}

/* Blog hub: narrow phones need a reading column, not a compressed two-card
   matrix. Keep the service label and sequence number intact in every locale. */
@media (max-width: 600px) {
  body[data-cm-route="/nedir"] section.min-h-dvh.bg-white > div.mx-auto.max-w-7xl > div.grid.gap-4:nth-of-type(2) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body[data-cm-route="/nedir"] .blog-hub-card {
    min-height: 0 !important;
    padding: 20px 18px !important;
  }

  body[data-cm-route="/nedir"] .blog-hub-card > div:first-child > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 16px !important;
  }

  body[data-cm-route="/nedir"] .blog-hub-card > div:first-child > div:first-child > :is(p, strong) {
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    white-space: nowrap !important;
  }

  body[data-cm-route="/nedir"] .blog-hub-card > div:first-child > div:first-child > strong {
    font-variant-numeric: tabular-nums;
  }
}

/* Prevent sticky hover on touch screens from turning an article card into an
   apparently empty blue block while the visitor scrolls. */
@media (hover: none) {
  html:not([data-cm-theme="dark"]) body[data-cm-route="/nedir"] .blog-hub-card:hover {
    color: #1a428a !important;
    background: linear-gradient(#f8fbff, #f8fbff) padding-box,
      linear-gradient(105deg, #1a428a, #15aeea 36%, #7d4cc2, #e64f9a) border-box !important;
  }
}