/* tappon.bio homepage blog section (2026-11-02), approved canvas "tappon Blog Tasarımı" */
body{margin:0}
.hbg{padding-block:clamp(80px,10vw,120px);display:flex;flex-direction:column;gap:28px;overflow:hidden}
.hbgh{display:flex;align-items:flex-end;gap:12px;max-width:1360px;width:100%;margin:0 auto;box-sizing:border-box;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}
.hbgt{flex:1;min-width:0}
.hbgt h2{font:800 clamp(40px,6vw,64px)/.95 var(--grot);letter-spacing:-.03em;margin:0 0 10px;text-wrap:balance}
.hbgt h2 span{color:#2E33F0}
.hbgt p{margin:0;font-size:18px;color:var(--muted)}
.hbga{display:inline-flex;align-items:center;min-height:48px;box-sizing:border-box;padding:0 18px;background:var(--chip);border:1px solid var(--line);border-radius:999px;color:var(--fg);font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .15s}
.hbgb{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--chip);color:var(--fg);font-size:18px;cursor:pointer;transition:transform .15s,opacity .15s}
.hbgb:disabled{opacity:.35;cursor:default}
.hbga:hover,.hbgb:hover:not(:disabled){transform:translateY(-2px)}
.hbgr{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:max(20px,calc((100vw - 1360px)/2 + 20px));scroll-padding-inline:max(20px,calc((100vw - 1360px)/2 + 20px));padding-bottom:4px}
.hbgr::-webkit-scrollbar{display:none}
.hbgc{flex:0 0 min(370px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--chip);border:1px solid var(--line);border-radius:26px;overflow:hidden;color:var(--fg);text-decoration:none;transition:transform .2s}
.hbgc:hover{transform:translateY(-4px)}
.hbgc img{width:100%;height:210px;object-fit:cover;display:block}
.hbgi{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px}
.hbgi strong{font:800 23px/1.15 var(--grot);letter-spacing:-.02em}
.hbgi small{font-size:14px;color:var(--muted)}
.hbg a:focus-visible,.hbgb:focus-visible,.hbgr:focus-visible{outline:2px solid #2E33F0;outline-offset:2px}
@media (max-width:760px){.hbg{padding-block:48px;gap:22px}.hbgh{flex-wrap:wrap}.hbgt{flex-basis:100%}.hbgb{display:none}.hbgr{gap:16px}.hbgc img{height:180px}.hbgi strong{font-size:21px}}
@media (prefers-reduced-motion:reduce){.hbga,.hbgb,.hbgc{transition:none}.hbga:hover,.hbgb:hover:not(:disabled),.hbgc:hover{transform:none}}