/* =====================================================================
   MPT Main Parts - Blog / Teknik Bilgi Bankasi
   Views/Blog/Liste.cshtml + Views/Blog/Detail.cshtml ile birlikte kullanilir.

   KAPSULLEME: her kural ".mpt-blog" ile baslar. Blog sayfalarinin disinda
   HICBIR seyi etkilemez.

   DEGISKENLER: kategori.css'teki --mpt-* token'lari BLOG SAYFASINDA YUKLENMIYOR
   (kategori.css yalniz urun sayfalarina ekleniyor). Bu yuzden token'lar burada
   .mpt-blog KAPSAMINDA yeniden tanimlandi. AYRICA her var() cagrisinda FALLBACK
   yazildi: bu bloklar bir gun .mpt-blog kapsaminin disina tasinirsa renkler
   sessizce cokmesin.

   TIPOGRAFI: style.css :root'ta --h1..h6-font-weight:400 ve
   --line-height-heading:54px var; ayrica global ".text,body,p{font-size:16px;
   line-height:28px}" kurali govdeyi eziyor. Bu yuzden HER baslikta ve her
   metin ogesinde font-size / line-height / font-weight ACIKCA yazilir.

   OLCEK - ALTI KADEME, YARIM PIKSEL YOK (eskisinde 22 ayri boy, 16'si
   yarim-pikseldi):
     --f1 34px  sayfa H1
     --f2 26px  vitrin basligi, govde h2, SSS h2, bos-durum basligi
     --f3 20px  govde h3, standfirst, SSS sorusu
     --f4 17px  govde metni, satir basligi, CTA basligi
     --f5 15px  ozet, gezinme, breadcrumb, dugme, alt baslik
     --f6 13px  meta (kategori rozeti, okuma suresi, sayac, panel basligi)
   Duyarli kademeler yalnizca --f1/--f2/--f3'u yeniden tanimlar; yeni BOY
   eklenmez.

   KONTRAST: --muted #5c6478, beyaz uzerinde 5.92:1 -> WCAG AA (4.5) gecer.
   Onceki #7a7f92 3.98:1 ile kaliyordu ve TUM ikincil metin katmanini
   tasiyordu. Eski gri --muted-2 adiyla YALNIZ metin olmayan ayrac
   noktalarinda (::before daireleri) kaldi - orada kontrast esigi yok.
   ===================================================================== */

/* ------------------------------------------------------------- token */
.mpt-blog {
  --ink: #17233a;
  --ink-2: #333a4d;
  --muted: #5c6478;
  --muted-2: #7a7f92;
  --accent: #203f69;
  --accent-d: #16304f;
  --brand: #15406a;
  --line: #e6e8ee;
  --soft: #f5f6fa;
  --soft-2: #f9fbfc;
  --tint: #e9f2ff;
  --chip: #f2f3f8;

  --f1: 34px;
  --f2: 26px;
  --f3: 20px;
  --f4: 17px;
  --f5: 15px;
  --f6: 13px;

  /* Okuma kolonu olcusu - OLCULEREK secildi, tahminle degil.
     "ch" birimi bu yazi tipinde YANILTICI: DM Sans'in "0" glifi 0.687em
     genisliginde, oysa gercek Turkce metnin ortalama karakter genisligi
     17px'te 7.78px = 0.458em. Yani 68ch = 794px SATIR BASINA 95 KARAKTER
     demek oluyordu - duzeltilmesi istenen kusurun ta kendisi (olculdu:
     Range.getClientRects ile paragraf basina 95 / 93 / 81 karakter).
     552px = 71 karakter; hedef 65-75 araliginin ortasi.
     Ev stili de olcuyu PIKSEL ile kisitliyor: kategori.css .mpt-seo
     max-width:980px. */
  /* --olcu: okuma olcusu (552px = satir basina ~71 karakter). Kullanici
     karariyla DEVRE DISI: okuma kolonundaki ogeler artik kolon genisligini
     kullaniyor. Geri almak icin asagidaki degeri ve ilgili max-width
     satirlarini geri koymak yeterli. */
  --olcu: 552px;

  /* Kategori sayfasiyla AYNI bolum dolgusu (.cars-section-fourteen 52px 0 120px).
     .blog-section'in masaustu dolgusu aktif style.css'te YOK. */
  padding: 52px 0 120px;
}

/* Uzun OEM kodlari / bilesik kelimeler mobilde sayfayi yatay kaydirmasin. */
.mpt-blog,
.mpt-blog p,
.mpt-blog h1,
.mpt-blog h2,
.mpt-blog h3,
.mpt-blog h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}

