/*
  OTEMATIK SHARED DESIGN SYSTEM — V5
  Reference: approved Turkish/English homepage, 16 October 2026.
  Purpose: typography, tracking, leading and global brand tokens across pages.
  CSS order on every page:
    1) assets/style.css             (approved homepage & shared component base)
    2) assets/category-*.css       (page-specific layouts / illustrations, if any)
    3) assets/design-system.css    (shared typography contract — last)
  Changing a token here updates both the homepage and all category/product pages.
  Keep component-specific 9–12px interface labels inside illustrative mock UIs,
  but never redefine page heading/paragraph/button typography per page.
*/
:root {
  --ot-font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ot-brand-primary: #704be8;
  --ot-text-primary: #171e30;
  --ot-text-muted: #64728e;
  --ot-line-color: #e9edf8;
  --ot-font-base: 16px;
  --ot-leading-base: 1.62;

  /* Final homepage hero typography */
  --ot-display-size: clamp(47px, 5.15vw, 79px);
  --ot-display-weight: 830;
  --ot-display-leading: 1.075;
  --ot-display-tracking: -.042em;

  /* Final homepage section heading typography */
  --ot-section-title-size: clamp(28px, 2.15vw, 38px);
  --ot-section-title-weight: 790;
  --ot-section-title-leading: 1.19;
  --ot-section-title-tracking: -.036em;
  --ot-section-featured-size: clamp(27px, 2.25vw, 39px);

  /* Final homepage larger editorial section roles */
  --ot-feature-heading-size: clamp(31px, 3vw, 46px);
  --ot-feature-heading-weight: 780;
  --ot-feature-heading-leading: 1.15;
  --ot-feature-heading-tracking: -.036em;
  --ot-trust-heading-size: clamp(29px, 2.45vw, 41px);
  --ot-trust-heading-weight: 800;
  --ot-trust-heading-leading: 1.16;
  --ot-trust-heading-tracking: -.036em;
  --ot-faq-heading-size: clamp(29px, 3vw, 43px);
  --ot-faq-heading-weight: 790;
  --ot-faq-heading-leading: 1.15;
  --ot-faq-heading-tracking: -.036em;

  /* Final homepage paragraph and supporting typography */
  --ot-hero-lead-size: 16.5px;
  --ot-hero-lead-leading: 1.74;
  --ot-hero-lead-tracking: -.012em;
  --ot-section-lead-size: 15.5px;
  --ot-section-lead-leading: 1.72;
  --ot-section-lead-tracking: -.008em;
  --ot-eyebrow-size: 11.5px;
  --ot-eyebrow-weight: 800;
  --ot-eyebrow-tracking: .14em;

  /* Final homepage product cards and CTA typography */
  --ot-product-title-size: clamp(20px, 1.6vw, 26px);
  --ot-product-title-weight: 780;
  --ot-product-title-leading: 1.22;
  --ot-product-title-tracking: -.037em;
  --ot-product-description-size: 14.5px;
  --ot-product-description-leading: 1.66;
  --ot-cta-size: 15px;
  --ot-cta-weight: 700;
}

