/* H-116 / H-117: phone-only rules; loaded only while Seo:UiH116 is on (after arayuz-h86.css and arayuz-h92.css, so equal specificity wins by order).
   Padding, min-height and one text colour only. Fixed contact buttons (position, data, size), header, footer, cookie markup and scripts, brand logo section, hero text and z-index: not touched. */

/* H-116 (kept part): the contact column floats above the page and reserves no room (02.11). /sss and /fiyatlar FAQ cards were 99vw wide (StyleSheet.css) and ignored the column; they fill the column. */
@media (max-width: 480px) {
    html body main#icerik:not(:has(.home-intro)) .faq-card-modern { width: 100%; max-width: 100%; }
}

/* H-117 (a): the H-86 phone cookie strip made its two buttons 40 px high; 44 px again (button text, width and markup unchanged). */
@media (max-width: 600px) {
    html body #cookie-banner .cookie-actions > * { min-height: 44px; }
}

/* H-117 (b): 44 px touch targets that stayed under 44 px after H-92: blog share buttons (40 px), /basinda-biz press rows (21 / 42 px), /entegrasyonlar scope table links (19 px).
   The press list rows lose 10 px of their own padding so a row grows by about 3 px instead of 23 px. */
@media (max-width: 600px) {
    html body .share-btn { min-width: 44px; min-height: 44px; }
    html body .pcrm-press-links li { padding-top: 4px; padding-bottom: 4px; }
    html body .pcrm-press-links a { display: flex; align-items: center; min-height: 44px; }
    html body .h82-table td a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* H-117 (c): publisher box text colour pinned to a dark slate (#1f2937 on the box's #f5f5f5 tint is about 13:1; WCAG AA needs 4.5:1).
   The box has no colour of its own (it inherits the page text colour, #555 on blog pages), so any page colour change could drop it below AA. */
html body .publisher-box,
html body .publisher-box p { color: #1f2937; }

/* H-118b (a): on phones the transparent "RE-OS'u Keşfet" outline button (white text, white 1 px border) sat straight on the first-screen photo; where the photo is light (or the image has not loaded yet) the white text nearly vanished.
   It now gets the theme's own dark token (--reos-alway-dark, #111111) at 65 % as a fill: even over a pure white background that is about #646464, so white text stays above 4.5:1 (about 6:1). Text, border, size and markup unchanged; the hover and keyboard-focus state keep the theme's white fill with dark text (excluded here). */
@media (max-width: 768px) {
    html body .home-opening ~ .apps a.button.borderline-white:not(:hover):not(:focus-visible) {
        background-color: rgba(17, 17, 17, 0.65);
        background-color: color-mix(in srgb, var(--reos-alway-dark, #111111) 65%, transparent);
    }
}

/* H-130: the first-screen title still ran under the fixed contact bar at 360 to 380 px (H-125 only covers 390 to 480). Measured before at 375 px: 20.2 px.
   "Pazarlama Platformu" is 10.9 em wide and cannot wrap, and the bar (40 px wide) leaves 335 px at 375 px but the centred line needs the margin on both sides, so the type has to shrink here and only here:
   (viewport - 96 px) / 10.9 keeps the line's right edge about 8 px left of the bar (the title line is centred in the full-width column, so its right edge is viewport/2 + width/2; about 25.6 px at 375 px, 24.2 px at 360 px). From 381 px nothing changes.
   Only the font size of the title is set; text, buttons, logo strip and every other screen are untouched. main#icerik in the selector beats the 576 px rule of duzeltmeler-p933.css (same classes). */
@media (max-width: 380px) {
    html body main#icerik .heading-title.size-xl:has(~ .home-opening) { font-size: min(31px, calc((100vw - 96px) / 10.9)) !important; }
}

/* ===== H-133 BEGIN (390 px and narrower phone fixes; separate block, safe to merge next to other edits) ===== */
/* H-133 (a): first-screen title at 381 to 389 px. H-130 covers up to 380 px and H-125 starts at 390 px, so 381 to 389 px ran 13 to 19 px under the fixed contact bar.
   Same rule and same formula as H-130, only for the gap widths (27 px type at 389 px); 390 px and wider are not matched by this media query. */
@media (min-width: 381px) and (max-width: 389px) {
    html body main#icerik .heading-title.size-xl:has(~ .home-opening) { font-size: min(31px, calc((100vw - 96px) / 10.9)) !important; }
}

/* H-133 (b): inner page banner title (page title in the dark photo band: /kimler-icin h1, /fiyatlar h2, /ozellikler h1) sat under the fixed header on phones.
   Measured at 375 and 389 px: the title started at y 73 (/kimler-icin, 3 lines) and y 84 (/fiyatlar) while the header ends at y 107, so the logo and the login button covered the first line.
   The band now starts the title at y 112 (just under the header), keeps at least 200 px height, and grows with the title. Only this band; the title font, text and markup are not touched.
   H-133b: the same overlap stayed at 390 to 767 px (/kimler-icin title at y 91 or 73, /fiyatlar at y 84, header ends at y 107), so the one number is raised from 389 to 767 px, the same phone range as the H-78 banner rule (max-width 767 px) this rule overrides. 768 px and wider: not matched. */
@media (max-width: 767px) {
    html body .breadcrumb-img.background-overlay { height: auto !important; min-height: 200px; box-sizing: border-box; padding-top: 112px !important; padding-bottom: 28px; align-items: flex-start; }
}
/* ===== H-133 END ===== */

/* ===== H-144 BEGIN (/ozellikler hub cards: category icon in the title + equal card heights; separate block, safe to merge next to other edits) ===== */
/* UI report item 9: the hub cards (.ozl-card in .ozl-hub .ozl-cards) had no icon and different heights. The icon is a Font Awesome class from the existing sprite set (markup only with Seo:UiH116 on);
   the icon look is the same as the existing .ozl-card-ico of the wide card (40 px round, #eaf2fb, #0b4f9c). Selectors are scoped under .ozl-hub so the other pages that reuse .ozl-card (glossary, guides, profiles) are not touched.
   Equal height: the grid already stretches every card to the row height; the card is now a column and its list grows, so the content block fills the stretched card and the borders line up. One column (phones): each card keeps its own content height. */
html body .ozl-hub .ozl-cards { align-items: stretch; }
html body .ozl-hub .ozl-cards > .ozl-card { display: flex; flex-direction: column; box-sizing: border-box; }
html body .ozl-hub .ozl-cards > .ozl-card > .ozl-card-list { flex: 1 1 auto; }
html body .ozl-hub .ozl-card-title:has(> .ozl-cat-ico) { display: flex; align-items: center; gap: 12px; }
html body .ozl-hub .ozl-card-title > .ozl-cat-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; background: #eaf2fb; color: #0b4f9c; font-size: 18px; line-height: 1; }
html body .ozl-hub .ozl-card-title > .ozl-cat-ico + span { min-width: 0; }
/* ===== H-144 END ===== */

/* ===== H-147 BEGIN (blog post tables; separate block, safe to merge next to other edits) ===== */
/* H-147 (UI report item 13): a table inside a blog post body that carries its own inline min-width (for example min-width: 560px or 640px) stayed that wide on phones and tablets.
   icerik-html.css already turns every body table into a horizontally scrolling block (display: block, max-width: 100%, overflow-x: auto), but an inline min-width beats max-width,
   so the block itself was wider than the text column: it overflowed the column, was cut off by the page and could not be scrolled (measured: 640 px table in a 351 px column at 375 px).
   Fix: only tables with an inline min-width, and not directly inside the author's .rc-table-wrap or a div with an inline overflow rule (those wrappers scroll by themselves, as in the live post 1244), lose that min-width. The block then fits the column and its cells scroll inside it.
   Tables without an inline min-width, wrapped tables, the body HTML and the template are not touched; where the column is wider than the old min-width the box stays full width, so wide screens look the same. */
html body .blog-detail-article .article-content table[style*="min-width"]:not(.rc-table-wrap > table):not([style*="overflow"] > table) { min-width: 0 !important; }
/* ===== H-147 END ===== */

/* ===== H-148 BEGIN (/fiyatlar package title icons + no text under 12 px; separate block, safe to merge next to other edits) ===== */
/* UI report item 15: the package boxes (Gumus / Altin / Platin, Danisman and Ofis) had no icon and 31 elements on the page were set under 12 px.
   Icon: an empty Font Awesome element from the existing sprite set (markup only with Seo:UiH148 on), placed in front of the title text inside .pricing-box .name; it takes the colour of the title.
   Text: only the font-size of the small elements is raised to 12 px (tab badges and sub-lines, period badge and sub-line, compare-table buy buttons, calculator tier limits and badge); nothing else of their look changes. */
html body .pricing-box .name > .pkg-ico { display: inline-block; flex: 0 0 auto; width: 1.25em; margin: 0 8px 0 0; padding: 0; font-size: .95em; line-height: 1; text-align: center; vertical-align: -.08em; }
html body .paket-tab-badge, html body .sure-badge, html body .hcalc-badge-mini { font-size: 12px; }
html body .paket-tab-mini, html body .sure-alt, html body .hcalc-tier-limits { font-size: 12px; }
html body .comparison .price-buy, html body .comparison .free-buy { font-size: 12px; }
/* ===== H-148 END ===== */

/* ===== H-152 BEGIN (/blog cover images keep one ratio; separate block, safe to merge next to other edits) ===== */
/* UI report item 19: the cover box has a fixed height (280 px, 240 px under 992 px) while its width follows the column, so the box ratio moved between 1.1 and 1.5 against the 550 x 375 (1.467) picture and the cover was cropped differently at every width.
   The box now takes the ratio of the picture itself (550 / 375): its height follows its width, nothing is cropped at the usual sizes, and the space is reserved before the picture loads (no layout shift).
   object-fit: cover stays as the safety net for a cover that arrives in another ratio. Scope: only the blog list covers (the box whose link goes to /blog-detay), not the news, notice or education lists that share the class name. */
html body .blog-content .blog-card .blog-image:has(> a[href*="/blog-detay"]) { height: auto; aspect-ratio: 550 / 375; }
html body .blog-content .blog-card .blog-image:has(> a[href*="/blog-detay"]) > a { display: block; width: 100%; height: 100%; }
html body .blog-content .blog-card .blog-image:has(> a[href*="/blog-detay"]) img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ===== H-152 END ===== */

/* ===== H-149 BEGIN (one style for inner-page banner titles and section headings; separate block, safe to merge next to other edits) ===== */
/* UI report item 18: banner titles and section headings differed from page to page (measured on 11 inner pages at 375 / 390 / 768 / 1280 px, see the H-149 report).
   Banner title (white on the photo band): weight 600 on every page except /sss (inline style: weight 800, letter-spacing 1 px). The ALL CAPS of /fiyatlar and /sss is in the words themselves (upper-cased in the view), so the case is fixed in the view, not here.
   Section headings: the Sala "heading-title size-l" headings were brand blue weight 600, the newer content pages (.pcrm-h2, 41 views against 28 with size-l) use dark navy weight 700, the /fiyatlar calculator title was 800.
   One style, taken from the majority: banner title weight 600, normal letter-spacing, no case change; section heading dark navy (#021c3a), weight 700. Sizes, spacing and the phone position of the banner title (H-133b) are not touched; .pcrm-h2 already has this style and stays as it is.
   Scope: page content only, skipped wherever .home-intro exists (the home page); only a heading-title that is a direct child of a .heading box. !important only where an older rule forces it: weight and letter-spacing of the banner rule (/sss carries them inline) and the colour of the section rule (".site-content h1 { color: #064a97 !important }" would keep an h1 section title blue). */
html body main#icerik:not(:has(.home-intro)) .heading.heading-alway-white > .heading-title.size-xl:not(.w500) { text-transform: none; font-weight: 600 !important; letter-spacing: normal !important; }
html body main#icerik:not(:has(.home-intro)) .heading:not(.heading-alway-white) > .heading-title.size-l { color: #021c3a !important; font-weight: 700; }
html body main#icerik .hcalc-head .hcalc-title { font-weight: 700; }
/* ===== H-149 END ===== */

/* ===== H-150 BEGIN (44 px touch targets for the "Daha Fazla Bilgi" buttons and the LinkedIn profile link; separate block, safe to merge next to other edits) ===== */
/* UI report items 20 and 21: the six home capability buttons (.expand-hint, 148 x 34-39 px) and the /hakkimizda LinkedIn profile link (31 px high) were under 44 px.
   Only min-height is added (the boxes already use border-box); the inline-flex link keeps its icon and text on one line, centred. Width, colours, border, font and markup are unchanged.
   Scope: the capability cards inside the page content (main#icerik .icon-box) and the outline button link inside the page content; the page frame, the contact bar and the brand logos are not selected. */
@media (max-width: 1024px) {
    html body main#icerik .icon-box .expand-hint { box-sizing: border-box; min-height: 44px; }
    html body main#icerik a.btn.btn-outline-primary.btn-sm[href*="linkedin.com"] { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; }
}
/* ===== H-150 END ===== */

/* ===== H-153 BEGIN (sticky tab menu of /ozellikler and /sss as one sideways-scrolling row on phones and small tablets; separate block, safe to merge next to other edits) ===== */
/* UI report item 10: the four tabs (Ozellikler, Entegrasyonlar, Hazir Website, SSS) wrapped to four lines on a 375 px phone and took about 100 px of the screen.
   Only the tab row inside the page content is selected (.alt-nav .w-container and its links): one line, scrolls sideways inside itself, scrollbar hidden, touch momentum, tabs snap to the start edge.
   The 4 px padding keeps the 3 px keyboard focus ring of a tab from being cut off by the scroll box; the -4 px top and bottom margin gives that space back, so the row adds no height of its own. Markup, anchors, the current-tab state, the sticky behaviour and the page frame are not touched. */
@media (max-width: 768px) {
    html body main#icerik .alt-nav .w-container { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; padding: 4px; margin: -4px 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 0 4px; }
    html body main#icerik .alt-nav .w-container::-webkit-scrollbar { width: 0; height: 0; }
    html body main#icerik .alt-nav .link-block-3 { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}
/* ===== H-153 END ===== */
/* ===== H-145 BEGIN (icons in the /ozellikler/* detail page section headings; separate block, markup only with Seo:UiH116 on) ===== */
/* UI report item 26: the section headings of the detail pages (one template, Detail.cshtml) had no icon. The empty icon element (class ico145, a Font Awesome class pair from the existing sprite set) is added only while Seo:UiH116 is on.
   Look: the same 40 px round #eaf2fb / #0b4f9c icon as the other Sala cards (H-144, H-146), left of the centred heading text. Scope: the .ozl-page section headings only (the icon box rule is scoped, so a global svg or img rule cannot push the icon above the text).
   Phones: icon 36 px and a smaller gap; the heading text may wrap and stays centred. */
html body .ozl-page .pcrm-h2:has(> .ico145) { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; }
html body .ozl-page .pcrm-h2 > .ico145 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; background: #eaf2fb; color: #0b4f9c; font-size: 18px; line-height: 1; }
@media (max-width: 480px) {
    html body .ozl-page .pcrm-h2:has(> .ico145) { gap: 10px; }
    html body .ozl-page .pcrm-h2 > .ico145 { width: 36px; height: 36px; font-size: 16px; }
}
/* ===== H-145 END ===== */
/* ===== H-146 BEGIN (icons on the /hakkimizda boxes; the AI-box brain stays inside its box; separate block, markup only with Seo:UiH116 on) ===== */
/* UI report items 11 and 12. The empty icon element (class ico146, a Font Awesome class pair from the existing sprite set) is added only while Seo:UiH116 is on.
   Look: the same 40 px round #eaf2fb / #0b4f9c icon as the other Sala cards (H-144). Scope: the /hakkimizda article text only.
   Brain: the decorative brain of the AI box was pushed 30 percent out of the box by a transform (right edge 406 px at 375 px, hidden only by the box clipping); without the transform (the inline style needs the important mark) it sits inside the bottom right corner. Its size, colour and 5 percent opacity are not changed.
   Table: the "Hangi paket kime?" table already sits in its own scrolling box (.pcrm-table-wrap.is-scroll); the page does not overflow (measured), so no rule is added for it. */
html body .news-text :is(h3, h4):has(> .ico146) { display: flex; align-items: center; gap: 12px; }
html body .news-text .ico146 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; background: #eaf2fb; color: #0b4f9c; font-size: 18px; line-height: 1; }
html body .news-text i.fa-brain.position-absolute { transform: none !important; }
/* ===== H-146 END ===== */
/* ===== H-262 BEGIN (banner height kept stable while the web font loads; separate block, safe to merge next to other edits) ===== */
/* H-182 finding: with this file linked, the phone banner (height: auto from H-133b, min-height 200 px) grew by 39 px when the Poppins web font replaced the fallback font and a one-line title became two lines;
   every section below moved (CLS 0.07 on /ozellikler/mobil-uygulama; the flag-off page has a fixed 420 px band and does not move). A 320 px floor holds a one- and a two-line title in the same box (two lines measured 316 px at 375 / 412 px). Longer titles (3 lines) keep growing as before. */
@media (max-width: 767px) {
    html body .breadcrumb-img.background-overlay { min-height: 320px; }
}
/* ===== H-262 END ===== */
/* ===== H-146-KIMLER BEGIN (icons on the /kimler-icin profile cards; separate block, markup only with Seo:UiH116 on) ===== */
/* UI report item 12. The empty icon element (class ico146, a Font Awesome class pair from the existing sprite set) is added only while Seo:UiH116 is on.
   Look: the same 40 px round #eaf2fb / #0b4f9c icon as the other Sala cards (H-144). Scope: the /kimler-icin profile card list only. */
html body .prf-cards .ico146 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; background: #eaf2fb; color: #0b4f9c; font-size: 18px; line-height: 1; }
html body .prf-cards > .ozl-card > .ozl-card-title:has(> .ico146) { display: flex; align-items: center; gap: 12px; }
/* ===== H-146-KIMLER END ===== */

/* ===== H-134 BEGIN (home hero at 577 to 767 px without Seo:A11yFixes; separate block, safe to merge next to other edits) ===== */
/* Measured before (headless, A11yFixes off): at 577 to 640 px the hero text column (.SliderText .heading, a flex child with min-width:auto) grew to the width of "Pazarlama Platformu" at 56 px type (606 px)
   in a 516 to 540 px column, so the title, the lead lines, the two buttons and the logo grid ran 25 to 76 px past the right edge and under the fixed contact bar (clipped by the hero, no page scroll bar).
   Same two declarations as B3 / B4 of duzeltmeler-p933.css (Seo:A11yFixes) and dar-ekran-hero-h235.css (Seo:NarrowOverflowH235), limited to the one range where the hero overflows: the column may shrink (min-width: 0) and the title is 47 px (10.9 em = 512 px fits the column).
   Nothing is set at 768 px and wider or at 576 px and narrower. Text, buttons, logo grid, bar and header are not touched. */
@media (min-width: 577px) and (max-width: 767.98px) {
    html body .SliderText .heading { min-width: 0; }
    html body .SliderText .heading .heading-title { font-size: 47px !important; }
}
/* At 577 to 600 px the contact bar is 40 px wide (left edge at viewport - 40); one line of the opening text still ended 7.7 px under it at 577 px, so that block gets 12 px of right padding (border-box) in the same range. */
@media (min-width: 577px) and (max-width: 600px) {
    html body .SliderText .home-opening-text { box-sizing: border-box; padding-right: 12px; }
}
/* ===== H-134 END ===== */