/* site-ui-p31.css (31.10, package P): page level fixes of the site-wide UI scan. Always on, linked from ChromeA11y.Head after site-ui-s31.css. Text content is not touched: layout, size, alignment, components only. */
/* ===== P (31.10) BEGIN ===== */
/* P1 /guvenlik-ve-guven: the page now has the same dark banner as the other pages; the facts sit in cards (heading left, rows right on wide screens), 16 px body, dark grey. */
html body .site-content > .hangiev-hero .heading-title { color: #fff !important; }
html body .trust-page { padding: 48px 0 56px; }
html body .trust-page .lead { max-width: 75ch; margin: 0 0 28px; text-align: left; font-size: 1.125rem; line-height: 1.6; color: #374151; }
html body .trust-page .trust-block { max-width: none; margin: 0 0 20px; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 40px; align-items: start; background: #fff; border: 1px solid #e3eaf3; border-radius: 12px; box-shadow: 0 1px 3px rgba(2, 28, 58, .06); box-sizing: border-box; }
html body .trust-page .trust-block h2 { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: #022041; text-align: left; }
html body .trust-page .trust-block dl { margin: 0; min-width: 0; }
html body .trust-page .trust-block dt { margin: 18px 0 0; font-size: 1rem; line-height: 1.4; font-weight: 700; color: #022041; }
html body .trust-page .trust-block dt:first-child { margin-top: 0; }
html body .trust-page .trust-block dd { margin: 4px 0 0; font-size: 1rem; line-height: 1.6; color: #374151; overflow-wrap: anywhere; }
html body .trust-page .trust-block dd a { color: #064a97; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html body .trust-page a:focus-visible { outline: 3px solid #0b4f9c; outline-offset: 2px; }
@media (min-width: 992px) {
    html body .trust-page .trust-block { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); padding: 28px 32px; }
}
/* P2 /telefon-crm-entegrasyonu: one dominant title (the banner H1); the intro hook is a section heading size, the problem heading follows the text edge. */
@media (min-width: 768px) {
    html body .pcrm-page:has(.pcrm-intro-hook) > .breadcrumb-img .heading-title.size-xl { font-size: 44px; line-height: 1.2; }
}
html body .pcrm-page .pcrm-intro-hook { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.25; }
html body .pcrm-section:has(> .container > .pcrm-problem-block) .pcrm-h2 { text-align: left; }
html body .pcrm-page .pcrm-intro-btns .pcrm-btn-primary, html body .pcrm-page .pcrm-intro .pcrm-store-btn { box-sizing: border-box; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
html body .pcrm-page .pcrm-cta .pcrm-cta-stores { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
html body .pcrm-page .pcrm-cta .pcrm-cta-stores .pcrm-store-btn { background: transparent; opacity: 1; backdrop-filter: none; }
/* P3 /entegrasyonlar: the second title is a section heading in the navy of the site (it was red and the size of the H1), the intro is one reading column, the 2013 claim is a normal sized line,
   the cards of a row end on one line and their "Ayrintili bilgi" sits on the card bottom. */
html body .eg-intro { padding-top: 40px; }
html body .eg-intro-box { text-align: center; }
html body .eg-intro-h { margin: 0; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.25; font-weight: 500; color: #064a97; }
html body .eg-intro-h b { font-weight: 700; color: #0e7f91; }
html body .eg-intro-lead { max-width: 75ch; margin: 18px auto 20px; font-size: 1.0625rem; line-height: 1.65; color: #374151; }
html body .eg-intro-link { margin: 0 0 14px; font-size: 1rem; line-height: 1.5; color: #374151; }
html body .eg-intro-link a { color: #064a97; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html body .eg-intro-box .eg-jump { margin-top: 20px; }
html body .eg-claim { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.4; letter-spacing: .01em; }
html body .eg-grid > .eg-card { display: flex; flex-direction: column; }
html body .eg-grid > .eg-card > .eg-detail:last-child { margin-top: auto; padding-top: 12px; }
/* P4 /hepsi-emlak: intro text in a readable column (full width on phones), the address block is a quiet light card instead of the full width red band, the page ends with the shared CTA band. */
html body .hp31-intro { margin-top: 48px; margin-bottom: 40px; gap: 24px 48px; align-items: center; justify-content: flex-start; }
html body .hp31-intro .hangiev-text { max-width: 720px; flex: 1 1 420px; color: #374151; }
html body .hp31-intro .hangiev-text p { font-size: 1rem; line-height: 1.7; }
html body .hp31-intro .hepsiemlak-logo { flex: 0 0 auto; }
@media (max-width: 767.98px) {
    html body .hp31-intro { flex-direction: column; align-items: flex-start; }
    html body .hp31-intro .hangiev-text { max-width: 100%; width: 100%; flex: 0 0 auto; }
    html body .hp31-intro .hepsiemlak-logo { order: -1; }
    html body .hp31-intro .hepsiemlak-logo img { height: 80px; }
}
html body .hp31-body { margin-top: 0; margin-bottom: 40px; max-width: 1200px; }
html body .hp31-body > :is(p, ul, div) { max-width: 75ch; font-size: 1rem; line-height: 1.7; color: #374151; }
html body .hp31-body > h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.3; color: #022041; }
html body .hp31-info-wrap { margin-bottom: 40px; }
html body .hangiev-contact.hp31-info { background: #f5f8fc; color: #374151; min-height: 0; display: block; padding: 20px 24px; border: 1px solid #e3eaf3; border-radius: 12px; max-width: 480px; text-align: left; font-size: .9375rem; line-height: 1.6; }
html body .hp31-info .hangiev-contact-item { display: block; margin: 0 0 8px; }
html body .hp31-info .hangiev-contact-item:last-child { margin-bottom: 0; }
html body .hp31-info .hangiev-contact-item span { display: block; font-size: .9375rem; }
html body .hp31-info .hangiev-contact-item:has(> a) { display: flex; align-items: center; gap: 8px; }
html body .hp31-info .hangiev-contact-item:has(> a) span { display: inline; }
html body .hp31-info .hangiev-contact-item a { font-size: .9375rem; color: #064a97; text-decoration: underline; text-underline-offset: 3px; }
/* P5 /musteri-yorumlari: review text 17 px dark grey on a 75 character line, name and title left of the photo, stars and date on one row, the company badge sits inside the card, cards 28 px apart. */
html body .testimonials-container .testimonial-card { margin-bottom: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
html body .testimonials-container .testimonial-card > .company-badge { position: static; transform: none; left: auto; top: auto; grid-column: 1 / -1; justify-self: start; margin: 0; }
html body .testimonials-container .testimonial-card > :is(.content, .testimonial-header, .avatar) { grid-column: 1 / -1; }
html body .testimonials-container .testimonial-card > .testimonial-header { margin: 18px 0 8px; }
html body .testimonials-container .testimonial-card .info { text-align: left; }
html body .testimonials-container .testimonial-card .info .title { color: #374151; font-size: 1rem; }
html body .testimonials-container .testimonial-card > .content { margin: 8px 0 16px; padding: 0; max-width: 75ch; text-align: left; font-size: 1.0625rem; line-height: 1.7; color: #374151; }
html body .testimonials-container .testimonial-card > .content p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
html body .testimonials-container .testimonial-card > .rating { margin: 0; grid-column: 1; }
html body .testimonials-container .testimonial-card > .created-date { margin: 0; grid-column: 2; text-align: right; color: #4b5563; font-style: normal; font-size: .8125rem; }
html body .testimonials-container .testimonial-card > .created-date small { font-size: .8125rem; }
@media (max-width: 767.98px) {
    html body .testimonials-container { padding-left: 16px; padding-right: 16px; }
    html body .testimonials-container .testimonial-card { margin-bottom: 28px; padding: 24px 20px; }
    html body .testimonials-container .testimonial-card > .testimonial-header { flex-direction: row; text-align: left; gap: 16px; }
    html body .testimonials-container .testimonial-card .avatar { margin: 0; flex: 0 0 auto; }
    html body .testimonials-container .testimonial-card > .content { font-size: 1rem; }
}
/* P6 /kayit-ol: on phones and tablets the form comes first, the information panel below it. */
@media (max-width: 992px) {
    html body .register-wrapper .register-container { flex-direction: column-reverse; }
}
/* P7 /kilavuzlar: cover images at least 112 px wide, cards line up on the container edge, left aligned headings and lead. */
html body .kl-page .kl-card-img { width: 112px; }
html body .kl-page .kl-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
html body .kl-page .kl-card .ozl-card-text { font-size: .9375rem; line-height: 1.55; color: #374151; }
html body .kl-page :is(.pcrm-h2, .kl-eyebrow, .ozl-lead, .ozl-lead p) { text-align: left; }
html body .kl-page .pcrm-section:has(> .container > .kl-cards) { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 575.98px) {
    html body .kl-page .kl-card-img { width: 96px; }
}
/* P8 /kilavuzlar/whatsapp: a step is two columns on wide screens (numbered text up to 65 characters left, the phone picture 400 px right); phones stay one column and left aligned. */
@media (min-width: 992px) {
    html body .kl-page .kl-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); column-gap: 56px; align-items: start; }
    html body .kl-page .kl-step > :is(.kl-step-title, p) { grid-column: 1; max-width: 65ch; }
    html body .kl-page .kl-step > .kl-shot { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; position: sticky; top: 96px; }
    html body .kl-page .kl-step > .kl-shot img { max-width: 400px; }
    html body .kl-page .kl-step > .kl-shot-crop img { max-width: 100%; }
}
html body .kl-page :is(.kl-features, .kl-stats) { max-width: 1152px; }
html body .kl-page .kl-stat-label { font-size: .9375rem; }
/* P10 /hakkimizda: running text keeps 75 characters with paragraph spacing, the lede is a normal weight 20 px line (it was bold, four lines), the second title is the eyebrow, section headings are semi bold. */
html body .ab31 .news-article :is(p, li) { max-width: 75ch; }
html body .ab31 .news-article p { margin-bottom: 14px; line-height: 1.7; }
html body .ab31 .news-article p.lead { font-size: 1.25rem; font-weight: 500 !important; color: #022041; margin-bottom: 18px; }
html body .ab31 .news-article h2.h3.text-primary { font-size: .9375rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #064a97 !important; margin-bottom: 12px !important; }
html body .ab31 .news-article h3.h4 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 600; line-height: 1.3; color: #022041; }
/* P11 /listglobally and /properstar: the long hero title is two lines at a section heading size and keeps room under the menu. */
html body .pcrm-page .breadcrumb-img .heading-title.pn-hero-h1 { font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.5rem); line-height: 1.2; max-width: 22em; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) {
    html body .pcrm-page .breadcrumb-img:has(.pn-hero-h1) .container { padding-top: 40px; }
}
/* P12 /seminer: a single event card sits in the middle of the row, 32 px under the intro line. */
html body .blog-content.section-padding > .container > p.text-center { margin-bottom: 32px; }
html body .blog-content.section-padding .row.g-4:has(> .col-lg-4:only-child) { justify-content: center; }
/* P13 the shared CTA band on pages without the .pcrm-page wrapper (/guvenlik-ve-guven, /hepsi-emlak): the two buttons sit in one row (one column on phones), like the S band. */
html body .pcrm-cta .pcrm-cta-btns { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 14px; }
@media (max-width: 575.98px) {
    html body .pcrm-cta .pcrm-cta-btns { flex-direction: column; }
}
/* ===== P (31.10) END ===== */
/* ===== P (31.10) P9 BEGIN: /sozluk letter pages ===== */
/* Letter chips are 44 px squares, the active letter is filled, on phones the bar is one scrolling row; the repeated letter heading is small, "Tum terimler" is a button link. */
html body .sz-page .sz-az { gap: 8px; }
html body .sz-page .sz-az a { box-sizing: border-box; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; color: #064a97; }
html body .sz-page .sz-az a[aria-current="page"] { background: #064a97; border-color: #064a97; color: #fff; }
@media (max-width: 575.98px) {
    html body .sz-page .sz-az { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
    html body .sz-page .sz-az a { flex: 0 0 auto; }
}
html body .sz-page #sz-letter { font-size: 1.25rem; text-align: left; margin-bottom: 8px; }
html body .sz-page .ozl-card-text { font-size: .9375rem; line-height: 1.6; color: #374151; }
html body .sz-page .ozl-cards ~ p a { box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 20px; border: 2px solid #064a97; border-radius: 10px; color: #064a97; font-weight: 600; text-decoration: none; }
/* ===== P (31.10) P9 END ===== */
/* ===== P (31.10) P2 BEGIN: /ozellikler, /duyuru-detay, /basinda-biz, /kimler-icin ===== */
/* /ozellikler: one card spec for the hub cards and the "Kesfet" cards (12 px radius, 1 px #e6eef7 border, the soft shadow of the other cards, 24 px padding); the five "Kesfet" cards are five equal columns on wide screens (they were 3 + 2; the 6-column rule of ozellikler-ui3.css stays for the narrower widths). */
html body .ozl-hub .ozl-card, html body .kesfet-h436 .kesfet-kart { border: 1px solid #e6eef7; border-radius: 12px; box-shadow: 0 1px 2px rgba(2, 28, 58, .06), 0 4px 12px rgba(2, 28, 58, .04); padding: 24px; }
@media (min-width: 1100px) {
    html body .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-grid:has(> .kesfet-kart:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
    html body .sl-ozl.sl-ui2c .kesfet-h436 .kesfet-grid > .kesfet-kart:nth-child(n):nth-last-child(n) { grid-column: auto; }
}
/* /kimler-icin: the four group boxes and the eight profile cards are one component, four columns on wide screens (4 + 4 x 2): icon in a 44 px round, title without underline, same border, padding and radius.
   The profile cards had a second icon (the old decorative one) next to the round one; only the round one stays. */
html body .prf-page .ozl-boxes-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html body .prf-page .prf-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
html body .prf-page .prf-cards > .ozl-card { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; max-width: none; }
@media (min-width: 992px) {
    html body .prf-page .ozl-boxes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    html body .prf-page .prf-cards > .ozl-card { flex-basis: calc((100% - 48px) / 4); }
}
@media (max-width: 575.98px) {
    html body .prf-page .ozl-boxes-4 { grid-template-columns: minmax(0, 1fr); }
    html body .prf-page .prf-cards > .ozl-card { flex-basis: 100%; }
}
html body .prf-page :is(.ozl-box, .prf-cards > .ozl-card) { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin: 0; padding: 24px; border: 1px solid #e6eef7; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(2, 28, 58, .06), 0 4px 12px rgba(2, 28, 58, .04); box-sizing: border-box; }
html body .prf-page .prf-cards > .ozl-card > .ozl-card-title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 0 8px; padding: 0; border-bottom: 0; font-size: 1.05rem; line-height: 1.35; }
html body .prf-page .prf-cards > .ozl-card > .ozl-card-title::before { content: none; }
html body .prf-page .prf-cards .ico146 { width: 44px; height: 44px; font-size: 20px; }
html body .prf-page .ozl-box-ico { margin: 0 0 12px; }
html body .prf-page :is(.ozl-box-title, .prf-cards > .ozl-card > .ozl-card-title) { min-height: 0; }
html body .prf-page .ozl-box-title { margin: 0 0 8px; font-size: 1.05rem; }
html body .prf-page :is(.ozl-box-text, .prf-cards .ozl-card-text) { margin: 0; font-size: .9375rem; line-height: 1.55; color: #374151; }
html body .prf-page :is(.ozl-box-title, .prf-cards .ozl-card-title) a { display: block; min-height: 0; color: #022041; font-size: inherit; line-height: inherit; text-decoration: none; }
html body .prf-page :is(.ozl-box-title, .prf-cards .ozl-card-title) a:hover { text-decoration: underline; text-underline-offset: 3px; }
html body .prf-page :is(.ozl-box-title, .prf-cards .ozl-card-title) a:focus-visible { outline: 3px solid #0b4f9c; outline-offset: 3px; border-radius: 3px; }
/* /duyuru-detay: the lead picture is at most 420 px high (16:9 crop) instead of the 860 x 600 block. */
html body .notice-details .notice-meta { margin: 32px 0 16px; }
html body .notice-details .notice-image { margin-left: 0; margin-right: 0; }
html body .notice-details .notice-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 420px; object-fit: cover; }
/* /basinda-biz details: hero title max 40 px, balanced lines. */
html body .pcrm-page:has(a[href^="/basinda-biz/"]) .pcrm-section h2.pcrm-h2:has(+ .pcrm-prose) { max-width: 800px; text-wrap: balance; }
html body .prw h1.heading-title.size-xl{font-size:min(40px,7vw);text-wrap:balance}
/* ===== P (31.10) P2 END ===== */
/* ===== P2-G1 (31.10) BEGIN: /, /fiyatlar, /kimler-icin (layout, size, alignment only; no text change) ===== */
/* Home, chambers block: the 4 px teal bar of the centred heading floated alone at the left edge; the heading is centred, so the bar goes. */
html body .section-header .section-title::before { content: none; }
/* K2: primary button = navy; .header-right untouched */
html body :is(.button.fullfield, .mlsnedir-btn, .website-card .btn-view-design, .ai-features-btn, .submit-btn, .create-demand-button:not(:hover), .pcrm-btn-primary:not(.pcrm-cta .pcrm-btn-primary)):not(.header-right *) { background: #064a97; border-color: #064a97; }
html body :is(.button.fullfield, .mlsnedir-btn, .website-card .btn-view-design, .ai-features-btn, .submit-btn, .create-demand-button:not(:hover), .pcrm-btn-primary:not(.pcrm-cta .pcrm-btn-primary)):not(.header-right *):is(:hover, :focus-visible) { background: #022041; border-color: #022041; }
/* /fiyatlar: package feature tables were 13 px; 14 px body text. */
html body .comparison.ozellik-inline-table tbody :is(td, th) { font-size: .875rem; line-height: 1.45; }
/* /kimler-icin: the "Hangi Paket Kime?" table started 27 px right of its heading and ended 27 px short; same edges as the heading. */
html body .prf-page .ozl-liste-wrap { margin-left: 0; margin-right: 0; max-width: none; width: 100%; }
/* ===== P2-G1 (31.10) END ===== */
/* ===== P2-G2 (31.10) BEGIN: /telefon-crm-entegrasyonu, /entegrasyonlar, portal pages, /gayrimenkul-yapay-zeka-cozumleri, /mobil-uygulama ===== */
/* /telefon-crm-entegrasyonu: the three step blocks use a smaller phone picture (260 px), the text sits 48 px from it and the steps are 56 px apart; cards use darker 15 px body text. */
html body .pcrm-page .pcrm-step { gap: 48px; margin-bottom: 56px; }
html body .pcrm-page .pcrm-step-img img { max-width: 260px; }
html body .pcrm-page .pcrm-step:not(.reverse) .pcrm-step-img { text-align: right; }
html body .pcrm-page .pcrm-step.reverse .pcrm-step-img { text-align: left; }
html body .pcrm-page .pcrm-step-text p { color: #1f2937; }
html body .pcrm-page .pcrm-cards { align-items: stretch; }
html body .pcrm-page .pcrm-card { display: flex; flex-direction: column; box-sizing: border-box; padding: 28px; }
html body .pcrm-page .pcrm-card p { font-size: 15px; line-height: 1.65; color: #374151; }
@media (max-width: 767.98px) {
    html body .pcrm-page .pcrm-step { gap: 20px; margin-bottom: 40px; }
    html body .pcrm-page .pcrm-step .pcrm-step-img, html body .pcrm-page .pcrm-step.reverse .pcrm-step-img { text-align: center; }
    html body .pcrm-page .pcrm-step-img img { max-width: 220px; }
}
/* /entegrasyonlar: labels of the foreign portal logos are 12 px (nine columns: the 27 logos fill three full rows), captions and notes 13 px, footnote and FAQ boxes share the 1200 px column. */
html body .eg-page .eg-logos { grid-template-columns: repeat(9, minmax(0, 1fr)); }
html body .eg-page .eg-logo-item .pn-name { font-size: .8125rem; line-height: 1.3; }
html body .eg-page :is(.eg-shots figcaption, .eg-wide-shot figcaption, .eg-banner figcaption, .eg-note) { font-size: 13px; }
html body .eg-page .eg-shotband figcaption { font-size: 13.5px; }
@media (max-width: 991.98px) {
    html body .eg-page .eg-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    html body .eg-page .eg-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Portal pages (/listglobally, /properstar, /hepsi-emlak and the other portal pages): portal names and countries are at least 12 px; the three step cards and the three figure cards share one width. */
html body :is(.pn-name, .pn-country) { font-size: .8125rem; }
html body .pn-stats strong { font-size: 2.5rem; line-height: 1.1; }
html body :is(.pn-stats, .pn-flow, .pn-package) { max-width: none; }
@media (max-width: 767.98px) {
    html body .pn-stats strong { font-size: 1.875rem; }
}
/* /gayrimenkul-yapay-zeka-cozumleri: the price-estimate section reads at 16 px, the four cards at 15 px with 24 px padding, body text keeps a 1.6 line height. */
html body #fiyat-tahmini .text-center > p { font-size: 1rem; line-height: 1.6; color: #374151; }
@media (max-width: 767.98px) {
    html body .site-content > section p { line-height: 1.6; }
}
/* /mobil-uygulama: the card heading is a section-size H2 (it was a second hero title), the four feature texts are 14 px or more and sit under icons of one size, the card has an even 48 px rhythm. */
html body .app-download-content .download-header h2 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.25; }
html body .app-download-content .download-main-card { padding-top: 48px; padding-bottom: 48px; }
html body .app-download-content .feature-box p { font-size: .9375rem; color: #4b5563; }
html body .app-download-content .feature-box i { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 16px; background: #e8f6f9; font-size: 28px; }
html body .app-download-content .feature-box h3 { font-size: 1.0625rem; }
/* ===== P2-G2 (31.10) END ===== */

/* ===== P2-G3 (31.10) START: /sss closed rows are light with a thin border, only the open row is blue. ===== */
html body .faq-list-modern:has(.faq-cat-r10) .faq-card-modern { background: #fff; border: 1.5px solid #cfdbe8; border-radius: 14px; box-shadow: none; }
html body .faq-list-modern:has(.faq-cat-r10) .faq-card-modern:hover { border-color: #0e7f91; box-shadow: 0 4px 14px rgba(2, 32, 65, .08); }
html body .faq-list-modern:has(.faq-cat-r10) .faq-card-modern:has(> .faq-question-modern.active, > * > .faq-question-modern.active) { background: #064a97; border-color: #064a97; }
html body .faq-list-modern:has(.faq-cat-r10) .faq-question-modern:not(.active) { color: #022041; }
html body .faq-list-modern:has(.faq-cat-r10) .faq-question-modern:not(.active) .faq-arrow-modern { color: #0e7f91; }
html body .faq-list-modern:has(.faq-cat-r10) .faq-question-modern:not(.active):focus-visible { outline-color: #0b4f9c; }
html body .faq-list-modern:has(.faq-cat-r10) { gap: 14px; }
html body .faq-list-modern .faq-cat-r10 { margin-top: 56px; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); }
html body .faq-list-modern .faq-cat-r10:first-child { margin-top: 0; }
/* Question text is inline (brand name is a span): block + absolute arrow keeps "RE-OS nedir?" on one line. */
html body .faq-list-modern:has(.faq-cat-r10) .faq-question-modern { display: block; position: relative; padding-right: 88px; }
html body .faq-list-modern:has(.faq-cat-r10) .faq-question-modern .faq-arrow-modern { position: absolute; right: 24px; top: 50%; margin: 0; transform: translateY(-50%); line-height: 1; }
html body .faq-list-modern:has(.faq-cat-r10) .faq-question-modern.active .faq-arrow-modern { transform: translateY(-50%) rotate(90deg); }
/* ===== P2-G3 (31.10) END ===== */

/* ===== S16C (31.10) BEGIN: /gayrimenkul-yapay-zeka-cozumleri price cards, store badges ===== */
/* The four price-estimate cards: 16 px dark body text, 24 px padding, no Bootstrap utility classes in the markup. */
html body #fiyat-tahmini { padding-top: 60px; padding-bottom: 60px; }
html body #fiyat-tahmini .price-est-intro { color: #374151; }
html body #fiyat-tahmini .price-est-card { display: flex; align-items: flex-start; gap: 16px; box-sizing: border-box; height: 100%; padding: 24px; background: #f4f7fa; border-left: 4px solid #064A97; border-radius: 12px; }
html body #fiyat-tahmini .price-est-icon { flex: none; width: 28px; margin-top: 4px; font-size: 1.5rem; line-height: 1; text-align: center; color: #064A97; }
html body #fiyat-tahmini .price-est-title { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: #111827; }
html body #fiyat-tahmini .price-est-text { display: block; font-size: 1rem; line-height: 1.6; color: #374151; }
/* Store badges (/telefon-crm-entegrasyonu, /mobil-uygulama): the badge pictures already on the site, 46 px high on every width. */
html body .pcrm-page a.store-badge, html body .pcrm-page .pcrm-intro a.store-badge, html body .pcrm-page .pcrm-cta a.store-badge { padding: 0; min-height: 0; background: transparent; border: 0; border-radius: 8px; }
html body .pcrm-page a.store-badge img, html body .app-download-content .store-link img { display: block; height: 46px; width: auto; }
html body .pcrm-page .pcrm-intro-stores, html body .pcrm-page .pcrm-cta .pcrm-cta-stores { align-items: center; gap: 14px; }
html body .app-download-content .store-buttons-wrapper { gap: 14px; }
@media (max-width: 767.98px) {
    html body .app-download-content .store-buttons-wrapper { flex-direction: row; justify-content: center; }
}
/* ===== S16C (31.10) END ===== */
/* ===== S16A (31.10) BEGIN: /sss top CTA band, /basinda-biz merged table, /kilavuzlar "tum ozellikler" button link ===== */
/* /sss: the shared CTA band (pcrm-cta) sits under the intro; it keeps the site spacing and the FAQ list starts 40 px below it. */
html body .site-content > .pcrm-cta { margin-bottom: 40px; }
/* /basinda-biz: the "RE-OS haber sayfasi" column is a quiet link column on wide screens; on phones each row is a compact label + value grid (one line per field, no stacked caps labels). */
html body .pcrm-page .pcrm-table--text td[data-label="RE-OS haber sayfası"] { font-size: .9375rem; color: #4b5563; }
@media (max-width: 576px) {
    html body .pcrm-page .pcrm-table--text tr:has(> td[data-label="RE-OS haber sayfası"]) { padding: 12px 0; }
    html body .pcrm-page .pcrm-table--text tr:has(> td[data-label="RE-OS haber sayfası"]) > td:not(:first-child) { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 3px 0; }
    html body .pcrm-page .pcrm-table--text tr:has(> td[data-label="RE-OS haber sayfası"]) > td:not(:first-child)::before { margin-bottom: 0; font-size: .75rem; letter-spacing: .02em; }
    html body .pcrm-page .pcrm-table--text tr:has(> td[data-label="RE-OS haber sayfası"]) > td:first-child { padding-bottom: 4px; }
}
/* /kilavuzlar: the "tum ozellikler" link is the site button link (same spec as "Tum terimler" on /sozluk): 44 px, outlined, left aligned with the cards. */
html body .kl-page .ozl-hub-all { margin-top: 0; text-align: left; }
html body .kl-page .ozl-hub-all a { box-sizing: border-box; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 20px; border: 2px solid #064a97; border-radius: 10px; color: #064a97; font-weight: 600; text-decoration: none; }
html body .kl-page .ozl-hub-all a:hover { background: #064a97; color: #fff; }
/* ===== S16A (31.10) END ===== */
/* ===== S16B (31.10) BEGIN: /karsilastirma + /karsilastirma/re-os-vs-*: source lines fold into a small "kaynak" disclosure (text unchanged, stays in the DOM); one-row sticky header. ===== */
html body .pcrm-page .kar-src-d { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.45; }
html body .pcrm-page .kar-src-d > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 2px; list-style: none; cursor: pointer; color: var(--pcrm-muted, #4b5b6e); font-size: 0.875rem; font-weight: 600; }
html body .pcrm-page .kar-src-d > summary::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.75rem; font-style: italic; line-height: 1; }
html body .pcrm-page .kar-src-d > summary:hover { color: var(--pcrm-primary, #064a97); }
html body .pcrm-page .kar-src-d > summary:focus-visible { outline: 3px solid var(--pcrm-primary, #064a97); outline-offset: 2px; border-radius: 4px; }
html body .pcrm-page .kar-src-d[open] > .kar-src { margin: 4px 0 0; padding: 6px 8px; border-radius: 8px; background: #f3f7fc; }
@media (min-width: 1024px) {
html body .pcrm-page .kar-g4-table thead th { padding-top: 8px; padding-bottom: 8px; line-height: 1.25; max-height: 56px; }
html body .pcrm-page .kar-g4-hub thead th:first-child { width: 17%; }
html body .pcrm-page .kar-g4-hub thead th:nth-child(2) { width: 16%; }
}
html body .pcrm-page .kar-src-d--list { margin: 0 0 18px; font-size: 1rem; }
html body .pcrm-page .kar-src-d--list > summary { font-size: 0.9375rem; min-height: 32px; }
html body .pcrm-page .kar-src-d--list > .kar-sources { margin: 8px 0 0; }
/* ===== S16B (31.10) END ===== */

/* ===== F17 (31.10) BEGIN: footer link lists in two columns below 768 px ===== */
/* Section headings (the p.footer-p lines) stay full width; only the link lists become a two-column grid. 15 px links, 44 px rows, long labels wrap to two lines. */
@media (max-width: 767.98px) {
    html body .footer .footer-top .footer-menu ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 8px; margin: 0; padding: 0; list-style: none; }
    html body .footer .footer-top .footer-menu ul li { min-width: 0; margin: 0; padding: 0; }
    html body .footer .footer-top .footer-menu ul li > a { box-sizing: border-box; display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
}
/* ===== F17 (31.10) END ===== */
/* ===== S16C (31.10) END ===== */
/* ===== S16C2 (31.10) BEGIN: /mobil-uygulama store badges side by side at 390 px ===== */
/* The card leaves only 286 px at 390 px wide, so two 141 px pictures plus the gap did not fit and wrapped. The badges now share the row (up to 150 px each, 8 px apart); below 360 px they stack. */
@media (max-width: 768px) {
    html body .app-download-content .store-buttons-wrapper { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 8px; }
    html body .app-download-content .store-buttons-wrapper .store-link { flex: 0 1 150px; min-width: 0; }
    html body .app-download-content .store-link img { width: 100%; height: auto; max-height: 46px; object-fit: contain; }
}
@media (max-width: 359.98px) {
    html body .app-download-content .store-buttons-wrapper { flex-direction: column; align-items: center; }
    html body .app-download-content .store-buttons-wrapper .store-link { flex: 0 0 auto; width: 141px; }
}
/* ===== S16C2 (31.10) END ===== */
/* ===== K13 (31.10) BEGIN: /fiyatlar Ofis tab badge states its base ("Danisman paketine gore") on the same line ===== */
html body .paket-secim-btn-ofis .paket-tab-badge { display: flex; align-items: center; gap: 6px; white-space: nowrap; right: auto; left: 50%; transform: translateX(-50%); }
html body .paket-secim-btn-ofis .paket-tab-baz { font-size: 13px; font-weight: 600; letter-spacing: 0; }
html body .sure-btn .sure-badge { display: flex; align-items: center; gap: 5px; }
html body .sure-btn .sure-badge .sure-baz { font-size: 13px; font-weight: 600; letter-spacing: 0; }
/* ===== K13 (31.10) END ===== */
/* ===== K16 (31.10) BEGIN: /kayit-ol line "Seçtiğiniz paket" (package and period chosen on /fiyatlar; display only) ===== */
html body .register-wrapper .register-plan-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: #eef6fb; border: 1px solid #c9e0ee; color: #022041; font-size: 15px; line-height: 1.4; }
/* ===== K16 END ===== */
/* ===== W-B (31.10) BEGIN: /telefon-crm-entegrasyonu Android / iPhone cards share one row height (also when stacked) ===== */
html body .pcrm-page .pcrm-cards.pcrm-cards-wb { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 20px; max-width: 640px; }
@media (min-width: 1200px) { html body .pcrm-page .pcrm-cards.pcrm-cards-wb { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1152px; } }
/* The theme underline for highlighted heading words (".heading .heading-title span::after" + inline-block) must not reach the brand no-wrap span: it drew a partial blue line under RE-OS in the /karsilastirma h1. */
html body .heading .heading-title span.nb { display: inline; }
html body .heading .heading-title span.nb::after { content: none; }
/* ===== W-B (31.10) END ===== */
/* ===== U-C (31.10) BEGIN: blog cover shown whole (G), /rehber + /sozluk jump list and filter box (J) ===== */
/* G the blog detail cover often carries its own text: it is shown whole instead of cropped (box keeps its height, neutral backing). */
html body .blog-detail-article .featured-image { background: #f3f7fc; }
html body .blog-detail-article .featured-image img { object-fit: contain; }
html body .blog-detail-article .featured-image:hover img { transform: none; }
/* J small filter box and category jump list; the cards stay in the DOM, the script only sets [hidden]. */
html body .pcrm-page .lf-filter { max-width: 520px; margin: 16px 0 0; }
html body .pcrm-page .lf-label { display: block; margin: 0 0 6px; font-size: 0.9375rem; font-weight: 600; color: var(--pcrm-text, #1c2b3a); }
html body .pcrm-page .lf-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid #9db3cc; border-radius: 8px; font-size: 1rem; background: #fff; color: inherit; }
html body .pcrm-page .lf-input:focus-visible { outline: 3px solid var(--pcrm-primary, #064a97); outline-offset: 2px; }
html body .pcrm-page .lf-sonuc { min-height: 1.4em; margin: 6px 0 0; font-size: 0.875rem; color: var(--pcrm-muted, #4b5b6e); }
html body .pcrm-page .lf-jump { margin: 16px 0 0; }
html body .pcrm-page .lf-jump-baslik { margin: 0 0 8px; font-size: 0.9375rem; font-weight: 600; }
html body .pcrm-page .lf-jump-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html body .pcrm-page .lf-jump-liste a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1.5px solid #9db3cc; border-radius: 999px; font-size: 0.9375rem; text-decoration: none; }
html body .pcrm-page .lf-jump-liste a:hover { background: #f3f7fc; }
/* ===== U-C (31.10) END ===== */
/* ===== V14-1 (31.10) BEGIN: contact column clearance, tap target heights, home "Hemen basla" band contrast. Layout and colour only, no text. ===== */
/* 1) contact column clearance removed (02.11): the fixed contact column and chat launcher float above the page; no content is reserved for them. */
/* 3) tap targets: stand-alone links reach 44 px; links inside running text get 4 px of vertical padding (inline boxes: the line height does not change) so every target is at least 24 px tall. */
html body .top-bar-phone a { padding-block: 4px; margin-block: -4px; }
html body main#icerik .blog-content > a, html body main#icerik a.read-more, html body main#icerik nav.kar-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
html body main#icerik :is(p, td, dd) > a:not(.button):not([class*="btn"]), html body main#icerik a.mail-link, html body main#icerik .kar-sources a { padding-block: 4px; }
/* 4) home, "Danisman, ekip, ofis ve franchise" band: white text on a light turquoise picture (or on the light band colour until the picture loads) is below 4.5:1; a dark base colour and a navy veil keep it above 4.5:1 in both states. */
html body .site-content.home-akis .colorrr .section-banner { background-color: #0b5a73; }
html body .site-content.home-akis .colorrr .section-banner::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(3, 30, 60, .5); }
/* ===== V14-1 (31.10) END ===== */
/* ===== V14-3 (01.11) BEGIN: SSS question heads in one inline flow, phone/tablet clearance next to the fixed contact column, tab chip fade, shot band, price badge dot, phone CRM card rows, home testimonial card. Layout only, no text. ===== */
/* 1) SSS (U14): the question button was a flex row, so the no-wrap brand span ("RE-OS") became a flex item of its own: a wide gap after it and the case suffix ('ta, 'a, 'un) dropped to the next line. The button is now a block (text and span flow on one line) and the arrow icon sits at its right end. */
html body main#icerik :is(button.pcrm-faq-q, button.sl-faq-q) { display: block; position: relative; box-sizing: border-box; padding-right: 56px; text-align: left; }
html body main#icerik button.sl-faq-q { padding-top: 16px; padding-bottom: 16px; padding-left: 0; }
html body main#icerik :is(button.pcrm-faq-q, button.sl-faq-q) > i { position: absolute; top: 0; bottom: 0; right: 20px; margin-block: auto; height: 1em; line-height: 1; }
html body main#icerik button.sl-faq-q > i { right: 4px; }
/* 4) tab chips (U19): the sideways-scrolling chip row fades out at its right edge as a "more" hint; the end padding keeps the last chip clear of the fade. */
@media (max-width: 768px) {
    html body main#icerik .alt-nav .w-container { padding-right: 28px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}
/* 5) /entegrasyonlar shot band (U17): the sideways-scrolling band runs to the screen edge (it was cut at the padded column), so the next screenshot peeks in; scroll-snap stays. */
@media (max-width: 767.98px) {
    html body .eg-page .eg-shotband { margin-right: -16px; padding-right: 16px; scroll-padding-inline: 16px; }
}
/* 6) /fiyatlar badges (U13c): a middle dot separates the two parts of the Ofis tab badge and of the period badge (decoration only; the text is unchanged). */
html body .paket-secim-btn-ofis .paket-tab-baz::before, html body .sure-btn .sure-badge .sure-baz::before { content: "\00B7"; margin-right: 6px; font-weight: 700; }
/* 7) /telefon-crm-entegrasyonu (U13b/U18b): stacked below 1200 px each card is as high as its own content (the shared row height left a large empty space under the shorter iPhone text); side by side they still share one row height. */
@media (max-width: 1199.98px) {
    html body .pcrm-page .pcrm-cards.pcrm-cards-wb { grid-auto-rows: auto; align-items: start; }
}
/* 8) home "Bizi Tercih Edenler" (U16): the comment box was a 15vh scroll box that cut the last line; it takes the height of its text. */
html body .testo-tl .testimonial-item .content { height: auto; overflow: visible; padding-right: 3vh; }
/* ===== V14-3 (01.11) END ===== */
/* ===== V14-6 (01.11) BEGIN: icon + brand headings in one inline flow. The heading was a flex row, so the no-wrap brand span ("RE-OS") became a flex item of its own: a gap after it and the rest of the sentence broke into a separate column. Layout only, no text. ===== */
html body .ph627-kart h2, html body .pcrm-ba-col h3 { display: block; }
html body .ph627-kart h2 > i, html body .pcrm-ba-col h3 > i { display: inline-block; margin-right: 10px; vertical-align: middle; }
/* Accordion question buttons that start with the brand span (/gayrimenkul-yapay-zeka-cozumleri): the Bootstrap flex row made "RE-OS" a column of its own beside the question text. Text and span flow on one line; the arrow sits at the right end. */
html body button.accordion-button:has(> .nb) { display: block; position: relative; box-sizing: border-box; padding-right: 3rem; text-align: left; }
html body button.accordion-button:has(> .nb)::after { position: absolute; top: 50%; right: 1.25rem; margin: -.625rem 0 0; }
/* ===== V14-6 (01.11) END ===== */
/* ===== V14-16 (01.11) BEGIN: axe (link-in-text-block, landmark-unique) and phone/tablet layout polish. Layout only, no text. ===== */
/* 1) axe link-in-text-block (/kayit-ol, /karsilastirma*): a link inside running text is told apart by an underline, not by colour alone. */
html body .kar-auto-band p a, html body .reos-consent-note a, html body label[for="overseas-consent"] a { text-decoration: underline; text-underline-offset: 2px; }
/* 2) /karsilastirma* (G3): the "compiled automatically" info box gets a readable line height; each breadcrumb item (slash + link) stays on one line. */
html body .kar-auto-band p { line-height: 1.55; }
html body .kar-breadcrumb li { display: flex; align-items: center; min-width: 0; }
html body .kar-breadcrumb li + li::before { flex: none; }
/* 4) /fiyatlar phones (G2): the Ofis tab badge stacks its two parts (it was wider than its tab and left the screen by 1 px); the price table header buttons fit their column. */
@media (max-width: 420px) {
    html body .paket-secim-btn-ofis .paket-tab-badge { flex-direction: column; gap: 0; border-radius: 14px; line-height: 1.25; text-align: center; }
    html body .paket-secim-btn-ofis .paket-tab-baz::before { content: none; }
}
@media (max-width: 340px) {
    html body .sure-btn .sure-badge { flex-direction: column; gap: 0; border-radius: 14px; line-height: 1.25; text-align: center; }
    html body .sure-btn .sure-badge .sure-baz::before { content: none; }
}
@media (max-width: 639.98px) {
    html body .comparison.ozellik-inline-table .price-info, html body .ozellik-inline-table thead .price-info { padding-left: 4px; padding-right: 4px; }
    html body .ozellik-inline-table thead a.price-buy { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding: 6px 2px; text-align: center; letter-spacing: 0; line-height: 1.25; }
}
/* 5) tab chips (G4): the /ozellikler chip row scrolls sideways; it fades out at its right edge like the other chip rows. */
@media (max-width: 767.98px) {
    html body .sl-ozl.sl-tabs-a .sl-tablist { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}
/* 6) /entegrasyonlar phones (G4): portal names such as "TheHouseShop.com" did not fit a 3-column cell and broke inside the word; two columns give them room. */
@media (max-width: 480px) {
    html body .eg-page .eg-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .eg-page .eg-logos > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
    html body .eg-page :is(.eg-h2, .eg-h3) { text-align: left; }
}
/* 7) /blog pager (K1): keyboard focus ring on the page links. */
html body .pagination .page-link:focus-visible { outline: 3px solid #0b4f9c; outline-offset: 2px; position: relative; }
/* 8) /musteri-yorumlari (heading-order): the person name is an h2 now (h1 > h2, no skipped level); it keeps the look it had as an h3. */
html body .testimonial-card .info h2 { color: #004494; font-size: 1.4rem; line-height: 1.3; margin: 0 0 8px; font-weight: 600; letter-spacing: .3px; }
@media (max-width: 768px) {
    html body .testimonial-card .info h2 { font-size: 1.3rem; }
}
/* ===== V14-16 (01.11) END ===== */
/* ===== V14-28 (01.11) BEGIN: layout only, no text. ===== */
/* 2) anchor jumps (/rehber "Kategoriye atla"): html already has scroll-padding-top 110 px, which clears the 63 px phone header; from 768 px the header is 112 px, so the jumped-to category heading stopped 2 px below it. 24 px of scroll margin (134 px in total) leaves a clear gap. Guide TOC targets already sit 190 px down (rehber-bilesen.css), so they are not touched. */
@media (min-width: 768px) {
    html body .prf-page h2.pcrm-h2[id^="kume-"] { scroll-margin-top: 24px; }
}
/* ===== V14-28 (01.11) END ===== */
/* ===== B31 (03.11) BEGIN: layout only, no text. ===== */
/* B1) /haberler and /duyurular pager: the list is a no-wrap flex row (StyleSheet.css) of << 1..6 >>; at 360-372 px its items cannot shrink any further and it ran past the right edge (scrollWidth 367 on a 360 viewport). Up to 380 px it wraps onto a second row; wider phones keep the single row. */
@media (max-width: 380px) {
    html body .pagination { flex-wrap: wrap; row-gap: 8px; }
}
/* H46: up to 420 px the eight pager items (<< 1..6 >>) were 374 px wide in a 318 px list (28 px past each edge at 390, two rows at 360). Smaller gap and side padding make them about 266 px, so the row stays single at 360-420 px; links stay at least 24 px wide. */
@media (max-width: 420px) {
    html body .pagination { column-gap: 6px; }
    html body .pagination .page-link { padding-left: 10px; padding-right: 10px; }
}
/* ===== B31 (03.11) END ===== */