/* ============================================================
   Blog — liste (520:9068, 1440x2585) ve detay (522:9441, 1440x2843)

   Kart bileşeni (.blogcard, 350x440) css/components.css içinde;
   ana sayfadaki "İlgili Bloglar" ile birebir aynı bileşen.
   ============================================================ */

/* ---------- Kahraman ---------- */
.bloghero { position: relative; height: 522px; overflow: hidden; }
.bloghero .bg-media { position: absolute; inset: 0; }
.bloghero .bg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bloghero .bg-media::after { content: ""; position: absolute; inset: 0; background: rgba(4, 30, 66, .78); }
.bloghero__inner { position: relative; height: 100%; }
.bloghero__title {
  margin: 0; padding-top: 247px;
  font-weight: 600; font-size: 36px; line-height: 43.88px; color: #fff;
}
.bloghero__sub {
  margin: 0; padding-top: 47px; max-width: 1042px;   /* 291 -> 338 */
  font-weight: 500; font-size: 20px; line-height: 24.38px; color: #fff;
}

/* ---------- Kategori sekmeleri — Figma: y=474, yükseklik 48, aralık 16.
   Genişlikler ve punto tasarımdan birebir (bkz. data/blog.json). ---------- */
.blogtabs { position: absolute; left: 0; right: 0; bottom: 0; }
.blogtabs ul { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.blogtabs a {
  display: grid; place-items: center; height: 48px; padding: 0 8px;
  background: var(--color-navy); color: #fff; text-decoration: none;
  font-weight: 500; line-height: 17.07px; text-align: center;
  transition: background-color .18s ease, color .18s ease;
}
.blogtabs a:hover { background: #0A2F63; }
.blogtabs a[aria-current="true"] { background: #fff; color: var(--color-navy); }

/* ---------- "Güncel Haberler" + öne çıkan iki kart ---------- */
.blogfeat { padding: 67px 0 0; }                    /* 522 -> 589 */
.blogfeat__head {
  margin: 0 0 50px; font-weight: 600; font-size: 32px; line-height: 39.01px;
  color: var(--color-navy);
}
.blogfeat__row { display: flex; gap: 24px; }

/* Geniş kart — Figma: 612x440, panel #041E42 %78, metin beyaz */
.blogcard--wide { width: 612px; color: #fff; }
.blogcard--wide .blogcard__panel { background: rgba(4, 30, 66, .78); }
.blogcard--wide .blogcard__text { max-width: 275px; }

/* ---------- Gri bant + kart ızgarası — Figma: 1440x1000 @ y=1165, #CECECE ---------- */
.bloggrid { margin-top: 47px; padding: 48px 0; background: #CECECE; }  /* 1118 -> 1165 */
/* 3 x 350 + 2 x 99 = 1248; satır aralığı 24 */
.bloggrid__rows { display: flex; flex-wrap: wrap; gap: 24px 99px; }
.bloggrid .blogcard { flex: 0 0 350px; }
.blogempty {
  margin: 0; padding: 64px 24px; text-align: center;
  font-size: 18px; line-height: 28px; color: var(--color-navy); background: #fff;
}

/* ============================================================
   Blog detay — Figma 522:9441 (1440x2843)
     kahraman görsel 1440x666 · gri bant #D5D5D5 666-1739
     makale paneli #E2E2E2 1094 genişlik @ (173,384), 1248 yükseklik
     ilgili bloglar 1739-2423
   ============================================================ */
.bdhero { height: 666px; overflow: hidden; }
.bdhero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bdbody { background: #D5D5D5; padding-bottom: 107px; }   /* panel 1632 -> bant 1739 */

/* position:relative ŞART: negatif margin ile kahramanın üstüne binen bu blok
   konumlandırılmazsa arka planı, .bdhero içindeki <img>'ın ALTINDA boyanır
   (satır içi içerik, blok arka planlarından sonraki boyama katmanında).
   Sonuç: panel saydam görünür, fotoğraf metnin arkasından geçer. */
.bdpanel {
  position: relative;
  width: 1094px; margin: -282px auto 0;                   /* 666 - 384 */
  /* Alt dolgu 103 yerine 101: Figma metin kutularini 6 satir icin 144px
     sayiyor, tarayici 24.38 satir yuksekligiyle 146 uretiyor (blok basina +2). */
  padding: 46px 88px 101px 89px;                          /* iç genişlik 917 */
  background: #E2E2E2;
}
.bdpanel__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.bdchip {
  display: inline-grid; place-items: center; min-width: 156px; height: 37px; padding: 0 10px;
  background: #9BCBEB; color: var(--color-navy);
  font-weight: 500; font-size: 14px; line-height: 17.07px;
}
.bdshare { display: flex; align-items: center; gap: 16px; margin-top: 6px; padding-right: 2px; }
.bdshare a { display: grid; place-items: center; width: 24px; height: 24px; color: var(--color-navy); }
.bdshare svg { width: 24px; height: 24px; }

.bdtitlerow { display: flex; align-items: center; gap: 8px; margin-top: 25px; }
.bdback {
  flex: 0 0 41px; display: grid; place-items: center; width: 41px; height: 40px;
  margin-left: -50px; color: var(--color-navy);           /* panel kenarından 39px */
}
.bdback svg { width: 24px; height: 24px; }
.bdtitle { margin: 0; font-weight: 600; font-size: 36px; line-height: 43.88px; color: var(--color-navy); }

.bdlead { margin: 39px 0 0; }
.bdfig { margin: 66px 0 0; }
.bdfig > * { display: block; width: 917px; height: 551px; object-fit: cover; }
.bdtext { margin: 47px 0 0; }
.bdlead, .bdtext {
  font-weight: 500; font-size: 20px; line-height: 24.38px; color: var(--color-navy);
}

/* İlgili bloglar — Figma: 1440x684 @ y=1739 */
.bdrelated { padding: 60px 0; }
.bdrelated__head { margin: 0 0 16px; font-weight: 600; font-size: 36px; line-height: 43.88px; color: var(--color-navy); }
.bdrelated__more { margin: 0 0 32px; text-align: right; }
.bdrelated__more a {
  font-weight: 500; font-size: 20px; line-height: 32px; color: var(--color-navy);
  text-decoration: underline; text-underline-offset: 3px;
}
.bdrelated__row { display: flex; gap: 99px; }

/* ============================================================
   Mobil — Figma 520:9115 (liste, 390x5886) · 522:9592 (detay, 390x3581)

     0    kahraman 390x431  (#041E42 %78)
     203  başlık + açıklama
     447  kategori hapları (3 satıra sarıyor)
     609  kartlar 358 genişlik, aralık 36, hepsi tek sütun
   ============================================================ */
@media (max-width: 767px) {
  /* Mobilde sekmeler fotoğrafın ALTINDA (y=447 > 431). Kahraman yüksekliği
     serbest bırakılıp fotoğraf 431'e sabitleniyor; sekmeler akışta kalıyor. */
  .bloghero { height: auto; }
  .bloghero .bg-media { inset: 0 0 auto 0; height: 431px; }
  .bloghero .bg-media::after { background: rgba(4, 30, 66, .78); }
  /* min-height, sabit padding yerine: sekmelerin yeri tasarımda 447'de sabit,
     açıklama metninin uzunluğu ise içerik. Metin uzarsa kahraman büyür. */
  .bloghero__inner { height: auto; min-height: 447px; }
  .bloghero__title { padding-top: 203px; font-size: 18px; line-height: 21.94px; }
  .bloghero__sub { padding-top: 8px; max-width: none; font-size: 16px; line-height: 19.5px; }

  /* Sekmeler mobilde hap butona dönüşüyor ve sarıyor */
  .blogtabs { position: static; padding: 0; }
  .blogtabs ul { flex-wrap: wrap; gap: 8px; }
  .blogtabs a {
    width: auto !important; height: 40px; padding: 0 8px;   /* Figma: 1. hap 12px, diğerleri 8px — 8'e eşitlendi */
    font-size: 14px !important; font-weight: 600; line-height: 17.07px;
    border: 1px solid var(--color-navy);
  }
  .blogtabs a[aria-current="true"] { background: #fff; color: var(--color-navy); }

  /* Öne çıkan + ızgara mobilde tek akış: 358 genişlik, aralık 36 */
  .blogfeat { padding: 26px 0 0; }                          /* 583 -> 609 */
  .blogfeat__head { display: none; }                        /* mobilde başlık yok */
  .blogfeat__row { flex-direction: column; gap: 36px; }
  .bloggrid { margin-top: 36px; padding: 0 0 55px; background: none; }
  .bloggrid__rows { flex-direction: column; gap: 36px; }

  .blogcard, .blogcard--wide, .bloggrid .blogcard {
    width: 100%; flex: 0 0 auto; height: 440px; color: #fff;
  }
  /* Mobilde tüm kartlarda metin beyaz; masaüstü ızgarada siyahtı. */
  .blogcard__panel { height: 177px; background: rgba(4, 30, 66, .78); }
  .blogcard--wide .blogcard__text { max-width: none; }
  .blogcard__chip { left: 16px; top: 17px; min-width: 164px; }
  .blogcard__meta { left: 16px; right: 16px; bottom: 24px; }
  .blogcard__date { font-size: 14px; line-height: 17.07px; margin-bottom: 5px; }
  .blogcard__title { font-size: 16px; line-height: 19.5px; margin-bottom: 5px; }
  .blogcard__text { font-size: 14px; line-height: 20px; margin-bottom: 5px; }
  .blogcard__more { font-size: 14px; line-height: 17.07px; font-weight: 600; }
}

/* ---------- Blog detay mobil — Figma 522:9592 (390x3581) ----------
     0     kahraman fotoğraf 390x606
     87    beyaz makale paneli 358x1003 (fotoğrafın üstüne biniyor)
     606   açık bant #F3F8FC, 523 yüksek
     1129  İlgili Blog bölümü
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .bdhero { height: 606px; }
  .bdbody { background: #F3F8FC; padding-bottom: 39px; }   /* panel 1090 -> bant 1129 */
  .bdpanel {
    width: 358px; margin-top: -519px;                      /* 606 - 87 */
    padding: 20px 16px 47px;                               /* içerik 107 -> 1043 */
    background: #fff;
  }
  .bdchip { min-width: 156px; }
  .bdshare { margin-top: 7px; padding-right: 0; }
  .bdtitlerow { gap: 8px; margin-top: 25px; }
  .bdback { flex: 0 0 26px; width: 26px; height: 25px; margin-left: 0; }
  .bdtitle { font-size: 24px; line-height: 29.26px; }
  .bdlead { margin-top: 16px; }
  .bdlead, .bdtext { font-size: 14px; line-height: 20px; font-weight: 400; }
  .bdfig { margin-top: 23px; }
  .bdfig > * { width: 316px; height: 363px; margin-inline: auto; }
  /* Figma: ikinci metin bloğu 338 geniş (x=26), üstteki 320 (x=35).
     Genişlik satır sayısını değiştirdiği için birebir korundu. */
  .bdtext { margin-top: 23px; margin-inline: -6px; }

  .bdrelated { padding: 30px 0 0; }                        /* 1129 -> 1159 */
  .bdrelated__head { margin: 0; font-size: 18px; line-height: 21.94px; }
  .bdrelated__more { margin: -27px 0 24px; }               /* başlıkla aynı satırda */
  .bdrelated__more a { font-size: 16px; line-height: 19.5px; }
  .bdrelated__row { flex-direction: column; gap: 36px; }
}

/* Tablet / ara genişlikler (768-1439) — Figma'da tasarlanmadı.
   Sekmeler sabit genişlikli (data/blog.json#categories.w) ve 1440
   altında satıra sığmıyordu; sarmalı yapıldı. */
@media (min-width: 768px) and (max-width: 1439px) {
  .blogtabs ul { flex-wrap: wrap; gap: 12px; }
  .blogtabs a { width: auto !important; padding: 0 16px; }
  .blogfeat__row { flex-wrap: wrap; }
  .blogcard--wide { flex: 1 1 320px; width: auto; }
  .bloggrid__rows { gap: 24px 32px; justify-content: center; }
  .bloggrid .blogcard { flex: 0 1 350px; }
  .bdpanel { width: auto; max-width: calc(100% - 64px); padding: 40px 48px; }
  .bdback { margin-left: -28px; }
  .bdfig > * { width: 100%; height: auto; aspect-ratio: 917 / 551; }
  .bdrelated__row { flex-wrap: wrap; gap: 24px 32px; justify-content: center; }
}

/* 390 altı: detay paneli ve görseli sabit genişlikteydi. */
@media (max-width: 389px) {
  .bdpanel { width: auto; max-width: calc(100% - 16px); margin-inline: auto; }
  .bdfig > * { width: auto; max-width: 100%; height: auto; aspect-ratio: 316 / 363; }
  .bdtext { margin-inline: 0; }
  .bdchip { min-width: 0; }
}