/* site-ui-s31.css (31.10, package S): site-wide UI components. Always on, linked from ChromeA11y.Head after the other sheets. Text content is not touched. */
/* ===== S (31.10) BEGIN: site-wide UI components, package S (S1 container, S3 text base). Own block; appended at the end. Text content is not touched. ===== */
/* S1 one container: the site-wide .container{max-width:1428px !important} (StyleSheet.css) let inner pages run edge to edge (content left edge 10 px at 1440) while the home page used 1344 px / 24 px side gap.
   Inner pages and the home page now share one box (1200 px, 24 px gap from 768 px, 16 px below; Cowork-S decision 06:45: one value for the whole site). The home page keeps its own rule block in anasayfa-r8.css (same 1200 px value). The Sala feature pages (.sl-ozl) have their own 1200 px rule. Header and footer are outside (outside .site-content / .site-main).
   */
html body main .container:not(.sl-ozl .container, .err404-h330) {
    max-width: 1200px !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    html body main .container:not(.sl-ozl .container, .err404-h330) { padding-left: 24px; padding-right: 24px; }
}
/* S1 reading column: long running text keeps 75 characters and sits on the container left edge. */
html body .pcrm-page :is(.pcrm-prose, .pcrm-table-note) { max-width: 75ch; }
html body .pcrm-page .pcrm-table-wrap + .pcrm-table-note { max-width: none; }
/* S3 text base: footnotes, sources and small print never go under 13 px; running text in cards 15 px, dark grey. */
html body :is(.site-content, .site-main) :is(.pn-footnote, .tk-not, .hcalc-disclaimer, .hcalc-kdv, .hcalc-sub-note, .kar-dz-yasal, .pcrm-table-note, figcaption, small, .kar-src) { font-size: max(13px, .8125rem); line-height: 1.55; }
html body :is(.site-content, .site-main) .text-muted:not(.small, small) { color: #4b5563 !important; }
html body .pcrm-page :is(.pcrm-card, .ozl-card, .kl-card, .ozl-box) :is(p, li) { font-size: max(15px, .9375rem); line-height: 1.6; color: #374151; }
/* S3 long centred paragraphs: left aligned, 75 characters (running text of the content pages). */
html body .pcrm-page :is(.pcrm-table-note, .pcrm-problem-block p, .pcrm-prose p) { text-align: left; }
/* ===== S (31.10) S2/S4 BEGIN: one CTA band, one heading rule ===== */
/* S2 one CTA band ("RE-OS'u Yakindan Taniyin" and the Yapay Zeka closing band): site teal / navy gradient, no dark inner box (the old chip behind the lead text), two buttons of the same height (48 px minimum),
   primary filled white, secondary outlined. The gradient ends at the 4.7:1 teal of the existing primary button, so the white lead text keeps its contrast without the chip. */
html body .pcrm-cta { background: linear-gradient(135deg, #064a97 0%, #0e7f91 100%); }
html body .pcrm-cta p { background: none; padding: 0; margin: 0 auto 28px; max-width: 640px; color: #fff; border-radius: 0; }
html body .pcrm-page .pcrm-cta .pcrm-cta-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 14px; }
html body .pcrm-cta .pcrm-cta-btns > a { box-sizing: border-box; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border-radius: 10px; font-weight: 600; line-height: 1.25; }
html body .pcrm-cta .pcrm-cta-btns > .pcrm-btn-primary { background: #fff; color: #064a97 !important; border: 2px solid #fff; }
html body .pcrm-cta .pcrm-cta-btns > .pcrm-store-btn { background: transparent; color: #fff !important; border: 2px solid #fff; }
html body .pcrm-cta .pcrm-cta-btns > .pcrm-store-btn:hover { background: rgba(255, 255, 255, .14); box-shadow: none; }
@media (max-width: 575px) {
    html body .pcrm-page .pcrm-cta .pcrm-cta-btns { flex-direction: column; align-items: stretch; }
    html body .pcrm-cta .pcrm-cta-btns > a { width: 100%; }
}
html body .ai-ovf-fix > section.bg-primary.text-white.text-center { background: linear-gradient(135deg, #064a97 0%, #0e7f91 100%) !important; }
html body .ai-ovf-fix > section.bg-primary.text-white.text-center .lead { color: #fff !important; max-width: 640px; margin-left: auto; margin-right: auto; }
html body .ai-ovf-fix > section.bg-primary.text-white.text-center .btn { min-height: 48px; color: #064a97 !important; }
/* S4 headings: balanced lines, no line break inside the product name, room under the fixed header on phones. */
html body :is(.site-content, .site-main, .pcrm-page):not(.home-akis) :is(h1, h2, h3) { text-wrap: balance; }
html body :is(.site-content, .site-main, .pcrm-page) :is(h1, h2, h3) { hyphens: manual; overflow-wrap: break-word; }
html body .pcrm-section:has(.pcrm-prose) :is(.pcrm-h2, .pcrm-h2-sub) { text-align: left; margin-left: 0; margin-right: 0; max-width: 75ch; }
@media (max-width: 767px) {
    html body .breadcrumb-img.background-overlay .container { padding-top: 24px; }
}
/* ===== S (31.10) S2/S4 END ===== */
/* ===== S (31.10) S5/S6 BEGIN: card grids, related chips ===== */
/* S5 grid orphans: the column count follows the number of cards (4+3, 3+2, 3+3, 4+4 ...) and a short last row is centred instead of left stuck; cards of a row are equally high and their link sits on the card bottom.
   Scope: /entegrasyonlar logo grids, .pcrm-cards, the Ozellikler hub cards (not the .ozl-hub block, it has its own rule). Phones: one column; tablets: two. */
html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *) { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; --sg: 20px; --sc: 3; gap: var(--sg); max-width: 1152px; }
html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *) > * { box-sizing: border-box; min-width: 0; flex: 0 0 calc((100% - (var(--sc) - 1) * var(--sg)) / var(--sc)); }
html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(4):last-child), html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(7):last-child), html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(8):last-child), html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(10):last-child), html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(12):last-child) { --sc: 4; }
html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(2):last-child) { --sc: 2; }
html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(1):last-child) { --sc: 1; max-width: 640px; }
html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(10):last-child) { --sc: 5; }
html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *):has(> :nth-child(12):last-child) { --sc: 4; }
@media (max-width: 1199.98px) { html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *) { --sc: 2 !important; } }
@media (max-width: 639.98px) { html body :is(.eg-grid, .pcrm-cards, .ozl-cards):not(.ozl-hub *) { --sc: 1 !important; } }
html body :is(.pcrm-cards, .ozl-cards):not(.ozl-hub *) > :is(.pcrm-card, .ozl-card) { display: flex; flex-direction: column; }
html body :is(.pcrm-cards, .ozl-cards):not(.ozl-hub *) > :is(.pcrm-card, .ozl-card) > :is(a, .ozl-card-link, .pcrm-card-link):last-child { margin-top: auto; }
/* S6 related pages: one quiet block (the H2 is shown at H3 size), chips at least 44 px high, two columns on phones. */
html body .pcrm-h2:has(+ .pcrm-related) { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); margin-bottom: 16px; }
html body .pcrm-section:has(> .container > .pcrm-related) { padding-top: 40px; padding-bottom: 40px; }
html body .pcrm-related a { box-sizing: border-box; min-height: 44px; }
@media (max-width: 575.98px) {
    html body .pcrm-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html body .pcrm-related a { justify-content: center; text-align: center; padding: 10px 12px; font-size: 14px; line-height: 1.3; }
}
/* ===== S (31.10) S5/S6 END ===== */
/* ===== S (31.10) S7/S8 BEGIN: one accordion, phone tables ===== */
/* S7 one accordion (/sss): the open panel takes the height of its text instead of 900 px (it overlapped the next question and hid its links on the dark card),
   cards and category headings share the container width (the 99 vw boxes were wider than the page column and clipped the left letters on phones). */
