/* /karsilastirma: sourced comparison table. Builds on icerik-sayfa.css (.pcrm-*). */
.kar-table-wrap { max-width: 1120px; }
.kar-table caption {
    caption-side: top; text-align: left; padding: 16px 22px; font-size: 15px; font-weight: 600;
    color: var(--pcrm-dark); background: #fff; border-bottom: 1px solid var(--pcrm-border);
}
.kar-table thead th { color: #fff; }
.kar-table th[scope="row"] {
    padding: 16px 22px; text-align: left; vertical-align: top; font-size: 15px; font-weight: 700;
    color: var(--pcrm-dark); border-bottom: 1px solid var(--pcrm-border); white-space: nowrap;
}
.kar-table tbody tr:last-child th[scope="row"] { border-bottom: none; }
.kar-table td { min-width: 120px; }
.kar-table td[data-label="Bilgi"] { min-width: 320px; color: var(--pcrm-text); }
.kar-table td[data-label="Kaynak"] { min-width: 150px; }
.kar-table td[data-label="Tarih"] { white-space: nowrap; color: var(--pcrm-muted); }
.kar-table td a { overflow-wrap: anywhere; }
.kar-table tbody tr:nth-child(even) th[scope="row"] { background: #fafcff; }

.kar-h2 { font-size: 24px; font-weight: 700; color: var(--pcrm-dark); margin: 36px 0 12px; line-height: 1.3; }
.kar-h2:first-child { margin-top: 0; }
.kar-sources { margin: 0 0 18px; padding-left: 20px; }
.kar-sources li { margin: 6px 0; overflow-wrap: anywhere; }
.kar-sources a { color: var(--pcrm-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 576px) {
    .kar-table caption { display: block; padding: 14px 16px; font-size: 14px; }
    .kar-table, .kar-table tbody, .kar-table tr, .kar-table td, .kar-table th[scope="row"] { display: block; width: 100%; }
    .kar-table th[scope="row"] { padding: 4px 0 0; border: none; white-space: normal; font-size: 16px; }
    .kar-table td, .kar-table td[data-label="Bilgi"], .kar-table td[data-label="Kaynak"] { min-width: 0; }
    .kar-table tbody tr:nth-child(even) th[scope="row"] { background: transparent; }
    .kar-table td[data-label="Konu"] { font-weight: 600; color: var(--pcrm-dark); }
    .kar-h2 { font-size: 21px; }
    /* Seo:ComparisonA11y: the visually hidden header row takes no space in the card layout, so DOM order = visual reading order. */
    .kar-a11y .kar-table thead, .kar-a11y .kar-table thead tr, .kar-a11y .kar-table thead th { display: block; position: static; width: auto; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
}

/* QA 27.10: tablets (577-991 px) got a 950 px table in a 690 px scroll box with the Kaynak column cut off and no hint. The sourced text
   tables use the same row-card layout as phones here (labels from data-label, as icerik-sayfa.css does up to 576 px). */
@media (min-width: 577px) and (max-width: 991px) {
    .kar-table.pcrm-table--text { min-width: 0; }
    .kar-table.pcrm-table--text thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .kar-table caption { display: block; padding: 14px 18px; }
    .kar-table, .kar-table tbody, .kar-table tr, .kar-table td, .kar-table th[scope="row"] { display: block; width: 100%; }
    .kar-table tr { padding: 16px 20px; border-bottom: 1px solid var(--pcrm-border); }
    .kar-table tbody tr:last-child { border-bottom: none; }
    .kar-table td, .kar-table td[data-label="Bilgi"], .kar-table td[data-label="Kaynak"] { min-width: 0; padding: 4px 0; border: none; font-size: 15px; }
    .kar-table th[scope="row"] { padding: 0 0 6px; border: none; white-space: normal; font-size: 16px; }
    .kar-table tbody tr:nth-child(even) th[scope="row"] { background: transparent; }
    .kar-table td[data-label="Konu"] { font-weight: 600; color: var(--pcrm-dark); }
    .kar-table.pcrm-table--text td:first-child { white-space: normal; }
    .kar-table.pcrm-table--text td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 14px; font-weight: 600;
        letter-spacing: .02em; text-transform: uppercase; color: var(--pcrm-primary); margin-bottom: 2px; }
    .kar-a11y .kar-table thead, .kar-a11y .kar-table thead tr, .kar-a11y .kar-table thead th { display: block; position: static; width: auto; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }
}

/* X-LNK: visible breadcrumb (Seo:ComparisonLinks) */
.kar-breadcrumb { margin: 16px 0 0; font-size: 14px; }
.kar-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.kar-breadcrumb li + li::before { content: "/"; margin-right: 8px; color: #6b7280; }
.kar-breadcrumb a { text-decoration: underline; }
/* H-275: decision table + FAQ block (Seo:ComparisonDecisionH275) */
.kar-decision .kar-table-wrap + .pcrm-h2 { margin-top: 40px; }
.kar-decision .kar-sss h3 { font-size: 1.125rem; margin: 20px 0 6px; }
.kar-decision .kar-verified { margin-top: 24px; }
.kar-decision .kar-intro { margin: 0 0 20px; }

/* Date statement under the page heading (shown only while Seo:ComparisonData is on): same column as the intro prose below it (72ch at 17px = about 79ch at 15px). */
.kar-date-statement { max-width: 79.2ch; text-align: left; margin: 0 auto 14px; font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--pcrm-muted); }

/* G4: grouped "where RE-OS stands out" block */
.kar-g4-serit { max-width: 1120px; margin: 0 auto 14px; font-size: 16px; line-height: 1.6; color: var(--pcrm-muted); }
.kar-g4-serit strong { color: inherit; }
.kar-g4-grup { max-width: 1120px; margin: 0 auto 14px; }
.kar-g4-grup > summary { cursor: pointer; list-style: none; padding: 6px 0; }
.kar-g4-grup > summary::-webkit-details-marker { display: none; }
.kar-g4-h3 { display: inline; margin: 0; font-size: 20px; line-height: 1.4; }
.kar-g4-grup > summary:focus-visible { outline: 3px solid var(--pcrm-primary); outline-offset: 2px; }
.kar-g4-table td p { margin: 0 0 8px; }
.kar-g4-table td p:last-child { margin-bottom: 0; }

/* G4 (30.10 UI fix): own table, no horizontal scroll. >=1024 px: fixed layout (topic 26 %, RE-OS 22 %, rivals share the rest);
   below 1024 px the same markup turns into one card per row (topic, RE-OS value highlighted, rivals as a two-column "Name: status" list). */
.kar-g4 { --kar-g4-top: 112px; }
.kar-g4-grup--hub, .kar-g4-grup--hub .kar-g4-wrap { max-width: 1280px; }
.kar-g4-wrap { max-width: 1120px; margin: 0 auto; background: #fff; border: 1px solid var(--pcrm-border); border-radius: 16px; box-shadow: 0 10px 30px rgba(2,32,65,.08); overflow: clip; }
.kar-g4-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kar-g4-table caption { caption-side: top; text-align: left; padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--pcrm-dark); background: #fff; border-bottom: 1px solid var(--pcrm-border); }
.kar-g4-table thead th { position: sticky; top: var(--kar-g4-top); z-index: 2; padding: 12px 4px; text-align: center; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #fff; background: var(--pcrm-primary); hyphens: none; }
.kar-g4-table thead th:first-child { text-align: left; padding-left: 18px; width: 26%; }
.kar-g4-table thead th:nth-child(2) { text-align: left; width: 22%; }
.kar-g4-pair thead th:nth-child(2) { width: 37%; }
.kar-g4-table tbody th[scope="row"] { padding: 14px 18px; text-align: left; vertical-align: top; font-size: 15px; font-weight: 600; line-height: 1.45; text-transform: none; letter-spacing: 0; color: var(--pcrm-dark); border-bottom: 1px solid var(--pcrm-border); overflow-wrap: break-word; hyphens: auto; }
.kar-g4-table tbody td { padding: 14px 4px; vertical-align: top; text-align: center; font-size: 14px; line-height: 1.45; color: var(--pcrm-muted); border-bottom: 1px solid var(--pcrm-border); overflow-wrap: break-word; hyphens: auto; }
.kar-g4-table tbody td.is-reos { text-align: left; padding: 14px 12px; font-size: 14px; color: var(--pcrm-text); background: color-mix(in srgb, var(--pcrm-primary) 6%, #fff); }
.kar-g4-pair tbody td:not(.is-reos) { text-align: left; padding-left: 12px; }
.kar-g4-pair thead th:nth-child(3) { text-align: left; padding-left: 12px; }
.kar-g4-table tbody tr:last-child > * { border-bottom: none; }
.kar-g4-table td p { margin: 0 0 6px; }
.kar-g4-table td p:last-child { margin-bottom: 0; }
.kar-g4-table td .kar-src { font-size: 14px; color: var(--pcrm-muted); overflow-wrap: anywhere; }
.kar-g4-reos { font-weight: 600; }
.kar-g4-detay { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--pcrm-muted); }
.kar-g4-detay > summary { cursor: pointer; color: var(--pcrm-primary); text-decoration: underline; text-underline-offset: 3px; }
.kar-g4-detay > summary:focus-visible { outline: 3px solid var(--pcrm-primary); outline-offset: 2px; }
.kar-g4-detay > p { margin: 6px 0 0; }
@media (max-width: 1023.98px) {
    .kar-g4-pair, .kar-g4-pair tbody, .kar-g4-pair tr, .kar-g4-pair th[scope="row"], .kar-g4-pair td { display: block; width: auto; }
    .kar-g4-pair caption { display: block; padding: 12px 16px; font-size: 14px; }
    .kar-g4-pair thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .kar-g4-pair tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 14px 16px; border-bottom: 1px solid var(--pcrm-border); }
    .kar-g4-pair tbody tr:last-child { border-bottom: none; }
    .kar-g4-pair tbody th[scope="row"], .kar-g4-pair tbody td { padding: 0; border: none; }
    .kar-g4-pair tbody th[scope="row"] { grid-column: 1 / -1; font-size: 16px; }
    .kar-g4-pair tbody td { text-align: left; font-size: 14px; }
    .kar-g4-pair tbody td:not(.is-reos)::before { content: attr(data-label) ": "; font-weight: 600; color: var(--pcrm-dark); }
    .kar-g4-pair tbody td.is-reos { grid-column: 1 / -1; padding: 10px 12px; border-left: 4px solid var(--pcrm-primary); border-radius: 8px; font-size: 14.5px; }
    .kar-g4-pair tbody td.is-reos::before { content: "RE-OS: "; font-weight: 700; color: var(--pcrm-primary); }
    .kar-g4-pair td > p:first-child { display: inline; }
    .kar-g4-pair tbody td:not(.is-reos) { grid-column: 1 / -1; padding: 0; }
}

/* BEGIN V14-35 (01.11): disclosure marker on the closed/open category summaries of the comparison pages (same arrow pattern as the V32 /sss summary). Own classes, no resets, no external url(). */
.kar-g4-grup > summary::after { content: "\25BE"; display: inline-block; margin-left: 10px; font-size: 1.75rem; line-height: 1; color: var(--pcrm-primary); vertical-align: middle; }
.kar-g4-grup[open] > summary::after { content: "\25B4"; }
.kar-g4-grup > summary:hover .kar-g4-h3 { color: var(--pcrm-primary); }
/* Finding 4: on phones the table turns into cards, but the S8 sticky-column divider (box-shadow on the first cell) stayed and drew a thin vertical line at the right edge of the product name. */
@media (max-width: 767.98px) {
    html body .pcrm-page .kar-table-wrap .kar-table tbody :is(th, td):first-child { box-shadow: none; }
}
/* END V14-35 */
/* BEGIN U1-KAR (02.11): hub table (7 rivals). Fixed layout with px columns: topic 168, RE-OS 248, rivals equal (>= 100 each, status on one line, 14px).
   Narrower than the table (< 1240 px, phones included) the wrap scrolls sideways with the topic column sticky; no text changes, layout only. */
.kar-g4-hub { min-width: 1116px; }
.kar-g4-hub thead th { box-sizing: border-box; padding: 12px 6px; line-height: 1.3; }
.kar-g4-hub thead th:first-child { width: 168px; padding-left: 18px; }
.kar-g4-hub thead th:nth-child(2) { width: 248px; }
.kar-g4-hub tbody td:not(.is-reos) { padding-left: 6px; padding-right: 6px; white-space: normal; overflow: hidden; overflow-wrap: normal; hyphens: none; } /* B31: a long status ("Sayfasında belirtilmemiş", about 165 px) wraps at its space inside the 110 px column instead of running over the next cell; words are never split; overflow:hidden is only a safety net */
@media (max-width: 1239.98px) {
    .kar-g4-grup--hub .kar-g4-wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: auto; scrollbar-color: var(--pcrm-primary) #dbe6f5; }
    .kar-g4-grup--hub .kar-g4-wrap::-webkit-scrollbar { height: 12px; }
    .kar-g4-grup--hub .kar-g4-wrap::-webkit-scrollbar-track { background: #dbe6f5; }
    .kar-g4-grup--hub .kar-g4-wrap::-webkit-scrollbar-thumb { background: var(--pcrm-primary); border-radius: 6px; }
    .kar-g4-hub tbody td:not(.is-reos) { padding-left: 4px; padding-right: 4px; } /* B31: where the table scrolls, 110/100 px columns minus 12 px padding were 2 px short of the word "Belirtilmemis" */
    .kar-g4-hub caption { position: sticky; left: 0; width: min(100vw - 96px, 1000px); box-sizing: border-box; }
    .kar-g4-hub thead th:first-child { position: sticky; left: 0; z-index: 4; }
    .kar-g4-hub tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 6px 0 8px -6px rgba(2, 32, 65, .35); }
}
@media (max-width: 767.98px) {
    .kar-g4-hub { min-width: 962px; }
    .kar-g4-hub thead th:first-child { width: 112px; padding-left: 12px; }
    .kar-g4-hub thead th:nth-child(2) { width: 150px; }
    .kar-g4-hub tbody th[scope="row"] { padding: 14px 6px 14px 10px; font-size: 13px; /* H46: 112 px column minus 16 px padding fits "entegrasyonu" (93 px) without a mid-word break */ }
}
/* END U1-KAR */