/* ==========================================================================
   bitest.org — tasarım sistemi
   Polo'nun style.css + theme.css'inden SONRA yüklenir.
   Kararların gerekçesi: .claude/skills/bitest-tasarim/SKILL.md
   ========================================================================== */

:root{
  /* Marka — bitestlogo.png'den ölçüldü (opak piksel sayımı) */
  --bt-navy:          #032A3E;
  --bt-ink:           #3B3B3A;   /* logo mürekkebi  %48.5 */
  --bt-blue:          #2C9CD4;   /* marka mavisi    %37.7 */
  --bt-orange:        #EA5C1D;

  /* Eylem tonları — beyaz metin taşıyan yüzeyler (WCAG AA) */
  --bt-blue-action:   #1C74A6;   /* beyaz üzerinde 5.12:1 */
  --bt-orange-action: #C4470F;   /* beyaz üzerinde 4.93:1 */

  /* Metin ve yüzey */
  --bt-body:          #5A5C6E;   /* beyaz üzerinde 6.58:1 */
  --bt-sky:           #9FD4EE;   /* lacivert üzerinde 9.35:1 */
  --bt-surface:       #F7F8FA;
  --bt-line:          #E3E6EB;

  --bt-radius:        14px;
  --bt-radius-sm:     10px;
  --bt-shadow:        0 2px 4px rgba(3,42,62,.04), 0 12px 32px rgba(3,42,62,.07);
  --bt-shadow-lg:     0 4px 8px rgba(3,42,62,.05), 0 24px 56px rgba(3,42,62,.11);
  --bt-ease:          cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   1. Taban
   -------------------------------------------------------------------------- */

/* ⚠ KÖK FONT BOYUTU — ölçülmüş müdahale. ÜÇ ayrı kural kökü küçültüyordu:
       plugins.css : :root { font-size: 14px }            ← ASIL BELİRLEYİCİ
       style.css   : html  { font-size: 88%   }           → 14.08px
       style.css   : @media (max-width:768px) html { 81.25% }  → 13px
   Yani MOBİLDE yazı küçülüyor; okunabilirliğin en çok gerektiği yerde ters
   yönde çalışıyor ve rem tabanlı her ölçek %12–19 daralıyor.

   ⚠ SEÇİCİ ÖNEMLİ: `:root` (0,1,0) `html`'i (0,0,1) YENER. `html{font-size:16px}`
   yazmak yetmez — ölçüldü, hesaplanan değer 14px'te kaldı. `:root` kullanılır.

   Düşük risk: Polo 2882 px'e karşı yalnız 118 rem bildirimi kullanıyor
   (çoğu border-radius/padding).                                                */
:root{ font-size:16px; }
@media (max-width:768px){ :root{ font-size:16px; } }
html{ -webkit-text-size-adjust:100%; }

/* Yatay taşmaya karşı kemer + kayış. Mobil doğrulamasının 1. maddesi. */
html, body{ max-width:100%; overflow-x:clip; }

body{
  color:var(--bt-body);
  font-size:16.5px;
  line-height:1.7;
}

h1,h2,h3,h4,h5,h6{
  color:var(--bt-navy);
  font-weight:700;
  line-height:1.2;
}
h4,h5,h6{ color:var(--bt-ink); font-weight:600; }

p{ margin-bottom:1.15rem; }
p:last-child{ margin-bottom:0; }

a{ color:var(--bt-blue-action); }
a:hover,a:focus{ color:var(--bt-navy); }

/* Okunabilir satır uzunluğu — 65-75 karakter */
.bt-measure{ max-width:68ch; }
.bt-measure-center{ max-width:68ch; margin-left:auto; margin-right:auto; }

/* --------------------------------------------------------------------------
   1b. Şeffaf header — Polo'nun bitişik kardeş kuralını yeniden kurar
   --------------------------------------------------------------------------
   Polo şeffaf header'ı şu seçiciyle çalıştırır (style.css):
       #header[data-transparent="true"] + .fullscreen { top:-80px; margin-bottom:-80px }
   Yani hero, #header'ın DOĞRUDAN bitişik kardeşi olmak zorundadır.
   BaseLayout'ta semantik gereği araya <main> girdiği için kural eşleşmez ve
   hero header'ın ALTINDA başlar — üstte beyaz bir şerit kalır.
   Çözüm: şeffaf header'ı AKIŞTAN ÇIKARIP hero'nun üstüne bindiriyoruz.
   (Negatif margin denendi; <main> ile margin çökmesi yaşandığı için bırakıldı.)
   Polo kaydırmada .sticky-active ekleyip position:fixed'e geçirir — o durumda
   bu kural :not() ile devre dışı kalır ve Polo'nun kendi davranışı sürer.       */

.body-inner { position: relative; }

#header[data-transparent="true"]:not(.sticky-active) {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 199;
}

