/* =========================================================
   BLOG-POST.CSS — Sadece blog-yazi.html'e özel stiller
   ========================================================= */
.post-header{max-width:760px;margin:0 auto 32px;text-align:left;}
.post-header h1{font-size:34px;font-weight:700;margin:14px 0 18px;line-height:1.25;}
.post-meta-row{display:flex;align-items:center;gap:16px;font-size:13.5px;color:var(--gray-500);flex-wrap:wrap;}
.author-chip{display:flex;align-items:center;gap:8px;}
.author-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--teal-500),var(--navy-500));}

.post-cover{max-width:920px;margin:0 auto 48px;}

.post-layout{display:grid;grid-template-columns:220px 1fr;gap:48px;max-width:920px;margin:0 auto;align-items:start;}
.toc{position:sticky;top:100px;}
.toc h4{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin-bottom:14px;}
.toc ul{display:flex;flex-direction:column;gap:10px;}
.toc a{font-size:13.5px;color:var(--gray-500);border-left:2px solid var(--gray-200);padding-left:12px;display:block;}
.toc a.active, .toc a:hover{color:var(--teal-500);border-left-color:var(--teal-500);}

.post-content h2{font-size:23px;margin:36px 0 14px;}
.post-content p{font-size:15.5px;color:var(--navy-700);margin-bottom:16px;}
.post-content ul{padding-left:20px;margin-bottom:16px;}
.post-content li{font-size:15px;color:var(--navy-700);list-style:disc;margin-bottom:8px;}

.share-row{display:flex;gap:10px;margin:32px 0;}
.share-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:center;font-size:15px;transition:border-color .2s;
}
.share-btn:hover{border-color:var(--teal-500);}

.author-box{
  display:flex;gap:18px;align-items:center;border:1px solid var(--gray-200);
  border-radius:var(--radius);padding:24px;margin:40px 0;
}
.author-box .ph-img{width:64px;height:64px;border-radius:50%;flex-shrink:0;}
.author-box h4{font-size:15px;margin-bottom:4px;}
.author-box p{font-size:13.5px;color:var(--gray-500);}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:920px;margin:0 auto;}

@media (max-width:860px){
  .post-layout{grid-template-columns:1fr;}
  .toc{position:static;border-bottom:1px solid var(--gray-200);padding-bottom:20px;margin-bottom:20px;}
  .related-grid{grid-template-columns:1fr;}
}