/* posts.css: EV Akademi (blog) and bulletin lists, post cards and the reading page
   (docs/DESIGN-PLAN.md §5.21, §4.10, §2.4 "Okuma düzeni"). Tokens only. */

/* ---------- Filter chips ---------- */
.pst-filter .cluster { --cluster: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pst-filter .chip.is-on { background: var(--secondary); border-color: var(--secondary); color: var(--on-band); }
.pst-filter .chip.is-on .pst-count { color: var(--on-band-muted); }
.pst-count { color: var(--muted); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.pst-filter--more { margin-bottom: var(--sp-6); }

/* ---------- Page head band (site.css .page-head) ----------
   Every page opens with the site's navy band: the breadcrumb and the H1 there, the band styles both.
   On the lists the first filter (audience; year on the bulletin) sits in the band's aside and takes the
   band's own chip style (site.css). Only the chosen chip and the counts are set here, because the chip
   rules above are for a light background: the chosen chip white with navy text, counts light. */
.page-head-aside .pst-filter .chip.is-on { border-color: var(--on-band); background: var(--on-band); color: var(--ink); }
.page-head-aside .pst-filter .pst-count { color: var(--on-band-subtle); }
.page-head-aside .pst-filter .chip.is-on .pst-count { color: var(--muted); }

/* ---------- Lists (first section under the band) ---------- */
.pst-list { padding-top: var(--sp-6); }
@media (min-width: 768px) { .pst-list { padding-top: var(--sp-8); } }
.pst-h2 { margin-bottom: var(--sp-5); font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
.pst-guides { margin-bottom: var(--sp-12); }
.pst-guide-list { display: grid; gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1600px) { .pst-guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pst-rss { margin-top: var(--sp-8); }
.pst-rss .link .i { transition: none; }
.pst-rss .link:hover .i { transform: none; }
.pst-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-8); }
.pst-empty-msg { color: var(--ink); font-size: var(--fs-intro); font-weight: var(--fw-medium); }
.pst-empty-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
/* With the drawing (empty-posts.svg): drawing on top on phones, drawing left and message right from 768 px. */
.pst-empty--art { align-items: stretch; gap: var(--sp-6); }
.pst-empty-art { width: min(100%, 320px); align-self: center; }
@media (min-width: 768px) {
  .pst-empty--art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--grid-gap); }
  .pst-empty-art { width: min(100%, 480px); justify-self: center; }
}

/* ---------- Card: 16:9 cover, title (H3), meta row; no summary line ---------- */
.pst-cards { margin: 0; padding: 0; list-style: none; }
.pst-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pst-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-tint); }
.pst-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.pst-card:hover .pst-card-img { transform: scale(1.02); }
.pst-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
@media (min-width: 768px) { .pst-card-body { padding: var(--sp-6); } }
.pst-card-title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.pst-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; max-width: none; margin: 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.pst-dot { color: var(--line-strong); }
.pst-card .pst-meta { margin-top: auto; }
/* Guides: horizontal card, picture on the left (5/12). */
@media (min-width: 768px) {
  .pst-card--guide { flex-direction: row; }
  .pst-card--guide .pst-card-media { flex: 0 0 41.667%; aspect-ratio: auto; min-height: 220px; }
  .pst-card--guide .pst-card-body { justify-content: center; padding: var(--sp-8); }
  .pst-card--guide .pst-card-title { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); }
  .pst-card--guide .pst-meta { margin-top: 0; }
}