/* --------------------------------------------------------------------------
   2. Tip ölçeği
   -------------------------------------------------------------------------- */

/* ⚠ ÖLÇÜLDÜ: Polo `html { font-size: 14px }` kullanıyor (16px DEĞİL).
   Bu yüzden tip ölçeği ve dokunma hedefleri PX ile yazılır — rem kullanılsaydı
   her değer tasarlanandan %12.5 küçük çıkardı (ör. .8125rem = 13px değil 11.4px).
   Boşluklarda rem kullanmak sorun değil; OKUNABİLİRLİK ve DOKUNMA px'tir.        */

.bt-h1,h1{ font-size:clamp(34px, 20px + 3.6vw, 56px); }
.bt-h2,h2{ font-size:clamp(27px, 19px + 2.0vw, 38px); }
h3{ font-size:clamp(20px, 17px + .8vw, 24px); }
h4{ font-size:clamp(18px, 17px + .3vw, 19px); }

.bt-lead{
  font-size:clamp(17px, 15px + .5vw, 20px);
  line-height:1.65;
  color:var(--bt-body);
}

/* Bölüm üstü göz kırpma etiketi */
.bt-eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bt-blue-action);
  margin-bottom:.75rem;
}
.text-light .bt-eyebrow,
.background-dark .bt-eyebrow,
.bt-dark .bt-eyebrow{ color:var(--bt-sky); }

/* Koyu bölümlerde başlık ve metin */
.background-dark, .bt-dark{ background-color:var(--bt-navy) !important; }
.background-dark h1,.background-dark h2,.background-dark h3,
.background-dark h4,.background-dark h5,.background-dark h6,
.bt-dark h1,.bt-dark h2,.bt-dark h3,.bt-dark h4{ color:#fff; }
.background-dark p,.bt-dark p{ color:rgba(255,255,255,.82); }

.bt-surface{ background-color:var(--bt-surface) !important; }

/* --------------------------------------------------------------------------
   3. Başlık bloğu
   -------------------------------------------------------------------------- */

.bt-heading{ margin-bottom:3.125rem; }
.bt-heading h2{ margin-bottom:.75rem; }
.bt-heading .bt-lead{ margin-bottom:0; }
.bt-heading.text-center .bt-lead{ margin-left:auto; margin-right:auto; max-width:62ch; }

/* --------------------------------------------------------------------------
   4. Butonlar — Polo'nun .btn'i üzerine bindirme
   -------------------------------------------------------------------------- */

/* ⚠ ÖZGÜLLÜK: Polo `button.btn, .btn:not(.close):not(.mfp-close), …` ile
   (0,3,0) özgüllükte `font-size:12px; padding:12px 18px; line-height:14px`
   yazıyor. Düz `.btn` (0,1,0) bunu YENEMEZ. Aynı seçici şeklini kullanıyoruz;
   bitest.css style.css'ten SONRA yüklendiği için eşit özgüllükte biz kazanırız.
   PX kullanılır: dokunma hedefi ≥44px garantisi rem'e bırakılamaz
   (Polo'nun 14px kökü rem'i %12.5 küçültür).                                   */
button.btn,
.btn:not(.close):not(.mfp-close),
a.btn:not(.close):not(.mfp-close){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.01em;
  border-radius:var(--bt-radius-sm);
  padding:13px 26px;
  min-height:48px;
  text-transform:none;
  /* ⚠ Polo `.btn`'e `margin-bottom:6px` veriyor. Dikey ortalanmış her kapta
     (flex/grid) butonu 3px yukarı iter — ölçüldü: header'da CTA merkez 37,
     menü 41. Boşluk zaten `gap` ile yönetiliyor, bu artık margin sıfırlanır. */
  margin-bottom:0;
  transition:transform .18s var(--bt-ease), box-shadow .18s var(--bt-ease),
             background-color .18s var(--bt-ease), border-color .18s var(--bt-ease);
}
.btn:active{ transform:translateY(1px); }

.btn-sm:not(.close):not(.mfp-close){ font-size:14px; padding:10px 18px; min-height:44px; }

/* ⚠ Polo mobilde butonu KÜÇÜLTÜYOR — style.css @media (max-width:991.98px):
     .btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide)
       { font-size:12px; height:32px; line-height:30px; padding:0 14px }
   32px yükseklik ve 12px yazı, dokunma hedefi (44px) ve okunabilirlik
   eşiğinin altında kalır. Aynı özgüllükle (0,5,0) karşılıyoruz.               */
@media (max-width:991.98px){
  button.btn:not(.btn-creative):not(.btn-slide),
  .btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide),
  a.btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide){
    font-size:15px;
    height:auto;
    min-height:48px;
    line-height:1.3;
    padding:13px 24px;
  }
  .btn-sm:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide){
    font-size:14px; min-height:44px; padding:10px 18px;
  }
}

