/* ============================================================
   PlayHub — Blog stilleri (postlist.html + post.html)
   ============================================================ */

/* ============ BLOG LİSTE BAŞLIĞI ============ */
.blog-head{margin-bottom:30px}
.blog-head h1{font-size:46px;font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
.blog-head p{font-size:18px;font-weight:600;color:var(--txt-dim);max-width:680px;line-height:1.5}

/* kategori filtre sekmeleri */
.blog-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.blog-tabs a{border:1px solid var(--line);background:var(--panel);color:var(--txt-dim);border-radius:30px;
  padding:10px 18px;font-weight:800;font-size:15px;text-decoration:none;transition:all .16s}
.blog-tabs a:hover{background:var(--panel-2);color:var(--txt)}
.blog-tabs a.active{background:var(--accent-2);border-color:transparent;color:#fff}

/* ÖNE ÇIKAN YAZI */
.feat-post{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--panel);border-radius:20px;
  overflow:hidden;margin-bottom:36px;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .2s}
.feat-post:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.feat-post .fp-img{min-height:340px;background:linear-gradient(135deg,#5b2fd6,#2a1466);position:relative}
.feat-post .fp-img .fp-cat{position:absolute;top:16px;left:16px;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);
  color:#fff;font-weight:800;font-size:13px;padding:7px 13px;border-radius:9px}
.feat-post .fp-body{padding:36px 38px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.feat-post .fp-body .fp-meta{color:var(--txt-dim);font-weight:700;font-size:14px;margin-bottom:14px}
.feat-post .fp-body h2{font-size:27px;font-weight:800;line-height:1.2;margin:0 0 16px;letter-spacing:-.2px;overflow-wrap:break-word}
.feat-post .fp-body p{color:var(--prose);font-size:16px;line-height:1.6;font-weight:500;margin:0}
.feat-post .fp-body .fp-more{margin-top:20px;color:var(--accent-2);font-weight:800;font-size:15px;display:inline-flex;align-items:center;gap:7px}
.feat-post .fp-more svg{width:18px;height:18px}

/* YAZI IZGARASI */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.post-card{background:var(--panel);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .2s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.45)}
.post-card .pc-img{aspect-ratio:16/9;position:relative}
.post-card .pc-img .pc-cat{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);
  color:#fff;font-weight:800;font-size:12px;padding:6px 11px;border-radius:8px}
.post-card .pc-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.post-card .pc-meta{color:var(--txt-dim);font-weight:700;font-size:13px;margin-bottom:9px}
.post-card h3{font-size:21px;font-weight:800;line-height:1.2;margin-bottom:10px}
.post-card p{color:var(--prose);font-size:15px;line-height:1.55;font-weight:500;flex:1}
.post-card .pc-foot{margin-top:16px;display:flex;align-items:center;gap:10px;color:var(--txt-dim);font-weight:700;font-size:13px}
.post-card .pc-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#8a5bff,#5b2fd6);flex:0 0 auto}

/* görsel gradyanları (data-g ile JS atar; yedek) */
.bg-grad-0{background:linear-gradient(135deg,#5b2fd6,#2a1466)}
.bg-grad-1{background:linear-gradient(135deg,#0b6e4f,#063d2c)}
.bg-grad-2{background:linear-gradient(135deg,#b6452a,#5e1e10)}
.bg-grad-3{background:linear-gradient(135deg,#2563a8,#10325e)}
.bg-grad-4{background:linear-gradient(135deg,#caa23a,#6b531a)}
.bg-grad-5{background:linear-gradient(135deg,#c64b6e,#641f36)}

/* ============ TEK YAZI (post.html) ============ */
.article{max-width:820px;margin:0 auto}
.article-hero{margin-bottom:26px}
.article .a-cat{display:inline-block;background:var(--accent-2);color:#fff;font-weight:800;font-size:13px;
  padding:7px 14px;border-radius:9px;margin-bottom:16px}
.article h1{font-size:clamp(30px,3.4vw,42px);font-weight:800;line-height:1.14;letter-spacing:-.5px;margin-bottom:24px}
.article .a-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--txt-dim);font-weight:700;font-size:15px}
.article .a-author{display:flex;align-items:center;gap:10px}
.article .a-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#8a5bff,#5b2fd6);flex:0 0 auto}
.article .a-author b{color:var(--txt);font-weight:800}
.article .a-dot{width:4px;height:4px;border-radius:50%;background:var(--sep)}
.article .a-cover{width:100%;aspect-ratio:16/9;border-radius:18px;margin:26px 0 8px;overflow:hidden;background:var(--panel)}
.article .a-cover img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* paylaş kutusu (yan/sticky) */
.share-row{display:flex;align-items:center;gap:10px;margin:24px 0 6px;flex-wrap:wrap}
.share-row span{color:var(--txt-dim);font-weight:800;font-size:15px;margin-right:4px}
.share-row a{width:44px;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--txt-dim);transition:all .16s}
.share-row a:hover{background:var(--accent-2);color:#fff;border-color:transparent;transform:translateY(-2px)}
.share-row a svg{width:20px;height:20px}

/* etiketler */
.a-tags{display:flex;gap:9px;flex-wrap:wrap;margin:30px 0}
.a-tags a{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 14px;
  font-weight:700;font-size:14px;text-decoration:none;color:var(--txt-dim);transition:all .16s}
.a-tags a:hover{background:var(--accent-2);color:#fff;border-color:transparent}

/* yazar kutusu */
.author-box{display:flex;gap:18px;align-items:center;background:var(--panel);border-radius:18px;padding:24px 26px;margin:30px 0}
.author-box .ab-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#8a5bff,#5b2fd6);flex:0 0 auto}
.author-box .ab-info b{font-family:"Baloo 2",sans-serif;font-size:20px;color:var(--txt);display:block;margin-bottom:4px}
.author-box .ab-info p{color:var(--txt-dim);font-size:15px;font-weight:600;line-height:1.5}

/* ilgili yazılar */
.related{margin-top:46px}
.related h2{font-size:28px;font-weight:800;margin-bottom:20px}

@media (max-width:760px){
  .feat-post{grid-template-columns:1fr}
  .feat-post .fp-body{padding:24px}
  .blog-head h1{font-size:34px}
}