/* Paging */
.pst-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-10); }
.pst-pages { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.pst-pages a, .pst-pages li[aria-hidden] {
  display: grid;
  min-width: var(--tap);
  height: var(--tap);
  place-items: center;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.pst-pages a:hover { background: var(--bg-alt); }
.pst-pages a[aria-current="page"] { background: var(--secondary); color: var(--on-band); }
.pst-pager .btn .i { width: 16px; height: 16px; }

/* ---------- Reading page: TOC · 68ch text · sticky side column ---------- */
.pst-read { padding-top: var(--sp-6); }
@media (min-width: 768px) { .pst-read { padding-top: var(--sp-8); } }
.pst-reading { row-gap: var(--sp-6); align-items: start; }
.pst-col-left, .pst-col-right { display: none; }
.pst-main { min-width: 0; }
@media (min-width: 768px) {
  .pst-main { grid-column: 1; grid-row: 1; }
  .pst-col-right { display: flex; grid-column: 2; grid-row: 1; }
}
@media (min-width: 1280px) {
  .pst-col-left { display: block; grid-column: 1; grid-row: 1; }
  .pst-main { grid-column: 2; }
  .pst-col-right { grid-column: 3; }
}
.pst-col-left, .pst-col-right { position: sticky; top: calc(var(--topbar-h-compact) + var(--header-h-compact) + var(--sp-6)); align-self: start; }
.pst-col-right { flex-direction: column; gap: var(--sp-5); }
@media (min-width: 768px) {
  .pst-after { display: none; }
}

/* The breadcrumb and the H1 are in the band above; the text column opens with the meta row. */
.pst-cover { margin: var(--sp-6) 0 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--bg-tint); }
.pst-cover img { width: 100%; height: 100%; object-fit: cover; }

.pst-side-title { margin-bottom: var(--sp-3); color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.pst-toc ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.pst-toc a {
  display: block;
  margin-left: -2px;
  padding: 6px 0 6px var(--sp-4);
  border-left: 2px solid transparent;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.pst-toc a:hover { color: var(--ink); }
.pst-toc a.is-current { border-left-color: var(--accent); color: var(--ink); font-weight: var(--fw-semibold); }
.pst-toc-mobile { margin-top: var(--sp-6); border-block: 1px solid var(--line); }
.pst-toc-mobile summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; color: var(--ink); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.pst-toc-mobile summary::-webkit-details-marker { display: none; }
.pst-toc-mobile summary .i { transition: transform var(--dur-2) var(--ease); }
.pst-toc-mobile[open] summary .i { transform: rotate(180deg); }
.pst-toc-mobile ol { margin: 0; padding: 0 0 var(--sp-4) 1.25em; }
.pst-toc-mobile li + li { margin-top: var(--sp-2); }
.pst-toc-mobile a { color: var(--ink); }
@media (min-width: 768px) { .pst-toc-mobile { display: none; } }

.pst-metabox { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-alt); }
.pst-metabox dt { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.pst-metabox dd { margin: 2px 0 0; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.pst-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.pst-cta-title { color: var(--ink); font-size: 1.125rem; font-weight: var(--fw-title); line-height: 1.3; }
.pst-cta .btn { width: 100%; justify-content: space-between; }
.pst-share { align-self: flex-start; }
.pst-share .i { width: 16px; height: 16px; }
.pst-after { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-10); }

/* At 1280 px and wider the left column holds the table of contents (or the meta box when there is none). */
@media (min-width: 1280px) {
  .pst-col-right .pst-toc--side, .pst-col-right .pst-metabox--no-toc { display: none; }
}

/* ---------- Article text ---------- */
.pst-body { margin-top: var(--sp-8); color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.pst-body > * + * { margin-top: var(--sp-5); }
.pst-body h2 { margin-top: var(--sp-12); font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); scroll-margin-top: calc(var(--topbar-h-compact) + var(--header-h-compact) + var(--sp-4)); }
.pst-body h3 { margin-top: var(--sp-8); font-size: 1.25rem; }
.pst-body h4 { margin-top: var(--sp-6); }
.pst-body :is(h2, h3, h4) + * { margin-top: var(--sp-3); }
.pst-body > :first-child { margin-top: 0; }
.pst-body :is(ul, ol) { padding-left: 1.3em; }
.pst-body li + li { margin-top: var(--sp-2); }
.pst-body li::marker { color: var(--muted); }
.pst-body a { color: var(--ink); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.pst-body a:hover { color: var(--accent-hover); }
.pst-body strong { color: var(--ink); }
.pst-body blockquote { padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); border-left: 1px solid var(--line-strong); color: var(--ink); font-size: 1.125rem; }
.pst-body figure { margin-inline: 0; }
.pst-body img { border-radius: var(--r-md); }
.pst-body figcaption { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-small); }
.pst-body table { width: 100%; font-size: var(--fs-small); }
.pst-body :is(th, td) { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pst-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-md); }
/* "İpucu" box: tint background, stripe mark on the left (DESIGN-PLAN §2.6, §5.21). */
.pst-tip { display: flex; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-tint); }
.pst-tip p { margin: 0; color: var(--ink); }
.pst-tip-mark { display: inline-flex; flex: none; flex-direction: column; gap: 1px; margin-top: 8px; }
.pst-tip-mark i { display: block; width: 16px; height: 3px; border-radius: 1px; background: var(--accent); }

/* ---------- Related posts ---------- */
.pst-related .sec-head h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); }

/* ---------- Toast ("Bağlantı kopyalandı") ---------- */
.pst-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: var(--band);
  color: var(--on-band);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-2);
  transform: translateX(-50%);
}

/* ---------- posts.cards rail: phones swipe one card at a time (docs/MOTION.md §10) ---------- */
.pst-rail { --rail-w: min(80vw, 340px); }
.pst-rail .rail-foot { display: flex; align-items: center; gap: var(--sp-5); }
.pst-rail .rail-foot .rail-progress { flex: 1 1 auto; }
/* The rail's own columns, not the 1 column card grid. */
@media (max-width: 767.98px) { .pst-rail .rail-track { grid-template-columns: none; } }
/* From 768 px the same list is the regular card grid (columns from the block, extra cards trimmed). */
@media (min-width: 768px) {
  .pst-rail .rail-track { grid-auto-flow: row; grid-auto-columns: auto; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .pst-rail .rail-foot { display: none; }
}

/* ---------- Block rows: one row per screen width (SSR marks the extra cards) ---------- */
@media (max-width: 767.98px) { .cv-sm-hide { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .cv-md-hide { display: none !important; } }
@media (min-width: 1024px) and (max-width: 1599.98px) { .cv-lg-hide { display: none !important; } }
@media (min-width: 1600px) and (max-width: 1919.98px) { .cv-xl-hide { display: none !important; } }
@media (min-width: 1920px) { .cv-2xl-hide { display: none !important; } }