/* ==========================================================================
   Dönüştür.net — KİNETİK blog (list + post): page head, cards, pager, sidebars, editorial ~70ch reading type,
   highlight.js tokens. The ONLY page stylesheet of blog_list / blog_detail: they do not load pages.css (it matched
   ~1-4 % there and pushed the blog over the ~18 KB render-blocking CSS budget). Builds on tokens.css + site.css.
   ========================================================================== */

/* ---------- breadcrumb + page head + empty state
   Same component as pages.css (page head / empty): keep the two copies in sync. ---------- */
.crumb { padding-top: var(--s-5); }
.crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 var(--t-mono)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html[lang="ja"] .crumb ol, html[lang="ar"] .crumb ol { letter-spacing: 0; }
.crumb li + li::before { content: "/"; padding-inline: .7em; color: var(--ink-3); }
.crumb a { text-decoration: none; display: inline-block; padding-block: 8px; margin-block: -8px; }   /* 2026-09-26: ≥ 32 px tap height, same layout */
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb [aria-current] { color: var(--ink); }

.ph { padding-bottom: var(--s-7); border-bottom: 1px solid var(--rule); }
.ph__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-5); align-items: end; margin-top: var(--s-6); }
.ph__h {
  grid-column: 1 / 9; min-width: 0;
  /* 1.04, not .94: Turkish capitals (İ Ş Ç Ğ) need the room between wrapped lines */
  font-family: var(--f-wide); font-size: clamp(38px, 5.9vw, 96px); line-height: 1.04; font-weight: 820; font-stretch: 120%; letter-spacing: -.042em;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-wrap: balance;
}
.ph__h em, .ph__h .gradient-text { font-style: normal; color: var(--signal); background: none; -webkit-text-fill-color: currentColor; }
.ph__h--blog { font-size: clamp(36px, 5.2vw, 84px); }
.ph__side { grid-column: 9 / 13; min-width: 0; display: grid; gap: var(--s-4); }
.ph__lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
html[lang="ja"] .ph__h, html[lang="ar"] .ph__h, html[lang="ja"] .post__h, html[lang="ar"] .post__h { letter-spacing: 0; font-stretch: 100%; line-height: 1.12; }
.ico--back { transform: scaleX(-1); }
[dir="rtl"] .ico--back { transform: none; }

.empty { display: grid; justify-items: start; gap: 10px; padding: clamp(24px, 4vw, 48px); border: 1px dashed var(--ink-3); border-radius: var(--r-1); }
.empty__viz { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.empty__h { font-family: var(--f-wide); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.04; font-weight: 800; font-stretch: 116%; letter-spacing: -.035em; }
.empty__t { color: var(--ink-2); margin-bottom: 8px; }

/* ---------- blog ---------- */
.bl-feat { padding-top: var(--s-7); }
.feat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--s-5); align-items: center; }
.feat__img { grid-column: 1 / 8; }
.feat__txt { grid-column: 8 / 13; display: grid; gap: 14px; justify-items: start; }
.feat__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.feat__h { font-family: var(--f-wide); font-size: clamp(28px, 3vw, 46px); line-height: 1.06; font-weight: 800; font-stretch: 116%; letter-spacing: -.035em; }
html[lang="ja"] .feat__h, html[lang="ar"] .feat__h { letter-spacing: 0; font-stretch: 100%; line-height: 1.2; }
.feat__h a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--e-out); }
.feat__h a:hover { background-size: 100% 2px; }
.feat__t { color: var(--ink-2); line-height: 1.55; }
.byline { display: flex; align-items: center; gap: 10px; font-size: var(--t-meta); }
.byline__m { width: 26px; height: 26px; flex: none; }
.byline b { font-weight: 650; }

.bimg { position: relative; display: block; aspect-ratio: 1200 / 630;   /* = blog kapakları (blog_covers.py): kırpılmaz */ overflow: hidden; background: var(--paper-2); border: 1px solid var(--ink); border-radius: var(--r-1); }
.bimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--e-out); }
.bimg__ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper-2); background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px); background-size: 24px 24px; }
.feat:hover .bimg img { transform: scale(1.03); }