/* The rules below deliberately target the existing homepage AND future pages. */
body { font-family: var(--ot-font-family); font-size: var(--ot-font-base); line-height: var(--ot-leading-base); }
.hero h1,
.sc-page h1,
.ot-display-heading {
  font-size: var(--ot-display-size);
  font-weight: var(--ot-display-weight);
  line-height: var(--ot-display-leading);
  letter-spacing: var(--ot-display-tracking);
}
.section-heading h2,
.sc-page .sc-heading,
.ot-section-heading {
  font-size: var(--ot-section-title-size);
  font-weight: var(--ot-section-title-weight);
  line-height: var(--ot-section-title-leading);
  letter-spacing: var(--ot-section-title-tracking);
}
/* The same prominent editorial heading roles on both page types. */
.service-copy h2,
.sc-page .sc-platform h2,
.ot-feature-heading {
  font-size: var(--ot-feature-heading-size);
  font-weight: var(--ot-feature-heading-weight);
  line-height: var(--ot-feature-heading-leading);
  letter-spacing: var(--ot-feature-heading-tracking);
}
.credibility-copy h2,
.sc-page .sc-proof-copy .sc-heading,
.ot-trust-heading {
  font-size: var(--ot-trust-heading-size);
  font-weight: var(--ot-trust-heading-weight);
  line-height: var(--ot-trust-heading-leading);
  letter-spacing: var(--ot-trust-heading-tracking);
}
.faq-intro h2,
.sc-page .sc-faq .sc-heading,
.ot-faq-heading {
  font-size: var(--ot-faq-heading-size);
  font-weight: var(--ot-faq-heading-weight);
  line-height: var(--ot-faq-heading-leading);
  letter-spacing: var(--ot-faq-heading-tracking);
}
/* The final homepage categories heading uses a slightly larger featured role. */
.categories-section .section-heading h2,
.sc-page .sc-products .sc-heading,
.ot-section-heading-featured { font-size: var(--ot-section-featured-size); }
.hero-description,
.sc-page .sc-hero-desc,
.ot-hero-lead {
  font-size: var(--ot-hero-lead-size);
  line-height: var(--ot-hero-lead-leading);
  letter-spacing: var(--ot-hero-lead-tracking);
}
/* Homepage section intros retain their existing per-section margins/colors. */
.sc-page .sc-heading-lead,
.ot-section-lead {
  font-size: var(--ot-section-lead-size);
  line-height: var(--ot-section-lead-leading);
  letter-spacing: var(--ot-section-lead-tracking);
}
.section-kicker,
.sc-page .sc-eyebrow,
.sc-page .sc-section-tag,
.sc-page .sc-hero-kicker,
.ot-eyebrow {
  font-size: var(--ot-eyebrow-size);
  font-weight: var(--ot-eyebrow-weight);
  letter-spacing: var(--ot-eyebrow-tracking);
}
.product-card h3,
.sc-page .sc-product h3,
.ot-product-heading {
  font-size: var(--ot-product-title-size);
  font-weight: var(--ot-product-title-weight);
  line-height: var(--ot-product-title-leading);
  letter-spacing: var(--ot-product-title-tracking);
}
.sc-page .sc-product-desc,
.ot-product-description {
  font-size: var(--ot-product-description-size);
  line-height: var(--ot-product-description-leading);
  letter-spacing: 0;
}
.sc-page .sc-btn,
.ot-primary-action { font-size: var(--ot-cta-size); font-weight: var(--ot-cta-weight); }

@media (max-width: 1060px) {
  :root { --ot-product-title-size: 20px; }
}
@media (max-width: 770px) {
  :root {
    --ot-display-size: clamp(42px, 7vw, 57px);
    --ot-section-title-size: 28px;
    --ot-product-title-size: 23px;
  }
}
@media (max-width: 540px) {
  :root {
    --ot-product-title-size: 22px;
    --ot-product-description-size: 15px;
    --ot-cta-size: 14px;
    --ot-hero-lead-size: 15px;
    --ot-hero-lead-leading: 1.68;
  }
}
@media (max-width: 495px) {
  :root {
    --ot-display-size: clamp(39px, 10.3vw, 50px);
    --ot-display-leading: 1.1;
    --ot-section-title-size: 25px;
    --ot-section-featured-size: 26px;
  }
}
@media (max-width: 350px) {
  :root { --ot-display-size: 37px; }
}

/* Product micro-labels use the same shared eyebrow, with local spacing only. */
.sc-page .sc-product .sc-eyebrow { margin-bottom: 10px; }



/* ===============================================================
   V5 · PAGE TYPOGRAPHY CONTRACT — single canonical owner
   All customer-visible editorial copy on categories and products
   uses roles derived from the approved home page. The homepage
   appearance is unchanged. Page styles must never redefine types.
   =============================================================== */
