@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════
   YDH — düzen düzeltmeleri                            ydh-duzen.css
   ------------------------------------------------------------------
   Tema sabit piksel genişliklerle kurulmuş. Hem dış kutu hem de
   .page/.footer her kırılma noktasında ayrı bir sabit değere
   geçtiği için ekranın kenarlarında ölü alan kalıyor.

   Ölçülen durum (değişiklikten önce):

     Ekran    kutu    .page    içerik / ekran
      1440    1150     1050    %73
      1024     850      750    %73
       600     562      462    %77
       430     400      300    %70   ← en kötüsü
       375     375      300    %80

   Izgara 1050 tabanlı sabit piksel: 1_3=330, 2_3=690, oluk 30.
   Burada aynı oranlar yüzdeyle yeniden yazıldı; böylece hem 1130'da
   hem de aradaki her genişlikte kendiliğinden doğru sonucu veriyor
   ve iç içe sütunlarda ayrı tanım gerekmiyor.

   Bu dosya en son yüklenir. Tema dosyalarının HİÇBİRİ değişmedi;
   geri almak için meta.php'deki tek satırı kaldırmak yeterli.
   Yedek: /root/ydh-yedek-20260814-1611
   ══════════════════════════════════════════════════════════════════ */


/* ══ 1. SAYFA VE FOOTER GENİŞLİĞİ — masaüstü ══
   Menü şeridi 1150, .page ve .footer 1050'ydi; aradaki 50'şer px
   ölü alandı. İkisi de 1130'a çekildi, menüyle fark 10 px kaldı.
   .footer ayrı bir kapsayıcının içinde ama aynı eksende ortalandığı
   için .page ile hizası tutuyor. */