.mpt-blog a:focus-visible {
  outline: 2px solid var(--brand, #15406a);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------- sayfa basligi */
/* Bootstrap'in .breadcrumb-item sinifi KULLANILMIYOR: onun padding-left:.5rem'i
   MPT'nin margin-right:21px + "/" ::before duzenine ekleniyor ve aralik
   kategori sayfasiyla uyusmuyordu. */
.mpt-blog .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 0;
  list-style: none;
  background: none;
}

.mpt-blog .breadcrumb li {
  position: relative;
  font-size: var(--f5, 15px);
  line-height: 26px;
  margin-right: 21px;
  color: var(--muted, #5c6478);
}

.mpt-blog .breadcrumb li::before {
  content: "/";
  position: absolute;
  top: 0;
  right: -14px;
  color: var(--muted-2, #7a7f92);
}

.mpt-blog .breadcrumb li:last-child::before {
  display: none;
}

.mpt-blog .breadcrumb li a {
  color: var(--brand, #15406a);
}

/* EV KALIBI: kategori.css .mpt-cat-head baslik ile sayiyi AYNI TABANDA
   (align-items:baseline) veriyor - "Motor  1068 Ürünler". Blog da ayni
   kalibi kullanir; sayi artik basligin altinda ayri bir satir degil. */
.mpt-blog-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
}

.mpt-blog-head h1 {
  margin: 0;
  font-size: var(--f1, 34px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink, #17233a);
}

.mpt-blog-subtitle {
  font-size: var(--f5, 15px);
  line-height: 1.6;
  font-weight: 500;
  color: var(--muted, #5c6478);
}

.mpt-blog-subtitle-ek::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted-2, #7a7f92);
  margin: 0 8px 0 0;
  vertical-align: middle;
}

/* Facet sayfasindaki geri baglantisi basligin sonuna yaslanir; kendi satirini
   acmaz. Dar ekranda flex-wrap onu alt satira indirir. */
.mpt-blog-geri {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-height: 44px;
  font-size: var(--f5, 15px);
  font-weight: 600;
  color: var(--accent, #203f69);
  transition: color .2s ease;
}

.mpt-blog-geri::before {
  content: "\2190";
  font-size: var(--f5, 15px);
  line-height: 1;
}

.mpt-blog-geri:hover {
  color: var(--brand, #15406a);
}

/* Bolum giris cumlesi - yalniz kok listede. */
.mpt-blog-giris {
  margin: 0 0 26px;
  font-size: var(--f5, 15px);
  line-height: 1.75;
  color: var(--muted, #5c6478);
}

/* ============================================ MOBIL KONU RAYI (<=991px) */
/* KUSUR: yan sutun mobilde bes yazinin TAMAMININ altinda kaliyordu
   (olculdu: y=2561). Konu gezinmesi telefonda icerikten ONCE olmali.
   Cozum: ayni baglantilar, ana kolonun EN USTUNDE yatay kaydirmali yogun
   bir ray olarak. Masaustunde ray gizli, yan sutun gorunur; mobilde tersi -
   yani ayni baglanti iki kez GORUNMEZ. */
.mpt-blog-ray {
  display: none;
}

.mpt-blog-ray ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.mpt-blog-ray li {
  flex: 0 0 auto;
}

/* Dokunma hedefi: 44px (min-height) - eskiden cip 34px'ti. */
.mpt-blog-ray-cip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;
  font-size: var(--f5, 15px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink-2, #333a4d);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.mpt-blog-ray-cip span {
  font-size: var(--f6, 13px);
  line-height: 1.5;
  color: var(--muted, #5c6478);
  background: var(--chip, #f2f3f8);
  border-radius: 999px;
  padding: 2px 8px;
}

.mpt-blog-ray-cip.aktif {
  border-color: var(--accent, #203f69);
  background: var(--accent, #203f69);
  color: #fff;
}

.mpt-blog-ray-cip.aktif span {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ============================================================ YAN SUTUN */
/* TARAF/GENISLIK: liste ve detay AYNI - col-xl-3 col-lg-4, masaustunde SOLDA
   (order-lg-1). Eskiden detay sayfasinda sagda ve col-xl-4 idi; iki sayfa
   arasinda gecis yapan kullanici gezinmeyi her seferinde yeniden ariyordu. */
.mpt-blog-yan-ic {
  position: sticky;
  top: 24px;
}

.mpt-blog-panel {
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 16px;
  background: #fff;
  padding: 18px 18px 14px;
  margin-bottom: 18px;
}

.mpt-blog-panel-baslik {
  margin: 0 0 12px;
  font-size: var(--f6, 13px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #5c6478);
}

/* Konu gezinmesi - kategori.css'teki .mpt-cat-nav kalibinin birebir esi. */
.mpt-blog-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mpt-blog-nav li {
  border-bottom: 1px solid var(--line, #e6e8ee);
}

.mpt-blog-nav li:last-child {
  border-bottom: 0;
}

.mpt-blog-nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 4px;
  font-size: var(--f5, 15px);
  line-height: 1.45;
  color: var(--ink-2, #333a4d);
  transition: color .2s ease, padding-left .2s ease;
}

.mpt-blog-nav li a span {
  flex: 0 0 auto;
  font-size: var(--f6, 13px);
  line-height: 1.5;
  color: var(--muted, #5c6478);
  background: var(--chip, #f2f3f8);
  border-radius: 20px;
  padding: 2px 9px;
  min-width: 34px;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}

.mpt-blog-nav li a:hover,
.mpt-blog-nav li a:focus-visible {
  color: var(--accent, #203f69);
  padding-left: 8px;
}

.mpt-blog-nav li.aktif > a {
  color: var(--accent, #203f69);
  font-weight: 600;
}

.mpt-blog-nav li.aktif > a span {
  background: var(--accent, #203f69);
  color: #fff;
}

/* Etiket cipleri - dokunma hedefi 44px. */
.mpt-blog-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.mpt-blog-cip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 999px;
  background: #fff;
  font-size: var(--f5, 15px);
  line-height: 1.4;
  color: var(--ink-2, #333a4d);
  transition: border-color .2s ease, color .2s ease;
}

.mpt-blog-cip span {
  font-size: var(--f6, 13px);
  color: var(--muted, #5c6478);
  background: var(--chip, #f2f3f8);
  border-radius: 999px;
  padding: 1px 8px;
}

.mpt-blog-cip:hover,
.mpt-blog-cip:focus-visible,
.mpt-blog-cip.aktif {
  border-color: var(--accent, #203f69);
  color: var(--accent, #203f69);
}

/* Katalog cagrisi - bolumun tek dolu-renkli blogu. */
.mpt-blog-cta {
  border-radius: 16px;
  background: var(--brand, #15406a);
  padding: 22px 20px;
  margin-bottom: 18px;
}

.mpt-blog-cta h2 {
  margin: 0 0 8px;
  font-size: var(--f4, 17px);
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
}

.mpt-blog-cta p {
  margin: 0 0 16px;
  font-size: var(--f5, 15px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
}

.mpt-blog-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 10px;
  background: #fff;
  color: var(--brand, #15406a);
  font-size: var(--f5, 15px);
  font-weight: 600;
  line-height: 22px;
  transition: background-color .2s ease, color .2s ease;
}

.mpt-blog-cta a:hover,
.mpt-blog-cta a:focus-visible {
  background: var(--tint, #e9f2ff);
  color: var(--accent-d, #16304f);
}

/* ========================================================== VITRIN YAZI */
/* YATAY MANSET BANDI.
   ESKI GEOMETRI (ve kusuru): grid 320px+1fr, align-items:center, figure'da
   aspect-ratio:4/3. Iki kolonun yuksekligi BAGIMSIZ hesaplaniyor, center
   hizalamasi farki gorselin ustune ve altina ESIT bolusturuyordu
   (olculdu: 1000px'te 62+62px olu oluk).
   YENI GEOMETRI: flex + align-items:stretch, figure'da aspect-ratio YOK,
   img position:absolute/inset:0/object-fit:cover. Gorselin yuksekligi artik
   bir GIRDI degil, bandin yuksekliginin SONUCU - ust/alt oluk "sifirlanan"
   degil, HIC DOGMAYAN bir deger.

   ORANIN BAGIMLI DEGISKEN OLMASI RISKI (kirpma) IKI KENARDAN BAGLANDI:
     alt sinir  -> .mpt-blog-one-ic{min-height:190px}  (bos oluk metin
                   kolonunda kalir, gorselin cevresinde degil)
     ust sinir  -> baslik 2 satira, ozet 2 satira clamp'li; yani metin
                   kolonu buyuyemez.
   Sonuc - OLCULDU: figure orani 1.374 (992-1199px) ile 1.579 (>=1200px ve
   768-991px) arasinda kalir, <=767px'te tam olarak 1.500'dur. Oran hala bir
   BAGIMLI degisken oldugu icin her banda KENDI Cloudflare kirpmasi veriliyor
   (Razor'daki <picture>): 1.50 / 1.40 / 1.50. Atilan kesit sirasiyla
   %5.0 yukseklik, %1.9 genislik, %0. Almanca gibi uzun dillerde de ayni
   sayilar olculdu - baslik iki satirda kesiliyor ve ust bilgi sarmiyor.

   DOLGU: 16px - SATIR KARTIYLA AYNI. Boylece ust uste duran vitrin ve satir
   kartlarinin gorselleri TEK BIR SOL RAYDA hizalanir (ikisi de kart kenari
   + 1px cerceve + 16px dolgu). Eskiden vitrin 20px, satir 16px idi ve ray
   4px oynuyordu; gorseli kart kenarina dayamak bu farki 16px'e CIKARIRDI. */
.mpt-blog-one {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 18px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

/* Satir kartiyla AYNI hover gramatigi: kalkma + cerceve kaybolur + MPT golgesi.
   (Eskiden vitrin yalniz golge aliyordu, satirlar kalkiyordu; ayni listede
   iki farkli etkilesim dili vardi.) */
.mpt-blog-one:hover,
.mpt-blog-one:focus-within,
.mpt-blog-satir:hover,
.mpt-blog-satir:focus-within {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(20, 27, 60, .12);
}

.mpt-blog-one-gorsel {
  position: relative;
  flex: 0 0 300px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--soft, #f5f6fa);
}

/* <picture> yalnizca kaynak secimi yapar, kutu uretmemeli. */
.mpt-blog-one-gorsel picture {
  display: contents;
}

/* Mutlak konum: yuzde-yukseklik cozumlemesi tarayiciya birakilmaz, gorsel
   her kosulda bandin TAM yuksekligini kaplar (Safari guvencesi). */
.mpt-blog-one-gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.mpt-blog-one:hover .mpt-blog-one-gorsel img {
  transform: scale(1.06);
}

/* min-height bandin ALT sinirini metin kolonuna koyar: kisa baslikli /
   ozetsiz patolojik kayitta artan bosluk METNIN ALTINDA kalir (flex-start),
   gorselin ustune-altina BOLUSTURULMEZ. */
.mpt-blog-one-ic {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Gorseli olmayan vitrin yazisi bos hucre birakmaz: figure HIC BASILMAZ,
   metin tek basina tum karti kaplar ve taban yukseklik de kalkar. */
.mpt-blog-one.yok-gorsel .mpt-blog-one-ic {
  min-height: 0;
}

/* TEK SATIR GARANTISI - VE NEDEN GEREKTIGI.
   "Tek hap satiri" iddiasi Turkce'de kendiliginden tutuyordu ama uzun
   dillerde COKUYORDU: Almanca etiketlerle (rozet "Empfohlener Beitrag" +
   kategori "Wartungs- und Instandhaltungsratgeber" + "12 Minuten Lesezeit")
   ust bilgi 1000px'te 29px'ten 94px'e cikip UC satira sariyor, bandi sisiriyor
   ve gorselin oranini 1.03'e - yani DIKEYE - dusuruyordu. Bugun dokuz dilin
   sekizinde vitrin bos; yani bu "uc durum" degil, icerik geldiginde NORMAL durum.
   IKI ADIMDA COZULDU:
     1) "Öne çıkan" rozeti ust bilgi satirindan CIKIP gorselin ustune tasindi.
        Boylece rozet dikeyde HIC yer tutmuyor (eski tasarimda ayri bir blok
        satir + 12px margin idi) ve ust bilgide iki oge kaliyor.
     2) Kalan satir SARMAZ; sikistiginda kisalmasina izin verilen tek oge
        kategori cipidir (tam adi title ile erisilebilir kalir).
   Specifiklik notu: .mpt-blog-ustbilgi ortak kurali bu dosyada DAHA SONRA
   geliyor; bu yuzden burada iki sinifli selektor kullanildi. */
.mpt-blog-one .mpt-blog-one-ustbilgi {
  margin: 0 0 10px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.mpt-blog-one .mpt-blog-one-ustbilgi > li {
  flex: 0 0 auto;
  min-width: 0;
}

/* Sinif Razor'da veriliyor - :has() kullanilmadi, eski tarayicilarda
   sessizce duserdi. */
.mpt-blog-one .mpt-blog-one-ustbilgi > li.mpt-blog-esnek {
  flex: 0 1 auto;
}

.mpt-blog-one .mpt-blog-one-ustbilgi .mpt-blog-kategori {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mpt-blog-one .mpt-blog-one-ustbilgi .mpt-blog-sure {
  white-space: nowrap;
}

.mpt-blog-rozet {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--brand, #15406a);
  color: #fff;
  font-size: var(--f6, 13px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Rozetin gorsel uzerindeki yeri. Gorseli olmayan vitrin yazisinda rozet
   Razor tarafinda ust bilgi satirinin ilk ogesi olarak basilir. */
.mpt-blog-rozet-gorsel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(20, 27, 60, .3);
}

.mpt-blog-one-baslik {
  /* ZORUNLU. style.css'te "h1,h2,h3,h4,h5,h6{position:relative}" var; bu yuzden
     asagidaki a::after'in KAPSAYAN BLOGU .mpt-blog-one degil H2 oluyor ve
     "tum kart tiklanabilir" iddiasi tutmuyordu (olculdu: 1044x202 yerine
     694x29 - yalnizca baslik satiri). static'e cekilince kapsayan blok
     .mpt-blog-one'a geri doner. */
  position: static;
  margin: 0 0 9px;
  font-size: var(--f2, 26px);
  line-height: 1.28;
  font-weight: 700;
  /* Bandin yuksekligini belirleyen ASIL degisken basliktir; iki satirda
     kesilir. ::after'in kapsayan blogu .mpt-blog-one oldugu icin buradaki
     overflow:hidden onu KESMEZ (kapsayan blok zincirinde h2 yok). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mpt-blog-one-baslik a {
  color: var(--ink, #17233a);
  transition: color .2s ease;
}

/* Tum kart tiklanabilir; ic baglantilar z-index:1 ile ustte kalir. */
.mpt-blog-one-baslik a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.mpt-blog-one:hover .mpt-blog-one-baslik a {
  color: var(--accent, #203f69);
}

.mpt-blog-one-ozet {
  margin: 0 0 11px;
  font-size: var(--f5, 15px);
  line-height: 1.7;
  color: var(--muted, #5c6478);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mpt-blog-one .mpt-blog-altsatir {
  margin-top: auto;
}

/* ======================================================== YAZI SATIRLARI */
.mpt-blog-liste {
  margin: 0 0 6px;
}

/* align-items:flex-start ZORUNLU: flex'in varsayilan stretch'i figure'un
   aspect-ratio:4/3'unu EZIYORDU (olculdu 1440'ta: uzun metinli 1. satirda
   168x147 = 1.14, digerlerinde 168x126 = 1.33; 1000'de 144x171 = DIKEY).
   Boylece satir gorsel rayi kendi icinde tirtikliydi. flex-start ile
   figure kendi oranini korur: her satirda 4:3, kaynak varyantiyla birebir. */
.mpt-blog-satir {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line, #e6e8ee);
  border-radius: 14px;
  background: #fff;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.mpt-blog-satir-gorsel {
  flex: 0 0 168px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--soft, #f5f6fa);
  aspect-ratio: 4 / 3;
}

.mpt-blog-satir-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.mpt-blog-satir:hover .mpt-blog-satir-gorsel img {
  transform: scale(1.06);
}

.mpt-blog-satir-ic {
  flex: 1 1 auto;
  min-width: 0;
}

/* Ust bilgi: kategori rozeti + okuma suresi. HER kartta bulunur. */
.mpt-blog-ustbilgi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 9px;
  padding: 0;
  list-style: none;
}

.mpt-blog-kategori {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--tint, #e9f2ff);
  color: var(--accent, #203f69);
  font-size: var(--f6, 13px);
  font-weight: 600;
  line-height: 1.55;
  transition: background-color .2s ease, color .2s ease;
}

.mpt-blog-kategori:hover,
.mpt-blog-kategori:focus-visible {
  background: var(--accent, #203f69);
  color: #fff;
}

.mpt-blog-sure {
  font-size: var(--f6, 13px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--muted, #5c6478);
}

/* Ayrac noktasi METIN DEGIL -> eski gri burada kalabilir (kontrast esigi yok). */
.mpt-blog-sure::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted-2, #7a7f92);
  margin-right: 8px;
  vertical-align: middle;
}

.mpt-blog-ustbilgi > :first-child.mpt-blog-sure::before {
  display: none;
}

.mpt-blog-satir-baslik {
  /* Vitrin basligindaki ayni kusur: style.css h2'ye position:relative veriyor,
     stretched-link'in hedefi 1042x179 yerine 29px'lik baslik satirina
     dusuyordu. */
  position: static;
  margin: 0 0 8px;
  font-size: var(--f4, 17px);
  line-height: 1.4;
  font-weight: 700;
}

.mpt-blog-satir-baslik a {
  color: var(--ink, #17233a);
  transition: color .2s ease;
}

.mpt-blog-satir-baslik a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.mpt-blog-satir:hover .mpt-blog-satir-baslik a {
  color: var(--accent, #203f69);
}

.mpt-blog-ozet {
  margin: 0 0 10px;
  font-size: var(--f5, 15px);
  line-height: 1.7;
  color: var(--muted, #5c6478);
}

.mpt-blog-altsatir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--f6, 13px);
  line-height: 1.6;
  color: var(--muted, #5c6478);
}

.mpt-blog-altsatir li + li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted-2, #7a7f92);
  margin-right: 12px;
  vertical-align: middle;
}

.mpt-blog-altsatir a {
  position: relative;
  z-index: 1;
  color: var(--ink-2, #333a4d);
  font-weight: 600;
  transition: color .2s ease;
}

.mpt-blog-altsatir a:hover {
  color: var(--accent, #203f69);
}

/* ---------------------------------------------------------- sayfalama */
/* .pagination-sec kurallari aktif style.css'te TAM duruyor (40px daire, aktifte
   60px hap) ama ancak baglanti BLOK ise ise yarar - o display:block bootstrap'in
   .page-link'inden geliyor. Markup'ta .page-item/.page-link ZORUNLU. */
.mpt-blog-sayfa-durum {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line, #e6e8ee);
  text-align: center;
  font-size: var(--f6, 13px);
  line-height: 1.6;
  color: var(--muted, #5c6478);
}

.mpt-blog .pagination-sec {
  margin-top: 10px;
  text-align: center;
}

.mpt-blog .pagination-sec .pagination {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
}

/* Bootstrap ilk/son ogeye kendi kucuk yaricapini veriyor; olculdu: "Sonraki"
   dugmesi "50px 4px 4px 50px" seklinde yamuk cikiyordu. */
.mpt-blog .pagination-sec .pagination li a.page-link {
  border-radius: 50px;
}

.mpt-blog .pagination-sec .pagination li a.mpt-blog-sayfa-metin {
  width: auto;
  min-width: 44px;
  padding: 0 16px;
}

/* --------------------------------------------------------- bos durum */
.mpt-blog-bos {
  padding: 56px 20px 64px;
  text-align: center;
}

.mpt-blog-bos-ic {
  max-width: 560px;
  margin: 0 auto;
}

.mpt-blog-bos-baslik {
  margin: 0 0 10px;
  font-size: var(--f2, 26px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink, #17233a);
}

.mpt-blog-bos-aciklama {
  margin: 0 0 24px;
  font-size: var(--f5, 15px);
  line-height: 1.7;
  color: var(--muted, #5c6478);
}

.mpt-blog-bos-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 13px 30px;
  border: 1px solid var(--accent, #203f69);
  border-radius: 10px;
  color: var(--accent, #203f69);
  font-size: var(--f5, 15px);
  font-weight: 600;
  line-height: 22px;
  transition: background-color .2s ease, color .2s ease;
}

.mpt-blog-bos-btn:hover,
.mpt-blog-bos-btn:focus-visible {
  background: var(--accent, #203f69);
  color: #fff;
}

/* ============================================================== DETAY */
/* OKUMA KOLONU. Kolonun kendisi bootstrap'ten 930px gelir; govde o genislikte
   satir basina 95 KARAKTER yapiyordu (olculdu). Ev stili de olcuyu kisitliyor
   (kategori.css .mpt-seo{max-width:980px}), blog daha dar bir olcu ister:
   --olcu 552px -> 71 karakter. Kabuk 720px'de tutulur ki baslik/hero ile
   govde arasinda ucurum olmasin. */
.mpt-blog-okuma {
  /* max-width KALDIRILDI (kullanici karari). Kabuk 720px'de tutulurken kolon
     ~930px oldugu icin sagda 210px'lik bir bosluk kaliyor ve sayfa hizasiz
     goruniyordu. Artik kolonun tam genisligini kullanir. */
}

.mpt-blog-yazi-head {
  margin-bottom: 22px;
}

.mpt-blog-yazi-head h1 {
  margin: 0 0 14px;
  font-size: var(--f1, 34px);
  line-height: 1.22;
  font-weight: 700;
  color: var(--ink, #17233a);
}

.mpt-blog-yazi-head .mpt-blog-ustbilgi {
  margin-bottom: 14px;
}

/* Seo.KisaAciklama - yonetim tarafinin girdigi tek cumlelik ozet. */
.mpt-blog-standfirst {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--brand, #15406a);
  font-size: var(--f3, 20px);
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-2, #333a4d);
}

.mpt-blog-yazar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line, #e6e8ee);
}

.mpt-blog-yazar-harf {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint, #e9f2ff);
  color: var(--accent, #203f69);
  font-size: var(--f4, 17px);
  font-weight: 700;
  line-height: 44px;
  text-align: center;
}

.mpt-blog-yazar-ad {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  font-size: var(--f5, 15px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink, #17233a);
  transition: color .2s ease;
}

.mpt-blog-yazar-ad:hover {
  color: var(--accent, #203f69);
}

.mpt-blog-yazar-gorev {
  display: block;
  font-size: var(--f6, 13px);
  line-height: 1.5;
  color: var(--muted, #5c6478);
}

.mpt-blog-hero {
  margin: 0 0 26px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--soft, #f5f6fa);
  aspect-ratio: 16 / 9;
}

.mpt-blog-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------- yazi govdesi */
/* Global ".text,body,p{font-size:16px;line-height:28px}" kurali burayi
   eziyor; olculer p/li uzerinde de ACIKCA veriliyor. */
.mpt-blog-govde {
  font-size: var(--f4, 17px);
  line-height: 1.8;
  color: var(--ink-2, #333a4d);
}

.mpt-blog-govde > *:first-child {
  margin-top: 0;
}

.mpt-blog-govde p {
  margin: 0 0 18px;
  font-size: var(--f4, 17px);
  line-height: 1.8;
  color: var(--ink-2, #333a4d);
}

.mpt-blog-govde h2 {
  margin: 38px 0 14px;
  font-size: var(--f2, 26px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink, #17233a);
  scroll-margin-top: 90px;
}

.mpt-blog-govde h3 {
  margin: 30px 0 12px;
  font-size: var(--f3, 20px);
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink, #17233a);
  scroll-margin-top: 90px;
}

.mpt-blog-govde h4 {
  margin: 24px 0 10px;
  font-size: var(--f4, 17px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink, #17233a);
}

/* GLOBAL TUZAK: style.css "ul{list-style:none}" yaziyor; yonetim tarafinin
   girdigi madde isaretli listeler blogda ISARETSIZ cikiyordu. Geri veriliyor. */
.mpt-blog-govde ul,
.mpt-blog-govde ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.mpt-blog-govde ul {
  list-style: disc outside;
}

.mpt-blog-govde ol {
  list-style: decimal outside;
}

.mpt-blog-govde ul ul {
  list-style: circle outside;
  margin: 8px 0 0;
}

.mpt-blog-govde li::marker {
  color: var(--accent, #203f69);
}

.mpt-blog-govde li {
  margin-bottom: 8px;
  font-size: var(--f4, 17px);
  line-height: 1.8;
  color: var(--ink-2, #333a4d);
}

.mpt-blog-govde a {
  color: var(--accent, #203f69);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mpt-blog-govde a:hover {
  color: var(--brand, #15406a);
}

.mpt-blog-govde img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 14px 0;
}

.mpt-blog-govde blockquote {
  margin: 26px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent, #203f69);
  border-radius: 0 12px 12px 0;
  background: var(--soft-2, #f9fbfc);
  font-size: var(--f4, 17px);
  line-height: 1.75;
  color: var(--ink, #17233a);
}

.mpt-blog-govde blockquote p:last-child {
  margin-bottom: 0;
}

/* Yonetim tarafindan girilen genis tablolar mobilde SAYFAYI kaydirmasin:
   sarmalayici Detail.cshtml sonundaki betikle ekleniyor. Tablolar olcunun
   disina tasabilir - sayisal icerik dar kolonda okunmuyor. */
.mpt-blog-kaydir {
  overflow-x: auto;
  margin: 0 0 18px;
  -webkit-overflow-scrolling: touch;
}

.mpt-blog-govde table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: var(--f5, 15px);
  line-height: 1.6;
}

.mpt-blog-kaydir table {
  margin: 0;
}

.mpt-blog-govde table th,
.mpt-blog-govde table td {
  border: 1px solid var(--line, #e6e8ee);
  padding: 10px 12px;
  text-align: left;
}

.mpt-blog-govde table th {
  background: var(--soft-2, #f9fbfc);
  font-weight: 600;
  color: var(--ink, #17233a);
}

/* ---------------------------------------------------------------- SSS */
/* <details>/<summary>: acilir-kapanir davranis TARAYICIDAN gelir, JS yok,
   klavye erisimi kutudan dogru. .widget-accordion BILEREK kullanilmadi:
   cevabi kucuk harfe ceviriyor ve OEM kodlarini bozardi. */
.mpt-blog-sss {
  margin-top: 48px;
  padding-top: 34px;
  border-top: 1px solid var(--line, #e6e8ee);
}

.mpt-blog-sss h2 {
  margin: 0 0 18px;
  font-size: var(--f2, 26px);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink, #17233a);
}

.mpt-blog-sss-oge {
  border-radius: 16px;
  background: var(--soft-2, #f9fbfc);
  margin-bottom: 10px;
  overflow: hidden;
}

.mpt-blog-sss-oge > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding: 18px 52px 18px 22px;
  font-size: var(--f3, 20px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink, #17233a);
}

.mpt-blog-sss-oge > summary::-webkit-details-marker {
  display: none;
}

.mpt-blog-sss-oge > summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--f2, 26px);
  line-height: 1;
  font-weight: 400;
  color: var(--brand, #15406a);
}

.mpt-blog-sss-oge[open] > summary::after {
  content: "\2013";
}

.mpt-blog-sss-oge > summary:focus-visible {
  outline: 2px solid var(--brand, #15406a);
  outline-offset: -3px;
}

.mpt-blog-sss-cevap {
  padding: 0 40px 22px 22px;
  font-size: var(--f5, 15px);
  line-height: 1.75;
  color: var(--ink-2, #333a4d);
}

.mpt-blog-sss-cevap p {
  margin: 0 0 12px;
  font-size: var(--f5, 15px);
  line-height: 1.75;
  color: var(--ink-2, #333a4d);
}

.mpt-blog-sss-cevap p:last-child {
  margin-bottom: 0;
}

.mpt-blog-sss-cevap ul {
  list-style: disc outside;
  margin: 0 0 12px;
  padding-left: 20px;
}

/* ------------------------------------------------------ etiket seridi */
.mpt-blog-etiketler {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line, #e6e8ee);
}

.mpt-blog-etiketler h2 {
  margin: 0 0 12px;
  font-size: var(--f6, 13px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #5c6478);
}

/* -------------------------------------------------------- icindekiler */
.mpt-blog-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mpt-blog-toc li {
  border-bottom: 1px solid var(--line, #e6e8ee);
}

.mpt-blog-toc li:last-child {
  border-bottom: 0;
}

.mpt-blog-toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 4px;
  font-size: var(--f5, 15px);
  line-height: 1.5;
  color: var(--ink-2, #333a4d);
  transition: color .2s ease, padding-left .2s ease;
}

.mpt-blog-toc a:hover {
  color: var(--accent, #203f69);
  padding-left: 6px;
}

.mpt-blog-toc li.seviye-3 a {
  padding-left: 16px;
  color: var(--muted, #5c6478);
}

.mpt-blog-toc li.seviye-3 a:hover {
  padding-left: 22px;
}

.mpt-blog-toc a.aktif {
  color: var(--accent, #203f69);
  font-weight: 600;
}

/* ------------------------------------------------------ benzer yazilar */
.mpt-blog-benzer-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mpt-blog-benzer-liste li {
  border-bottom: 1px solid var(--line, #e6e8ee);
}

.mpt-blog-benzer-liste li:last-child {
  border-bottom: 0;
}

.mpt-blog-benzer-liste li a {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 12px 0;
}

.mpt-blog-benzer-gorsel {
  flex: 0 0 68px;
  width: 68px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft, #f5f6fa);
}

.mpt-blog-benzer-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mpt-blog-benzer-ad {
  min-width: 0;
  font-size: var(--f5, 15px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink, #17233a);
  transition: color .2s ease;
}

.mpt-blog-benzer-liste li a:hover .mpt-blog-benzer-ad {
  color: var(--accent, #203f69);
}

.mpt-blog-benzer-tarih {
  display: block;
  margin-top: 3px;
  font-size: var(--f6, 13px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--muted, #5c6478);
}

/* ======================================================= DUYARLILIK */
/* MPT'nin kirilma merdiveni: 1199 / 991 / 767 / 575 */
@media (max-width: 1199px) {
  /* Gorsel 270px; metin tabani 180px ama gercek metin 196px cikiyor ->
     olculen oran 1.374. BU BANDA OZEL kirpma veriliyor (Razor <picture>:
     1.40), atilan kesit %1.9. Tek bir 3:2 varyantiyla burada genisligin
     dortte biri atiliyordu - olculdu: %25.1. */
  .mpt-blog-one-gorsel {
    flex: 0 0 270px;
  }

  .mpt-blog-one-ic {
    min-height: 180px;
  }

  .mpt-blog-satir-gorsel {
    flex: 0 0 144px;
  }
}

@media (max-width: 991px) {
  .mpt-blog {
    padding: 44px 0 90px;
    --f1: 28px;
    --f2: 23px;
    --f3: 19px;
  }

  /* Konu gezinmesi mobilde ICERIGIN USTUNDE: ray acilir, yan sutundaki
     AYNI baglantilari tasiyan paneller kapanir (iki kez gorunmez).
     Yan sutunda yalniz katalog cagrisi kalir ve icerigin altina duser. */
  .mpt-blog-ray {
    display: block;
    margin: 0 0 18px;
  }

  .mpt-blog:not(.mpt-blog-detay) .mpt-blog-yan .mpt-blog-panel {
    display: none;
  }

  /* Detay sayfasinda "Benzer Yazilar" paneli mobilde KALIR (icerigin altinda
     anlamli bir devam yolu), ICINDEKILER paneli kalkar: yazinin ALTINDA duran
     bir icindekiler listesinin hicbir islevi yok. */
  .mpt-blog-detay .mpt-blog-toc {
    display: none;
  }

  .mpt-blog-yan-ic {
    position: static;
  }

  .mpt-blog-yan {
    margin-top: 34px;
  }

  .mpt-blog-okuma {
    max-width: none;
  }

  .mpt-blog-one-gorsel {
    flex: 0 0 300px;
  }

  .mpt-blog-one-ic {
    min-height: 190px;
  }

  .mpt-blog-satir-gorsel {
    flex: 0 0 168px;
  }
}

@media (max-width: 767px) {
  /* Vitrin tek kolona duser. Burada yukseklik dayatan taraf kalmadigi icin
     gorsele ACIKCA 3/2 verilir - istenen Cloudflare varyantiyla BIREBIR,
     yani mobilde kirpma sapmasi sifirdir. Metin tabani da kalkar. */
  .mpt-blog-one {
    flex-wrap: wrap;
    gap: 14px;
  }

  .mpt-blog-one-gorsel {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .mpt-blog-one-ic {
    min-height: 0;
  }

  /* SATIRLAR MOBILDE DE YATAY KALIR. Eskiden <=575px'te gorsel %100 genislik
     + 16/9 oluyordu; "yogun liste" tam da en cok yer sikintisi olan ekranda
     en seyrek forma donusuyordu (olculdu: 5 yazi = 4995px belge). Kucuk
     gorsel + metin duzeni korunur. */
  .mpt-blog-satir {
    gap: 14px;
  }

  .mpt-blog-satir-gorsel {
    flex: 0 0 132px;
  }

  .mpt-blog-hero {
    border-radius: 12px;
  }
}

@media (max-width: 575px) {
  .mpt-blog {
    padding: 34px 0 70px;
    --f1: 25px;
    --f2: 21px;
    --f3: 18px;
  }

  .mpt-blog-satir {
    gap: 12px;
    padding: 14px;
  }

  .mpt-blog-satir-gorsel {
    flex: 0 0 104px;
  }

  .mpt-blog-one {
    padding: 14px;
  }

  /* Dar ekranda uc satirlik ozet satiri fazla yer yiyor. */
  .mpt-blog-ozet {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mpt-blog-sss-oge > summary {
    padding: 16px 46px 16px 18px;
  }

  .mpt-blog-sss-cevap {
    padding: 0 18px 18px;
  }

  .mpt-blog-bos {
    padding: 36px 14px 44px;
  }
}

/* DOKUNMA HEDEFI. Kart icindeki kategori rozeti ve yazar baglantisi gorsel
   olarak kucuk kalmali (satir yogunlugu bunun icin var), ama parmakla
   basilabilir olmali: gorunmez bir ::after ile tiklama alani 44px'e
   genisletilir. Rozetin kendisi position:relative oldugu icin bu alan
   rozete aittir; stretched-link'in ustunde kalir (z-index:1). */
@media (hover: none) {
  .mpt-blog-kategori::after,
  .mpt-blog-altsatir a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -6px;
    right: -6px;
    height: 44px;
    transform: translateY(-50%);
  }

  .mpt-blog-altsatir a {
    display: inline-block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpt-blog *,
  .mpt-blog *::before,
  .mpt-blog *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  .mpt-blog-one:hover,
  .mpt-blog-one:focus-within,
  .mpt-blog-satir:hover,
  .mpt-blog-satir:focus-within {
    transform: none;
  }

  .mpt-blog-satir:hover .mpt-blog-satir-gorsel img,
  .mpt-blog-one:hover .mpt-blog-one-gorsel img {
    transform: none;
  }
}

/* ============================================================================
   ARAYUZ KILAVUZU DUZELTMELERI
   Hepsi .mpt-blog altinda kapsullu - anasayfa haber izgarasi etkilenmez.
   ========================================================================= */

/* DOKUNMA: ~300ms'lik cift-dokunus yakinlastirma gecikmesini kaldirir ve
   dokunma vurgusunu tarayici varsayilanindan (Android'de mavi kare) alip
   markanin kendi tonuna cevirir. */
.mpt-blog a,
.mpt-blog button,
.mpt-blog summary,
.mpt-blog [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(21, 64, 106, .12);
}

/* TIPOGRAFI: basliklarda dul satir (son satirda tek kelime) olusmasin.
   Uzun Turkce basliklarda ve dokuz dilde degisen metin uzunluklarinda
   satir dagilimi dengelenir. */
.mpt-blog h1,
.mpt-blog h2,
.mpt-blog h3,
.mpt-blog .mpt-blog-manset-baslik,
.mpt-blog .mpt-blog-satir-baslik {
  text-wrap: balance;
}

/* Ozet/aciklama metinlerinde yalniz son satir dengelenir - balance uzun
   metinde pahali ve gereksiz. */
.mpt-blog p,
.mpt-blog .mpt-blog-ozet,
.mpt-blog .mpt-blog-standfirst {
  text-wrap: pretty;
}

/* SAYILAR: yan sutundaki kategori sayaclari alt alta diziliyor; degisken
   genislikli rakamlar sutunu titretiyordu. */
.mpt-blog .mpt-blog-nav-sayac,
.mpt-blog .mpt-blog-sayac,
.mpt-blog .mpt-blog-sure,
.mpt-blog .pagination {
  font-variant-numeric: tabular-nums;
}

/* KIRINTILI YOL: uzun yazi basligi son kirintida tasiyordu. */
.mpt-blog .breadcrumb li:last-child span {
  display: inline-block;
  max-width: min(100%, 46ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* GUVENLI ALAN: centikli/yuvarlak kose ekranlarda yatay dolgu. .mpt-container
   kendi dolgusunu koruyor; buradaki yalniz cihaz centigi kadar EKLIYOR. */
@media (max-width: 991px) {
  .mpt-blog > .mpt-container {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}

/* YONETIMDEN GELEN GOVDE GORSELLERI: editor HTML'inde width/height yok.
   aspect-ratio ile yer ayrilir, gorsel yuklenince sayfa ZIPLAMAZ (CLS). */
.mpt-blog .mpt-blog-govde img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mpt-blog .mpt-blog-govde img[width][height] {
  aspect-ratio: auto;
  object-fit: initial;
}