/* Blog dizini — yeni çerçeve üstünde sayfa katmanı (body.mania-hz.hz-t-blog-dizini). İşaretleme değişmez; kartlara önizleme görseli
   mania_cerceve_cikti_blog_dizini() ile çıktıda eklenir. Tek vurgu turkuaz (kategori renkleri kalktı), cam paneller Hakkımızda ile aynı. */

/* ---------- giriş ---------- */
.hz-t-blog-dizini .phd{padding-bottom:clamp(28px,3vw,48px);border-bottom:0}
.hz-t-blog-dizini .phd h1{font-size:clamp(44px,5.2vw,84px);line-height:.98;letter-spacing:-.05em;max-width:16ch}
.hz-t-blog-dizini .phd .lead{font-size:clamp(16px,1.25vw,18.5px);max-width:58ch}
.hz-t-blog-dizini .bl-sayac{gap:0;margin-top:clamp(28px,3vw,44px);border-top:1px solid var(--hair-strong);display:flex;flex-wrap:wrap}
.hz-t-blog-dizini .bl-sayac>div{border:0;border-radius:0;background:none;padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,40px) 0 0;min-width:0}
.hz-t-blog-dizini .bl-sayac>div+div{border-left:1px solid var(--hair);padding-left:clamp(20px,2.4vw,40px)}
.hz-t-blog-dizini .bl-sayac b{font-family:var(--f);font-weight:800;font-size:clamp(36px,3.4vw,56px);line-height:1;letter-spacing:-.05em;color:var(--fg-hi)}
.hz-t-blog-dizini .bl-sayac span{font-size:14px;color:var(--fg-dim);margin-top:8px;display:block}

/* ---------- filtre ---------- */
.hz-t-blog-dizini .bl-filtre{gap:8px;margin-bottom:clamp(24px,2.6vw,36px)}
.hz-t-blog-dizini .bl-filtre button{font-family:var(--f);font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:999px;padding:9px 16px;
	border:1px solid rgba(0,214,205,.22);background:rgba(0,214,205,.04);color:var(--fg-dim);transition:border-color .2s,background .2s,color .2s}
.hz-t-blog-dizini .bl-filtre button:hover{border-color:rgba(0,214,205,.55);color:var(--fg-hi)}
.hz-t-blog-dizini .bl-filtre button.acik{background:#00D6CD;border-color:#00D6CD;color:#062023}

/* ---------- kartlar: görsel üstte, cam panel ---------- */
.hz-t-blog-dizini .bl-izgara{gap:clamp(14px,1.4vw,20px)}
.hz-t-blog-dizini .bl-k{--k:0,214,205 !important;display:flex;flex-direction:column;height:100%;padding:12px 12px clamp(20px,2vw,26px);border-radius:20px;overflow:hidden;
	border:1px solid rgba(0,214,205,.3);background:linear-gradient(160deg,rgba(0,214,205,.1),rgba(0,214,205,.02) 55%,rgba(9,21,22,.35));
	box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.hz-t-blog-dizini .bl-k:hover{border-color:rgba(0,214,205,.7);transform:translateY(-3px)}
.hz-t-blog-dizini .bl-k::before,.hz-t-blog-dizini .bl-k::after{content:none}
.hz-t-blog-dizini .bl-g-kap{display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--bg-2);margin-bottom:18px}
.hz-t-blog-dizini .bl-g{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.hz-t-blog-dizini .bl-k:hover .bl-g{transform:scale(1.03)}
.hz-t-blog-dizini .bl-k>:not(.bl-g-kap){margin-inline:10px}
.hz-t-blog-dizini .bl-k .kat{align-self:flex-start;font-family:var(--m);font-size:12px;letter-spacing:0;text-transform:none;color:var(--acc);border-color:rgba(0,214,205,.35);background:rgba(0,214,205,.06)}
.hz-t-blog-dizini .bl-k h2{font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.025em}
.hz-t-blog-dizini .bl-k p{font-size:15px;line-height:1.6;color:var(--fg-dim)}
.hz-t-blog-dizini .bl-k .alt{margin-top:auto;border-top-color:var(--hair)}
.hz-t-blog-dizini .bl-k .tarih{font-family:var(--m);font-size:12px;letter-spacing:0;color:var(--muted)}
.hz-t-blog-dizini .bl-k .oku{font-family:var(--f);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--acc)}

@media (max-width:640px){
	.hz-t-blog-dizini .phd h1{font-size:clamp(36px,10.4vw,46px)}
	.hz-t-blog-dizini .bl-sayac>div{flex:1 1 30%}
	.hz-t-blog-dizini .bl-filtre{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
	.hz-t-blog-dizini .bl-filtre button{flex:none}
}