/* Mobil menü ve footer bağlantıları — dokunma hedefi (Polo 20px bırakıyor) */
@media (max-width:991.98px){
  #mainMenu nav > ul > li > a{
    min-height:48px; display:flex; align-items:center; font-size:14px;
  }
}

/* ⚠ RENK MODİFİKATÖRLERİ de (0,3,0) özgüllükte yazılır — Polo'nun aynı
   bloğu `background-color:#2250fc; border-color:#2250fc; color:#fff` veriyor.
   Tek sınıflı `.btn-bt-cta` bunu yenemez; ölçüldü, buton mavi kalıyordu.       */

/* Birincil — mavi eylem tonu */
.btn-bt:not(.close):not(.mfp-close){
  background-color:var(--bt-blue-action);
  border-color:var(--bt-blue-action);
  color:#fff;
}
.btn-bt:not(.close):not(.mfp-close):hover,
.btn-bt:not(.close):not(.mfp-close):focus{
  background-color:var(--bt-navy);
  border-color:var(--bt-navy);
  color:#fff;
  box-shadow:var(--bt-shadow);
}

/* CTA — turuncu eylem tonu. Sayfada YALNIZ BİR TANE. */
.btn-bt-cta:not(.close):not(.mfp-close){
  background-color:var(--bt-orange-action);
  border-color:var(--bt-orange-action);
  color:#fff;
}
.btn-bt-cta:not(.close):not(.mfp-close):hover,
.btn-bt-cta:not(.close):not(.mfp-close):focus{
  background-color:#9E380C;
  border-color:#9E380C;
  color:#fff;
  box-shadow:var(--bt-shadow);
}

/* Çerçeveli */
.btn-bt-outline:not(.close):not(.mfp-close){
  background-color:transparent;
  border:2px solid var(--bt-blue-action);
  color:var(--bt-blue-action);
}
.btn-bt-outline:not(.close):not(.mfp-close):hover,
.btn-bt-outline:not(.close):not(.mfp-close):focus{
  background-color:var(--bt-blue-action);
  color:#fff;
}
/* ⚠ (0,4,0) — buton temel kuralı (0,3,0) olduğu için koyu zemin kuralı da
   aynı :not() eklerini taşımalı; yoksa beyaz metin uygulanmaz ve outline buton
   lacivert üstünde #1C74A6 kalır (ölçüldü: 2.92:1, eşik 4.5).                 */
.text-light .btn-bt-outline:not(.close):not(.mfp-close),
.background-dark .btn-bt-outline:not(.close):not(.mfp-close),
.bt-dark .btn-bt-outline:not(.close):not(.mfp-close){
  border-color:rgba(255,255,255,.65);
  color:#fff;
}
.text-light .btn-bt-outline:not(.close):not(.mfp-close):hover,
.background-dark .btn-bt-outline:not(.close):not(.mfp-close):hover,
.bt-dark .btn-bt-outline:not(.close):not(.mfp-close):hover{
  background-color:#fff; color:var(--bt-navy); border-color:#fff;
}

