<article class="blog-card">
  <div class="blog-image">
    <img src="kapak.jpg" alt="Post kapak" />
  </div>
  <div class="blog-body">
    <div class="blog-meta">
      <span class="badge badge-accent">Design</span>
      <span class="blog-date">7 Mar 2024</span>
      <span>·</span>
      <span>5 dk okuma</span>
    </div>
    <h2 class="blog-title">How to Build Modern Color Systems</h2>
    <p class="blog-excerpt">Token-based color systems improve design consistency...</p>
    <div class="blog-author">
      <div class="avatar avatar-fallback" style="width:2rem;height:2rem;font-size:.75rem">AS</div>
      <span>Alex Morgan</span>
    </div>
  </div>
</article>

<style>
.blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; }
.blog-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.blog-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
.blog-title  { font-weight: 600; line-height: 1.35; }
.blog-excerpt { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.blog-author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-top: 0.25rem; }
</style>