html body .faq-list-modern { width: 100%; align-items: stretch; }
html body .faq-list-modern :is(.faq-card-modern, .faq-cat-r10) { width: 100%; max-width: 100%; box-sizing: border-box; align-self: stretch; }
html body .faq-answer-modern.open { max-height: none; overflow: visible; }
html body .faq-answer-modern a { color: #064a97; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
    html body .faq-question-modern { padding: 14px 16px; font-size: 1.05rem; }
    html body .faq-answer-modern.open { padding: 18px 16px 22px; font-size: 1.05rem; }
}
/* S8 tables on phones: the table box scrolls sideways and its first column stays in view. */
@media (max-width: 767.98px) {
    html body .pcrm-page :is(.pcrm-table-wrap, .prf-table-wrap) { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    html body .pcrm-page :is(.pcrm-table-wrap, .prf-table-wrap) table :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #e3eaf3; }
    html body .pcrm-page :is(.pcrm-table-wrap, .prf-table-wrap) thead th:first-child { background: #f5f9ff; z-index: 2; }
}
/* ===== S (31.10) S7/S8 END ===== */
/* ===== S (31.10) END ===== */

/* ===== S (31.10) S1b BEGIN: one left edge inside the pages ===== */
/* Reading columns and card lists that were centred in their own 894 / 1100 px boxes start on the container left edge; running text keeps 75 characters. */
html body .pcrm-page :is(.pcrm-prose, .prf-cards, .ozl-boxes, .ozl-hub-all, .prf-table-wrap, .pcrm-problem-block) { margin-left: 0; margin-right: 0; }
html body .prf-page :is(.prf-cards, .ozl-boxes, .ozl-hub-all, .prf-table-wrap) { max-width: none; }
html body .pcrm-page .pcrm-prose { max-width: 75ch; }
html body .sl-ozl .container { padding-left: 24px !important; padding-right: 24px !important; }
/* /sss intro block sits directly in the page (no container): same box and left edge as the cards below, left aligned (five lines of text). */
html body .site-content > .heading:has(> .heading-desc) { box-sizing: border-box; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; text-align: left; }
html body .site-content > .heading:has(> .heading-desc) .heading-desc { max-width: 75ch; margin-left: 0 !important; margin-right: 0 !important; }
@media (min-width: 768px) { html body .site-content > .heading:has(> .heading-desc) { padding-left: 24px; padding-right: 24px; } }
html body .faq-section-modern .row > .col-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
html body .faq-card-modern > .faq-cta-r12 { background: #f7fafd; padding-top: 4px; }
/* ===== S (31.10) S1b END ===== */

/* ===== S (31.10) S4/S3x BEGIN: product name in headings, long centred paragraphs ===== */
/* S4 the product name in visible h1-h3 is wrapped server side (BrandNoBreakS4 post-render pass); the characters stay "RE-OS", only the line break inside it is forbidden. */
html body .nb { white-space: nowrap; }
/* S3x long running text that was centred (more than 260 characters): left aligned, 75 characters. Short CTA / slogan lines stay centred. */
html body :is(.site-content, .site-main, .pcrm-page) :is(.pcrm-intro-lead, .eg-lead, .tk-giris, .hcalc-disclaimer) { text-align: left; }
html body :is(.site-content, .site-main, .pcrm-page) :is(.eg-lead, .tk-giris, .hcalc-disclaimer) { max-width: 75ch; margin-left: auto; margin-right: auto; }
html body :is(.site-content, .site-main) .text-center.mb-5:has(> #fiyat-tahmini-h) > p.text-muted.mb-0 { text-align: left; max-width: 75ch; margin-left: auto; margin-right: auto; }
html body .pcrm-section-alt > .container > :is(.pcrm-h2, .pcrm-h2-sub) { text-align: left; max-width: 75ch; margin-left: 0; margin-right: 0; }
/* ===== S (31.10) S4/S3x END ===== */

/* ===== U-A (31.10) UI-13 BEGIN: calculator field errors (aria-invalid + short message) ===== */
html body .pcrm-field-err { color: #b42318; font-size: 13px; margin-top: 4px; }
html body .pcrm-field-err:not([hidden]) { display: block; }
html body .pcrm-calc-form [aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 1px #b42318; }
/* ===== U-A (31.10) UI-13 END ===== */

/* ===== V14-29 (01.11) BEGIN: type tokens (UI-08, decision E): H1, section heading, card heading, sub heading, body ===== */
/* Only definitions here; no page is restyled by this block. Values are the most common ones measured on the live templates on 01.11 (390 and 1440 px):
   --type-h1 is the banner title of the content pages (56 px, 30 px on phones); --type-h1-page is the 44 px title the pages with an intro hook use (site-ui-p31.css);
   --type-h2 is the .pcrm-h2 section heading (38 / 30 px); --type-h3 is the card title (1.05rem); --type-sub is the secondary section heading (24 px, 22 px below 768 px);
   --type-body is running text (16 px). Each size has a -lh line-height twin. Phones below 768 px get the first values, 768 px and up the second. */
html body :is(.site-content, .site-main, .pcrm-page, main) {
    --type-h1: 30px;
    --type-h1-lh: 1.2;
    --type-h1-page: 30px;
    --type-h1-page-lh: 1.2;
    --type-h2: 30px;
    --type-h2-lh: 1.2;
    --type-h3: 1.05rem;
    --type-h3-lh: 1.35;
    --type-sub: 22px;
    --type-sub-lh: 1.3;
    --type-body: 16px;
    --type-body-lh: 1.6;
}
@media (min-width: 768px) {
    html body :is(.site-content, .site-main, .pcrm-page, main) {
        --type-h1: 56px;
        --type-h1-lh: 1.25;
        --type-h1-page: 44px;
        --type-h1-page-lh: 1.2;
        --type-h2: 38px;
        --type-h2-lh: 1.2;
        --type-sub: 24px;
    }
}
/* ===== V14-29 (01.11) END ===== */

/* ===== V14-29 (01.11) BEGIN: type tokens applied to the secondary section heading of the /karsilastirma pages ===== */
/* Same role, different values: .kar-h2 was 24 px (21 px below 577 px), .kar-dz-h2 22 px. From 577 px both follow --type-sub (24 px from 768 px, 22 px between 577 and 767 px).
   Largest change: +9.1 % (.kar-dz-h2 from 768 px) and -8.3 % (.kar-h2 between 577 and 767 px). Phones below 577 px keep their rules (a 22 px .kar-h2 wraps one line more at 390 px). Text is not touched. */
@media (min-width: 577px) {
    html body .kar-h2, html body .kar-dz-h2 { font-size: var(--type-sub, 24px); line-height: var(--type-sub-lh, 1.3); }
}
/* ===== V14-29 (01.11) END ===== */
/* ===== V14-41 (01.11) BEGIN: phone tables (< 768 px): the sticky first header cell is light (#f5f9ff) but carries the white header text from an inline color:white on the th (about 1.1:1, "Ozellik" unreadable on /telefon-crm-entegrasyonu; !important is needed to beat that inline style). Dark navy text on the same light cell (about 16:1). Only that one header cell; the dark header cells keep white text. ===== */
@media (max-width: 767.98px) {
    html body .pcrm-page .pcrm-table-wrap table.pcrm-table thead th:first-child { color: #021c3a !important; }
}
/* ===== V14-41 END ===== */
/* ===== V45 (01.11) BEGIN: RISK-02 competitor source lines: full address as plain text under the source label; long addresses wrap instead of widening the table ===== */
html body .pcrm-page .kar-src-url { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.4; color: var(--pcrm-muted, #4a5b70); overflow-wrap: anywhere; word-break: break-word; }
/* ===== V45 END ===== */