/* --------------------------------------------------------------------------
   5. Kartlar
   -------------------------------------------------------------------------- */

.bt-card{
  background:#fff;
  border:1px solid var(--bt-line);
  border-radius:var(--bt-radius);
  padding:2rem 1.75rem;
  height:100%;
  transition:transform .22s var(--bt-ease), box-shadow .22s var(--bt-ease),
             border-color .22s var(--bt-ease);
}
.bt-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--bt-shadow);
  border-color:transparent;
}
.bt-card h3,.bt-card h4{ margin-bottom:.65rem; }
.bt-card p:last-child{ margin-bottom:0; }

/* Kart ikonu */
.bt-card-icon{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:var(--bt-radius-sm);
  background:rgba(44,156,212,.12);
  color:var(--bt-blue-action);
  font-size:24px;
  margin-bottom:1.25rem;
}
.bt-card-icon svg{ width:26px; height:26px; }

/* Numaralı adım */
.bt-step-num{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--bt-navy); color:#fff;
  font-weight:700; font-size:1.05rem;
  margin-bottom:1.15rem;
}

/* Madde listesi */
.bt-list{ list-style:none; padding-left:0; margin:0; }
.bt-list li{
  position:relative;
  padding-left:1.9rem;
  margin-bottom:.8rem;
  line-height:1.6;
}
.bt-list li:last-child{ margin-bottom:0; }
.bt-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:2px;
  background:var(--bt-blue);
}
.text-light .bt-list li::before,
.background-dark .bt-list li::before,
.bt-dark .bt-list li::before{ background:var(--bt-sky); }

/* Kart ızgaralarında DİKEY oluk.
   ⚠ ÖLÇÜLDÜ: Bootstrap `.row` yalnız YATAY oluk verir; satırlar arası boşluk
   masaüstünde 0 px kalıyordu (/blog/ 17 kart / 6 satır → 0, /kurumsal/ 6 kart /
   2 satır → 0). Önceki `margin-bottom` kuralı yalnız mobilde çalışıyordu.
   `row-gap` her kırılımda çalışır ve son satırdan sonra boşluk bırakmaz.       */
.bt-grid{ row-gap:2rem; }

/* --------------------------------------------------------------------------
   6. Sayı şeridi
   -------------------------------------------------------------------------- */

.bt-stat{ text-align:center; }
.bt-stat-num{
  display:block;
  font-size:clamp(2.25rem, 1.7rem + 2.2vw, 3rem);
  font-weight:700; line-height:1.05;
  color:var(--bt-navy);
}
.bt-stat-label{
  display:block; margin-top:.4rem;
  font-size:.9375rem; color:var(--bt-body);
}
.background-dark .bt-stat-num,.bt-dark .bt-stat-num{ color:#fff; }
.background-dark .bt-stat-label,.bt-dark .bt-stat-label{ color:rgba(255,255,255,.75); }

/* --------------------------------------------------------------------------
   7. Erişilebilirlik
   -------------------------------------------------------------------------- */

:focus-visible{
  outline:2px solid var(--bt-blue-action);
  outline-offset:2px;
  border-radius:3px;
}
.background-dark :focus-visible,
.bt-dark :focus-visible{ outline-color:var(--bt-sky); }

.bt-skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--bt-navy); color:#fff;
  padding:.85rem 1.35rem; border-radius:0 0 var(--bt-radius-sm) 0;
  font-weight:600;
}
.bt-skip:focus{ left:0; color:#fff; }

.bt-visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   8. Mobil — tasarım skill'i §6
   -------------------------------------------------------------------------- */

/* Görsel ve gömülü içerik asla taşmaz */
img,svg,video,iframe,table{ max-width:100%; }
img,svg,video{ height:auto; }

/* Geniş içerik kendi kabında kayar, sayfa kaymaz */
.bt-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:991.98px){
  /* Dokunma hedefi ≥ 44px */
  #mainMenu nav > ul > li > a{ min-height:44px; display:flex; align-items:center; }
  .header-extras ul li a,
  #footer a{ min-height:44px; display:inline-flex; align-items:center; }
  .social-icons ul li a{ min-width:44px; min-height:44px; }
}