:root{
  --ot-type-body:15.5px;
  --ot-type-body-leading:1.72;
  --ot-type-body-tracking:-.008em;
  --ot-type-card:14.5px;
  --ot-type-card-leading:1.66;
  --ot-type-card-tracking:0;
  --ot-type-card-title:var(--ot-product-title-size);
  --ot-type-card-title-leading:var(--ot-product-title-leading);
  --ot-type-card-title-tracking:var(--ot-product-title-tracking);
  --ot-type-card-title-weight:var(--ot-product-title-weight);
  --ot-type-meta:var(--ot-eyebrow-size);
  --ot-type-meta-tracking:var(--ot-eyebrow-tracking);
  --ot-type-link:14px;
  --ot-type-cta:var(--ot-cta-size);
  --ot-type-muted:#64728e;
  --ot-space-section:clamp(62px,4.9vw,79px);
  --ot-space-section-mobile:52px;
  --ot-space-heading:30px;
  --ot-space-card:18px;
}
/* Sections: preserve the homepage density and generous hierarchy. */
.sc-page :is(.sc-section,.sc-products,.sc-scenarios,.sc-setup,.sc-integrations,.sc-proof,.sc-faq){padding-block:var(--ot-space-section)}
.sc-page .sc-related{padding-block:var(--ot-space-section)}
.sc-page :is(.sc-section-intro,.sc-products-top){margin-bottom:var(--ot-space-heading)}
.sc-page :is(.sc-scenario-grid,.sc-setup-grid){margin-top:var(--ot-space-heading)}
.sc-page .reviews-section{padding-block:clamp(66px,5.4vw,97px) var(--ot-space-section)}

/* Editorial role 1: display — exact homepage hero typography. */
.sc-page h1{font-family:var(--ot-font-family);font-size:var(--ot-display-size);font-weight:var(--ot-display-weight);line-height:var(--ot-display-leading);letter-spacing:var(--ot-display-tracking)}
.sc-page .sc-hero-desc{font-size:var(--ot-hero-lead-size);font-weight:400;line-height:var(--ot-hero-lead-leading);letter-spacing:var(--ot-hero-lead-tracking)}

/* Editorial role 2: section title + featured section + large feature + proof + FAQ. */
.sc-page .sc-heading,
.sc-page .sc-related-copy h2,
.sc-page .sc-finale h2{font-size:var(--ot-section-title-size);font-weight:var(--ot-section-title-weight);line-height:var(--ot-section-title-leading);letter-spacing:var(--ot-section-title-tracking)}
.sc-page .sc-products .sc-heading{font-size:var(--ot-section-featured-size)}
.sc-page .sc-proof .sc-heading{font-size:var(--ot-trust-heading-size);font-weight:var(--ot-trust-heading-weight);line-height:var(--ot-trust-heading-leading);letter-spacing:var(--ot-trust-heading-tracking)}
.sc-page .sc-platform h2{font-size:var(--ot-feature-heading-size);font-weight:var(--ot-feature-heading-weight);line-height:var(--ot-feature-heading-leading);letter-spacing:var(--ot-feature-heading-tracking)}
.sc-page .sc-faq .sc-heading{font-size:var(--ot-faq-heading-size);font-weight:var(--ot-faq-heading-weight);line-height:var(--ot-faq-heading-leading);letter-spacing:var(--ot-faq-heading-tracking)}
.sc-page .reviews-heading h2{font-size:clamp(28px,2.55vw,42px);font-weight:800;line-height:1.18;letter-spacing:-.043em}

/* Editorial role 3: introductory paragraph — exact homepage section description. */
.sc-page :is(.sc-heading-lead,.sc-related-copy>p:not(.sc-section-tag),.sc-platform p:not(.sc-eyebrow),.sc-finale p:not(.sc-section-tag)),
.sc-page .reviews-heading p:not(.section-kicker){font-size:var(--ot-type-body);font-weight:400;line-height:var(--ot-type-body-leading);letter-spacing:var(--ot-type-body-tracking)}

/* Editorial role 4: standard product and informational card heading. */
.sc-page :is(.sc-product h3,.sc-scenario h3,.sc-setup-item h3,.sc-problem strong,.sc-decision strong){font-size:var(--ot-type-card-title);font-weight:var(--ot-type-card-title-weight);line-height:var(--ot-type-card-title-leading);letter-spacing:var(--ot-type-card-title-tracking)}
.sc-page :is(.sc-trust-message strong,.sc-proof-project strong,.sc-platform-step strong,.sc-int span){font-size:17px;font-weight:750;line-height:1.35;letter-spacing:-.025em}

