/* H-19-07 blog cover fit (page-specific; loaded only by Blog/Index and Blog/Detail; the home BlogList cards get exact 3:2 files from mode=Crop and need no CSS).
   Covers arrive in mixed shapes (16:9 repo covers, square, 1.5, 2.0 panel covers). Every cover box is a fixed 3:2 frame and the picture is
   centre-cropped into it (object-fit: cover), never stretched. The views ask the CDN for the same 3:2 size in mode=Crop, so the file already
   has the box ratio and width/height on the img reserve the space (no layout shift). The 80x80 side-list thumbnail and the shared
   arayuz-h116.css rules are not touched; selectors are one class stronger than the older "whole picture" rules they replace. */

/* Blog list cards (/blog): panel cards */
html body .blog-content .row .blog-card .blog-image:has(> a[href*="/blog-detay"]) { height: auto; aspect-ratio: 3 / 2; overflow: hidden; background: #f4f7fa; }
html body .blog-content .row .blog-card .blog-image:has(> a[href*="/blog-detay"]) > a { display: block; width: 100%; height: 100%; }
html body .blog-content .row .blog-card .blog-image:has(> a[href*="/blog-detay"]) > a > img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 50% 50%; }

/* Blog list cards (/blog): repo article cards, same frame */
html body .bi-list .row .blog-card .bi-card-cover { aspect-ratio: 3 / 2; }
html body .bi-list .row .blog-card .bi-card-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Detail page hero */
html body .blog-detail-content .blog-detail-article .featured-image.bk-hero { aspect-ratio: 3 / 2; height: auto; overflow: hidden; background: #f3f7fc; }
html body .blog-detail-content .blog-detail-article .featured-image.bk-hero > img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 50% 50%; }

/* Blog post tables (11.11): header cells keep the author's row colour and a right-edge shadow shows that a wide table scrolls sideways.
   1) .rich-content th paints a light fill on every th, so a white-on-navy header row (inline colour on the th, inline fill on the tr) became white on near-white (about 1.06:1). Only header cells inside a row that sets its own background are made transparent, so the row fill shows again.
   2) Scroll hint: no text, only a fade on the right edge (scroll-driven, so it vanishes at the end and never shows when the table fits). Browsers without scroll-driven animations show no fade; the table still scrolls. */
@property --bk-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
html body .blog-detail-article .article-content thead tr[style*="background"] > th { background: transparent; }
@keyframes bk-table-fade { 0%, 92% { --bk-fade: 32px; } 100% { --bk-fade: 0px; } }
@supports (animation-timeline: scroll(self inline)) {
  html body .blog-detail-article .article-content :is(.rc-table-wrap, div[style*="overflow-x"], table:not(.rc-table-wrap > table):not(div[style*="overflow-x"] > table)) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--bk-fade)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--bk-fade)), transparent);
    animation: bk-table-fade linear both; animation-timeline: scroll(self inline);
  }
}

/* Blog post visual blocks (H-23-29, 11.11): the AI endpoint only keeps p, br, h2-h4, ul, ol, li, strong, em, b, i, u, blockquote, a (no class or attribute),
   so the blocks are keyed on structure. Colours are the icerik-html.css theme tokens (--rc-*), nothing new.
   1) Framed box = <blockquote><p><strong>Title</strong></p><p>text</p></blockquote>: left bar, light fill, title in the dark ink.
   2) Big statistic = same markup when the first paragraph is one short strong with a digit or % (<=12 chars). CSS cannot count characters, so
      /js/blog-ogeler.js adds .bk-stat to those blockquotes; without JS the block simply stays a framed box. Card look, no left bar.
   3) Table = icerik-html.css already makes .rich-content table scroll sideways with borders; here only zebra rows, a sticky-free calm header and the
      author-fill rule above are layered on (th fill stays var(--rc-light), the 898c0dc4 transparent-th rule is untouched). */
html body .blog-detail-article .article-content blockquote { margin: 28px 0; padding: 18px 22px; background: var(--rc-light); border: 1px solid var(--rc-border); border-left: 4px solid var(--rc-primary); border-radius: 12px; color: var(--rc-text); font-size: 1em; line-height: 1.65; }
html body .blog-detail-article .article-content blockquote > p { margin: 0 0 10px; }
html body .blog-detail-article .article-content blockquote > p:last-child { margin-bottom: 0; }
html body .blog-detail-article .article-content blockquote > p:first-child:has(> strong:only-child) { color: var(--rc-dark); font-size: 1.08em; line-height: 1.35; margin-bottom: 8px; }
html body .blog-detail-article .article-content blockquote > p:first-child > strong:only-child { color: var(--rc-dark); font-weight: 700; }
html body .blog-detail-article .article-content blockquote.bk-stat { border-left: 1px solid var(--rc-border); background: #fff; text-align: center; padding: 22px 20px; box-shadow: 0 2px 10px rgba(2, 28, 58, .06); }
html body .blog-detail-article .article-content blockquote.bk-stat > p:first-child { margin: 0 0 6px; line-height: 1.05; overflow-wrap: normal; }
html body .blog-detail-article .article-content blockquote.bk-stat > p:first-child > strong { display: block; font-size: clamp(2rem, 1.4rem + 3vw, 3rem); font-weight: 800; letter-spacing: -.02em; color: var(--rc-primary); }
html body .blog-detail-article .article-content blockquote.bk-stat > p:not(:first-child) { font-size: .9rem; line-height: 1.5; color: var(--rc-muted); }
html body .blog-detail-article .article-content table tbody tr:nth-child(even) > td { background: var(--rc-light); }
html body .blog-detail-article .article-content table tbody tr[style*="background"] > td { background: transparent; }
html body .blog-detail-article .article-content table :is(th, td) { color: var(--rc-text); }
html body .blog-detail-article .article-content table th { color: var(--rc-dark); }