@media screen and (min-width: 1070px) {

  .page,
  .footer {
    width: auto;
    max-width: 1130px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}


/* ══ 2. IZGARA — oransal ══
   Yalnız sütunların yan yana durduğu genişliklerde geçerli.
   767 px altında tema zaten hepsini %100 yapıp alt alta diziyor;
   oraya karışmıyoruz. */
@media screen and (min-width: 768px) {

  .column_1_3 { width: calc((100% - 60px) / 3); }
  .column_2_3 { width: calc((200% - 30px) / 3); }
  .column_1_2 { width: calc((100% - 30px) / 2); }
  .column_1_4 { width: calc((100% - 90px) / 4); }
  .column_3_4 { width: calc((300% - 30px) / 4); }

  /* Temanın iç içe sütunlar için yazdığı sabitler (150 / 210 / 330)
     yukarıdaki formüllerle aynı sonucu veriyor; burada yalnızca
     özgüllükleri eşitlenip yüzdeye çevriliyor. */
  .column_2_3 .column_1_2,
  .column_1_3 .column_1_2 { width: calc((100% - 30px) / 2); }
  .column_2_3 .column_1_3 { width: calc((100% - 60px) / 3); }
}


/* ══ 3. TABLET VE TELEFON — dış kutu serbest ══
   Tema .site_container.boxed'ı 850 / 562 / 400 px'e sabitliyor,
   .page ve .footer'ı da 750 / 462 / 300'e. İkisi üst üste binince
   430 px'lik bir telefonda içerik 300 px'e düşüyordu.
   Kapakları kaldırıp ince bir oluk bırakıyoruz. */
@media screen and (max-width: 1069px) {

  .site_container.boxed { max-width: none; }

  .header,
  .menu_container .sf-menu,
  .mobile-menu,
  .mobile-menu-divider,
  .page,
  .footer {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
}

/* ══ 3b. ÜST ŞERİTTEKİ KAYAN HABER BANDI ══
   responsive.css bandın sarmalayıcısına `width:228px !important` veriyor.
   Bu, kutunun 400 px'e sabitlendiği eski düzene göre seçilmiş bir sayı;
   sarmalayıcının kabı olan li.posts ise 208 px. Kutu serbest kalınca
   aradaki 20 px ekranın dışına taşıyor. Bandı kabına uyduruyoruz —
   karusel dikey kaydığı için genişliğin kesin piksel olması gerekmiyor. */
@media screen and (max-width: 1069px) {

  .header_top_bar .caroufredsel_wrapper_vertical_carousel {
    width: 100% !important;
    max-width: 100%;
  }
}

/* ══ 3c. AÇILIR MENÜLERİN TAŞMASI ══
   Tablet genişliğinde (768–1069) sağdaki başlıkların 198 px'lik açılır
   menüsü ekranın dışına çıkıp yatay kaydırma yaratıyor. Bu, düzen
   değişikliğinden önce de vardı (ölçüldü: 770 px / 768 px ekran);
   menü tam genişliğe çıkınca payı biraz büyüdüğü için burada
   tamamen kapatıyoruz.

   Menüler `top:-11988px` ile gizleniyor, `left` ile değil — bu yüzden
   yatay konumu değiştirmek gizli menüleri açığa çıkarmaz. */
@media screen and (max-width: 1069px) {

  .sf-menu > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }
  .sf-menu > li:nth-last-child(-n+2) > ul ul { left: auto; right: 100%; }
}

@media screen and (max-width: 767px) {

  .header,
  .menu_container .sf-menu,
  .mobile-menu,
  .mobile-menu-divider,
  .page,
  .footer {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Footer sütunları alt alta gelirken aralarında nefes kalsın */
  .footer .column_1_3 + .column_1_3 { margin-top: 22px; }
}


/* ══ 4. MOBİL MENÜ ══
   İki ayrı sorun vardı:

   a) Düğme ortada duruyordu. Sebebi style.css:858 — üç öğeye birden
      `margin-left:auto; margin-right:auto` veriyor. Açılır listenin
      ortalanması doğru ama aynı kural düğmeyi de ortalıyor.

   b) Düğme logonun bir alt satırındaydı ve menü açılınca sayfayı
      aşağı itiyordu.

   ydh-duzen.js `.mobile_menu_container`ı `.header`ın içine taşıyor
   (şablonda kardeş oldukları ve mobilde header yüksekliği logoya göre
   değiştiği için CSS tek başına yetmiyor). Konumlandırma burada.

   Kapsam 767 px ve altı: hamburger yalnız orada görünüyor, 768–1069
   arasında masaüstü menüsü ve .placeholder duruyor — oraya
   karışılmıyor. */
@media screen and (max-width: 767px) {

  /* Logo ile düğmeyi aynı satırda ve dikeyde ortalı tutmak için
     flex. Logo resminin margin-top:30px'i header'ın ortasını
     logonun ortasından 25 px kaydırıyordu; flex bunu çözüyor. */
  .header {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    padding: 14px 8px !important;
  }

  .header .logo { float: none; margin: 0; }

  /* Logo resmine margin-top:30px SATIR İÇİ yazılmış (header.php),
     bu yüzden !important şart. Flex kutuyu ortalıyor ama resim
     kutunun dibinde durduğu için düğmeyle arada 15 px kalıyordu. */
  .header .logo img {
    margin-top: 0 !important;
    display: block;
  }

  .header .mobile_menu_container {
    display: block;
    position: static;
    padding: 0;
    margin: 0 0 0 auto;   /* düğmeyi sağa iter */
    flex: 0 0 auto;
  }

  .header .mobile-menu-switch {
    position: static;
    margin: 0;
  }

  /* Açılır liste: sayfayı itmek yerine üzerine biniyor.
     main.js slideToggle ile yüksekliği canlandırıyor, mutlak
     konumlandırma bunu bozmuyor. */
  .header .mobile-menu {
    position: absolute;
    top: 100%;
    left: 8px;
    right: 8px;
    margin: 0;
    z-index: 9999;
    background: #f0f0f0;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .26);
    border-radius: 0 0 10px 10px;
    /* Menüde 34 madde ve 25 açık alt menü var, doğal yüksekliği
       ~1330 px. Yükseklik sınırı koyup iç kaydırma açmak, sayfa
       kaydırmasıyla iç içe geçtiği için kullanışsız oluyordu;
       konum `absolute` olduğundan menü sayfayla birlikte kayıyor
       ve kullanıcı normal şekilde aşağı inebiliyor. */
    max-height: none;
  }

  /* Ayraç, liste artık ayrı bir katman olduğu için gereksiz.
     main.js display'i satır içi yazdığından !important şart. */
  .header .mobile-menu-divider {
    display: none !important;
  }
}


/* ══ 5. KART BAŞLIKLARI ══
   Küçük haber kartlarında resim `float:left` (100 px), yazı alanı ise
   `float:left` + SABİT genişlik: .column_1_3 .blog.small .post_content
   210 px, kartın kendisi de 330 px. Bunlar 1050'lik eski ızgaraya göre
   seçilmiş sayılar; sütun büyüyünce yazı alanı olduğu yerde kalıp
   başlıklar erkenden alt satıra kırılıyordu (54 başlık ölçüldü:
   357 px'lik sütunda yalnız 263 px kullanıyorlardı).

   Yazı alanını float'tan çıkarıp kendi blok bağlamına alıyoruz;
   böylece resmin yanındaki bütün boşluğu kaplıyor.
   Kapsam .page ve .footer ile sınırlı — mega menüdeki sabit
   genişlikli kartlara dokunulmuyor. */
/* DİKKAT: .post bir float. Float'ta `width:auto` "içeriği kadar"
   demektir — ilk denemede kart 330'dan 282'ye DÜŞTÜ. %100 yazılmalı. */
.page .blog.small .post,
.page .blog.rating .post,
.footer .blog.small .post {
  width: 100% !important;
}

.page .blog.small .post_content,
.page .blog.rating .post_content,
.footer .blog.small .post_content {
  float: none !important;
  width: auto !important;
  overflow: hidden;
  /* DİKKAT: kendi blok bağlamına alınan bir kutuda `margin-left`
     resmin yanına kaçmak için harcanır, görünür boşluk bırakmaz —
     temanın margin-left:20px'i bu yüzden 0 px'e düşmüştü.
     Aradaki nefes payı `padding` ile veriliyor. */
  padding-left: 18px;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .page .blog.small .post_content,
  .page .blog.rating .post_content,
  .footer .blog.small .post_content { padding-left: 12px; }
}

/* Büyük kart başlıkları — tema 27 px veriyor (değişiklikten önce de
   öyleydi, ölçüldü). 357 px'lik kartta dört satıra kırılıyordu. */
h2.with_number {
  font-size: 21px;
  line-height: 1.28;
}

/* Başlığın içindeki bağlantı `float:left` ve SABİT 280 px genişlikte.
   Başlık kutusu 357 px olduğu hâlde metin 280 px'e sıkıştığı için
   "…tırmanacak mı?" gibi cümlelerde son kelime tek başına alt satıra
   düşüyordu (metin tek satırda 296 px yer kaplıyor, kutuya rahat
   sığıyor). Float ayrıca h2'nin yüksekliğini 0 bırakıyordu. */
.page h2.with_number a {
  float: none;
  width: auto;
  display: block;
}

@media screen and (max-width: 767px) {
  h2.with_number { font-size: 19px; }
}


/* ══ 6. LİSTELERDEKİ YAZAR / TARİH KÜNYESİ ══
   Tema yazar adını turuncu bir DÜĞME, tarihi de çerçeveli bir kutu
   olarak basıyor (style.css:1509 ve 1519). Bunlar haberi yapan
   editörün adı; düğme kadar baskın olmaları gerekmiyor.
   Tek satır ince künye yazısına çevriliyor: yazar solda ve bir tık
   koyu, tarih sağda soluk.

   `.simple` çeşidi zaten düz yazı — ona dokunulmuyor. */
.page ul.post_details:not(.simple) li.category,
.page ul.post_details:not(.simple) li.date {
  background: none;
  border: 0;
  padding: 0;
  font-family: Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.page ul.post_details:not(.simple) li.category { font-weight: 600; }

.page ul.post_details:not(.simple) li.category a { color: #3f4448; }

.page ul.post_details:not(.simple) li.category a:hover { color: #e57700; }

.page ul.post_details:not(.simple) li.date { color: #8a8f94; }

/* Yazar ile tarih arasına ince ayraç */
.page ul.post_details:not(.simple) li.category + li.date::before {
  content: "·";
  margin: 0 8px;
  color: #c9ccd0;
}


/* ══ 6b. BÖLÜM BAŞLIĞINDAKİ "TÜMÜ" BAĞLANTISI ══
   "Tüm Kategoriyi gör" listenin altında çerçeveli bir düğmeydi;
   ydh-duzen.js onu turuncu bölüm şeridinin sağına taşıyor. */
.page h4.box_header .yd-tumu {
  float: right;
  margin-left: 14px;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  opacity: .9;
  text-decoration: none;
  letter-spacing: .2px;
}

.page h4.box_header .yd-tumu::after {
  content: " ›";
  font-weight: 700;
}

.page h4.box_header .yd-tumu:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Kartın altındaki "Tümünü Oku" düğmesi — başlığın kendisi zaten
   bağlantı, ayrıca düğme gerekmiyor. */
.page a.read_more { display: none; }


/* ══ 6c. BÖLÜMLER ARASI BOŞLUK ══
   Tema 50 px bırakıyor; bloklar birbirinden kopuk duruyordu.
   Değer hem style.css:944'te hem de şablonda SATIR İÇİ
   (style="margin-top:50px") yazılı — bu yüzden !important şart. */
.page .page_margin_top_section { margin-top: 32px !important; }


/* ══ 6d. KARUSEL OKLARI ══
   Yatay haber karuselinin ok düğmeleri kabın DIŞINA taşacak şekilde
   konumlanmış (left:-35px). Kutu 300 px'e sıkışıkken bu boşluk vardı;
   kutu ekranı doldurunca sağdaki ok 22 px dışarı çıkıp yatay kaydırma
   yaratıyor. Telefonda okları kabın kenarlarına çekiyoruz. */
@media screen and (max-width: 767px) {

  .page .slider_posts_list_container a.slider_control.left {
    left: 0 !important;
    right: auto !important;
  }

  .page .slider_posts_list_container a.slider_control.right {
    left: auto !important;
    right: 0 !important;
  }
}


/* ══ 7. YUKARI ÇIK OKU ══
   ydh-duzen.js her sayfaya ekliyor. Bir ekran boyu inilince belirir. */
.yd-yukari {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9998;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ff8602;
  color: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(120, 70, 10, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

.yd-yukari.gorunur {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.yd-yukari:hover { background: #e57700; }

.yd-yukari:focus-visible {
  outline: 3px solid rgba(255, 134, 2, .4);
  outline-offset: 2px;
}

@media screen and (max-width: 560px) {
  .yd-yukari {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
}


/* ══════════════════════════════════════════════════════════════════
   8. HABER DETAY SAYFASI
   ------------------------------------------------------------------
   Buradaki her kural `.post.single` ile sınırlı; yalnız haber detay
   sayfasını etkiler. Deneme sayfası haber-tasarim.html'de ölçülüp
   onaylanan düzenin site içine taşınmış hâli.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --yd-turuncu:   #ff8602;
  --yd-turuncu-k: #e57700;
  --yd-metin:     #141210;
  --yd-soluk:     #78736a;
  --yd-cizgi:     #dcd4c3;
  /* Gazete kâğıdı tonu. Sayfa zemini #fff1e5 (şeftali kremi); beyaz kart
     zeminden 1,107 oranında ayrışıyordu, #ece8dd aynı ayrışmayı ters
     yönde (koyulaşarak) veriyor. R−B farkı 15 → manila sarısı değil,
     nötr gazete tonu. Daha açık denemeler (#f7f3e8) zeminden yalnız
     %0,1 ayrıldığı için blok görsel olarak kayboluyordu. */
  --yd-kagit:     #ece8dd;
  --yd-ic:        #e2dccb;
}

/* ── 8a. TAŞMA DÜZELTMESİ ──
   Temada `.post.single .content_box{width:560px; margin-left:30px}`
   duruyor, üstüne satır içi `width:100%!important` eklenmiş.
   box-sizing content-box olduğu için 690+30=720 px oluyor ve gövde
   sütununu tam 30 px aşıyordu — sağ sütunla arada hiç boşluk kalmıyordu. */
.post.single .content_box { margin-left: 0 !important; }

.post.single,
.post.single .content_box,
.post.single .content_box .text,
.post.single .editor-render {
  box-sizing: border-box;
  max-width: 100%;
}

/* Blok içindeki sabit 690 px'lik sütunlar kartın dolgusuna sığmıyordu */
.post.single .row,
.post.single .column_2_3,
.post.single .column_1_3,
.post.single .column_1_2 {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ── 8b. HABER BLOĞU ── */
.post.single {
  background: var(--yd-kagit);
  border: 1px solid var(--yd-cizgi);
  border-radius: 14px;
  padding: 26px 28px 30px;
  box-shadow: 0 1px 2px rgba(90, 65, 40, .05), 0 8px 26px rgba(90, 65, 40, .07);
}

/* ── 8c. BAŞLIK ──
   Tema 55 px kullanıyor; gövdenin 3,4 katı olduğu için üç satıra
   taşıyordu. 2,4 kata indirildi. */
.post.single .post_title {
  font-size: clamp(24px, 2.7vw, 38px) !important;
  line-height: 1.22 !important;
  letter-spacing: -.4px;
  margin-bottom: 10px !important;
}

.post.single .excerpt {
  font-size: 17.5px !important;
  line-height: 1.6 !important;
  color: #3a3a3a;
}

.post.single .post_details {
  border-bottom: 1px solid var(--yd-cizgi);
  padding-bottom: 10px;
  margin-bottom: 4px;
}

/* ── 8d. KAPAK ── */
.post.single .post_image {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(80, 55, 30, .14);
}

.post.single .post_image img { width: 100%; height: auto; display: block; }

.post.single .sentence {
  background: var(--yd-ic);
  border-left: 3px solid var(--yd-turuncu);
  padding: 8px 12px;
  margin-top: 10px;
}

/* Yazdırma için konmuş site logosu ekranda da görünüyor ve
   margin-left:-20px ile bloğun dışına taşıyordu. */
.post.single img.print { display: none; }

/* ── 8e. GÖVDE TİPOGRAFİSİ ── */
.post.single .editor-render {
  font-size: var(--yd-yazi, 17.5px) !important;
  line-height: 1.72 !important;
  color: var(--yd-metin);
}

.post.single .editor-render p { margin: 0 0 1.05em !important; }
.post.single .editor-render a { color: var(--yd-turuncu-k); text-decoration: underline; }
.post.single .editor-render img { border-radius: 10px; }
.post.single .editor-render figure img { width: 100%; }

.post.single .editor-render figcaption {
  font: 12px/1.5 Roboto, sans-serif;
  color: var(--yd-soluk);
  border-left: 3px solid var(--yd-turuncu);
  padding: 5px 11px;
  margin-top: 7px;
  background: var(--yd-ic);
}

.post.single .editor-render blockquote {
  margin: 18px 0;
  padding: 12px 18px;
  background: var(--yd-ic);
  border-left: 4px solid var(--yd-turuncu);
  font-style: italic;
}

.post.single .editor-render::after { content: ""; display: table; clear: both; }

/* ── 8f. LİSTELER ──
   Sitede menü için yazılmış genel `ul{float:left; height:35px;
   white-space:nowrap}` kuralı haber gövdesindeki maddeli listeleri
   de eziyordu. */
.post.single .editor-render ul,
.post.single .editor-render ol {
  float: none !important;
  height: auto !important;
  white-space: normal !important;
  position: static !important;
  margin: 1em 0 1em 2px !important;
  padding-left: 26px !important;
  width: auto !important;
}

.post.single .editor-render ul { list-style: disc outside !important; }
.post.single .editor-render ol { list-style: decimal outside !important; }
.post.single .editor-render li { display: list-item !important; float: none !important; margin: .3em 0; }

/* Sesli dinlemede okunan cümle */
.post.single .editor-render .yd-okunan {
  background: #ffe9c2;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #ffe9c2;
}

/* ── 8g. OKUMA ARAÇLARI ── */
.yd-araclar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--yd-cizgi);
  border-radius: 10px;
  padding: 9px 11px;
  margin: 16px 0 6px;
  font-family: Roboto, "Segoe UI", sans-serif;
}

.yd-et { font-size: 12px; color: var(--yd-soluk); margin-right: 2px; }

.yd-dg {
  background: #fff9f3;
  border: 1px solid var(--yd-cizgi);
  border-radius: 7px;
  padding: 7px 12px;
  font: 600 13px Roboto, "Segoe UI", sans-serif;
  color: #25282a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.yd-dg:hover { border-color: var(--yd-turuncu); color: var(--yd-turuncu-k); }
.yd-dg.etkin,
.yd-dg.birincil { background: var(--yd-turuncu); border-color: var(--yd-turuncu); color: #fff; }
.yd-dg.birincil:hover { background: var(--yd-turuncu-k); color: #fff; }
.yd-dg:disabled { opacity: .4; cursor: not-allowed; }

.yd-ayrac { width: 1px; align-self: stretch; background: var(--yd-cizgi); margin: 0 3px; }

.yd-hiz {
  border: 1px solid var(--yd-cizgi);
  border-radius: 7px;
  padding: 6px 7px;
  font: 13px Roboto, sans-serif;
  background: #fff;
  color: #25282a;
}

.yd-durum { font-size: 12px; color: var(--yd-soluk); }

/* ── 8h. OKUMA İLERLEMESİ ── */
.yd-ilerleme {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--yd-turuncu);
  z-index: 9999;
  transition: width .1s linear;
}

/* ── 8i. TELEFON ── */
@media screen and (max-width: 767px) {
  .post.single {
    padding: 16px 12px 20px;
    border-radius: 10px;
  }
  .post.single .post_title { letter-spacing: -.2px; }
  .yd-durum { flex: 1 1 100%; }
}

/* ── 8j. YAZDIRMA ── */
@media print {
  .post.single img.print { display: block; margin-left: 0; }
  .post.single { border: 0; box-shadow: none; background: #fff; padding: 0; }
  .yd-araclar, .yd-yukari, .yd-ilerleme { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   9. GRİ AYRAÇ ÇUBUĞU
   ------------------------------------------------------------------
   `hr.divider` 1130×10 px'lik düz #f0f0f0 bir şerit. İçerik ayıracı
   değil, salt dekoratif; sayfanın üstünde gereksiz bir kesik
   yaratıyordu. Haber gövdesi içindeki gerçek `<hr>`lere dokunulmuyor
   — yalnız `.divider` sınıflı olan gizleniyor.
   ══════════════════════════════════════════════════════════════════ */
hr.divider { display: none; }


/* ══════════════════════════════════════════════════════════════════
   10. MAKALE SAYFASI — YAZAR KÜNYESİ
   ------------------------------------------------------------------
   Şablon şunu üretiyor:

     li.author
       div.avatar_block  (float:left, 150 px yuvarlak fotoğraf)
         div.details     ← 150×30, TAMAMEN BOŞ (kullanılmayan puan çubuğu)
       div.content       (float:left, satır içi margin-top:50px)
         ul.social_icons
         h6  "Yazar"
         h2  Yazar adı
         h6  tarih
         a   "Bu sayfayı yazdır"  ← biçimsiz, tarayıcı varsayılanı mavi

   Künye fotoğrafla dikey ortalanıyor, etiket küçültülüp harflendiriliyor,
   yazdır bağlantısı ince bir düğmeye çevriliyor.

   DİKKAT: li.author `.post.single`ın İÇİNDE değil, KARDEŞİ —
   ikisi de .column_2_3'ün altında ayrı bloklar. Seçiciyi
   `.post.single li.author` yazmak hiçbir şeyi eşleştirmez.
   ══════════════════════════════════════════════════════════════════ */

/* Fotoğrafın altındaki boş kutu */
.page li.author .avatar_block .details { display: none; }

.page li.author {
  position: relative;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--yd-cizgi);
  margin-bottom: 4px;
}

.page li.author .avatar_block {
  margin: 0 26px 0 0;
}

.page li.author .avatar_block img {
  box-shadow: 0 2px 12px rgba(80, 55, 30, .18);
}

/* Künye sütunu: float yerine kendi blok bağlamı — fotoğrafın yanındaki
   bütün genişliği alır ve dikeyde fotoğrafla ortalanır.
   Şablonda `style="margin-top:50px"` satır içi yazılı, !important şart. */
.page li.author .content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 150px;
  overflow: hidden;
}

/* "Yazar" etiketi */
.page li.author .content h6:first-of-type {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--yd-soluk);
  margin: 0 0 3px !important;
}

/* Yazar adı */
.page li.author .content h2 {
  font-size: 26px !important;
  line-height: 1.18 !important;
  letter-spacing: -.3px;
  margin: 0 0 7px !important;
  color: #25282a;
}

/* Tarih */
.page li.author .content h6:last-of-type {
  font-size: 12.5px !important;
  font-weight: 400;
  color: var(--yd-soluk);
  margin: 0 0 12px !important;
}

/* "Bu sayfayı yazdır" — tarayıcı varsayılanı mavi bağlantıydı.
   `>` seçicisi sosyal ikonların içindeki <a>'ları dışarıda bırakır. */
.page li.author .content > a {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12.5px Roboto, "Segoe UI", sans-serif;
  color: #55504a;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--yd-cizgi);
  border-radius: 999px;
  padding: 7px 15px;
  transition: border-color .15s ease, color .15s ease;
}

.page li.author .content > a::before {
  content: "\2399";          /* yazıcı simgesi */
  font-size: 14px;
  line-height: 1;
}

.page li.author .content > a:hover {
  border-color: var(--yd-turuncu);
  color: var(--yd-turuncu-k);
}

/* Sosyal ikonlar sağ üste */
.page li.author .content .social_icons {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

@media screen and (max-width: 620px) {
  /* Telefonda fotoğraf üstte, künye altında */
  .page li.author .avatar_block {
    float: none;
    margin: 0 0 14px;
  }
  .page li.author .content {
    min-height: 0;
    display: block;
  }
  .page li.author .content .social_icons {
    position: static;
    margin-bottom: 10px;
  }
  .page li.author .content h2 { font-size: 22px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   11. MAKALE GÖVDESİ
   ------------------------------------------------------------------
   Haber detayda gövde `.editor-render`, makalede ise `.content_box
   .text`. Kâğıt bloğu her ikisine de uygulanıyordu ama tipografi
   yalnız habere yazılmıştı: makale 16 px ve satır yüksekliği de
   16 px'ti — 685 px'lik sütunda 86 karakterlik, satır aralığı sıfır
   olan bir metin. Aynı ölçülere getiriliyor.
   ══════════════════════════════════════════════════════════════════ */
.post.single .content_box .text {
  font-size: var(--yd-yazi, 17.5px);
  line-height: 1.72;
  color: var(--yd-metin);
}

.post.single .content_box .text > p { margin: 0 0 1.05em; }
.post.single .content_box .text a { color: var(--yd-turuncu-k); }
.post.single .content_box .text img { max-width: 100%; height: auto; border-radius: 10px; }

/* Gövdedeki gerçek <hr>'ler ince ve kâğıda uygun olsun */
.post.single .content_box .text hr {
  border: 0;
  border-top: 1px solid var(--yd-cizgi);
  margin: 20px 0;
}

/* Listeler — sitenin menü için yazdığı genel
   `ul{float:left; height:35px; white-space:nowrap}` kuralı makale
   gövdesindeki listeleri de eziyor. */
.post.single .content_box .text ul,
.post.single .content_box .text ol {
  float: none !important;
  height: auto !important;
  white-space: normal !important;
  position: static !important;
  margin: 1em 0 1em 2px !important;
  padding-left: 26px !important;
  width: auto !important;
}

.post.single .content_box .text ul { list-style: disc outside !important; }
.post.single .content_box .text ol { list-style: decimal outside !important; }
.post.single .content_box .text li { display: list-item !important; float: none !important; margin: .3em 0; }