/* ==========================================================================
   BLOG — Webflow "Blog" ve "Blog Posts Template" değerleri (1440px'te ölçüldü).
   Tokenlar style.css'ten gelir.
   ========================================================================== */

/* ---------- Liste ---------- */
.blog { padding-block: 10rem 8rem; }
.blog__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: 3rem; }
.blog__title { font-size: var(--h3); line-height: 1.05; letter-spacing: -.02em; font-weight: 500; }
.blog__sub { color: var(--grey-300); font-weight: 500; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.5rem; }
.post-card { display: flex; flex-direction: column; gap: 1.5rem; }
.post-card__media { aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: clip; background: var(--surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__body { display: flex; flex-direction: column; gap: .75rem; max-width: 95%; }
.post-card__title {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 500;
}
.post-card__desc { color: var(--grey-400); line-height: 1.4; }

/* ---------- Yazı ---------- */
.blog__inner { max-width: calc(45rem + 2 * var(--gutter)); }
.post__head { padding-top: 8rem; }
.post__infos { display: flex; align-items: center; gap: 1.5rem; }
.post__pill { padding: .35rem 1.125rem; border-radius: 999px; background: var(--surface); }
.post__title { margin-top: 2rem; font-size: var(--h3); line-height: 1.05; letter-spacing: -.02em; font-weight: 500; }
.post__media { margin-top: 8rem; aspect-ratio: 2 / 1; border-radius: 1.125rem; overflow: clip; background: var(--surface); }
.post__media img { width: 100%; height: 100%; object-fit: cover; }

.post__body { padding-block: 4rem 8rem; line-height: 1.5; }
.post__body h2 { margin: 0 0 1.5rem; font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; font-weight: 500; }
.post__body p { margin: 0 0 2.5rem; }
.post__body ol, .post__body ul { margin: 0 0 1.5rem; padding-left: 2.5rem; }
.post__body strong { font-weight: 600; }

.post-more__label { display: block; padding-top: 1rem; margin-bottom: 2rem; border-top: 1px solid var(--grey-100); }
.post-more .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Duyarlı ---------- */
@media (max-width: 991px) {
  .post-grid, .post-more .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post__media { margin-top: 4rem; }
}
@media (max-width: 767px) {
  .blog { padding-block: 7rem 5rem; }
  .post-grid, .post-more .post-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .post__head { padding-top: 7rem; }
  .post__title { font-size: var(--h4); }
  .post__media { margin-top: 2.5rem; }
  .post__body { padding-block: 3rem 5rem; }
  .post__body h2 { font-size: 1.75rem; line-height: 1.1; }
  .post__body p { margin-bottom: 1.75rem; }
}