.bl-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); padding-top: var(--s-8); padding-bottom: var(--s-9); }
.bl-main { grid-column: 1 / 10; min-width: 0; }
.bl-aside { grid-column: 10 / 13; min-width: 0; }
.bl-aside > * { position: sticky; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-6); }
.chip { min-height: 40px; padding: 0 14px; font: 500 12.5px/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--rule); border-radius: var(--r-1); color: var(--ink-2); }
html[lang="ja"] .chip, html[lang="ar"] .chip { letter-spacing: 0; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--cg); }
.bcard { min-width: 0; }
.bcard__in { position: relative; display: grid; gap: 10px; align-content: start; }
.bcard__img { margin-bottom: 6px; transition: transform .5s var(--e-out), box-shadow .5s var(--e-out); }
.bcard__h { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15; font-weight: 700; font-stretch: 108%; letter-spacing: -.02em; }
.bcard__h a { text-decoration: none; }
.bcard__h a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bcard__t { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }
.bcard__go { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.bcard__go .ico { width: 14px; height: 14px; transition: transform .5s var(--e-out); }
.bcard__in:hover .bcard__img { transform: translate3d(-3px, -3px, 0); box-shadow: var(--shadow); }
.bcard__in:hover .bcard__h a { text-decoration: underline; text-decoration-thickness: 1.5px; }
.bcard__in:hover .bcard__go .ico { transform: rotate(45deg); }
.bcard__in:focus-within .bcard__img { box-shadow: var(--shadow); }
.bl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--cg); }

.pager { margin-top: var(--s-8); }
.pager ul { display: flex; flex-wrap: wrap; gap: 6px; }
.pager__a { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; font: 500 14px/1 var(--f-mono); border: 1px solid var(--rule); border-radius: var(--r-1); text-decoration: none; }
a.pager__a:hover { border-color: var(--ink); }
.pager__a.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pager__a.is-off { color: var(--ink-3); border-color: var(--rule-2); }
.pager__a .ico { width: 16px; height: 16px; }