@media (max-width:767.98px){
  body{ font-size:16px; }

  /* Bölüm ritmi mobilde daralır */
  section{ padding-top:72px; padding-bottom:72px; }
  section.no-padding{ padding-top:0; padding-bottom:0; }
  .p-t-100,.p-t-120,.p-t-140,.p-t-150,.p-t-200{ padding-top:72px !important; }
  .p-b-100,.p-b-120,.p-b-140,.p-b-150,.p-b-200{ padding-bottom:72px !important; }
  .m-b-50,.m-b-60,.m-b-70,.m-b-80{ margin-bottom:36px !important; }

  .bt-heading{ margin-bottom:2.25rem; }
  .bt-card{ padding:1.6rem 1.35rem; }

  .bt-grid{ row-gap:1.25rem; }


  /* Mobilde tam ekran hero YOK — 100vh tarayıcı çubuklarıyla zıplar */
  section.fullscreen,
  .bt-hero{
    height:auto !important;
    min-height:0 !important;
    padding-top:104px; padding-bottom:72px;
  }
  .container-fullscreen{ height:auto !important; }
  .container-fullscreen .text-middle{
    position:static !important;
    transform:none !important;
    top:auto !important;
  }

  /* Butonlar mobilde tam genişlik, alt alta */
  .bt-actions .btn{ width:100%; }
  .bt-actions .btn + .btn{ margin-top:.75rem; margin-left:0 !important; }
}

@media (max-width:575.98px){
  .container{ padding-left:20px; padding-right:20px; }
}

/* Parallax mobil/tablette kapanır — iOS'ta sabitlenmez, tökezler */
@media (max-width:1024px){
  [data-bg-parallax]{
    background-attachment:scroll !important;
    background-position:center center !important;
  }
}

/* --------------------------------------------------------------------------
   9. Hareket tercihi
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-animate]{ opacity:1 !important; transform:none !important; }
  [data-bg-parallax]{ background-attachment:scroll !important; }
}

/* --------------------------------------------------------------------------
   10. Baskı
   -------------------------------------------------------------------------- */