/* Editorial role 5: readable content copy — same size as homepage product-card copy. */
.sc-page :where(.sc-product-desc,.sc-problem small,.sc-decision p,.sc-scenario p,.sc-setup-item p,.sc-platform p:not(.sc-eyebrow),.sc-platform-step small,.sc-proof-project small,.sc-trust-message>div>span,.sc-related-copy>p:last-child,.sc-faq details p,.sc-finale p:not(.sc-section-tag),.sc-int-note,.sc-proof-disclaimer,.sc-review-cta>span){font-size:var(--ot-type-card);font-weight:400;line-height:var(--ot-type-card-leading);letter-spacing:var(--ot-type-card-tracking)}
.sc-page .sc-faq details p{font-size:14px;line-height:1.74} /* exact homepage FAQ answer */
.sc-page .sc-review-cta>span{max-width:690px}

/* Editorial role 6: eyebrows, badges, links and primary CTAs. */
.sc-page :is(.sc-eyebrow,.sc-section-tag,.sc-hero-kicker,.sc-scenario-flag,.sc-bar-label,.sc-product-tag){font-size:var(--ot-eyebrow-size);font-weight:var(--ot-eyebrow-weight);line-height:1.62;letter-spacing:var(--ot-eyebrow-tracking)}
.sc-page .sc-product-tag{letter-spacing:.045em}
.sc-page :is(.sc-scenario a,.sc-proof-link,.sc-product-bottom a,.sc-related-links a,.sc-trust-link){font-size:var(--ot-type-link);font-weight:700;line-height:1.5;letter-spacing:0}
.sc-page .sc-btn{font-size:var(--ot-cta-size);font-weight:var(--ot-cta-weight);line-height:var(--ot-leading-base);letter-spacing:0}
.sc-page .sc-channel-tags span{font-size:var(--ot-type-card);font-weight:600;line-height:1.5;letter-spacing:0}
.sc-page .sc-product-chips span{font-size:13px;font-weight:550;line-height:1.45;letter-spacing:0;padding:7px 10px}
.sc-page .sc-product-bottom small{font-size:13px;font-weight:500;line-height:1.5;letter-spacing:0}
.sc-page .sc-hero-notes{font-size:13px;font-weight:400;line-height:1.55;letter-spacing:0}
.sc-page .sc-int span{font-size:15px}
.sc-page .sc-faq summary{font-size:15px;font-weight:720;line-height:1.43;letter-spacing:-.01em}
.sc-page .sc-review-cta>span{font-size:14px;line-height:1.55}
.sc-page .sc-proof-disclaimer{font-size:13px;line-height:1.6}
.sc-page .sc-breadcrumb{font-size:13px;line-height:1.5;letter-spacing:0}
.sc-page .sc-reviews-rating-visual{font-size:27px;font-weight:700;letter-spacing:1.8px}

/* Genuine small text belongs only inside illustrative, miniature software screenshots.
   Those visual mocks are not part of readable page copy and do not share text roles. */
@media(max-width:770px){
  :root{--ot-space-section:58px;--ot-space-heading:24px}
  .sc-page .reviews-heading h2{font-size:30px}
  .sc-page .review-quote{font-size:15px;line-height:1.72;letter-spacing:-.02em}
}
@media(max-width:540px){
  :root{--ot-space-section:var(--ot-space-section-mobile);--ot-space-heading:22px;--ot-type-card:15px;--ot-type-link:14px}
  .sc-page .reviews-heading h2{font-size:28px}
  .sc-page .sc-faq summary{font-size:14.5px}
  .sc-page .sc-faq details p{font-size:13.8px}
  .sc-page .sc-product-visual{height:151px}
}
@media(min-width:771px) and (max-width:1060px){
  .sc-page .review-quote{font-size:14px;line-height:1.72;letter-spacing:-.02em}
}