.side { position: relative; }
.side + .side { margin-top: var(--s-7); }
.side__k { color: var(--ink-3); font-weight: 500; margin-bottom: 12px; }
.side__t { font-size: var(--t-sm); color: var(--ink-2); margin: -4px 0 12px; }
.pop { border-top: 1px solid var(--ink); }
.pop__a { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.pop__n { color: var(--ink-3); grid-row: span 2; padding-top: 3px; }
.pop__t { font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.pop__m { font-size: 12px; }
.pop__a:hover .pop__t { text-decoration: underline; }
.pop__a:hover .pop__n { color: var(--signal-ink); }
.tlinks { border-top: 1px solid var(--ink); }
.tlink { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 18px; column-gap: 10px; row-gap: 4px; align-items: center; padding: 14px 0; padding-inline-start: 12px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.tlink::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; background: var(--c); transition: width .45s var(--e-out); }
.tlink:hover::before { width: 6px; }
.tlink__fx { font-size: 20px; grid-column: 1; }
.tlink__n { grid-column: 1; font-size: var(--t-meta); color: var(--ink-2); }
.tlink__go { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; transition: transform .5s var(--e-out); }
.tlink:hover .tlink__go { transform: rotate(45deg); }

/* post */
.ph--post { border-bottom: 0; padding-bottom: 0; }
.post__head { max-width: 1040px; margin-top: var(--s-6); display: grid; gap: 16px; justify-items: start; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 5px 8px 4px; border: 1px solid var(--rule); border-radius: var(--r-1); color: var(--ink-2); font-size: 12px; }
.post__h .nobr { white-space: nowrap; }   /* 2026-09-26: "e-Devlet" stays whole (blog_detail.html) */
.post__h { font-family: var(--f-wide); font-size: clamp(34px, 4.6vw, 72px); line-height: 1.04; font-weight: 820; font-stretch: 118%; letter-spacing: -.04em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-wrap: balance; }
.post__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.post { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); padding-top: var(--s-6); padding-bottom: var(--s-9); border-top: 1px solid var(--rule); margin-top: var(--s-6); }
.post__main { grid-column: 1 / 9; min-width: 0; }
.post__aside { grid-column: 10 / 13; min-width: 0; }
.post__aside .side:first-child { position: sticky; top: calc(var(--hh) + 24px); }
.post__fig { margin: 0 0 var(--s-6); }
.post__fig img { width: 100%; height: auto; border: 1px solid var(--ink); border-radius: var(--r-1); }
.post__fig figcaption { margin-top: 8px; }
.post__tools { display: flex; gap: 10px; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.author { display: flex; gap: 16px; align-items: center; margin-top: var(--s-5); padding: 18px 20px; background: var(--paper-2); border-radius: var(--r-1); }
.author__m { width: 44px; height: 44px; flex: none; }
.author__n { font-weight: 700; }
.author__b { font-size: var(--t-sm); color: var(--ink-2); }
.related { margin-top: var(--s-8); }
.related__h { font-size: clamp(24px, 2.2vw, 32px); font-weight: 740; font-stretch: 112%; letter-spacing: -.025em; margin-bottom: var(--s-5); }

/* editorial reading typography (~70ch) */
.prose { max-width: 70ch; font-size: clamp(17px, 1.2vw, 18.5px); line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: clamp(25px, 2.2vw, 32px); line-height: 1.15; font-weight: 740; font-stretch: 110%; letter-spacing: -.025em; }
.prose h3 { margin-top: 1.7em; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.25; font-weight: 700; font-stretch: 106%; letter-spacing: -.015em; }
.prose h4 { margin-top: 1.5em; font-size: 18px; font-weight: 700; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose h2 + h3, .prose h3 + h4 { margin-top: 1em; }   /* 2026-09-26: a sub-heading right under its heading keeps some air (was .6em ≈ 13 px) */
.prose a { color: var(--signal-ink); text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 680; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose ul { list-style: none; padding-inline-start: 1.3em; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; inset-inline-start: -1.1em; top: .72em; width: 7px; height: 7px; background: var(--ink); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-family: var(--f-mono); font-size: .85em; color: var(--ink-3); }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-inline: 0; padding: 4px 0; padding-inline-start: 20px; border-inline-start: 3px solid var(--signal); font-size: 1.08em; font-weight: 520; color: var(--ink); }
.prose img { height: auto; border: 1px solid var(--ink); border-radius: var(--r-1); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 8px; font-size: var(--t-meta); color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px solid var(--ink); margin: 2.2em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); display: block; overflow-x: auto; }
.prose th, .prose td { padding: 10px 14px 10px 0; padding-inline: 0 14px; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: top; }
.prose thead th { font: 500 var(--t-mono)/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--ink); }
.prose :not(pre) > code { font: 500 .86em/1 var(--f-mono); padding: 2px 5px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-1); }
.prose pre { overflow-x: auto; padding: 18px 20px; background: var(--ink); color: var(--paper); border-radius: var(--r-1); font: 500 14px/1.6 var(--f-mono); direction: ltr; text-align: left; }
.prose pre code { font: inherit; background: none; padding: 0; border: 0; color: inherit; }
/* highlight.js tokens in family colours (light-on-ink) */
.prose .hljs { background: none; color: var(--paper); }
.prose .hljs-keyword, .prose .hljs-doctag, .prose .hljs-type, .prose .hljs-template-tag, .prose .hljs-selector-tag, .prose .hljs-name { color: var(--pdf-lt); }
.prose .hljs-title, .prose .hljs-section, .prose .hljs-built_in { color: var(--aud-lt); }
.prose .hljs-attr, .prose .hljs-attribute, .prose .hljs-number, .prose .hljs-literal, .prose .hljs-variable, .prose .hljs-selector-class, .prose .hljs-selector-id { color: var(--doc-lt); }
.prose .hljs-string, .prose .hljs-regexp, .prose .hljs-symbol, .prose .hljs-bullet { color: var(--img-lt); }
.prose .hljs-comment, .prose .hljs-quote, .prose .hljs-meta { color: var(--on-ink-2); font-style: italic; }
.prose .hljs-addition { color: var(--ok-lt); }
.prose .hljs-deletion { color: var(--vid-lt); }
.prose .hljs-strong { font-weight: 700; }
.prose .hljs-emphasis { font-style: italic; }

@media (max-width: 1279.98px) {
  .ph__h { grid-column: 1 / 8; }
  .ph__side { grid-column: 8 / 13; }
}
@media (max-width: 1023.98px) {
  .ph__h, .ph__side { grid-column: 1 / -1; }
  .ph__lead { max-width: 60ch; }
  .feat__img, .feat__txt { grid-column: 1 / -1; }
  .bl-main, .bl-aside { grid-column: 1 / -1; }
  .bl-aside { margin-top: var(--s-8); }
  .post__main, .post__aside { grid-column: 1 / -1; }
  .post__aside { margin-top: var(--s-8); }
  .post__aside .side:first-child { position: static; }
}
@media (max-width: 719.98px) {
  .ph { padding-bottom: var(--s-6); }
  .ph--post { padding-bottom: 0; }
  .ph__grid { margin-top: var(--s-5); }
  /* one card per row on phones (this rule used to sit in pages.css, loaded BEFORE this file, so the base 2-column rule won) */
  .bl-grid, .bl-grid--2 { grid-template-columns: 1fr; }
  .pop__a { grid-template-columns: 26px minmax(0, 1fr); }
  .prose pre { margin-inline: calc(var(--g) * -1); border-radius: 0; }
}