/* =====================================================================
   sayfa-haber-blog.css — Haberler (haberlerindex.php, haber_detay.php) ve
   Blog Bankası (blog-bankasi.php, blog-yazi.php). bs-ortak.css üzerine kurulur.
   Önek: .hb-*
   ===================================================================== */

/* ---------- Hero ekleri ---------- */
.hb-hero .bo-hero__grid { align-items: center; }
.hb-hero--kisa { padding-bottom: clamp(32px, 4vw, 56px); }
.hb-hero--kisa h1 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.12; }
.hb-hero__ozellik { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.hb-hero__ozellik li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid var(--bo-cizgi); font-size: 13.5px; font-weight: 700; color: var(--bo-lac); box-shadow: var(--bo-g1); }
.hb-hero__ozellik i { color: var(--bo-kir); }
.hb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 0; font-size: 14px; font-weight: 600; color: var(--bo-yazi-2); }
.hb-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.hb-meta i { color: var(--bo-kir); }
.hb-yazar-av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(145deg, var(--bo-lac-2), var(--bo-lac)); color: #fff; font: 800 14px/1 var(--bo-f-bas); }
.hb-kirinti-son { max-width: min(46ch, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hero kapak görseli (detay sayfaları) */
.hb-kapak { position: relative; margin: 0; border-radius: 26px; padding: 10px; background: linear-gradient(150deg, #fff, #e6edf9); border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g3); }
.hb-kapak img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 675; object-fit: cover; border-radius: 18px; background: var(--bo-zemin-2); transform: translateZ(20px); }
.hb-kapak::before { content: ""; position: absolute; inset: auto -14px -14px 34px; height: 70%; z-index: -1; border-radius: 26px; background: linear-gradient(140deg, var(--bo-kir), #ff7a45); opacity: .9; transform: rotate(2deg); }
.hb-kapak__rozet { position: absolute; left: -10px; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--bo-g2); font: 700 13px/1 var(--bo-f-govde); color: var(--bo-lac); transform: translateZ(50px); }
.hb-kapak__rozet i { color: var(--bo-kir); font-size: 16px; }

/* ---------- SVG illüstrasyon animasyonları ---------- */
.hb-svg { overflow: visible; }
.hb-svg .hb-yuz { animation: hbYuz 6s ease-in-out infinite; }
.hb-svg .hb-yuz--2 { animation-delay: -2s; animation-duration: 7s; }
.hb-svg .hb-yuz--3 { animation-delay: -4s; animation-duration: 8s; }
.hb-svg .hb-dalga { animation: hbDalga 2.4s ease-out infinite; transform-box: fill-box; transform-origin: left center; }
.hb-svg .hb-dalga--2 { animation-delay: .4s; }
.hb-svg .hb-dalga--3 { animation-delay: .8s; }
.hb-svg .hb-nabiz { animation: hbNabiz 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hb-svg .hb-yaz { stroke-dasharray: 120; stroke-dashoffset: 120; animation: hbYaz 4s ease-in-out infinite; }
.hb-svg .hb-kalem { animation: hbKalem 4s ease-in-out infinite; }
@keyframes hbYuz { 50% { translate: 0 -12px; } }
@keyframes hbDalga { 0% { opacity: 0; scale: .7; } 35% { opacity: 1; } 100% { opacity: 0; scale: 1.15; } }
@keyframes hbNabiz { 50% { scale: 1.18; } }
@keyframes hbYaz { 0% { stroke-dashoffset: 120; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes hbKalem { 0%, 100% { translate: 0 0; } 50% { translate: 26px 14px; } }

/* ---------- Bölüm başlığı (sol hizalı) ---------- */
.hb-bas { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin: 0 0 24px; }
.hb-bas h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.hb-bas p { margin: 6px 0 0; color: var(--bo-yazi-2); }
.hb-sayac { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--bo-cizgi); font-size: 13px; font-weight: 700; color: var(--bo-lac-2); }

/* ---------- Duyurular ---------- */
.hb-duyurular { display: grid; gap: 14px; }
.hb-duyuru { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g1); scroll-margin-top: 130px; overflow: hidden; }
.hb-duyuru::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--bo-lac-2); }
.hb-duyuru.is-yuksek::before { background: var(--bo-kir); }
.hb-duyuru__ikon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #eef4ff; color: var(--bo-lac-2); font-size: 20px; }
.hb-duyuru.is-yuksek .hb-duyuru__ikon { background: #fef2f2; color: var(--bo-kir-2); }
.hb-duyuru h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.hb-duyuru p { margin: 0; color: var(--bo-yazi-2); line-height: 1.6; font-size: 15px; overflow-wrap: anywhere; }
.hb-duyuru__tarih { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--bo-yazi-3); }
.hb-onemli { align-self: start; padding: 5px 10px; border-radius: 999px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12px; font-weight: 800; }

/* ---------- Kart (haber + blog) ---------- */
.hb-izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.hb-kart { padding: 0; overflow: hidden; height: 100%; }
.hb-kart__gorsel { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, var(--bo-zemin-2), #d9e4f7); }
.hb-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--bo-ease); }
.hb-kart:hover .hb-kart__gorsel img { transform: scale(1.05); }
.hb-kart__yer { --c: var(--bo-lac-2); display: grid; place-items: center; width: 100%; height: 100%; color: var(--c); font-size: 44px; background: radial-gradient(circle at 30% 20%, #fff, transparent 60%), linear-gradient(145deg, #eef3fc, #dbe5f6); }
.hb-kart__etiket { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--bo-lac); font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: var(--bo-g1); }
.hb-kart__etiket--kirmizi { background: var(--bo-kir); color: #fff; }
.hb-kart__govde { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; }
.hb-kart__t { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.hb-kart__t a { color: var(--bo-lac); text-decoration: none; }
.hb-kart__t a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hb-kart__t a:focus-visible { outline: none; box-shadow: none; }
.hb-kart:has(.hb-kart__t a:focus-visible) { outline: 3px solid var(--bo-lac); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255,210,94,.85); }
.hb-kart:hover .hb-kart__t a { color: var(--bo-kir-2); }
.hb-kart__p { margin: 0; color: var(--bo-yazi-2); font-size: 14.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hb-kart__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--bo-yazi-3); }
.hb-kart__alt i { color: var(--bo-kir); }
.hb-kart__ok { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--bo-lac-2); font-weight: 700; }
.hb-kat { --c: var(--bo-lac-2); position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: var(--bo-zemin); border: 1px solid var(--bo-cizgi); color: var(--bo-lac); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.hb-kat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
a.hb-kat:hover { border-color: var(--c); color: var(--bo-lac); }

/* Öne çıkan büyük kart */
.hb-kart--buyuk { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.hb-kart--buyuk .hb-kart__gorsel { aspect-ratio: auto; min-height: 320px; height: 100%; }
.hb-kart--buyuk .hb-kart__govde { padding: clamp(24px, 3vw, 38px); justify-content: center; }
.hb-kart--buyuk .hb-kart__t { font-size: clamp(22px, 2.4vw, 30px); }
.hb-kart--buyuk .hb-kart__p { -webkit-line-clamp: 4; font-size: 15.5px; }
.hb-one { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); margin-bottom: 20px; }
.hb-one__yan { display: grid; gap: 14px; align-content: start; }
.hb-kart--yatay { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.hb-kart--yatay .hb-kart__gorsel { aspect-ratio: auto; height: 100%; min-height: 110px; }
.hb-kart--yatay .hb-kart__govde { padding: 14px 16px; gap: 6px; }
.hb-kart--yatay .hb-kart__t { font-size: 15.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hb-one .hb-kart--buyuk { grid-template-columns: 1fr; }
.hb-one .hb-kart--buyuk .hb-kart__gorsel { aspect-ratio: 16 / 9; min-height: 0; height: auto; }

/* ---------- Kurumsal blok ---------- */
.hb-kurumsal { display: grid; gap: clamp(28px, 5vw, 60px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.hb-kurumsal h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; margin: 0 0 14px; }
.hb-kurumsal p { color: var(--bo-yazi-2); line-height: 1.75; font-size: 16.5px; margin: 0; }
.hb-kurumsal .bo-rakamlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-kurumsal .bo-rakam { padding: 24px; border-radius: var(--bo-r); background: #fff; border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g1); }
.hb-kurumsal .bo-rakam b { color: var(--bo-lac); }
.hb-kurumsal .bo-rakam:nth-child(2) b, .hb-kurumsal .bo-rakam:nth-child(3) b { color: var(--bo-kir-2); }

/* ---------- Blog: arama + kategoriler ---------- */
.hb-ara { position: relative; display: flex; max-width: 520px; margin-top: 26px; padding: 6px; border-radius: 18px; background: #fff; border: 1px solid var(--bo-cizgi-2); box-shadow: var(--bo-g2); }
.hb-ara i { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--bo-yazi-3); pointer-events: none; }
.hb-ara input { flex: 1; min-width: 0; height: 48px; border: 0; padding: 0 12px 0 44px; background: transparent; font: 500 15.5px/1 var(--bo-f-govde); color: var(--bo-yazi); border-radius: 12px; }
.hb-ara input:focus { outline: none; }
.hb-ara:focus-within { border-color: var(--bo-lac-2); box-shadow: 0 0 0 4px rgba(22,53,122,.14), var(--bo-g2); }
.hb-ara .bo-btn { min-height: 48px; }
.hb-katlar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 28px; padding: 0; list-style: none; }
.hb-katlar a { --c: var(--bo-lac-2); display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g1); color: var(--bo-lac); font-weight: 700; font-size: 14px; text-decoration: none; transition: border-color .2s, transform .25s var(--bo-ease), background-color .2s; }
.hb-katlar a i { color: var(--c); }
.hb-katlar a span { padding: 2px 8px; border-radius: 999px; background: var(--bo-zemin-2); color: var(--bo-yazi-2); font-size: 12px; }
.hb-katlar a:hover { border-color: var(--c); transform: translateY(-2px); color: var(--bo-lac); }
.hb-katlar a.is-on { background: linear-gradient(180deg, var(--bo-lac-2), var(--bo-lac)); border-color: transparent; color: #fff; }
.hb-katlar a.is-on i, .hb-katlar a.is-on span { color: #fff; }
.hb-katlar a.is-on span { background: rgba(255,255,255,.18); }

/* ---------- İki sütunlu düzen + kenar çubuğu ---------- */
.hb-duzen { display: grid; gap: clamp(22px, 3vw, 36px); grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.hb-duzen--yazi { grid-template-columns: minmax(0, 1fr) 320px; }
.hb-yan { position: sticky; top: 100px; display: grid; gap: 18px; }
.hb-kutu { padding: 22px; border-radius: var(--bo-r); background: #fff; border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g1); }
.hb-kutu h2, .hb-kutu .hb-kutu__t { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 800 17px/1.2 var(--bo-f-bas); color: var(--bo-lac); }
.hb-kutu h2 i, .hb-kutu .hb-kutu__t i { color: var(--bo-kir); }
.hb-kutu--koyu { color: #fff; border-color: transparent; background: radial-gradient(400px 220px at 100% 0%, rgba(42,84,176,.6), transparent 60%), radial-gradient(300px 200px at 0% 100%, rgba(225,37,27,.3), transparent 60%), linear-gradient(155deg, var(--bo-lac-2), var(--bo-lac) 70%); box-shadow: var(--bo-g2); }
.hb-kutu--koyu h2, .hb-kutu--koyu .hb-kutu__t { color: #fff; }
.hb-kutu--koyu h2 i, .hb-kutu--koyu .hb-kutu__t i { color: var(--bo-alt); }
.hb-kutu--koyu p { margin: 0 0 16px; color: rgba(226,234,252,.88); font-size: 14.5px; line-height: 1.6; }
.hb-kutu--koyu .bo-btn + .bo-btn { margin-top: 10px; }
.hb-pop { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 4px; }
.hb-pop li { counter-increment: p; position: relative; padding: 10px 0 10px 44px; border-bottom: 1px dashed var(--bo-cizgi-2); }
.hb-pop li:last-child { border-bottom: 0; }
.hb-pop li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 10px; font: 800 20px/1 var(--bo-f-bas); color: var(--bo-kir); }
.hb-pop a { display: block; color: var(--bo-lac); font-weight: 700; font-size: 14.5px; line-height: 1.35; text-decoration: none; }
.hb-pop a:hover { color: var(--bo-kir-2); }
.hb-pop small { display: block; margin-top: 4px; color: var(--bo-yazi-3); font-size: 12.5px; font-weight: 600; }
.hb-etiketler { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-etiketler a { padding: 6px 12px; border-radius: 10px; background: var(--bo-zemin); border: 1px solid var(--bo-cizgi); color: var(--bo-lac-2); font-size: 13px; font-weight: 700; text-decoration: none; transition: background-color .2s, color .2s; }
.hb-etiketler a:hover, .hb-etiketler a.is-on { background: var(--bo-lac); color: #fff; }
.hb-rss { display: inline-flex; align-items: center; gap: 8px; justify-self: start; color: var(--bo-lac-2); font-weight: 700; font-size: 14px; text-decoration: none; }
.hb-rss i { color: #c2410c; }

/* Mini liste (son haberler) */
.hb-mini { display: grid; gap: 4px; }
.hb-mini a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 14px; text-decoration: none; transition: background-color .2s; }
.hb-mini a:hover { background: var(--bo-zemin); }
.hb-mini img, .hb-mini .hb-mini__yer { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--bo-zemin-2); display: grid; place-items: center; color: var(--bo-lac-2); font-size: 22px; }
.hb-mini b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--bo-lac); font-size: 14px; line-height: 1.35; }
.hb-mini small { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--bo-yazi-3); font-size: 12.5px; font-weight: 600; }

/* ---------- Sayfalama ---------- */
.hb-sayfalar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.hb-sayfalar a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 14px; background: #fff; border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g1); color: var(--bo-lac); font-weight: 700; text-decoration: none; transition: transform .25s var(--bo-ease), border-color .2s; }
.hb-sayfalar a:hover { transform: translateY(-2px); border-color: var(--bo-lac-2); color: var(--bo-lac); }
.hb-sayfalar a.is-on { background: linear-gradient(180deg, #f0352a, var(--bo-kir) 55%, var(--bo-kir-2)); color: #fff; border-color: transparent; }

/* ---------- Boş durum ---------- */
.hb-bos { padding: clamp(32px, 5vw, 56px) 24px; text-align: center; border-radius: 26px; background: #fff; border: 1px dashed var(--bo-cizgi-2); }
.hb-bos > i { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: var(--bo-zemin-2); color: var(--bo-lac-2); font-size: 34px; margin-bottom: 16px; }
.hb-bos h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 10px; }
.hb-bos p { margin: 0 auto; max-width: 520px; color: var(--bo-yazi-2); line-height: 1.65; }
.hb-bos .bo-butonlar { justify-content: center; margin-top: 22px; }
.hb-bos ul { max-width: 520px; margin: 20px auto 0; padding: 0; list-style: none; text-align: left; display: grid; gap: 8px; }
.hb-bos ul a { display: block; padding: 12px 16px; border-radius: 12px; background: var(--bo-zemin); color: var(--bo-lac); font-weight: 700; text-decoration: none; }
.hb-bos ul a:hover { background: var(--bo-zemin-2); }

/* ---------- Makale gövdesi ---------- */
.hb-makale { min-width: 0; }
.hb-makale__kart { padding: clamp(22px, 4vw, 48px); border-radius: 28px; background: #fff; border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g2); }
.hb-icerik { max-width: 760px; font-size: clamp(16.5px, 1.3vw, 18px); line-height: 1.8; color: #24324f; overflow-wrap: anywhere; }
.hb-icerik > :first-child { margin-top: 0 !important; }
.hb-icerik :where(div, p, figure, section, ul, ol, table, [style*="width"]) { max-width: 100% !important; }
.hb-icerik .table-responsive { overflow-x: auto; }
/* Eski editörden gelen satır içi yazı tipi / renk / boyutları nötrle */
.hb-icerik :where(p, span, li, div, font, strong, b, em, u, td, th, a, br) { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.hb-icerik :where(p, span, li, div, font, td, th, br) { color: inherit !important; background-color: transparent !important; }
.hb-icerik :where(p, div, ul, ol) { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
.hb-icerik p { margin: 0 0 1.15em !important; }
.hb-icerik :where(h2, h3, h4) { margin: 1.8em 0 .6em; line-height: 1.25; color: var(--bo-lac); scroll-margin-top: 120px; }
.hb-icerik :where(h2, h3, h4) * { font-size: inherit !important; color: inherit !important; font-family: inherit !important; }
.hb-icerik h2 { font-size: clamp(23px, 2.4vw, 30px); font-weight: 800; }
.hb-icerik h3 { font-size: clamp(19px, 1.9vw, 23px); font-weight: 700; }
.hb-icerik h4 { font-size: 18px; font-weight: 700; }
.hb-icerik a { color: var(--bo-kir-2); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.hb-icerik a:hover { color: var(--bo-lac); }
.hb-icerik :where(ul, ol) { padding-left: 1.4em !important; margin: 0 0 1.2em; list-style: revert !important; }
.hb-icerik li { margin-bottom: .45em; padding: 0 !important; }
.hb-icerik ul li::marker { color: var(--bo-kir); }
.hb-icerik ol li::marker { color: var(--bo-kir); font-weight: 800; }
.hb-icerik strong, .hb-icerik b { color: var(--bo-lac); font-weight: 700; }
.hb-icerik img { max-width: 100% !important; height: auto !important; border-radius: 16px; margin: 1.4em 0; display: block; box-shadow: var(--bo-g2); }
.hb-icerik figure { margin: 1.6em 0; }
.hb-icerik figcaption { margin-top: 8px; font-size: 14px; color: var(--bo-yazi-3); text-align: center; }
.hb-icerik blockquote { position: relative; margin: 1.6em 0; padding: 20px 24px 20px 28px; border-radius: 0 18px 18px 0; border-left: 4px solid var(--bo-kir); background: linear-gradient(90deg, #fff4f3, #f6f9ff); color: var(--bo-lac); font-weight: 600; font-style: normal; }
.hb-icerik blockquote p:last-child { margin-bottom: 0 !important; }
.hb-icerik hr { margin: 2em 0; border: 0; height: 1px; background: var(--bo-cizgi-2); opacity: 1; }
.hb-icerik table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.hb-icerik :where(th, td) { padding: 10px 12px; border: 1px solid var(--bo-cizgi-2); text-align: left; vertical-align: top; }
.hb-icerik th { background: var(--bo-zemin-2); color: var(--bo-lac); }
.hb-icerik pre { overflow-x: auto; max-width: 100%; padding: 16px 18px; border-radius: 14px; background: #0b2150; color: #e7eefc; font-size: 14px; line-height: 1.6; }
.hb-icerik code { font-size: .92em; padding: 2px 6px; border-radius: 6px; background: var(--bo-zemin-2); color: var(--bo-lac); }
.hb-icerik pre code { padding: 0; background: none; color: inherit; }
.hb-icerik mark { background: rgba(255,210,94,.6); padding: 0 3px; border-radius: 4px; }
.hb-icerik iframe, .hb-icerik video { max-width: 100%; border-radius: 16px; }

/* Paylaş */
.hb-paylas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--bo-cizgi); }
.hb-paylas > span { font: 800 12.5px/1 var(--bo-f-govde); letter-spacing: .12em; text-transform: uppercase; color: var(--bo-yazi-3); margin-right: 4px; }
.hb-paylas a, .hb-paylas button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--bo-cizgi); background: var(--bo-zemin); color: var(--bo-lac); font-size: 18px; cursor: pointer; text-decoration: none; transition: transform .25s var(--bo-ease), background-color .2s, color .2s; }
.hb-paylas a:hover, .hb-paylas button:hover { transform: translateY(-3px); background: var(--bo-lac); color: #fff; }
.hb-paylas .is-wa:hover { background: #128c4a; }
.hb-paylas button.is-metin { width: auto; padding: 0 14px; gap: 6px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; }
.hb-yan .hb-paylas { margin-top: 0; padding-top: 0; border-top: 0; }

/* İçindekiler */
.hb-toc summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; font: 800 17px/1.2 var(--bo-f-bas); color: var(--bo-lac); }
.hb-toc summary::-webkit-details-marker { display: none; }
.hb-toc summary i { color: var(--bo-kir); }
.hb-toc summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: 14px; transition: transform .3s; }
.hb-toc[open] summary::after { transform: rotate(180deg); }
.hb-toc ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; max-height: 50vh; overflow: auto; }
.hb-toc a { display: block; padding: 7px 10px; border-left: 2px solid var(--bo-cizgi-2); color: var(--bo-yazi-2); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: color .2s, border-color .2s, background-color .2s; }
.hb-toc .hb-toc__h3 a { padding-left: 22px; font-size: 13.5px; }
.hb-toc .hb-toc__h4 a { padding-left: 34px; font-size: 13px; }
.hb-toc a:hover, .hb-toc a.is-on { color: var(--bo-lac); border-color: var(--bo-kir); background: var(--bo-zemin); }

/* Blog yazı alt bileşenleri */
.hb-ozet { margin: 18px 0 0; max-width: 680px; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.65; color: var(--bo-yazi-2); }
.hb-sss { margin-top: 44px; }
.hb-sss > h2 { font-size: clamp(23px, 2.4vw, 30px); font-weight: 800; margin: 0 0 18px; }
.hb-sss .bo-sss { max-width: none; }
.hb-yazi-etiket { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.hb-yazi-etiket a { padding: 7px 13px; border-radius: 10px; background: var(--bo-zemin); border: 1px solid var(--bo-cizgi); color: var(--bo-lac-2); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.hb-yazi-etiket a:hover { background: var(--bo-lac); color: #fff; }
.hb-yazi-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 36px; padding: 26px 28px; border-radius: 24px; color: #fff; background: radial-gradient(400px 220px at 0% 0%, rgba(225,37,27,.4), transparent 60%), linear-gradient(140deg, #16357a, #0b2150); box-shadow: var(--bo-g2); }
.hb-yazi-cta b { display: block; font: 800 20px/1.25 var(--bo-f-bas); }
.hb-yazi-cta p { margin: 6px 0 0; color: rgba(226,234,252,.88); font-size: 14.5px; }
.hb-yazi-cta .bo-butonlar { margin-top: 0; }
.hb-komsu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.hb-komsu a { display: block; padding: 18px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--bo-cizgi); box-shadow: var(--bo-g1); text-decoration: none; transition: transform .3s var(--bo-ease), box-shadow .3s; }
.hb-komsu a:hover { transform: translateY(-3px); box-shadow: var(--bo-g2); }
.hb-komsu a.is-sonraki { text-align: right; grid-column: 2; }
.hb-komsu small { display: flex; align-items: center; gap: 6px; color: var(--bo-kir-2); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hb-komsu a.is-sonraki small { justify-content: flex-end; }
.hb-komsu b { display: block; margin-top: 6px; color: var(--bo-lac); font-size: 15.5px; line-height: 1.35; }
.hb-onizleme { position: relative; z-index: 5; padding: 12px 0; background: #fff7ed; border-bottom: 1px solid #fed7aa; color: #9a3412; font-size: 14.5px; font-weight: 600; }
.hb-onizleme a { color: #9a3412; font-weight: 800; }

/* Okuma ilerleme çubuğu */
.hb-ilerleme { position: fixed; left: 0; right: 0; top: 0; z-index: 2000; height: 4px; background: transparent; pointer-events: none; }
.hb-ilerleme i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--bo-kir), var(--bo-alt)); border-radius: 0 4px 4px 0; }

/* ---------- Bilgi talep formu (haber detay) ---------- */
.hb-form .bo-alan :where(input, textarea) { min-height: 46px; font-size: 14.5px; }
.hb-form .bo-alan textarea { min-height: 96px; }
.hb-zorunlu { color: var(--bo-kir-2); }
.hb-captcha { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; align-items: center; }
.hb-captcha__soru { display: grid; place-items: center; min-height: 46px; border-radius: 13px; background: linear-gradient(145deg, #eef4ff, #e1eafa); border: 1px solid #cfdcf5; font: 800 18px/1 var(--bo-f-bas); letter-spacing: .12em; color: var(--bo-lac); }
.hb-captcha input { text-align: center; font-weight: 800 !important; }
.hb-geri { display: flex; }

/* ---------- Uyumlu ekranlar ---------- */
@media (max-width: 1199.98px) {
  .hb-duzen, .hb-duzen--yazi { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 991.98px) {
  .hb-duzen, .hb-duzen--yazi { grid-template-columns: 1fr; }
  .hb-yan { position: static; }
  .hb-one { grid-template-columns: 1fr; }
  .hb-kart--buyuk { grid-template-columns: 1fr; }
  .hb-kart--buyuk .hb-kart__gorsel { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .hb-kurumsal { grid-template-columns: 1fr; }
  .hb-hero--kisa .bo-illustrasyon { order: 0; }
  .hb-kapak__rozet { left: 10px; }
}
@media (max-width: 575.98px) {
  .hb-duyuru { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .hb-onemli { grid-column: 1 / -1; justify-self: start; }
  .hb-kart--yatay { grid-template-columns: 104px minmax(0, 1fr); }
  .hb-makale__kart { border-radius: 22px; }
  .hb-komsu { grid-template-columns: 1fr; }
  .hb-komsu a.is-sonraki { grid-column: auto; }
  .hb-ara .bo-btn { padding: 0 16px; }
  .hb-yazi-cta { padding: 22px; }
  .hb-yazi-cta .bo-butonlar { width: 100%; }
  .hb-kurumsal .bo-rakam { padding: 18px; }
  .hb-kapak::before { inset: auto -6px -8px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-svg *, .hb-kart__gorsel img { animation: none !important; transition: none !important; }
  .hb-svg .hb-yaz { stroke-dashoffset: 0; }
}