@media print{
  #header,#footer,#scrollTop,.bt-actions,.bt-skip{ display:none !important; }
  body{ color:#000; font-size:11pt; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
}

/* --------------------------------------------------------------------------
   11. Sayfa başlığı bandı (SayfaBasligi.astro + blog yazısı sayfası)
   --------------------------------------------------------------------------
   Global tutulur: blog yazısı sayfası bileşeni kullanmadan aynı işaretlemeyi
   kuruyor. Bileşene bağlı kalsaydı orada yüklenmezdi.                        */

  /* ⚠ Polo'nun `#page-title` ID kuralı (1,0,0) beyaza yakın bir zemin dayatıyordu
     ve beyaz başlık görünmez oluyordu. Bileşenden o ID kaldırıldı; burada
     `section` (0,0,1) kuralını sınıfla (0,1,0) eziyoruz.
     İç sayfalarda header AKIŞTA (position:relative) ve 80px yer kaplıyor —
     bu yüzden üst boşluk hero'daki gibi 168px değil, 88px.                    */
  .bt-page-title {
    position: relative;
    background: var(--bt-navy) !important;
    padding: 88px 0 84px;
    overflow: hidden;
  }
  .bt-page-title-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(60% 120% at 82% 12%, rgba(44,156,212,.34) 0%, rgba(44,156,212,0) 62%),
      radial-gradient(48% 96% at 8% 96%, rgba(234,92,29,.20) 0%, rgba(234,92,29,0) 60%);
  }
  .bt-page-title .container { position: relative; z-index: 1; }
  .bt-page-title-inner { max-width: 60ch; }
  .bt-page-title h1 { color: #fff; margin: 0 0 .85rem; }
  .bt-page-title-spot { color: rgba(255,255,255,.82); margin-bottom: 0; }

  .bt-breadcrumb { margin-top: 1.75rem; }
  .bt-breadcrumb ol {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    list-style: none; margin: 0; padding: 0;
    font-size: .875rem;
  }
  .bt-breadcrumb li { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.6); }
  .bt-breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,.35); }
  .bt-breadcrumb a { color: rgba(255,255,255,.78); }
  .bt-breadcrumb a:hover { color: #fff; }
  .bt-breadcrumb [aria-current="page"] { color: rgba(255,255,255,.6); }

  @media (max-width: 767.98px) {
    .bt-page-title { padding: 56px 0 48px; }
  }

/* ==========================================================================
   YAZI KARTI — blog listesi ve yazı sayfasının "Diğer yazılar" bölümü
   ⚠ Bu blok BURADA durur, sayfaların <style> bloğunda DEĞİL. Astro sayfa
   stillerini o bileşene kapsar; kural blog/index.astro'da dururken
   blog/[slug].astro'nun kartları stilsiz kalıyordu — ölçüldü 2026-09-06:
   zemin şeffaf, çerçeve 0px, köşe 0px, object-fit: fill (görsel eziliyor),
   position: static (aşağıdaki genişletilmiş bağlantı komşu karta taşıyordu).
   ========================================================================== */

/* ⚠ Genişletilmiş bağlantı: kartın tamamı tıklanır ama ekran okuyucu için
   KART BAŞINA TEK bağlantı kalır. Görsel bir <div>'dir (ikinci bağlantı
   olmasın), "Yazıyı oku →" dekoratif span olarak kalır — üçüncü bir bağlantı
   aynı hedefi üç kez okutur. */
.bt-yazi-kart {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius);
  overflow: hidden;
  transition: transform .22s var(--bt-ease), box-shadow .22s var(--bt-ease),
              border-color .22s var(--bt-ease);
}
.bt-yazi-kart:hover {
  transform: translateY(-4px);
  box-shadow: var(--bt-shadow);
  border-color: transparent;
}

.bt-yazi-gorsel { display: block; aspect-ratio: 16 / 10; background: var(--bt-surface); overflow: hidden; }
.bt-yazi-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-yazi-gorsel-bos {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(44,156,212,.18), rgba(3,42,62,.12));
}

.bt-yazi-govde { display: flex; flex-direction: column; flex: 1; padding: 1.6rem 1.5rem 1.75rem; }

.bt-yazi-ust {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .85rem;
  font-size: .8125rem; color: var(--bt-body);
}
.bt-yazi-kategori {
  display: inline-block;
  background: rgba(44,156,212,.12); color: var(--bt-blue-action);
  border-radius: 999px; padding: .2rem .7rem;
  font-weight: 600; font-size: .75rem;
  letter-spacing: .03em;
}

/* Başlık h2 (liste) ya da h3 (diğer yazılar) olabilir — ikisi de aynı kart. */
.bt-yazi-kart h2, .bt-yazi-kart h3 { line-height: 1.35; margin: 0 0 .7rem; }
.bt-yazi-kart h2 { font-size: 1.1875rem; }
.bt-yazi-kart h3 { font-size: 1.0625rem; line-height: 1.4; margin-bottom: .9rem; }
.bt-yazi-kart h2 a, .bt-yazi-kart h3 a { color: var(--bt-navy); }
.bt-yazi-kart h2 a::after, .bt-yazi-kart h3 a::after {
  content: ""; position: absolute; inset: 0;
  /* ⚠ z-index şart: ::after, DOM'da SONRA gelen <p> ve "Yazıyı oku"
     span'inin ALTINDA kalıyordu — ölçüldü, o alanlar tıklanmıyordu. */
  z-index: 1;
}
.bt-yazi-kart h2 a:hover, .bt-yazi-kart h3 a:hover { color: var(--bt-blue-action); }

.bt-yazi-govde p {
  font-size: .9375rem; line-height: 1.65; color: var(--bt-body);
  margin: 0 0 1.15rem;
}
.bt-yazi-devam {
  margin-top: auto;
  font-size: .875rem; font-weight: 600; color: var(--bt-blue-action);
}

@media (max-width: 767.98px) {
  .bt-yazi-govde { padding: 1.35rem 1.25rem 1.5rem; }
}