/* PUBLIC UTILITIES FOR ALL FUTURE CATEGORY & PRODUCT PAGES */
.ot-type-display{font-size:var(--ot-display-size);font-weight:var(--ot-display-weight);line-height:var(--ot-display-leading);letter-spacing:var(--ot-display-tracking)}
.ot-type-section{font-size:var(--ot-section-title-size);font-weight:var(--ot-section-title-weight);line-height:var(--ot-section-title-leading);letter-spacing:var(--ot-section-title-tracking)}
.ot-type-feature{font-size:var(--ot-feature-heading-size);font-weight:var(--ot-feature-heading-weight);line-height:var(--ot-feature-heading-leading);letter-spacing:var(--ot-feature-heading-tracking)}
.ot-type-intro{font-size:var(--ot-type-body);font-weight:400;line-height:var(--ot-type-body-leading);letter-spacing:var(--ot-type-body-tracking)}
.ot-type-card-title{font-size:var(--ot-type-card-title);font-weight:var(--ot-type-card-title-weight);line-height:var(--ot-type-card-title-leading);letter-spacing:var(--ot-type-card-title-tracking)}
.ot-type-card-copy{font-size:var(--ot-type-card);font-weight:400;line-height:var(--ot-type-card-leading);letter-spacing:var(--ot-type-card-tracking)}
.ot-type-eyebrow{font-size:var(--ot-eyebrow-size);font-weight:var(--ot-eyebrow-weight);line-height:1.62;letter-spacing:var(--ot-eyebrow-tracking)}
.ot-type-button{font-size:var(--ot-cta-size);font-weight:var(--ot-cta-weight);line-height:var(--ot-leading-base);letter-spacing:0}
.ot-section-spacing{padding-block:var(--ot-space-section)}

/* ================================================================
   CATEGORY CATALOG — Shared typography rules for every category.
   These roles use the approved homepage sizes; page CSS controls
   placement, colors and visuals only. Never override these type
   roles in category-specific stylesheets.
   ================================================================ */
:root {
  --ot-type-category-count:14px;
  --ot-type-category-small:var(--ot-product-description-size);
  --ot-type-category-small-leading:var(--ot-product-description-leading);
  --ot-type-category-ui-label:var(--ot-eyebrow-size);
}
.sc6-page .sc6-breadcrumb {font-size:13px;line-height:1.5;letter-spacing:0}
.sc6-page .sc6-count {font-size:var(--ot-type-category-count);font-weight:700;line-height:1.5;letter-spacing:0;color:#586988}
.sc6-page .sc6-category-label {font-size:var(--ot-type-category-ui-label);font-weight:var(--ot-eyebrow-weight);line-height:1.5;letter-spacing:.065em;color:#605b7d}
.sc6-page .sc6-reference strong,
.sc6-page .sc6-value-item strong {font-size:17px;font-weight:750;line-height:1.36;letter-spacing:-.025em}
.sc6-page .sc6-reference small,
.sc6-page .sc6-value-item p,
.sc6-page .sc6-empty,
.sc6-page .sc6-search-label {font-size:var(--ot-type-category-small);font-weight:400;line-height:var(--ot-type-category-small-leading);letter-spacing:0}
.sc6-page .sc6-reference small {color:#5a6988}
.sc6-page .sc6-value-item p {color:#596987}
.sc6-page .sc6-tiny-proof {font-size:14px;font-weight:600;line-height:1.5;letter-spacing:0;color:#546583}
.sc6-page .sc6-product-link {font-size:var(--ot-cta-size);font-weight:var(--ot-cta-weight);line-height:1.5;letter-spacing:0}
.sc6-page .sc6-filter {font-size:14px;font-weight:650;letter-spacing:0;line-height:1.5}
.sc6-page .sc6-search-wrap input {font-size:var(--ot-type-body);font-weight:400;letter-spacing:0;line-height:1.5}
.sc-inquiry .sc-inquiry-top h2 {font-size:var(--ot-section-title-size);font-weight:var(--ot-section-title-weight);line-height:var(--ot-section-title-leading);letter-spacing:var(--ot-section-title-tracking)}
.sc-inquiry .sc-inquiry-inner>p {font-size:var(--ot-type-card);line-height:var(--ot-type-card-leading);letter-spacing:0}
.sc-inquiry .sc-inquiry-fields label,
.sc-inquiry .sc-inquiry-actions a,
.sc-inquiry .sc-inquiry-hint {font-size:var(--ot-type-card);line-height:var(--ot-type-card-leading);letter-spacing:0}
.sc6-page .sc6-product h3 {font-size:var(--ot-product-title-size);font-weight:var(--ot-product-title-weight);line-height:var(--ot-product-title-leading);letter-spacing:var(--ot-product-title-tracking)}
.sc6-page .sc6-card-copy p {font-size:var(--ot-product-description-size);font-weight:400;line-height:var(--ot-product-description-leading);letter-spacing:0}
@media(max-width:540px){.sc6-page .sc6-reference small,.sc6-page .sc6-value-item p{font-size:var(--ot-product-description-size)}}