@charset "utf-8";
/* ==========================================================================
   HABER PAKETLERİ — İÇ SAYFA KATMANI
   Yalnızca ALT SAYFALAR yükler. Ana sayfa (index.php) bu dosyayı YÜKLEMEZ.
   modern.css dondurulmuştur; iç sayfalara özel her kural buraya yazılır,
   böylece ana sayfa hiçbir koşulda etkilenmez.
   Yükleme sırası: tema.css.php -> diger.css -> modern.css -> modern-ic.css
   ========================================================================== */

/* iç sayfalarda ana kap ve içerik ızgarası ana sayfayla aynı davransın */
.haber-detay,
div.haber-detay{
  width:auto !important;
  float:none !important;
  min-width:0;
}
#icerik-orta,
div#icerik-orta{
  width:auto !important;
  float:none !important;
  min-width:0;
}

/* ---------- 1. İSKELET ---------- */
#icerik{ grid-template-rows:auto !important; }
.haber-detay{ grid-column:1 !important; grid-row:1 !important; }
.sag-blok{ grid-column:2 !important; grid-row:1 !important; }
.haber-detays{ float:none !important; width:auto !important; }

/* bölüm başlıkları: eski width:656px + height:30px + overflow:hidden kırpıyordu */
.ic-sayfalar-baslik{
  width:auto !important; height:auto !important;
  overflow:visible !important;
  border:0 !important;
}
.ic-sayfalar-baslik h1{
  height:auto !important; overflow:visible !important;
  padding:0 !important; margin:0 !important;
  text-shadow:none !important;
}

/* ---------- 2. KIRINTI YOLU (buradasınız) ---------- */
.buradasiniz{
  float:none !important; position:static !important;
  display:flex; flex-wrap:wrap; align-items:center; gap:0 6px;
  margin:0 0 16px !important; padding:0 !important;
  list-style:none;
}
.buradasiniz li{
  float:none !important; position:static !important;
  margin:0 !important; display:flex; align-items:center; gap:6px;
}
.buradasiniz,.buradasiniz a,.buradasiniz li{
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  color:var(--muted) !important;
  text-decoration:none !important;
}
.buradasiniz a:hover{ color:var(--brand) !important; }

/* ---------- 3. HABER DETAY ---------- */
.haber-baslik{
  font-family:var(--font-baslik) !important;
  font-size:clamp(24px,2.4vw,34px) !important;
  font-weight:800 !important;
  line-height:1.18 !important;
  letter-spacing:-.02em;
  color:var(--ink) !important;
  text-shadow:none !important;
  border-bottom:0 !important;
  padding:0 !important;
  margin:0 0 14px !important;
  width:auto !important;
}
.haber-tarih,.haber-font{
  float:none !important;
  display:inline-block;
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  color:var(--muted) !important;
  padding:0 !important; margin:0 14px 0 0 !important;
}
/* haber gövdesi — okunabilirlik önce gelir */
.haber-metin,#haber-metin{
  font-family:var(--font-govde) !important;
  font-size:17.5px !important;
  line-height:1.78 !important;
  color:var(--body) !important;
  padding:0 !important; margin:18px 0 0 !important;
}
.haber-metin p,#haber-metin p{
  font-family:var(--font-govde) !important;
  font-size:inherit;          /* A+/A- calissin: JS satir ici stil yaziyor */
  line-height:inherit;
  margin:0 0 1.15em !important;
  padding:0 !important;
}
.haber-metin img{
  max-width:100% !important; height:auto !important;
  border-radius:var(--yuvarlak); margin:8px 0;
  box-shadow:0 2px 5px rgba(13,36,64,.10), 0 10px 22px -12px rgba(13,36,64,.35);
}
.haber-metin a{ color:var(--brand) !important; text-decoration:underline; text-underline-offset:2px; }
.haber-metin h2,.haber-metin h3{
  font-family:var(--font-baslik) !important;
  font-weight:700 !important; color:var(--ink) !important;
  line-height:1.3 !important; margin:1.4em 0 .5em !important;
}
.haber-metin h2{ font-size:22px !important; }
.haber-metin h3{ font-size:19px !important; }
.haber-metin blockquote{
  border-left:3px solid var(--brand); background:var(--wash);
  margin:1.3em 0 !important; padding:14px 18px !important;
  border-radius:0 var(--yuvarlak) var(--yuvarlak) 0;
  font-style:normal; color:var(--ink) !important;
}
.haber-metin ul,.haber-metin ol{ margin:0 0 1.15em 1.4em !important; padding:0 !important; }
.haber-metin li{ margin:0 0 .45em !important; }

/* etiketler */
.haber-etiketler{
  background:var(--wash) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  height:auto !important;
  margin:26px 0 0 !important;
  padding:12px 15px !important;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-family:var(--font-govde) !important; font-size:13.5px !important;
}
.haber-etiketler a,.haber-etiketler-span a{
  color:var(--navy) !important;
  background:var(--bg); border:1px solid var(--line);
  border-radius:100px; padding:4px 12px !important;
  font-size:12.5px !important; text-decoration:none !important;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.haber-etiketler a:hover{ background:var(--brand) !important; color:#fff !important; border-color:var(--brand); }
.dhb,.dhb a,.dhb a:hover{
  float:none !important;
  color:var(--muted) !important;
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  padding:0 !important; margin:0 !important;
}

/* yorumlar */
.haber-yorumlar-baslik{
  font-family:var(--font-baslik) !important;
  font-size:15px !important; font-weight:800 !important;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink) !important;
  border-bottom:0 !important;
  border-left:4px solid var(--brand);
  padding:2px 0 2px 12px !important;
  margin:34px 0 14px !important;
}
.haber-yorumlari{
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:var(--yuvarlak);
  margin:0 0 12px !important;
  padding:14px 16px !important;
}

/* yazar kartları */
.yazar-haber{
  width:auto !important; height:auto !important;
  margin:0 !important; padding:12px 0 !important;
  background:transparent !important;
  border-bottom:1px solid var(--line-soft) !important;
  display:grid; grid-template-columns:62px minmax(0,1fr); gap:13px; align-items:start;
  font-size:inherit !important;
}
.yazar-haber img,.yazar-haber img:hover{
  float:none !important;
  width:62px !important; height:62px !important;
  border-radius:50% !important; object-fit:cover;
  border:0 !important; margin:0 !important; padding:0 !important;
  background:var(--wash);
}
.yazar-haber .yazi a,.yazi a,.haber a{
  font-family:var(--font-govde) !important;
  font-size:14.5px !important;
  color:var(--body) !important;
  padding:0 !important;
  text-decoration:none !important;
  line-height:1.45 !important;
}
.yazar-haber .yazi a:hover,.yazi a:hover,.haber a:hover{
  color:var(--brand) !important; text-decoration:none !important;
}

/* galeri kartları */
.galeri-kt-kutular{
  float:none !important; width:auto !important;
  margin:0 !important; background:transparent !important;
  display:flex; flex-direction:column; gap:9px;
}
.galeri-kt-kutular img,.galeri-kt-kutular img:hover{
  float:none !important;
  width:100% !important; height:auto !important;
  aspect-ratio:16/10; object-fit:cover;
  border:0 !important; margin:0 !important; padding:0 !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:0 2px 5px rgba(13,36,64,.10), 0 10px 22px -12px rgba(13,36,64,.35);
  transition:transform .25s ease;
}
.galeri-kt-kutular:hover img{ transform:translateY(-3px); }
.galeri-kt-kutular .baslik{ font-size:14.5px !important; padding:0 !important; }

/* ---------- 5. GÖRSEL ÜSTÜ ETİKETLER ---------- */
.galkat,.yazkat{
  background:none !important; background-image:none !important;
  width:auto !important; height:auto !important;
  margin:0 !important; float:none !important;
  position:absolute !important; top:9px; left:9px; right:auto;
  overflow:visible !important; z-index:3;
}
.galkat li,.yazkat li,
.galkat li.active,.yazkat li.active{
  background:rgba(8,14,20,.82) !important;
  background-image:none !important;
  border-radius:3px; border:0 !important;
  width:auto !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  float:none !important; display:block !important;
  text-align:left !important;
}
.galkat li a,.yazkat li a{
  display:block !important;
  font-family:var(--font-baslik) !important;
  font-size:10.5px !important; font-weight:700 !important;
  letter-spacing:.075em; text-transform:uppercase;
  color:#fff !important;
  padding:4px 8px !important;
  text-decoration:none !important;
}
.galkat li:hover,.yazkat li:hover{ background:var(--brand) !important; }
/* video oynat rozeti */
.video-icon{
  margin:0 !important;
  position:absolute !important;
  left:50% !important; top:38%; transform:translate(-50%,-50%);
  width:44px; height:44px;
  background:rgba(8,14,20,.72) !important;
  background-image:none !important;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0 !important; z-index:3;
  pointer-events:none;
}

@media (max-width:620px){
  .haber-metin,.haber-metin p{ font-size:inherit; line-height:inherit; }
}
.buradasiniz li{ display:inline-flex !important; }
/* kırıntı yolunda son öğe = bulunulan kategori, vurgulanır */
.buradasiniz li:last-child a{ color:var(--ink) !important; font-weight:600 !important; }

/* DÜZELTME 2 — .haber-metin{ manşet görseli ve
   sosyal paylaşım çubuğu da o kabın içinde olduğu için onlar da 70ch'e
   sıkışıyordu. Ölçüyü kaptan alıp aşağıda yalnızca metne (#iceriks) veriyoruz. */
.haber-detay > .haber-metin{ max-width:none !important; }

/* DÜZELTME 3 — .haber-metin p{font-size:17.5px !important}:
   #iceriks, .haber-metin'in İÇİNDE. Bu !important yüzünden A+/A- düğmeleri
   (js: ts('iceriks',±1) -> #iceriks'e inline font-size yazar) hiçbir işe
   yaramıyordu, çünkü inline bildirim !important'a yenilir. Gövde
   paragraflarını kaba bağlayarak yazı boyutu düğmelerini geri kazanıyoruz. */
#iceriks p,#iceriks div,#iceriks span,#iceriks li,#iceriks td{
  font-size:inherit !important;
  line-height:inherit !important;
  font-family:var(--font-govde) !important;
}


/* --------------------------------------------------------------------------
   1. ÜST BİLGİ SATIRI (tarih / güncelleme)
      HTML: <div class="" style="float:right;margin-top: -14px;">
              <span class="haber-tarih"><b>Güncelleme:</b> ...</span>
              <span class="haber-tarih"><b>Tarih:</b> ...</span>
            </div>
      Sınıfı boş olduğu için inline style'ı üzerinden hedefliyoruz.
   -------------------------------------------------------------------------- */
.haber-detay > div[style*="margin-top: -14px"]{
  float:none !important;
  margin:0 0 16px !important;      /* negatif marj sıfırlandı */
  padding:10px 0 !important;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
}
.haber-detay > div[style*="margin-top: -14px"] .haber-tarih{
  margin:0 !important;
  display:inline-flex; align-items:center; gap:5px;
}
/* "Tarih:" / "Güncelleme:" etiketleri — küçük, büyük harf, sönük */
.haber-detay .haber-tarih b{
  font-weight:700 !important;
  font-size:10.5px !important;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted) !important;
}
/* saat ikonu (FA 4.7 \f017) — okuyucuya görsel bir çapa verir */
.haber-detay > div[style*="margin-top: -14px"] .haber-tarih:first-child::before{
  content:"\f017";
  font-family:FontAwesome; font-size:11px; line-height:1;
  color:var(--brand); margin-right:4px;
}


/* --------------------------------------------------------------------------
   2. MANŞET BAŞLIĞI (mevcut kural korunuyor, yalnızca satır dengesi ekleniyor)
   -------------------------------------------------------------------------- */
.haber-baslik{               /* desteklemeyen tarayıcı yok sayar */                  /* çok uzun manşetlerde satır kontrolü */
}


/* --------------------------------------------------------------------------
   3. SPOT / ÖZET PARAGRAFI
      Sayfada iki adet .haber-metin var:
        - spot  -> inline style'lı  (style="font-weight:bold; margin-top:5px; size:17px;")
        - gövde -> style niteliği YOK
      [style] niteliğiyle ayırıyoruz; başka sınıf uydurmaya gerek kalmıyor.
   -------------------------------------------------------------------------- */
.haber-detay > .haber-metin[style]{
  font-family:var(--font-govde) !important;
  font-size:19.5px !important;
  line-height:1.55 !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  margin:0 0 20px !important;
  padding:0 0 0 16px !important;
  border-left:3px solid var(--brand);
}
/* boş hizalama/reklam kutuları: negatif etki yapan float ve boşlukları temizle */
.haber-detay > div[align="center"]:empty{ display:none !important; }
.haber-detay > div[style*="float:left"]{ float:none !important; padding:0 !important; }


/* --------------------------------------------------------------------------
   5. MANŞET GÖRSELİ + FOTO GALERİ KÜÇÜK RESİMLERİ
      inline style="width:658px; height:330px" ezilir; görsel sütunun
      tamamını kaplar, çok uzun görsellerde max-height ile kırpılır.
   -------------------------------------------------------------------------- */
.haber-metin > .fancybox{
  display:block; margin:0 0 6px; line-height:0;
}
.haber-metin > .fancybox > img{
  width:100% !important;
  height:auto !important;
  max-height:520px;
  object-fit:cover; object-position:50% 35%;
  border:0 !important;
  border-radius:var(--yuvarlak) !important;
  margin:0 !important;
  box-shadow:var(--golge, 0 2px 5px rgba(13,36,64,.10));
  background:var(--wash);
  transition:box-shadow .2s ease;
}
.haber-metin > .fancybox:hover > img{ box-shadow:var(--golge-hover, 0 6px 18px rgba(13,36,64,.22)); }
/* büyütme ipucu — görselin köşesinde küçük rozet */
.haber-metin > .fancybox{ position:relative; }
.haber-metin > .fancybox::after{
  content:"\f00e";                 /* fa-search-plus */
  font-family:FontAwesome; font-size:13px; line-height:1; color:#fff;
  position:absolute; right:10px; bottom:10px;
  background:rgba(8,14,20,.72); border-radius:4px;
  padding:6px 8px;
  opacity:0; transition:opacity .18s ease;
  pointer-events:none;
}
.haber-metin > .fancybox:hover::after{ opacity:1; }

/* galeri küçük resim şeridi (.thumbs — bu haberde boş geliyor) */
.haber-metin .thumbs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:10px 0 0 !important; padding:0 !important;
  width:auto !important; float:none !important;
}
.haber-metin .thumbs:empty{ display:none !important; }
.haber-metin .thumbs a{ display:block; line-height:0; }
.haber-metin .thumbs img{
  width:96px !important; height:64px !important;
  object-fit:cover;
  border:0 !important; margin:0 !important; padding:0 !important;
  border-radius:4px !important;
  box-shadow:0 1px 3px rgba(13,36,64,.12);
  opacity:.82; transition:opacity .16s ease, transform .16s ease;
}
.haber-metin .thumbs a:hover img{ opacity:1; transform:translateY(-2px); }


/* --------------------------------------------------------------------------
   6. HABER GÖVDESİ  (#iceriks)
      Eski tema: width:640px, Arial 14px/20px. Gövdenin gerçek kabı burasıdır.
      NOT: font-size'a bilerek !important VERİLMEDİ — A+/A- düğmeleri
      #iceriks'e inline font-size yazıyor, !important onu kilitlerdi.
      div#iceriks özgüllüğü tema.css'teki div#iceriks ile eşit, dosya sırası
      sonda olduğu için bizimki kazanır.
   -------------------------------------------------------------------------- */
div#iceriks{
  width:auto !important;                  /* okunabilir satır uzunluğu ~68 karakter */
  font-family:var(--font-govde) !important;
  font-size:17.5px;
  line-height:1.78;
  color:var(--body) !important;
  margin:0 !important;
  padding:0 !important;
  overflow-wrap:break-word; word-break:break-word;
}
#iceriks p{ margin:0 0 1.15em !important; padding:0 !important; }
#iceriks p:last-child{ margin-bottom:0 !important; }
#iceriks > br:first-child,#iceriks p:empty{ display:none !important; }

/* ara başlıklar — em ile, böylece A+/A- ile birlikte ölçeklenir */
#iceriks h1,#iceriks h2,#iceriks h3,#iceriks h4,#iceriks strong > br + strong{
  font-family:var(--font-baslik) !important;
  font-weight:700 !important;
  color:var(--ink) !important;
  line-height:1.3 !important;
  margin:1.5em 0 .5em !important;
  padding:0 !important;
}
#iceriks h1,#iceriks h2{ font-size:1.28em !important; }
#iceriks h3{ font-size:1.12em !important; }
#iceriks h4{ font-size:1.02em !important; letter-spacing:.01em; }

/* gövde bağlantıları */
#iceriks a{
  color:var(--brand) !important;
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; text-decoration-color:rgba(200,30,40,.35);
}
#iceriks a:hover{ text-decoration-color:var(--brand); }

/* alıntı */
#iceriks blockquote{
  position:relative;
  border:0 !important; border-left:3px solid var(--brand) !important;
  background:var(--wash) !important;
  margin:1.4em 0 !important;
  padding:16px 18px 16px 44px !important;
  border-radius:0 var(--yuvarlak) var(--yuvarlak) 0;
  font-size:1.02em !important; line-height:1.6 !important;
  color:var(--ink) !important; font-style:normal;
}
#iceriks blockquote::before{
  content:"\f10d";                 /* fa-quote-left */
  font-family:FontAwesome; font-size:15px; color:var(--brand);
  position:absolute; left:16px; top:17px; opacity:.55;
}
#iceriks blockquote p:last-child{ margin-bottom:0 !important; }

/* listeler */
#iceriks ul,#iceriks ol{ margin:0 0 1.15em 0 !important; padding:0 0 0 1.3em !important; }
#iceriks li{ margin:0 0 .5em !important; padding-left:2px; }
#iceriks ul{ list-style:none !important; padding-left:1.1em !important; }
#iceriks ul > li{ position:relative; padding-left:16px; }
#iceriks ul > li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
}

/* gövde içi görsel + editörün eklediği alt yazı */
#iceriks img{
  max-width:100% !important; height:auto !important;
  width:auto !important;                 /* inline width="600" gibi nitelikleri ez */
  border:0 !important;
  border-radius:var(--yuvarlak);
  margin:14px 0 !important;
  display:block;
}
#iceriks figure{ margin:18px 0 !important; }
#iceriks figcaption,
#iceriks img + em,#iceriks img + small{
  display:block;
  font-size:12.5px !important; line-height:1.5 !important;
  color:var(--muted) !important; font-style:normal !important;
  padding:7px 0 0 !important;
  border-top:1px solid var(--line-soft);
  margin-top:-6px;
}

/* gövdeye yapıştırılmış <font> ve inline ölçüler — eski editör kalıntısı */
#iceriks font{ font-size:inherit !important; color:inherit !important; font-family:inherit !important; }
#iceriks [style*="width:"],#iceriks [width]{ max-width:100% !important; }

/* gövdeye gömülü tablo — kendi içinde yatay kaysın, sayfayı taşırmasın */
#iceriks table{
  display:block; width:auto !important; max-width:100% !important;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-collapse:collapse; font-size:.92em;
}
#iceriks table td,#iceriks table th{
  border:1px solid var(--line) !important; padding:8px 10px !important;
}

/* VİDEO GÖMÜLÜSÜ (youtube/vimeo iframe, eski object/embed) — oranı korunur */
#iceriks iframe,#iceriks video,#iceriks embed,#iceriks object,
.haber-metin > iframe{
  display:block;
  width:100% !important; max-width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  border:0 !important;
  border-radius:var(--yuvarlak);
  margin:16px 0 !important;
  background:#000;
}


/* --------------------------------------------------------------------------
   7. OKUNMA SAYACI  ("Bu haber 18 defa okunmuştur.")
      <span style="color:#999;"> — sınıfsız, inline renk üzerinden hedefleniyor.
   -------------------------------------------------------------------------- */
.haber-detay > span[style*="color:#999"]{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  color:var(--muted) !important;
  background:var(--wash);
  border:1px solid var(--line-soft);
  border-radius:100px;
  padding:5px 12px !important;
  margin:6px 0 !important;
}
.haber-detay > span[style*="color:#999"]::before{
  content:"\f06e";                 /* fa-eye */
  font-family:FontAwesome; font-size:11px; color:var(--muted);
}
.haber-detay > span[style*="color:#999"] b{ color:var(--ink) !important; font-weight:700 !important; }


/* --------------------------------------------------------------------------
   8. ETİKETLER — bu haberde etiket listesi BOŞ geliyor; boş gri kutu kalmasın.
      (:empty tutmaz çünkü içinde <b>Etiketler :</b> var; bu yüzden aşağıda
      sadece "tek çocuk <b> dışında içerik yok" durumunu kırpamıyoruz —
      onun yerine kutuyu hafifletip ayırıcı gibi gösteriyoruz.)
   -------------------------------------------------------------------------- */
/* .haber-etiketler b kurali 24.08.2026'da KALDIRILDI: kutudaki
   "Etiketler :" basligi sablondan cikarildi, bu yuzden hedefleyecek
   <b> ogesi kalmadi. Olu kural birakilmadi. */
/* 9. PAYLASIM CUBUGU — buradaki .SocialTools li a blogu 24.08.2026'da
   KALDIRILDI. Etkisizdi: ayni dosyada 5216. satirdaki
   ".SocialTools ul li a" secicisi hem daha ozgul (0,3,1) hem de daha
   sonra geldigi icin buradaki degerleri tamamen eziyordu. Mobil
   kurallar dosyanin SONUNA, fiilen etkili oldugu yere tasindi. */


/* --------------------------------------------------------------------------
   10. YORUM BÖLÜMÜ
       HTML'de doğrulanan yapı:
         .ic-sayfalar-baslik > h1 > "YORUMLAR" + .dhb > a (YORUM YAP)
         .buyuk-cerceve > b > a  ("Henüz Yorum Eklenmemiştir...")
         .ic-sayfalar-baslik (FACEBOOK YORUM) + .fb-comments
       Yorum FORMU bu sayfada yok; fancybox iframe'iyle (haberyorumyap/822/)
       açılıyor — form kuralları 11. bölümde.
   -------------------------------------------------------------------------- */

/* "YORUM YAP | 0 Yorum" bağlantısı:
   modern.css'teki ".ic-sayfalar-baslik h1 a" (0,3,1) kuralı, modern-ic.css'teki
   ".dhb a" (0,2,0) düzeltmesini özgüllükle yeniyordu. Aynı özgüllükte ve
   daha sonra yazarak geri alıyoruz. */
.ic-sayfalar-baslik h1 .dhb{
  float:right !important;
  margin:0 !important; padding:0 !important;
}
.ic-sayfalar-baslik h1 .dhb a,
.ic-sayfalar-baslik h1 a.fancybox{
  display:inline-flex; align-items:center; gap:6px;
  float:none !important;
  font-family:var(--font-govde) !important;
  font-size:11.5px !important; font-weight:700 !important;
  letter-spacing:.06em; text-transform:uppercase;
  color:#fff !important;                 /* inline style="color:#fff" ile uyumlu */
  background:var(--brand) !important;
  border-radius:100px;
  padding:6px 13px !important;
  text-decoration:none !important;
  transition:background .16s ease;
}
.ic-sayfalar-baslik h1 .dhb a:hover{ background:var(--navy) !important; color:#fff !important; }
/* Facebook yorum başlığındaki sayaç düğme değil, sade sayı */
.ic-sayfalar-baslik h1 .dhb fb\:comments-count,
.ic-sayfalar-baslik h1 .dhb{ color:var(--muted) !important; font-size:11.5px !important; }

/* FA3 ("icon-") sınıf adları FA 4.7'de tanımsız — glifleri elle veriyoruz */
.ic-sayfalar-baslik h1 i.icon-comment::before{ content:"\f075"; font-family:FontAwesome; }
.ic-sayfalar-baslik h1 i.icon-facebook-sign::before{ content:"\f082"; font-family:FontAwesome; }
.ic-sayfalar-baslik h1 i[class^="icon-"],
.ic-sayfalar-baslik h1 i[class*=" icon-"]{
  font-style:normal; font-size:13px; line-height:1;
  color:var(--brand) !important;
}
/* 24.08.2026: Yukaridaki kural basliktaki TUM "icon-" ogelerini marka
   kirmizisina zorluyordu. Acik zeminde dogru, ancak "YORUM YAP" dugmesinin
   zemini de ayni kirmizi oldugu icin baloncuk ikonu kirmizi ustune kirmizi
   kaliyor ve GORUNMUYORDU. Renkli dugme icindeki ikon artik dugmenin kendi
   yazi rengini miras aliyor (inherit) — dugme beyaz yaziliysa ikon da beyaz,
   hover'da renk degisirse ikon da birlikte degisir. */
.ic-sayfalar-baslik h1 .dhb a i[class^="icon-"],
.ic-sayfalar-baslik h1 .dhb a i[class*=" icon-"]{
  color:inherit !important;
}

/* "Henüz Yorum Eklenmemiştir" boş durumu — kırmızı inline rengi ezip
   çağrı-eylem kutusuna çeviriyoruz. Yalnızca yorum kutusunu hedeflemek için
   inline margin-bottom:8px imzasını kullanıyoruz. */
.buyuk-cerceve[style*="margin-bottom:8px"]{
  background:var(--wash) !important;
  border:1px dashed var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  padding:22px 18px !important;
  margin:0 0 18px !important;
  text-align:center;
}
.buyuk-cerceve[style*="margin-bottom:8px"] br{ display:none !important; }
.buyuk-cerceve[style*="margin-bottom:8px"] b{ font-weight:400 !important; }
.buyuk-cerceve[style*="margin-bottom:8px"] a[href*="yorumyap"]{
  display:inline-block;
  color:var(--navy) !important;        /* inline color:#ff0000 eziliyor */
  font-family:var(--font-govde) !important;
  font-size:14.5px !important; font-weight:600 !important;
  text-decoration:none !important;
  line-height:1.5;
}
.buyuk-cerceve[style*="margin-bottom:8px"] a[href*="yorumyap"]:hover{ color:var(--brand) !important; }
.buyuk-cerceve[style*="margin-bottom:8px"] a[href*="yorumyap"]::before{
  content:"\f0e5";                     /* fa-comment-o */
  font-family:FontAwesome; font-size:20px; color:var(--line);
  display:block; margin-bottom:8px;
}

/* Facebook yorum kutusu — data-width="658" sabitini kır, mobilde taşmasın.
   21.08.2026: "width:100%" ZORLAMASI KALDIRILDI. Facebook eklenti yuklenemedigi
   zaman kendi iframe'ini inline "width:0;height:0" ile katliyor; width'i
   !important ile 100%'e zorlamak o gizli kutuyu tekrar 896px yapip (aspect-ratio
   kuraliyla birlikte) siyah bir bant olarak goruntuye getiriyordu.
   max-width tasmayi yine engeller, ama FB'nin kendi olcusunu ezmez.        */
.fb-comments,.fb-comments > span,.fb-comments iframe{
  max-width:100% !important;
}
.fb-comments{ display:block; margin:0 0 8px; }


/* --------------------------------------------------------------------------
   11. YORUM LİSTESİ ve YORUM FORMU
       DİKKAT: bu sınıflar indirilen haberdetay.html'de YOK — yorum yokken
       hiç basılmıyorlar, form ise fancybox iframe'inde (haberyorumyap/...)
       açılıyor. Sınıf adları UYDURULMADI; tema.css.php.src 283-291. satırlarda
       tanımlı gerçek tema sınıfları. Iframe sayfası aynı css setini
       yüklüyorsa form da modernleşir, yüklemiyorsa bu blok etkisizdir.
   -------------------------------------------------------------------------- */
.haber-yorumlari{
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  margin:0 0 10px !important;
  padding:0 !important;
  overflow:hidden;
}
.yorum-baslik{
  background:var(--wash) !important; background-image:none !important;
  border:0 !important; border-bottom:1px solid var(--line-soft) !important;
  font-family:var(--font-baslik) !important;
  font-size:13.5px !important; font-weight:700 !important;
  color:var(--ink) !important;
  padding:10px 14px !important;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
}
.yorum-tarih{
  float:none !important; margin-left:auto;
  font-family:var(--font-govde) !important;
  font-size:11.5px !important; font-weight:400 !important;
  color:var(--muted) !important;
}
.yorum-icerik{
  font-family:var(--font-govde) !important;
  font-size:15.5px !important; line-height:1.7 !important;
  color:var(--body) !important;
  padding:13px 14px !important;
}
/* form alanları — sabit 250px / %85 genişlikler kaldırıldı, odak halkası eklendi */
.yorum-input,.yorum-textArea{
  width:100% !important; max-width:440px !important;
  box-sizing:border-box !important;
  background-color:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  font-family:var(--font-govde) !important;
  font-size:15px !important; line-height:1.5 !important;
  color:var(--ink) !important;
  margin:5px 0 14px !important;
  padding:10px 12px !important;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.yorum-textArea{ max-width:100% !important; height:150px !important; resize:vertical; }
.yorum-input:hover,.yorum-textArea:hover{
  background-color:var(--bg) !important; border-color:var(--muted) !important;
  width:100% !important; margin:5px 0 14px !important; padding:10px 12px !important;
}
.yorum-input:focus,.yorum-textArea:focus{
  outline:0 !important;
  border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(200,30,40,.14) !important;
}
.yorum-input::placeholder,.yorum-textArea::placeholder{ color:var(--muted) !important; }


/* --------------------------------------------------------------------------
   12. "İLGİNİZİ ÇEKEBİLECEK DİĞER ... HABERLERİ" KARTLARI
       .dikey-haberler ANA SAYFADA DA kullanılıyor ve modern.css ona 3 sütunlu
       kart ızgarası veriyor. Kart görünümü iç sayfada da doğru; ancak detay
       sayfasında sol sütun (sağ blok 340px düştükten sonra) ~600px kalıyor,
       3 sütunda kart genişliği ~180px'e iniyor ve özet okunmaz hale geliyor.
       Bu yüzden SADECE haber detayda 2 sütuna alıyoruz.
       Seçici :has() ile daraltıldı; desteklemeyen tarayıcıda kural düşer,
       ana sayfa hiçbir koşulda etkilenmez.
   -------------------------------------------------------------------------- */
@supports selector(:has(*)){
  .haber-detay:has(> .haber-baslik) .buyuk-cerceve:has(> .dikey-haberler){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px 18px !important;
  }
  .haber-detay:has(> .haber-baslik) .buyuk-cerceve:has(> .dikey-haberler) .baslik,
  .haber-detay:has(> .haber-baslik) .buyuk-cerceve:has(> .dikey-haberler) .baslik a{
    font-size:15.5px !important;
  }
  .haber-detay:has(> .haber-baslik) .buyuk-cerceve:has(> .dikey-haberler) .ozet{
    font-size:13.5px !important;
  }
}


/* --------------------------------------------------------------------------
   13. AKIŞ SIRASI — meta satırını manşetin hemen altına al
       Eski HTML sırası: başlık -> spot -> paylaşım tablosu -> tarih satırı.
       Tarih satırı DOM'da spot'un altında; gazetecilik düzeninde manşetin
       hemen altında olmalı. HTML'e dokunamadığımız için flex `order` ile
       görsel sırayı düzeltiyoruz.
       Tüm blok @supports + :has() ile yalnızca HABER DETAY'a kilitli;
       .haber-detay ortak bir sınıf olduğu için diğer alt sayfalar (kategori,
       galeri, ilan, iletişim...) bu kuralların hiçbirini görmez.
   -------------------------------------------------------------------------- */
@supports selector(:has(> *)){
  .haber-detay:has(> .haber-baslik){
    display:flex; flex-direction:column;
  }
  /* ardışık <br /> yığınlarını (3 tane üst üste) kaldır — boşluğu marj verir */
  .haber-detay:has(> .haber-baslik) > br{ display:none !important; }

  .haber-detay:has(> .haber-baslik) > .buradasiniz{ order:-4; }
  .haber-detay:has(> .haber-baslik) > .haber-baslik{ order:-3; }
  .haber-detay:has(> .haber-baslik) > div[style*="margin-top: -14px"]{ order:-2; }
  .haber-detay:has(> .haber-baslik) > .haber-metin[style]{ order:-1; }
  /* geri kalan her şey (görsel, gövde, etiket, yorum, ilgili haberler)
     order:0 ile HTML sırasında kalır */
}


/* --------------------------------------------------------------------------
   14. DUYARLI DAVRANIŞ
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  /* tek sütuna düşünce metin ölçüsü daralmasın */
  div#iceriks{ }
}
@media (max-width:620px){
  .haber-detay > .haber-metin[style]{
    font-size:17.5px !important; line-height:1.5 !important;
    padding-left:13px !important;
  }
  div#iceriks{ font-size:16.5px; line-height:1.72; max-width:none; }
  .haber-metin > .fancybox > img{ max-height:280px; border-radius:4px !important; }
  .haber-detay > div[style*="margin-top: -14px"]{ gap:4px 14px; font-size:12px; }
  .haber-metin .thumbs img{ width:74px !important; height:52px !important; }
}
@media (max-width:480px){
  .ic-sayfalar-baslik h1 .dhb{ float:none !important; display:block; margin-top:8px !important; }
  @supports selector(:has(*)){
    .haber-detay:has(> .haber-baslik) .buyuk-cerceve:has(> .dikey-haberler){
      grid-template-columns:minmax(0,1fr) !important;
    }
  }
}

/* --------------------------------------------------------------------------
   15. YAZDIRMA — en çok okunan sayfa; yazdırma çıktısı da temiz olsun
   -------------------------------------------------------------------------- */
@media print{
  div#iceriks{ max-width:none; font-size:12pt; line-height:1.55; color:#000 !important; }
  .haber-baslik{ font-size:20pt !important; color:#000 !important; }
}
/* ===== HABER DETAY BÖLÜMÜ SONU ===== */


/* ======================= LISTE-KATEGORI ======================= */

/* ==========================================================================
   İÇ SAYFA — KATEGORİ LİSTESİ + ANKET LİSTESİ
   Hedef sayfalar: /kategori/<ad>/<id>/   ve   /anketler/
   Kapsam notu: kategori.html'de #icerik-orta sarmalayıcısı YOK, anketler.html'de
   VAR. Bu yüzden hiçbir kural #icerik-orta üzerinden kapsanmadı; hepsi doğrudan
   .haber-detay'dan iniyor. Sağ blok, üst şerit, menü ve footer'a dokunulmuyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. HTML'E GÖMÜLÜ NEGATİF MARJLAR VE ÖLÜ DÜĞÜMLER
   kategori.html:991 içerik alanının ilk çocuğu boş ama margin-top:-8px'li bir
   div; başlığı yukarı çekip üst boşluğu yiyor. anketler.html:176'da aynı iş
   başlığın kendi inline stiliyle yapılmış (o zaten modern.css'in !important
   margin'i ile eziliyor). .clearfix'in ise hiçbir dosyada tanımı yok.
   -------------------------------------------------------------------------- */
.haber-detay > div[style*="margin-top:-8px"]{
  display:none !important;
}
.haber-detay > .clearfix,
.haber-detay .buyuk-cerceve + .clearfix{
  display:none !important;
}

/* --------------------------------------------------------------------------
   1. SAYFA BAŞLIĞI  (.ic-sayfalar-baslik > h1)
   Eski tema: width:656px + height:30px + overflow:hidden + border:1px #ccc.
   modern.css bunu 15px'lik bölüm şeridine çevirmiş; ama kategori ve anketler
   sayfasında bu şerit sayfanın TEK H1'i, yani asıl sayfa başlığı. Bu yüzden
   sadece bu iki sayfa tipinde büyütüp gerçek bir sayfa başlığı yapıyoruz.
   Kapsam: liste sayfası mı diye .buyuk-cerceve içeriğine bakarak ayırıyoruz,
   böylece haberdetay.html'deki bölüm şeritleri etkilenmiyor.
   -------------------------------------------------------------------------- */
.haber-detay:not(:has(.haber-metin)):has(> .buyuk-cerceve > .dikey-haberler > .ozet) > .ic-sayfalar-baslik,
.haber-detay:has(> .buyuk-cerceve > .diger-haberler) > .ic-sayfalar-baslik{
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-left:5px solid var(--brand) !important;
  border-bottom:1px solid var(--line) !important;
  padding:2px 0 14px 14px !important;
  margin:4px 0 20px !important;   /* inline margin-top:-3px'i de ezer */
  box-sizing:border-box;
}
.haber-detay:not(:has(.haber-metin)):has(> .buyuk-cerceve > .dikey-haberler > .ozet) > .ic-sayfalar-baslik h1,
.haber-detay:has(> .buyuk-cerceve > .diger-haberler) > .ic-sayfalar-baslik h1{
  font-family:var(--font-baslik) !important;
  font-size:clamp(20px,2.1vw,26px) !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:-.015em !important;
  color:var(--ink) !important;
  text-shadow:none !important;
  height:auto !important;
  overflow:visible !important;
  padding:0 !important;
  margin:0 !important;
  display:block;
}

/* --------------------------------------------------------------------------
   2. KATEGORİ LİSTESİ — KAPSAYICI
   Eski tema .buyuk-cerceve'ye width:645px + float:left + border veriyordu ve
   float temizleyici (.clearfix) kapsayıcının DIŞINDA olduğu için çerçevenin
   yüksekliği çöküyor, 20 haber çerçevenin dışına taşıyordu.

   KAPSAM AÇIKLAMASI (önemli):
   .dikey-haberler dört ayrı sayfada geçiyor ama içerikleri farklı —
     kategori.html      : .ozet VAR,  .katicon YOK, inline height YOK   <-- bizim hedef
     haberdetay.html    : .ozet VAR ama sayfada .haber-metin var        <-- hariç
     videogaleri/ilanlar: .ozet YOK,  .katicon VAR, inline height:150px <-- hariç
   Bu yüzden kapsam ":not(:has(.haber-metin))" + ":has(> .dikey-haberler > .ozet)".

   DÜZEN SEÇİMİ — neden YATAY LİSTE KARTI?
   Kaynak küpürler 186x96 px. modern.css'in 3'lü üst üste kart ızgarası bu
   görseli 1000px+ içerik sütununda 325-490px'e kadar büyütüyor (2x-2.6x
   upscale = gözle görülür bulanıklık). Yatay kartta görsel 190px'te kalıyor,
   yani neredeyse doğal boyutunda ve net. Ayrıca kategori listesi kronolojik
   bir akış; tarama (scan) davranışı için sol görsel + sağ metin satırları
   3'lü kart duvarından çok daha hızlı okunur. Geniş ekranda boşa alan
   kalmasın diye auto-fill ile kendiliğinden 2-3 sütuna açılıyor.
   -------------------------------------------------------------------------- */
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet){
  display:grid !important;
  /* min(400px,100%) : dar ekranda track'in kapsayıcıyı taşırmasını engeller */
  grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr)) !important;
  gap:16px 18px !important;
  align-items:stretch !important;
  width:auto !important;
  float:none !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 0 26px !important;
}
/* ızgara içindeki ölü düğümler boş hücre üretmesin */
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .temizle,
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .clearfix,
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > br{
  display:none !important;
}

/* --------------------------------------------------------------------------
   3. KATEGORİ LİSTESİ — TEK KART
   DOM (kategori.html'de birebir doğrulandı, 3 çocuk):
     <div class="dikey-haberler">
       <a href><img width=186 height=96 class="img-rounded"></a>   -> görsel
       <div class="baslik"><a>...</a></div>                        -> başlık
       <div class="ozet"><a>...</a></div>                          -> özet
     </div>
   Tarih ve kategori etiketi bu sayfada HTML'de YOK; onlar için kural yazılmadı.

   Eski tema: float:left + width:211px + height:220px (başlık/özet kırpılıyor).
   modern.css: dikey kart (flex-column). Biz grid ile 2 sütuna çeviriyoruz:
     sütun 1 = görsel (tüm satırları kaplar), sütun 2 = başlık + özet.
   -------------------------------------------------------------------------- */
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler{
  display:grid !important;
  grid-template-columns:190px minmax(0,1fr) !important;
  grid-template-rows:auto auto 1fr !important;   /* 3. satır: içeriği yukarı iter */
  gap:0 !important;
  float:none !important;
  width:auto !important;
  height:auto !important;
  min-height:126px;
  margin:0 !important;
  padding:0 !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:var(--golge);
  overflow:hidden;
  box-sizing:border-box;
  /* modern.css'ten gelen translateY(-3px) hover'ı korunuyor; istenmezse
     bu satırın altına: transform:none !important; eklenmesi yeterli. */
}

/* GÖRSEL — <a> sarmalayıcısı sol sütunun tamamını kaplar */
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > a{
  grid-column:1 !important;
  grid-row:1 / -1 !important;
  display:block !important;
  align-self:stretch !important;
  position:relative;
  overflow:hidden;
  background:var(--wash);
  min-height:126px;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
}
/* Eski tema: border:1px solid #999 + width:205px + height:100px + padding:1px,
   hover'da kenarlık kırmızıya dönüp kartı zıplatıyordu. Hepsini eziyoruz. */
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > a > img,
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > a > img:hover{
  position:absolute; inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  aspect-ratio:auto !important;       /* modern.css'in 16/9 zorlamasını kapat */
  object-fit:cover !important;
  object-position:50% 40%;            /* haber küpürlerinde yüzler üstte olur */
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--wash);
  transition:transform .3s ease, opacity .25s ease;
}
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler:hover > a > img{
  transform:scale(1.04);
  opacity:1 !important;
}

/* BAŞLIK — 2 satıra kilitli (kartlar aynı boyda dursun) */
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > .baslik{
  grid-column:2 !important;
  grid-row:1 !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  padding:14px 16px 0 !important;
  margin:0 0 6px !important;
  font-size:inherit !important;
}
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > .baslik a{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
  font-family:var(--font-baslik) !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.32 !important;
  letter-spacing:-.012em;
  color:var(--ink) !important;
  text-decoration:none !important;
  width:auto !important;
  height:calc(2 * 1.32em) !important;   /* tam 2 satır */
  padding:0 !important;
  margin:0 !important;
}
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler:hover > .baslik a{
  color:var(--brand) !important;
  text-decoration:none !important;
}

/* ÖZET — 2 satıra kilitli. Eski tema height:105px veriyordu (devasa boşluk). */
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > .ozet{
  grid-column:2 !important;
  grid-row:2 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
  width:auto !important;
  height:calc(2 * 1.5em) !important;    /* tam 2 satır */
  max-height:none !important;
  padding:0 16px 14px !important;
  margin:0 !important;
  font-family:var(--font-govde) !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:var(--muted) !important;
}
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > .ozet a{
  color:inherit !important;
  text-decoration:none !important;
  padding:0 !important;
  margin:0 !important;
}
/* 3. satır boş kalır ve 1fr olduğu için metni yukarı yaslar */

/* Kategori listesi — dar ekran */
@media (max-width:620px){
  .haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet){
    gap:12px !important;
  }
  .haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler{
    grid-template-columns:124px minmax(0,1fr) !important;
    min-height:104px;
  }
  .haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > a{
    min-height:104px;
  }
  .haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > .baslik{
    padding:11px 13px 0 !important;
  }
  .haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > .baslik a{
    font-size:15px !important;
  }
  .haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:has(> .dikey-haberler > .ozet) > .dikey-haberler > .ozet{
    padding:0 13px 11px !important;
    font-size:13px !important;
  }
}

/* --------------------------------------------------------------------------
   4. ANKET LİSTESİ  (anketler.html — ul.diger-haberler)
   DOM: .buyuk-cerceve > ul.diger-haberler > li > a
   Eski tema: li'de border-bottom:1px dotted #999, link rengi #000, list-style
   sıfırlanmamış (madde işaretleri padding:0 yüzünden kırpılıyor), tıklama
   alanı yalnızca metin genişliği kadar.
   Yeni: satırın tamamı tıklanabilir kart; solda anket ikonu, sağda ok.
   -------------------------------------------------------------------------- */
.haber-detay .diger-haberler{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)) !important;
  gap:12px !important;
  list-style:none !important;
  margin:0 0 26px !important;
  padding:0 !important;
}
.haber-detay .diger-haberler li{
  list-style:none !important;
  border:0 !important;
  border-bottom:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}
.haber-detay .diger-haberler li a,
.haber-detay .diger-haberler li a:visited{
  display:flex !important;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:14px 16px !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:var(--golge);
  font-family:var(--font-baslik) !important;
  font-size:15.5px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:-.012em;
  color:var(--ink) !important;
  text-decoration:none !important;
  box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* sol ikon — Font Awesome 4.7 "question-circle" */
.haber-detay .diger-haberler li a::before{
  content:"\f059";
  font-family:FontAwesome;
  font-weight:normal;
  font-size:17px;
  line-height:1;
  color:var(--brand);
  flex:0 0 auto;
}
/* sağ ok — "angle-right", satırın sonuna itilir */
.haber-detay .diger-haberler li a::after{
  content:"\f105";
  font-family:FontAwesome;
  font-weight:normal;
  font-size:16px;
  line-height:1;
  color:var(--muted);
  margin-left:auto;
  flex:0 0 auto;
  transition:transform .18s ease, color .18s ease;
}
.haber-detay .diger-haberler li a:hover{
  color:var(--brand) !important;
  text-decoration:none !important;
  border-color:var(--brand) !important;
  box-shadow:var(--golge-hover);
  transform:translateY(-2px);
}
.haber-detay .diger-haberler li a:hover::after{
  color:var(--brand);
  transform:translateX(3px);
}

/* --------------------------------------------------------------------------
   5. SAYFALAMA  (.pagination)
   Markup kategori.html/anketler.html'de basılmıyor (tek sayfalık sonuç), ama
   aynı CMS'in fotolar.html ve videogaleri.html sayfalarında birebir şu şekilde:
     <div class="pagination"><ul>
        <li class="active"><span>1</span></li>
        <li><a href="..."><span>2</span></a></li>
        <li><a href="..."><span>Sonraki</span></a></li>
     </ul></div>
   Bootstrap 2 kalıbı ama sayfaya Bootstrap CSS'i HİÇ yüklenmiyor -> şu an
   stilsiz, madde işaretli dikey liste olarak görünüyor.
   Sağ bloğu etkilememesi için .haber-detay ile kapsandı.
   -------------------------------------------------------------------------- */
.haber-detay .pagination{
  width:auto !important;
  float:none !important;
  clear:both;
  margin:26px 0 8px !important;
  padding:20px 0 0 !important;
  border-top:1px solid var(--line);
  text-align:center;
}
.haber-detay .pagination ul{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
.haber-detay .pagination ul li{
  display:block !important;
  float:none !important;
  list-style:none !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}
/* hem <a><span> hem de aktif sayfadaki çıplak <span> aynı hapı alsın */
.haber-detay .pagination ul li > a,
.haber-detay .pagination ul li > span{
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 13px !important;
  box-sizing:border-box;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  font-family:var(--font-govde) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;
  color:var(--body) !important;
  text-decoration:none !important;
  font-variant-numeric:tabular-nums;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
/* <a> içindeki <span> ikinci bir kutu oluşturmasın */
.haber-detay .pagination ul li > a > span{
  display:inline !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  height:auto !important;
  color:inherit !important;
  font:inherit !important;
}
.haber-detay .pagination ul li > a:hover{
  background:var(--wash) !important;
  border-color:var(--navy) !important;
  color:var(--ink) !important;
}
/* AKTİF SAYFA — belirgin marka rengi, tıklanamaz görünüm */
.haber-detay .pagination ul li.active > span,
.haber-detay .pagination ul li.active > a{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
  font-weight:700 !important;
  cursor:default;
  box-shadow:0 2px 8px -3px rgba(200,30,40,.6);
}
/* "Önceki" / "Sonraki" metin butonları biraz daha geniş dursun */
.haber-detay .pagination ul li:first-child > a,
.haber-detay .pagination ul li:last-child > a{
  padding:0 16px !important;
}
@media (max-width:620px){
  .haber-detay .pagination{ margin:20px 0 6px !important; padding-top:16px !important; }
  .haber-detay .pagination ul{ gap:5px; }
  .haber-detay .pagination ul li > a,
  .haber-detay .pagination ul li > span{
    min-width:36px; height:36px; padding:0 10px !important; font-size:13.5px !important;
  }
}

/* --------------------------------------------------------------------------
   6. ANKET KUTUSU / SEÇENEKLER / OY BUTONU
   DİKKAT — KAPSAM: bu blok yalnızca İÇERİK ALANI (.haber-detay) içindeki anket
   formunu hedefler. anketler.html'de anket formu SAĞ BLOK'ta olduğu için (o
   alan modern.css ile zaten tasarlandı) bu kurallar oraya DEĞMEZ; anket DETAY
   sayfası (/anket/1/...) açıldığında devreye girer.
   Sınıf adları anketler.html'in sağ blok widget'ındaki GERÇEK markup'tan alındı:
     <div class="cerceve-anket">
       <form name="anket_form"> <p>Soru<br><br>
         <label class="radio"><input type="radio" name="Anket" value="1"> Metin</label>
         ...
         <input type="submit" name="oyla" id="oyla" class="btn btn-small" value="Oyla">
       </form>
     </div>
   Eski tema tuzağı: .cerceve-anket{width:302px} ve .anket{width:314px;height:30px;
   overflow:hidden} — sağ blok genişliğine çivili, içerik alanında dar kalır.
   -------------------------------------------------------------------------- */
.haber-detay .anket{
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-left:5px solid var(--brand) !important;
  padding:2px 0 2px 14px !important;
  margin:0 0 14px !important;
}
.haber-detay .anket .baslik{
  font-family:var(--font-baslik) !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.02em;
  color:var(--ink) !important;
  text-shadow:none !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
}
.haber-detay .cerceve-anket{
  width:auto !important;
  height:auto !important;
  float:none !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:var(--golge);
  padding:20px 22px !important;
  margin:0 0 26px !important;
  box-sizing:border-box;
}
/* anket sorusu */
.haber-detay .cerceve-anket form p,
.haber-detay form[name="anket_form"] p{
  font-family:var(--font-baslik) !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  letter-spacing:-.012em;
  color:var(--ink) !important;
  margin:0 0 16px !important;
  padding:0 !important;
}
/* <br><br> ile açılan yapay boşlukları kıs (HTML'e dokunmadan) */
.haber-detay form[name="anket_form"] p br{
  line-height:0.6;
}

/* SEÇENEKLER — her label tam genişlikte tıklanabilir satır */
.haber-detay .cerceve-anket label.radio,
.haber-detay form[name="anket_form"] label.radio,
.haber-detay form[name="anket_form"] label{
  display:flex !important;
  align-items:center;
  gap:11px;
  width:auto !important;
  margin:0 0 9px !important;
  padding:12px 14px !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  font-family:var(--font-govde) !important;
  font-size:15.5px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  color:var(--body) !important;
  cursor:pointer;
  box-sizing:border-box;
  transition:border-color .16s ease, background .16s ease;
}
.haber-detay form[name="anket_form"] label:hover{
  border-color:var(--navy) !important;
  background:var(--wash) !important;
}
/* seçili seçenek — :has() ile işaretlenir */
.haber-detay form[name="anket_form"] label:has(input[type="radio"]:checked){
  border-color:var(--brand) !important;
  background:rgba(200,30,40,.045) !important;
  color:var(--ink) !important;
  font-weight:600 !important;
}
.haber-detay .cerceve-anket input[type="radio"],
.haber-detay form[name="anket_form"] input[type="radio"]{
  flex:0 0 auto;
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  padding:0 !important;
  accent-color:var(--brand);
  cursor:pointer;
}

/* OY BUTONU — .btn/.btn-small Bootstrap 2 sınıfı ama Bootstrap YÜKLÜ DEĞİL,
   yani şu an tarayıcı varsayılan gri butonu görünüyor. */
.haber-detay #oyla,
.haber-detay input[name="oyla"],
.haber-detay .cerceve-anket input[type="submit"],
.haber-detay .cerceve-anket .btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:130px;
  height:44px;
  margin:14px 0 0 !important;
  padding:0 26px !important;
  background:var(--brand) !important;
  background-image:none !important;
  border:1px solid var(--brand) !important;
  border-radius:var(--yuvarlak) !important;
  font-family:var(--font-baslik) !important;
  font-size:14.5px !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff !important;
  text-shadow:none !important;
  box-shadow:0 2px 8px -3px rgba(200,30,40,.65);
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease, transform .1s ease;
  -webkit-appearance:none; appearance:none;
}
.haber-detay #oyla:hover,
.haber-detay input[name="oyla"]:hover,
.haber-detay .cerceve-anket input[type="submit"]:hover{
  background:var(--brand-dark,#A5151E) !important;
  border-color:var(--brand-dark,#A5151E) !important;
  box-shadow:0 4px 14px -4px rgba(200,30,40,.7);
}
.haber-detay #oyla:active,
.haber-detay input[name="oyla"]:active{ transform:translateY(1px); }
.haber-detay #oyla:focus-visible,
.haber-detay input[name="oyla"]:focus-visible,
.haber-detay form[name="anket_form"] input[type="radio"]:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
}
/* form içindeki gizli input'lar satır boşluğu üretmesin */
.haber-detay form[name="anket_form"] input[type="hidden"]{ display:none !important; }

/* --------------------------------------------------------------------------
   7. ANKET SONUÇ ÇUBUKLARI — YATAY BAR + YÜZDE
   !! DOĞRULAMA NOTU: oy verildikten sonraki HTML elimizde YOK; verilen 10
   sayfanın hiçbirinde sonuç markup'ı geçmiyor. Şablonun `pagination`,
   `btn btn-small`, `img-rounded` gibi Bootstrap 2 sınıflarını kullandığına
   bakarak sonuç çubuğunun da Bootstrap 2 kalıbı olduğu ÇIKARIMI yapıldı:
       <div class="progress"><div class="bar" style="width:42%"></div></div>
   Ayrıca standart <progress> etiketi de desteklendi. Markup tutmazsa bu blok
   hiçbir şeye eşleşmez ve zararsızdır — ama canlıdan bir kez doğrulanmalı.

   Yüzde metni HTML'den gelir (şablon genelde "%42" veya "42 oy" basar); CSS
   yüzdeyi uyduramaz, sadece çubuğu ve hizalamayı kurar.
   -------------------------------------------------------------------------- */
.haber-detay .cerceve-anket .progress,
.haber-detay .cerceve-anket progress{
  display:block !important;
  width:100% !important;
  height:10px !important;
  margin:4px 0 10px !important;
  padding:0 !important;
  background:var(--line-soft) !important;
  background-image:none !important;
  border:0 !important;
  border-radius:100px !important;
  box-shadow:none !important;
  overflow:hidden;
  -webkit-appearance:none; appearance:none;
}
/* Bootstrap 2 kalıbı: dolan iç çubuk. Genişlik inline style'dan gelir. */
.haber-detay .cerceve-anket .progress > .bar{
  display:block !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--brand) !important;
  background-image:none !important;
  border-radius:100px !important;
  box-shadow:none !important;
  float:none !important;
  transition:width .5s cubic-bezier(.25,.8,.3,1);
}
/* <progress> etiketi karşılığı */
.haber-detay .cerceve-anket progress::-webkit-progress-bar{
  background:var(--line-soft); border-radius:100px;
}
.haber-detay .cerceve-anket progress::-webkit-progress-value{
  background:var(--brand); border-radius:100px;
}
.haber-detay .cerceve-anket progress::-moz-progress-bar{
  background:var(--brand); border-radius:100px;
}
/* Sonuç satırı: seçenek adı solda, yüzde sağda (label + bar art arda gelirse) */
.haber-detay .cerceve-anket .progress + *,
.haber-detay .cerceve-anket .bar + *{
  font-variant-numeric:tabular-nums;
}
/* Sonuç listesinde artık radio yoksa label'ı sade satıra indir */
.haber-detay .cerceve-anket label.radio:not(:has(input[type="radio"])){
  display:flex !important;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 0 4px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  cursor:default;
}

/* --------------------------------------------------------------------------
   8. LİSTE SONU — "sonuç yok" durumu ve boş kapsayıcı
   Kategori boşsa .buyuk-cerceve hiç .dikey-haberler içermez; eski temanın
   645px'lik boş çerçevesi ekranda çirkin bir kutu bırakır.
   -------------------------------------------------------------------------- */
.haber-detay:not(:has(.haber-metin)) > .buyuk-cerceve:not(:has(.dikey-haberler)):not(:has(.diger-haberler)):not(:has(*)){
  display:none !important;
}


/* ======================= FOTO-GALERI ======================= */

/* ==========================================================================
   6. FOTO GALERİ SAYFALARI  (foto-galeri/  ve  foto-galeri/fotolar/...)
   Kapsam kancaları:
     #icerik:has(.galeri-kt-kutular)  -> galeri KART ızgarası olan her sayfa
                                         (fotogaleri.html + fotolar.html alt bloğu)
     #icerik:has(.fotogaleribilgi)    -> YALNIZCA tek fotoğraf sayfası (fotolar.html)
   Not: :has() zaten modern.css'te yoğun kullanılıyor, yeni bağımlılık değil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.0  KRİTİK ONARIM — "DİĞER GALERİLER" bloğu fotoğrafın ÜZERİNE biniyordu
   fotolar.html'de #icerik'in doğrudan çocukları:
       #icerik-orta , .clearfix , .haber-detay(DİĞER GALERİLER) , .clearfix
   Bu sayfada .sag-blok YOK. modern.css #icerik'i "1fr + 340px" ızgara yapıyor,
   modern-ic.css ise .haber-detay{grid-column:1;grid-row:1} ile ikinci
   .haber-detay'ı da 1. hücreye çiviliyordu -> iki blok üst üste biniyordu.
   Çözüm: sağ blok olmayan bu sayfada ızgarayı tek sütuna indir ve
   .haber-detay'ın satır/sütun çivisini sök.
   -------------------------------------------------------------------------- */
#icerik:has(.fotogaleribilgi){
  grid-template-columns:minmax(0,1fr) !important;
}
#icerik:has(.fotogaleribilgi) > #icerik-orta,
#icerik:has(.fotogaleribilgi) .haber-detay{
  grid-column:auto !important;
  grid-row:auto !important;
  width:auto !important;
  float:none !important;
}
/* .clearfix hiçbir CSS dosyasında tanımlı değil; ızgara çocuğu olarak boş
   hücre işgal edip yerleşimi kaydırıyor. Bu sayfa tipinde gizle. */
#icerik:has(.galeri-kt-kutular) > .clearfix,
#icerik:has(.galeri-kt-kutular) .haber-detay > .clearfix,
#icerik:has(.galeri-kt-kutular) .buyuk-cerceve > .clearfix,
#icerik:has(.fotogaleribilgi) > .clearfix{
  display:none !important;
}
/* sağ blok sarmalayıcısındaki style="margin-top:-3px" negatif marjı */
#icerik:has(.galeri-kt-kutular) > div:has(> .sag-blok){
  margin-top:0 !important;
}
/* fotolar.html'deki "DİĞER GALERİLER" bloğunu fotoğraftan ayır */
#icerik:has(.fotogaleribilgi) > .haber-detay{
  margin-top:10px !important;
}
/* inline style="margin-top:-1px" + inline width:977px başlıkta; sayfa içi
   otomatik kaydırma (#getir) başlığı kenara yapıştırmasın */
#icerik:has(.galeri-kt-kutular) .ic-sayfalar-baslik,
#icerik:has(.fotogaleribilgi) .ic-sayfalar-baslik{
  margin-top:0 !important;
  width:auto !important;
  scroll-margin-top:18px;
}
/* "FOTO GALERİ / Bebişler" — ilk parça üst kırılım bağlantısı, ikincisi asıl ad.
   HTML'de style="color:#FFF" var (beyaz üstüne beyaz); !important ile eziyoruz. */
#icerik:has(.fotogaleribilgi) .ic-sayfalar-baslik h1 > a{
  color:var(--muted) !important;
}
#icerik:has(.fotogaleribilgi) .ic-sayfalar-baslik h1 > a:hover{
  color:var(--brand) !important;
}

/* --------------------------------------------------------------------------
   6.1  GALERİ LİSTESİ — IZGARA
   Eski tema: .galeri-kt-kutular{float:left;width:212px} + img{width:207px;
   height:140px;float:left} -> sabit piksel + float; modern-ic.css float'u
   kapattığı için kartlar tek sütun hâlinde alt alta dev boyutta diziliyordu.
   Kapsayıcı .buyuk-cerceve'yi ızgaraya çeviriyoruz (yalnızca içinde galeri
   kartı varsa; .buyuk-cerceve sitede çok amaçlı kullanılıyor).
   Sütun sayısı: kart taban genişliği 198px -> sağ bloklu ~600px'lik içerik
   sütununda 3, tam genişlik (~1150px) "DİĞER GALERİLER" bloğunda 5,
   tablette 2-3, telefonda 2, çok dar ekranda 1 sütun.
   -------------------------------------------------------------------------- */
.buyuk-cerceve:has(> .galeri-kt-kutular){
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(198px,1fr));
  gap:22px 18px;
  align-items:start;
  width:auto !important;
  margin:0 0 8px !important;
  padding:0 !important;
}
/* kapsayıcıdaki boş <div align="center"> ızgarada koca bir hücre yiyordu */
.buyuk-cerceve:has(> .galeri-kt-kutular) > div[align="center"],
.buyuk-cerceve:has(> .galeri-kt-kutular) > br,
.buyuk-cerceve:has(> .galeri-kt-kutular) > .temizle{
  display:none !important;
}

/* --------------------------------------------------------------------------
   6.2  GALERİ KARTI
   HTML: .galeri-kt-kutular > a > img  +  .galeri-kt-kutular > .galkat
   Her kartta inline style="margin-left:-3px" (fotolar.html'de ayrıca
   width:237px) var; ikisini de eziyoruz.
   -------------------------------------------------------------------------- */
.buyuk-cerceve .galeri-kt-kutular{
  position:relative !important;      /* .galkat'ın çapası — bkz. 6.3 */
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  background:transparent !important;
}
/* görseli kırpan kap: hover'da büyüme dışarı taşmasın, köşeler yuvarlak kalsın */
.buyuk-cerceve .galeri-kt-kutular > a{
  display:block !important;
  position:relative;
  overflow:hidden;
  border-radius:var(--yuvarlak);
  line-height:0;
  font-size:0;
  background:var(--wash);
  box-shadow:var(--golge);
  transition:box-shadow .22s ease;
}
.buyuk-cerceve .galeri-kt-kutular > a > img,
.buyuk-cerceve .galeri-kt-kutular > a > img:hover{
  display:block !important;
  float:none !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/10;
  object-fit:cover;
  border:0 !important;            /* eski tema border:1px #dcdcdc / hover #ff0000 */
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;     /* yuvarlaklık artık dış kapta */
  box-shadow:none !important;
  transform:none;
  transition:transform .35s ease;
}
/* modern-ic.css'teki translateY(-3px) kartı kaydırıp alt yazıyı görselden
   ayırıyordu; yerine kırpılmış hafif yakınlaştırma. */
.buyuk-cerceve .galeri-kt-kutular:hover > a > img{
  transform:scale(1.045) !important;
}
.buyuk-cerceve .galeri-kt-kutular:hover > a{
  box-shadow:var(--golge-hover);
}

/* --------------------------------------------------------------------------
   6.3  .galkat — GÖRSEL ÜZERİ BAŞLIK ŞERİDİ
   İKİ AYRI HATA VARDI:
   a) Eski tema: .galkat{margin-top:-60px;position:relative;width:198px;
      background:url(../tema/transparent-bg.png)} -> sabit 198px genişlik ve
      artık var olmayan PNG dokusu; negatif marj esnek düzende kayıyor.
   b) modern-ic.css .galkat'ı position:absolute yaptı ama .galeri-kt-kutular'a
      position:relative VERMEDİ. Konumlanmış ata olmadığı için dört galeri
      başlığı da sayfanın sol üst köşesine (ilk kapsayıcı bloğa) yığılıyordu;
      kartlar başlıksız kalıyordu. 6.2'deki position:relative bunu çözer.
   NOT: Bu sayfalarda .galkat KATEGORİ değil, GALERİ ADINI taşıyor
   (kartın tek başlığı). Bu yüzden 10.5px'lik minik köşe rozeti yerine
   görselin alt kenarına oturan, degrade zeminli okunur bir başlık şeridi
   yapıyoruz — eski temanın özgün amacı da buydu.
   -------------------------------------------------------------------------- */
.buyuk-cerceve .galeri-kt-kutular .galkat{
  position:absolute !important;
  top:auto !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:34px 12px 11px !important;
  float:none !important;
  clear:none !important;
  overflow:hidden !important;
  border-radius:0 0 var(--yuvarlak) var(--yuvarlak);
  background-image:linear-gradient(to top,
                    rgba(8,14,20,.93) 20%,
                    rgba(8,14,20,.55) 62%,
                    rgba(8,14,20,0)) !important;
  background-color:transparent !important;
  z-index:3;
  pointer-events:none;              /* şerit tıklamayı yutmasın */
}
.buyuk-cerceve .galeri-kt-kutular .galkat ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.buyuk-cerceve .galeri-kt-kutular .galkat li,
.buyuk-cerceve .galeri-kt-kutular .galkat li.active{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  float:none !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  color:#fff !important;
}
.buyuk-cerceve .galeri-kt-kutular .galkat li:hover{
  background:transparent !important;   /* modern-ic'te hover'da tüm şerit kırmızıya dönüyordu */
}
.buyuk-cerceve .galeri-kt-kutular .galkat .baslik{
  margin:0 !important;
  padding:0 !important;
  font-size:inherit !important;
}
.buyuk-cerceve .galeri-kt-kutular .galkat li a{
  pointer-events:auto;              /* başlık bağlantısı yine tıklanabilir */
  display:-webkit-box !important;
  -webkit-line-clamp:2;             /* uzun galeri adı kartı ezmesin */
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--font-baslik) !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1.28 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#fff !important;
  text-decoration:none !important;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  padding:0 !important;
  margin:0 !important;
}
.buyuk-cerceve .galeri-kt-kutular:hover .galkat li a{
  color:#fff !important;
  text-decoration:none !important;
}

/* --------------------------------------------------------------------------
   6.4  TEK FOTOĞRAF SAYFASI — GALERİ BİLGİ ŞERİDİ (.fotogaleribilgi)
   Eski tema: .fotogaleribilgi>ul li{float:left} — float'lar hiç kapatılmıyor,
   bu yüzden HTML'de arka arkaya üç <br /> ile "temizlenmeye" çalışılmış ve
   bilgi satırı alttaki paylaş tablosunun içine akıyordu.
   -------------------------------------------------------------------------- */
#icerik:has(.fotogaleribilgi) .fotogaleribilgi{
  float:none !important;
  width:auto !important;
  margin:0 0 16px !important;
}
#icerik:has(.fotogaleribilgi) .fotogaleribilgi > ul{
  list-style:none !important;
  margin:0 !important;
  padding:12px 16px !important;
  display:flex !important;
  flex-wrap:wrap;
  gap:9px 24px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:var(--yuvarlak);
}
#icerik:has(.fotogaleribilgi) .fotogaleribilgi > ul li{
  float:none !important;
  display:flex !important;
  align-items:baseline;
  gap:6px;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  font-variant-numeric:tabular-nums;
}
#icerik:has(.fotogaleribilgi) .fotogaleribilgi > ul li b{
  font-family:var(--font-baslik) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted) !important;
}
#icerik:has(.fotogaleribilgi) .fotogaleribilgi a{
  color:var(--brand) !important;
  text-decoration:none !important;
  font-weight:700 !important;
}
#icerik:has(.fotogaleribilgi) .fotogaleribilgi a:hover{
  text-decoration:underline !important;
  text-underline-offset:2px;
}
/* bilgi şeridinden sonraki üç adet <br /> artık gereksiz */
#icerik:has(.fotogaleribilgi) .buyuk-cerceve > br{
  display:none !important;
}
/* galeri açıklaması: .buyuk-cerceve'nin ilk .haber çocuğu (bu içerikte boş).
   display:flex sayesinde yalnız boşluk içerdiğinde 0 yükseklikte kalır,
   gerçek açıklama girildiğinde normal metin olarak görünür. */
#icerik:has(.fotogaleribilgi) .buyuk-cerceve > .haber{
  display:flex !important;
  flex-wrap:wrap;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:16.5px !important;
  line-height:1.7 !important;
  color:var(--body) !important;
}
#icerik:has(.fotogaleribilgi) .ayrac{
  border-top:1px solid var(--line) !important;
  margin:0 0 16px !important;
}

/* PAYLASIM SATIRI (.foto-paylas)
   Eskiden: <table width="300"> icinde tema/facebook.gif + fb-like iframe +
   twitter widget + Google+ (2019'da kapandi) + http:// AddThis (HTTPS sayfada
   karisik icerik olarak engelleniyordu) + null element uzerinde setAttribute
   cagiran, konsola hata basan bir betik. Tamami gallery-photos.php'de temiz
   paylasim baglantilariyla degistirildi; asagisi onun bicimi.               */
#icerik-orta .foto-paylas{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  padding:12px 14px;
  background:var(--wash);
  border:1px solid var(--line);
  border-radius:var(--yuvarlak);
}
#icerik-orta .foto-paylas-etiket{
  margin-right:4px;
  font-family:var(--font-baslik);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
#icerik-orta .foto-paylas .fp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  font-family:var(--font-baslik);
  font-size:12.5px;
  font-weight:700;
  line-height:1;
  color:#fff !important;
  text-decoration:none !important;
  border:0;
  border-radius:100px;
  transition:filter .18s ease, transform .18s ease;
}
#icerik-orta .foto-paylas .fp i{ font-size:14px; line-height:1; }
#icerik-orta .foto-paylas .fp:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
  color:#fff !important;
  text-decoration:none !important;
}
#icerik-orta .foto-paylas .fp-fb{ background:#1877F2; }
#icerik-orta .foto-paylas .fp-tw{ background:#0F1419; }
#icerik-orta .foto-paylas .fp-wa{ background:#25D366; }
#icerik-orta .foto-paylas .fp-tg{ background:#229ED9; }
#icerik-orta .foto-paylas .fp-ml{ background:var(--navy); }
/* tag-detail.php'de paylasim tablosunda tarih hucresi de vardi; korundu */
#icerik-orta .foto-paylas-tarih{
  margin-left:auto;
  font-family:var(--font-govde);
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
}
#icerik-orta .foto-paylas-tarih b{
  font-family:var(--font-baslik);
  font-size:11px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}

/* SAYFALAMA: ayni serit fotografin hem ustunde hem altinda iki kez basiliyordu
   (sorgu_genel2 iki kez cagriliyor). Ustteki gizlendi; alttaki tek gezinti. */
#icerik:has(.fotogaleribilgi) div[align="center"] > .pagination:first-of-type{
  display:none !important;
}
/* "Onceki" / "Sonraki" dugmelerine yon oku. Yalnizca bu sayfa tipinde:
   ilk <li> sayfa 1'de aktif sayfadir (<a> icermez), 2+ sayfalarda "Onceki"dir;
   son <li> son sayfada aktiftir, digerlerinde "Sonraki". Bu yuzden secicilerde
   "> a" var — yanlis ogeye ok koymaz.                                       */
#icerik:has(.fotogaleribilgi) .pagination li:first-child > a > span::before{
  content:"\f104";
  font-family:FontAwesome;
  margin-right:8px;
  font-size:12px;
}
#icerik:has(.fotogaleribilgi) .pagination li:last-child > a > span::after{
  content:"\f105";
  font-family:FontAwesome;
  margin-left:8px;
  font-size:12px;
}
@media (max-width:760px){
  #icerik-orta .foto-paylas .fp span{ display:none; }
  #icerik-orta .foto-paylas .fp{ padding:11px 13px; }
  #icerik-orta .foto-paylas .fp i{ font-size:15px; }
  #icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a{
    height:clamp(240px,52vh,420px);
  }
  #icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a::before{
    display:none;
  }
}

/* --------------------------------------------------------------------------
   6.5  FOTOĞRAF SAHNESİ
   HTML: .buyuk-cerceve > div[align="center"]  (içinde .pagination, <a><img>,
   .haber alt yazı, ikinci .pagination). Hemen önünde bir de BOŞ
   div[align="center"] var.
   Görselde inline style="margin-top:-20px;max-height:800px;border:2px solid #333"
   -> negatif marj + max-width olmadığı için dar ekranda yatay taşma.
   -------------------------------------------------------------------------- */
#icerik:has(.fotogaleribilgi) .buyuk-cerceve > div[align="center"]:not(:has(.pagination)){
  display:none !important;                 /* boş merkez div */
}
#icerik:has(.fotogaleribilgi) .buyuk-cerceve > div[align="center"]:has(> .pagination){
  display:flex !important;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  margin:0 !important;
  padding:0 !important;
}
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > br{
  display:none !important;                 /* <br /><br /> aralıkları gap'e devrettik */
}
/* fotoğrafın çerçevesi: her en/boy oranını (dikey/yatay) düzgün karşılar */
/* Fotograf artik koyu bir "goruntuleyici" sahnesinde duruyor: dikey ve yatay
   fotograflar ayni yukseklikte, kirpilmadan (object-fit:contain) oturur; boylece
   sayfalar arasi gecerken sayfa zipzip yer degistirmez.
   Sahnenin kendisi <a> — bir sonraki fotografa gider (PHP'den geliyor).       */
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a{
  position:relative !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  height:clamp(300px,64vh,680px);
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  background:radial-gradient(125% 95% at 50% 0%,
              #17283C 0%, #0C1622 58%, #070C13 100%) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:var(--yuvarlak);
  box-shadow:0 18px 46px -24px rgba(8,14,20,.8);
  cursor:pointer;
  transition:box-shadow .22s ease;
}
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a:hover{
  box-shadow:0 22px 54px -22px rgba(8,14,20,.9);
}
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a > img{
  display:block !important;
  float:none !important;
  width:auto !important;
  height:auto !important;
  max-width:calc(100% - 30px) !important;  /* dar ekranda yatay tasmayi bitirir */
  max-height:calc(100% - 30px) !important; /* inline max-height:800px yerine */
  margin:0 !important;                     /* inline margin-top:-20px sifirlandi */
  border:0 !important;                     /* inline 2px solid #333 */
  border-radius:4px;
  object-fit:contain;
  aspect-ratio:auto !important;
  box-shadow:0 12px 32px -14px rgba(0,0,0,.7);
  transition:transform .35s ease;
}
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a:hover > img{
  transform:scale(1.012);
}
/* sahne uzeri: sag kenarda "sonraki" dugmesi (PHP'deki bag zaten sonrakine gider) */
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a::after{
  content:"\f105";
  font-family:FontAwesome;
  position:absolute;
  top:50%; right:16px;
  transform:translateY(-50%);
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1; color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
  opacity:1;
  transition:opacity .2s ease, background-color .2s ease, border-color .2s ease;
}
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a:hover::after{
  opacity:1;
  background:var(--brand);
  border-color:var(--brand);
}
/* sol altta ipucu serit */
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a::before{
  content:"Sonraki fotoğraf için tıklayın";
  position:absolute;
  left:16px; bottom:16px;
  padding:6px 12px;
  font-family:var(--font-govde);
  font-size:12px;
  line-height:1;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.3);
  border-radius:100px;
  pointer-events:none;
}
/* fotograf sayaci — PHP'den gelen <span class="foto-sayac">3 / 7</span> */
#icerik:has(.fotogaleribilgi) .foto-sayac{
  position:absolute;
  top:16px; right:16px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  padding:7px 13px;
  font-family:var(--font-baslik);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);
  border-radius:100px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
/* fotoğraf alt yazısı (.haber, inline margin-left:10px) */
#icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > .haber{
  margin:0 !important;
  padding:0 !important;
  text-align:center;
  font-family:var(--font-govde) !important;
  font-size:14.5px !important;
  line-height:1.6 !important;
  color:var(--muted) !important;
}
/* Boş, kırık kapanışlı (<div class="haberbaslik">...</ul></div>) hata kutusu:
   inline margin:10px + color:#F00 ile boşken bile yer kaplıyordu.
   display:flex, yalnız boşluk içeren gövdeyi 0 yüksekliğe indirir; gerçek bir
   uyarı metni yazıldığında görünür kalır. */
#icerik:has(.fotogaleribilgi) .haberbaslik{
  display:flex !important;
  flex-wrap:wrap;
  gap:6px;
  margin:0 !important;
  padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--brand) !important;
}
#icerik:has(.fotogaleribilgi) .haberbaslik ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* --------------------------------------------------------------------------
   6.6  SAYFALAMA (.pagination)
   Hiçbir CSS dosyasında TANIMSIZ: tarayıcı varsayılanıyla madde imli, alt alta
   dizili bir <ul> olarak çıkıyordu. (diger.css'teki *{margin:0;padding:0}
   girintiyi de sıfırladığı için imler sola taşıyordu.)
   Aynı bileşen video-galeri sayfasında da kullanılıyor; kural bilinçli olarak
   sayfa tipine bağlanmadı.
   Yapı: .pagination > ul > li.active > span   ve   li > a > span
   -------------------------------------------------------------------------- */
.pagination{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
}
.pagination ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
}
.pagination li{
  float:none !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  list-style:none !important;
}
/* pasif sayfa düğmesi */
.pagination li > a{
  display:block !important;
  min-width:38px;
  box-sizing:border-box;
  padding:8px 12px !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak);
  background:var(--bg) !important;
  color:var(--body) !important;
  font-family:var(--font-govde) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  text-align:center !important;
  text-decoration:none !important;
  font-variant-numeric:tabular-nums;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.pagination li > a:hover{
  background:var(--wash) !important;
  border-color:var(--muted) !important;
  color:var(--ink) !important;
}
/* aktif sayfa: <li class="active"><span>1</span></li> — <a> YOK */
.pagination li.active > span{
  display:block !important;
  min-width:38px;
  box-sizing:border-box;
  padding:8px 12px !important;
  border:1px solid var(--brand);
  border-radius:var(--yuvarlak);
  background:var(--brand);
  color:#fff !important;
  font-family:var(--font-govde) !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  text-align:center !important;
  font-variant-numeric:tabular-nums;
  cursor:default;
}
/* <a> içindeki <span> ikinci bir kutu oluşturmasın */
.pagination li > a > span{
  display:inline !important;
  padding:0 !important;
  margin:0 !important;
  background:none !important;
  border:0 !important;
  color:inherit !important;
  font:inherit !important;
}

/* --------------------------------------------------------------------------
   6.7  FANCYBOX / LIGHTBOX GÜVENLİĞİ
   fotolar.html jquery.fancybox 2.1.3, fotogaleri.html fancybox 1.3.1 +
   lightbox.js yüklüyor. HTML'de tetikleyici sınıf/rel YOK (bağlantılar normal
   sayfa geçişi), ancak hbrpktlr.js çalışma anında bağlayabilir. Bu yüzden
   hiçbir bağlantı gizlenmedi / pointer-events kapatılmadı; ayrıca katman
   içine klonlanan görsellerin yukarıdaki aspect-ratio + object-fit
   kurallarından etkilenmemesi için sıfırlama bırakıyoruz.
   -------------------------------------------------------------------------- */
.fancybox-wrap img,
.fancybox-image,
.fancybox-inner img,
#lightbox img,
#imageContainer img{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  object-fit:fill !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  margin:0 !important;
}
.fancybox-wrap,
.fancybox-overlay{
  z-index:99999 !important;
}

/* --------------------------------------------------------------------------
   6.8  KIRILIMLAR
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .buyuk-cerceve:has(> .galeri-kt-kutular){
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:18px 14px;
  }
}
@media (max-width:640px){
  .buyuk-cerceve:has(> .galeri-kt-kutular){
    grid-template-columns:repeat(2,minmax(0,1fr));   /* telefonda 2 sütun */
    gap:14px 12px;
  }
  .buyuk-cerceve .galeri-kt-kutular .galkat{
    padding:26px 9px 9px !important;
  }
  .buyuk-cerceve .galeri-kt-kutular .galkat li a{
    font-size:12.5px !important;
  }
  #icerik:has(.fotogaleribilgi) .fotogaleribilgi > ul{
    gap:8px 16px;
    padding:11px 13px !important;
  }
  #icerik:has(.fotogaleribilgi) .fotogaleribilgi > ul li{
    font-size:13.5px !important;
  }
  #icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a{
    padding:8px !important;
    min-height:0;
  }
  #icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a > img{
    max-height:62vh !important;
  }
  .pagination li > a,
  .pagination li.active > span{
    min-width:34px;
    padding:7px 10px !important;
    font-size:13px !important;
  }
}
@media (max-width:400px){
  .buyuk-cerceve:has(> .galeri-kt-kutular){
    grid-template-columns:minmax(0,1fr);             /* tek sütun */
  }
}


/* ======================= VIDEO-GALERI ======================= */

/* ==========================================================================
   VIDEO GALERI  (/video-galeri/  ve  /video-galeri/kategori/.../)
   --------------------------------------------------------------------------
   DOM (dogrulandi — sayfalar/videogaleri.html 162-410):
     .haber-detay
       > .ic-sayfalar-baslik > h1                       "VIDEOLAR"
       > .buyuk-cerceve
           > .dikey-haberler  x21   [inline: margin-top:10px; height:150px]
               > a > .video-icon + img.img-rounded [width=186 height=96]
               > .baslik > a
               > .katicon  [inline: margin-top:-48px; margin-left:3px; color:#49d6ff]
                   > ul > li.active   "Izlenme:2217"
       > .clearfix
       > .pagination > ul > li(.active) > (a >) span

   KAPSAM: .video-icon SADECE bu sayfa tipinde geciyor (diger 9 sayfada 0 kez),
   bu yuzden tum kart kurallari :has(.video-icon) ile kendi kendini
   sinirliyor — kategori/yazar/foto sayfalarindaki .dikey-haberler etkilenmez.

   DEGERLENDIRME (madde 1): modern.css'in ana sayfa icin verdigi .dikey-haberler
   kart gorunumu (beyaz kutu, 1px cerceve, --yuvarlak, --golge, 16:9 gorsel,
   hover'da 3px kalkma) bu sayfaya DA uygun; sifirdan yazmiyoruz, uzerine
   yalniz videoya ozgu farklari koyuyoruz:
     a) izgara 3 degil 4 sutun  — kucuk resimler 186px dogal genislikte;
        3 sutunda hucre ~285px olup gorsel bulaniyor, 4 sutunda ~209px.
     b) .katicon burada kategori rozeti DEGIL izlenme sayaci — gorselin
        ustunden alinip kart dibinde ust bilgi satirina cevriliyor.
     c) baslik 16.5px yerine 15px — dar hucrede 2 satira sigsin.
   ========================================================================== */

/* ---------- 1. IZGARA: VIDEOYA OZEL 4 SUTUN ---------- */
/* modern.css: .buyuk-cerceve:has(> .dikey-haberler){repeat(3,...)} = (0,2,0)
   asagidaki selektor (0,3,0) — ozgulluk yarisini kazanir.                 */
.buyuk-cerceve:has(> .dikey-haberler .video-icon){
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px 18px !important;
  align-items:stretch !important;
  margin:12px 0 0 !important;
}

/* ---------- 2. VIDEO KARTI ---------- */
.dikey-haberler:has(.video-icon){
  /* inline height:150px + eski height:220px kirpmasini kesin olarak kapat */
  height:auto !important;
  min-height:0 !important;
  /* inline margin-top:10px izgara gap'ini bozuyordu */
  margin:0 !important;
  padding:0 0 13px !important;
  float:none !important;
  width:auto !important;
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden;
}

/* Kucuk resim kabi = konumlandirma kabi.
   ONEMLI: onceki denemede rozet .dikey-haberler'e (kartin TAMAMINA) gore
   %38'e konumlanmisti; kart yuksekligi baslik satir sayisiyla degistigi icin
   rozet kayiyordu. Artik referans dogrudan gorseli saran <a>.
   NOT: "> a" yalnizca gorsel bagini secer, .baslik icindeki <a>'yi secmez. */
.dikey-haberler:has(.video-icon) > a{
  position:relative !important;
  display:block !important;
  /* gorselin alt bosluğu img'den alinip buraya tasindi ki <a>'nin yuksekligi
     tam olarak gorselin yuksekligine esit olsun ve %50 gercek merkez olsun */
  margin:0 0 11px !important;
  padding:0 !important;
  /* img sonrasindaki bosluk metin dugumu satir kutusu acmasin */
  font-size:0 !important;
  line-height:0 !important;
  background:#0B1117;               /* gorsel yuklenene kadar koyu zemin */
}
.dikey-haberler:has(.video-icon) > a img,
.dikey-haberler:has(.video-icon) > a img:hover{
  display:block !important;
  float:none !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  object-fit:cover;
  /* inline width="186" height="96" ve eski 205x100 + 1px cerceve */
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;       /* koseleri kartin kendi overflow'u kessin */
  transition:opacity .25s ease, transform .35s ease;
}
.dikey-haberler:has(.video-icon):hover > a img{
  opacity:1 !important;
  transform:scale(1.035);
}

/* ---------- 3. OYNAT ROZETI (madde 2) ---------- */
/* eski tema: PNG arka plan + margin-top:40px/-80px/left:95px sabit hesap */
.dikey-haberler:has(.video-icon) .video-icon{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  width:50px !important;
  height:50px !important;
  margin:0 !important;
  padding:0 !important;
  background-color:rgba(8,14,20,.52) !important;
  background-image:none !important;   /* white_video_play_btn.png devre disi */
  border:2px solid rgba(255,255,255,.92) !important;
  border-radius:50% !important;
  box-shadow:0 2px 12px rgba(0,0,0,.38);
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:visible !important;
  z-index:3;
  pointer-events:none;                /* tiklama alttaki <a>'ya gecsin */
  -webkit-backdrop-filter:saturate(1.3) blur(2px);
  backdrop-filter:saturate(1.3) blur(2px);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.dikey-haberler:has(.video-icon) .video-icon::before{
  content:"\f04b";                    /* FontAwesome 4.7 — fa-play */
  font-family:FontAwesome !important;
  font-size:17px !important;
  line-height:1 !important;
  color:#fff !important;
  margin-left:3px;                    /* ucgenin optik merkez duzeltmesi */
}
.dikey-haberler:has(.video-icon):hover .video-icon{
  background-color:var(--brand) !important;
  border-color:#fff !important;
  transform:translate(-50%,-50%) scale(1.07) !important;
}

/* ---------- 4. BASLIK ---------- */
.dikey-haberler:has(.video-icon) .baslik{
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  padding:0 14px !important;
  margin:0 0 9px !important;
  font-weight:700 !important;
}
.dikey-haberler:has(.video-icon) .baslik a{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
  font-family:var(--font-baslik) !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.32 !important;
  height:calc(2 * 1.32em) !important; /* 4 sutunda tum kartlar ayni yukseklikte */
  color:var(--ink) !important;
  text-decoration:none !important;
}
.dikey-haberler:has(.video-icon) .baslik a:hover{
  color:var(--brand) !important;
  text-decoration:none !important;    /* eski tema hover'da underline veriyordu */
}

/* ---------- 5. UST BILGI SATIRI: IZLENME (madde 3) ---------- */
/* Bu sayfada .katicon bir kategori LINKI degil, duz "Izlenme:NNNN" metni.
   modern.css onu kategori rozeti sanip gorselin sol ustune mutlak
   konumluyor; li.active'in arka plani da kaldirildigi icin metin, HTML'deki
   inline color:#49d6ff ile birlikte gorsel uzerinde okunmaz kaliyordu.
   Cozum: akisa geri al, kart dibinde goz ikonlu meta satiri yap.
   (Sayfada video SURESI alani yok; gelirse ayni satirda ikinci <li> olarak
   otomatik yan yana dizilir — asagidaki kural li'lere geneldir.)          */
.dikey-haberler:has(.video-icon) .katicon{
  position:static !important;         /* mutlak konumu birak */
  float:none !important;
  clear:none !important;
  overflow:visible !important;
  width:auto !important;
  height:auto !important;
  /* inline margin-top:-48px / margin-left:3px sifirlanir,
     margin-top:auto kart dibine yaslar (tum kartlar ayni hizada biter) */
  margin:auto 0 0 !important;
  padding:14px 14px 0 !important;
  /* inline color:#49d6ff — yazi stili !important ile ezilir */
  color:var(--muted) !important;
  z-index:auto !important;
}
.dikey-haberler:has(.video-icon) .katicon ul{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 12px;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.dikey-haberler:has(.video-icon) .katicon li,
.dikey-haberler:has(.video-icon) .katicon li.active,
.dikey-haberler:has(.video-icon) .katicon li.durum{
  /* eski: url(transparent-bg.png) + width:95px + height:100% + negatif marj */
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  display:inline-flex !important;
  align-items:center;
  gap:5px;
  text-align:left !important;
  font-family:var(--font-govde) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.005em;
  line-height:1.25 !important;
  color:var(--muted) !important;
  font-variant-numeric:tabular-nums;  /* rakamlar esit genislikte hizalansin */
}
.dikey-haberler:has(.video-icon) .katicon li::before{
  content:"\f06e";                    /* FontAwesome 4.7 — fa-eye */
  font-family:FontAwesome !important;
  font-weight:400 !important;
  font-size:11px !important;
  line-height:1;
  color:var(--muted) !important;
  opacity:.85;
}
/* ileride izlenme metni link olursa da ayni gorunsun */
.dikey-haberler:has(.video-icon) .katicon li a,
.dikey-haberler:has(.video-icon) .katicon li a:hover{
  display:inline !important;
  background:none !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  font:inherit !important;
  letter-spacing:inherit !important;
  text-transform:none !important;
  color:inherit !important;
  text-decoration:none !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* ---------- 6. KATEGORI SEKMELERI / FILTRE (madde 4) ---------- */
/* NOT: Bu sayfanin ICERIK alaninda sekme ya da filtre YOK. Video kategorileri
   (.video-kategoriler) sag blokta duruyor ve gorev tanimi geregi dokunulmuyor.
   Var olmayan bir sekme cubugu icin sinif uydurulmadi.
   Kategori sayfasinda (/video-galeri/kategori/spor/2/) degisen tek sey
   .ic-sayfalar-baslik metnidir; onun stili modern.css'te zaten var.        */

/* ---------- 7. SAYFALAMA (madde 6) ---------- */
/* .pagination HICBIR CSS dosyasinda tanimli degil (eski tema .sayfalama
   adini kullaniyor) — stilsiz, dikey bir liste olarak dokuluyordu.
   DOM: ul > li.active > span   |   li > a > span
   Kapsam #icerik-orta: ayni bilesen foto-galeri resim sayfasinda da var,
   iki yerde de ayni gorunsun diye bilerek ortak birakildi.                 */
#icerik-orta .pagination{
  clear:both;
  float:none !important;
  width:auto !important;
  height:auto !important;
  margin:26px 0 6px !important;
  padding:16px 0 0 !important;
  border-top:1px solid var(--line-soft);
  background:transparent !important;
}
#icerik-orta .pagination ul{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
#icerik-orta .pagination li{
  float:none !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  font-size:inherit !important;
}
/* tiklanabilir kutu = <a>; gecerli sayfa = li.active > span (link degil) */
#icerik-orta .pagination li > a,
#icerik-orta .pagination li > span{
  display:flex !important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:36px;
  height:36px;
  padding:0 11px !important;
  margin:0 !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  font-family:var(--font-govde) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  line-height:1 !important;
  color:var(--body) !important;
  text-decoration:none !important;
  font-variant-numeric:tabular-nums;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
/* <a> icindeki <span> yalnizca metin tasisin, ikinci bir kutu olusturmasin */
#icerik-orta .pagination li > a > span{
  display:inline !important;
  background:none !important;
  border:0 !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  font:inherit !important;
  color:inherit !important;
  line-height:inherit !important;
}
#icerik-orta .pagination li > a:hover{
  background:var(--wash) !important;
  border-color:var(--navy) !important;
  color:var(--navy) !important;
}
#icerik-orta .pagination li.active > span{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
  cursor:default;
}
/* "Onceki / Sonraki" gibi metin butonlari biraz daha genis dursun */
#icerik-orta .pagination li > a[href*="sayfa"],
#icerik-orta .pagination li > a[href*="resim"]{ padding:0 12px !important; }

/* .clearfix bos bir div; izgaradan sonra fazladan bosluk acmasin */
#icerik-orta .clearfix{ clear:both; height:0; font-size:0; line-height:0; }


/* ==========================================================================
   VIDEO IZLEME SAYFASI  (/video-detay/.../ID/)          (madde 5)
   --------------------------------------------------------------------------
   VARSAYIM UYARISI: bu sayfanin HTML'i elimizde yok. Asagidaki kurallar
   UYDURULMUS sinif kullanmiyor; hepsi eski temada GERCEKTEN tanimli
   selektorlerdir:
       .videoScreen        -> diger.css:286
       .videoizlenme       -> tema.css.php.src:449-452
       .dikey-videolar     -> tema.css.php.src:386-391
       .videoGalSide img   -> diger.css:292
       span.playimg        -> diger.css (.vp / span.playimg)
   Sayfada bu sinif yoksa kural sessizce etkisiz kalir; yanlis sayfayi
   bozma riski yok.
   EN KRITIK MADDE: gomulu oynaticinin 16:9 oraniyla akiskan olmasi.
   ========================================================================== */

/* --- 8a. Oynatici kabi: eski float:left + width:638px + 15px siyah dolgu --- */
#icerik-orta .videoScreen{
  float:none !important;
  clear:both;
  width:auto !important;
  max-width:none !important;
  height:auto !important;
  margin:14px 0 18px !important;
  padding:0 !important;                /* siyah 15px cerceve kaldirildi */
  border:0 !important;
  border-radius:var(--yuvarlak) !important;
  background:#0B1117 !important;
  box-shadow:var(--golge);
  overflow:hidden !important;
  text-align:left !important;
  line-height:0 !important;            /* iframe altinda hayalet satir olmasin */
  font-size:0 !important;
}

/* --- 8b. 16:9 AKISKAN GOMULU OYNATICI --- */
/* Hem .videoScreen icindeki her tur gomu, hem de metne yapistirilmis
   YouTube/Vimeo/Dailymotion embed kodlari (sabit width/height nitelikleri
   ve inline style ile gelirler) ayni orana zorlanir.                       */
#icerik-orta .videoScreen iframe,
#icerik-orta .videoScreen embed,
#icerik-orta .videoScreen object,
#icerik-orta .videoScreen video,
/* 21.08.2026 DUZELTME — buradaki iframe[src*="video"] COK GENISTI.
   Facebook eklenti iframe'lerinin src'si sayfanin KENDI adresini parametre
   olarak tasiyor; video sayfalarinin adresinde "video-detay" gectigi icin
   bu selektor FB yorum kutusuna da uyuyor, onu 16:9 + siyah zeminli bir
   oynatici sanip footer'in ustunde 896x504'luk SIYAH BIR BANT yapiyordu.
   (Haber sayfalarinda adres "video" icermedigi icin hata yalnizca video
   detay sayfalarinda goruluyordu.) Genis eslesme kaldirildi; kalan host
   eslesmelerine de facebook muafiyeti eklendi.                            */
#icerik-orta iframe[src*="youtube"]:not([src*="facebook"]),
#icerik-orta iframe[src*="youtu.be"]:not([src*="facebook"]),
#icerik-orta iframe[src*="youtube-nocookie"]:not([src*="facebook"]),
#icerik-orta iframe[src*="vimeo"]:not([src*="facebook"]),
#icerik-orta iframe[src*="dailymotion"]:not([src*="facebook"]),
#icerik-orta embed[src*="youtube"],
#icerik-orta object[data*="youtube"]{
  display:block !important;
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;        /* oran her ekranda korunur */
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#000;
}

/* --- 8c. Izleme sayfasi baslik + izlenme sayaci --- */
/* eski .videoizlenme: float:right + margin-top:-162px + margin-right:-19px  */
#icerik-orta .videoizlenme{
  float:none !important;
  clear:none !important;
  position:static !important;
  overflow:visible !important;
  width:auto !important;
  height:auto !important;
  margin:0 0 16px !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  list-style:none !important;
}
#icerik-orta .videoizlenme li,
#icerik-orta .videoizlenme li.active,
#icerik-orta .videoizlenme li.durum{
  float:none !important;
  display:inline-flex !important;
  align-items:center;
  gap:5px;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  color:var(--muted) !important;
  font-variant-numeric:tabular-nums;
}
#icerik-orta .videoizlenme li::before{
  content:"\f06e";                     /* fa-eye */
  font-family:FontAwesome !important;
  font-weight:400 !important;
  font-size:11px !important;
  opacity:.85;
}
#icerik-orta .videoizlenme li a,
#icerik-orta .videoizlenme li.durum a{
  float:none !important;
  position:static !important;
  clear:none !important;
  overflow:visible !important;
  display:inline !important;
  width:auto !important;
  margin:0 !important;                 /* eski margin-top:-30px!important */
  padding:0 !important;
  color:var(--muted) !important;
  text-decoration:none !important;
}
#icerik-orta .videoizlenme li a:hover{ color:var(--brand) !important; }

/* --- 8d. Ilgili / diger videolar seridi (.dikey-videolar) --- */
/* eski: float:left; width:200px; height:190px; img 205x100 + kirmizi cerceve */
.buyuk-cerceve:has(> .dikey-videolar){
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:20px 16px !important;
  align-items:stretch;
  margin:10px 0 0 !important;
}
#icerik-orta .dikey-videolar{
  float:none !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 0 13px !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:var(--golge);
  overflow:hidden;
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  font-family:var(--font-govde) !important;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
#icerik-orta .dikey-videolar:hover{
  box-shadow:var(--golge-hover);
  transform:translateY(-3px);
  border-color:rgba(13,36,64,.14) !important;
}
#icerik-orta .dikey-videolar > a{
  position:relative !important;
  display:block !important;
  margin:0 0 11px !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:0 !important;
  background:#0B1117;
}
#icerik-orta .dikey-videolar img,
#icerik-orta .dikey-videolar img:hover{
  display:block !important;
  float:none !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  object-fit:cover;
  border:0 !important;                 /* eski 1px #ff0000 cerceve */
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
}
#icerik-orta .dikey-videolar .baslik{
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  margin:0 0 6px !important;
  padding:0 14px !important;
  font-weight:700 !important;
}
#icerik-orta .dikey-videolar .baslik a{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
  font-family:var(--font-baslik) !important;
  font-size:14.5px !important;
  font-weight:700 !important;
  line-height:1.32 !important;
  height:calc(2 * 1.32em) !important;
  color:var(--ink) !important;
  text-decoration:none !important;
}
#icerik-orta .dikey-videolar .baslik a:hover{
  color:var(--brand) !important;
  text-decoration:none !important;
}
#icerik-orta .dikey-videolar .ozet{
  width:auto !important;
  height:auto !important;
  max-height:none !important;          /* eski height:85px kirpiyordu */
  margin:0 !important;
  padding:0 14px !important;
  font-size:13.5px !important;
  line-height:1.5 !important;
  color:var(--muted) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
}
#icerik-orta .dikey-videolar span{
  float:none !important;
  margin:0 !important;
}

/* --- 8e. Yan sutundaki video kucuk resmi: sabit 124x74'u serbest birak --- */
#icerik-orta .videoGalSide img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--yuvarlak);
}

/* --- 8f. Eski PNG oynat ikonu (span.playimg) — FA rozetine cevir --- */
#icerik-orta a.vp:has(> span.playimg){ position:relative !important; display:block !important; }
#icerik-orta span.playimg{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:46px !important;
  height:46px !important;
  margin:0 !important;
  padding:0 !important;
  background-color:rgba(8,14,20,.52) !important;
  background-image:none !important;    /* images/play.png devre disi */
  border:2px solid rgba(255,255,255,.92) !important;
  border-radius:50% !important;
  text-indent:0 !important;            /* eski -9999px */
  font-size:0 !important;
  line-height:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  overflow:visible !important;
  z-index:5 !important;
  pointer-events:none;
}
#icerik-orta span.playimg::before{
  content:"\f04b";
  font-family:FontAwesome !important;
  font-size:15px !important;
  line-height:1 !important;
  color:#fff !important;
  margin-left:3px;
}


/* ==========================================================================
   KIRILIMLAR
   modern.css kirilimlarda AYNI selektoru tekrar ettigi icin (1120px'te 2,
   620px'te 1 sutun) burada da ayni ozgullukle tekrar edilmeli.
   Video kucuk resimleri 186px dogal genislikte oldugundan mobilde tek
   sutuna DUSURMUYORUZ — tam genislikte cok buyutulup bulaniyorlar.
   ========================================================================== */
@media (max-width:1320px){
  .buyuk-cerceve:has(> .dikey-haberler .video-icon){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .buyuk-cerceve:has(> .dikey-videolar){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (max-width:1120px){
  .buyuk-cerceve:has(> .dikey-haberler .video-icon){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:20px 16px !important;
  }
}
@media (max-width:900px){
  /* #icerik tek sutuna dustu, icerik alani genisledi -> yine 4'lu sigar */
  .buyuk-cerceve:has(> .dikey-haberler .video-icon){
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .buyuk-cerceve:has(> .dikey-videolar){
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media (max-width:760px){
  .buyuk-cerceve:has(> .dikey-haberler .video-icon),
  .buyuk-cerceve:has(> .dikey-videolar){
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px 12px !important;
  }
}
@media (max-width:620px){
  /* modern.css burada tek sutuna dusuruyor; videoda 2 sutun daha dogru */
  .buyuk-cerceve:has(> .dikey-haberler .video-icon),
  .buyuk-cerceve:has(> .dikey-videolar){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px 12px !important;
  }
  .dikey-haberler:has(.video-icon) .baslik,
  #icerik-orta .dikey-videolar .baslik{ padding:0 11px !important; }
  .dikey-haberler:has(.video-icon) .baslik a,
  #icerik-orta .dikey-videolar .baslik a{ font-size:13.5px !important; }
  .dikey-haberler:has(.video-icon) .katicon{ padding:11px 11px 0 !important; }
  .dikey-haberler:has(.video-icon) .katicon li{ font-size:11.5px !important; }
  /* kucuk kartta 50px rozet gorseli boguyor */
  .dikey-haberler:has(.video-icon) .video-icon{
    width:38px !important; height:38px !important; border-width:1.5px !important;
  }
  .dikey-haberler:has(.video-icon) .video-icon::before{ font-size:13px !important; }
  #icerik-orta .pagination li > a,
  #icerik-orta .pagination li > span{
    min-width:32px; height:32px; padding:0 9px !important; font-size:13px !important;
  }
  #icerik-orta .videoScreen{ border-radius:4px !important; margin:10px 0 14px !important; }
}
@media (max-width:400px){
  .buyuk-cerceve:has(> .dikey-haberler .video-icon),
  .buyuk-cerceve:has(> .dikey-videolar){
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* dokunmatik cihazlarda hover efektleri takilmasin */
@media (hover:none){
  .dikey-haberler:has(.video-icon):hover > a img{ transform:none; }
  .dikey-haberler:has(.video-icon):hover .video-icon{
    transform:translate(-50%,-50%) !important;
  }
}


/* ======================= YAZARLAR ======================= */

/* ==========================================================================
   8. KÖŞE YAZARLARI  (kose-yazarlari / yazarlar.html)
   Kapsam: yalnızca .haber-detay içindeki .yazar-kt-kutular kutuları.
   Sağ bloktaki .yazarlar / .yazar-haber widget'ına BİLEREK dokunulmuyor.

   HTML'deki gerçek sıra (değiştiremiyoruz):
     .yazar-kt-kutular
        > a > img                (portre, width=80 height=100 nitelikli)
        > div[style]             (SINIFSIZ — son yazı başlığı, inline 14px)
        > .yazkat > ul > li.active > .baslik > a > b   (YAZAR ADI)
   Yani ad, DOM'da en sonda. Eski tema bunu margin-top:-60px ile yukarı
   çekiyordu; biz grid-template-areas ile görsel sırayı kuruyoruz.
   ========================================================================== */

/* ---------- 8.1 Kart ızgarası ----------
   .buyuk-cerceve çok görevli bir kap; ızgarayı yalnızca içinde yazar kutusu
   varken açıyoruz ki diğer iç sayfalar etkilenmesin (modern.css'teki
   :has(> .dikey-haberler) kalıbının aynısı).                                */
.buyuk-cerceve:has(> .yazar-kt-kutular){
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:16px;
  align-items:stretch;
  margin:4px 0 10px !important;
}
/* eski float temizleyicileri ızgarada boş hücre üretmesin */
.buyuk-cerceve:has(> .yazar-kt-kutular) > .temizle,
.buyuk-cerceve:has(> .yazar-kt-kutular) > br{ display:none !important; }

/* ---------- 8.2 Yazar kartı ----------
   float:left + width:310px + margin yerine iki sütunlu, iki satırlı alan
   şeması: solda portre (iki satırı da kaplar), sağda ÖNCE ad SONRA son yazı. */
.haber-detay .yazar-kt-kutular{
  float:none !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:14px !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;   /* liste ayracı kalıntısını ez */
  border-radius:var(--yuvarlak) !important;
  box-shadow:var(--golge);
  text-align:left !important;

  display:grid !important;
  grid-template-columns:92px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "foto ad"
    "foto yazi";
  column-gap:14px;
  row-gap:7px;
  align-content:start;
  position:relative;                 /* içeride absolute kalan bir şey olursa karta bağlansın */
  overflow:hidden;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.haber-detay .yazar-kt-kutular:hover{
  border-color:#D6DCE3 !important;
  box-shadow:var(--golge-hover);
  transform:translateY(-2px);
}
/* kartın soluna ince marka şeridi — kutular birbirinden ayrışsın */
.haber-detay .yazar-kt-kutular::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--brand);
  opacity:0; transition:opacity .18s ease;
}
.haber-detay .yazar-kt-kutular:hover::before{ opacity:1; }

/* ---------- 8.3 Portre ----------
   80x100 sabit ölçü ve HTML nitelikleri yerine 4/5 sabit oran + object-fit.  */
.haber-detay .yazar-kt-kutular > a{
  grid-area:foto;
  display:block !important;
  float:none !important;
  width:100% !important;
  margin:0 !important; padding:0 !important;
  border-radius:var(--yuvarlak);
  overflow:hidden;
  background:var(--wash);
  line-height:0;
}
.haber-detay .yazar-kt-kutular img,
.haber-detay .yazar-kt-kutular img:hover{
  display:block !important;
  float:none !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 18%;           /* portrelerde yüz üst tarafta olur */
  border:0 !important;
  margin:0 !important; padding:0 !important;
  border-radius:0 !important;        /* yuvarlaklık dış kapta */
  box-shadow:none !important;
  background:var(--wash);
  transition:transform .3s ease, filter .3s ease;
  filter:saturate(.92);
}
.haber-detay .yazar-kt-kutular:hover img{
  transform:scale(1.05);
  filter:saturate(1);
}

/* ---------- 8.4 Yazar adı (.yazkat kurtarma) ----------
   Burada iki katmanı birden eziyoruz:
   a) eski tema: float:right / margin-top:-60px / height:40px / overflow:hidden
   b) modern-ic.css'in .galkat,.yazkat rozet kuralı: position:absolute + siyah
      zemin + beyaz büyük harf. .yazkat bu projede SADECE burada geçiyor ve
      kategori rozeti değil, yazar adıdır.                                    */
.haber-detay .yazar-kt-kutular .yazkat{
  grid-area:ad;
  position:static !important;
  float:none !important;
  top:auto !important; left:auto !important; right:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:none !important;
  background-image:none !important;
  z-index:auto !important;
  display:block !important;
}
.haber-detay .yazar-kt-kutular .yazkat ul{
  margin:0 !important; padding:0 !important;
  list-style:none !important;
}
.haber-detay .yazar-kt-kutular .yazkat li,
.haber-detay .yazar-kt-kutular .yazkat li.active,
.haber-detay .yazar-kt-kutular .yazkat li:hover{
  float:none !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  text-align:left !important;
  overflow:visible !important;
  font-family:var(--font-baslik) !important;
  font-size:inherit !important;
  color:inherit !important;
}
/* ikinci li.active tamamen boş (içi boş <a>) — eski temada gri boş şerit bırakıyordu */
.haber-detay .yazar-kt-kutular .yazkat li + li{ display:none !important; }

/* inline style="font-size:14px; margin-top:4px" burada ezilir */
.haber-detay .yazar-kt-kutular .yazkat .baslik{
  font-size:17px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.25 !important;
}
.haber-detay .yazar-kt-kutular .yazkat li a,
.haber-detay .yazar-kt-kutular .yazkat li a b{
  display:inline !important;
  font-family:var(--font-baslik) !important;
  font-size:17px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;      /* rozet kuralının uppercase'i geri alınır */
  color:var(--ink) !important;
  background:none !important;
  padding:0 !important;
  text-decoration:none !important;
  text-shadow:none !important;
  transition:color .16s ease;
}
.haber-detay .yazar-kt-kutular .yazkat li a:hover,
.haber-detay .yazar-kt-kutular .yazkat li a:hover b{
  color:var(--brand) !important;
}
/* adın altına ince ayraç — ad ile son yazı başlığı birbirine karışmasın */
.haber-detay .yazar-kt-kutular .yazkat::after{
  content:"";
  display:block;
  width:26px; height:2px;
  background:var(--brand);
  margin:8px 0 0;
  border-radius:2px;
}

/* ---------- 8.5 Son yazı satırı ----------
   Sınıfsız div; yalnızca .yazkat OLMAYAN doğrudan div çocuğu bu.
   Inline margin-top:5px;font-size:14px !important ile eziliyor.               */
.haber-detay .yazar-kt-kutular > div:not(.yazkat){
  grid-area:yazi;
  margin:0 !important;
  padding:0 !important;
  font-size:14.5px !important;
  font-family:var(--font-govde) !important;
  align-self:start;
}
/* küçük üst etiket: hangi bilgiyi okuduğunu söylesin */
.haber-detay .yazar-kt-kutular > div:not(.yazkat)::before{
  content:"SON YAZISI";
  display:block;
  font-family:var(--font-baslik);
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 4px;
}
.haber-detay .yazar-kt-kutular > div:not(.yazkat) a{
  display:-webkit-box;
  -webkit-line-clamp:3;              /* 3 satırdan sonra ... — kart yükseklikleri oturur */
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--font-govde) !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  line-height:1.4 !important;
  color:var(--body) !important;
  text-decoration:none !important;
  padding:0 !important;
  transition:color .16s ease;
}
.haber-detay .yazar-kt-kutular > div:not(.yazkat) a:hover{
  color:var(--brand) !important;
  text-decoration:none !important;
}

/* ---------- 8.6 Kırılımlar ---------- */
@media (max-width:1024px){
  .buyuk-cerceve:has(> .yazar-kt-kutular){
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:14px;
  }
}
@media (max-width:620px){
  .buyuk-cerceve:has(> .yazar-kt-kutular){
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  .haber-detay .yazar-kt-kutular{
    grid-template-columns:76px minmax(0,1fr);
    padding:12px !important;
    column-gap:12px;
  }
  .haber-detay .yazar-kt-kutular .yazkat .baslik,
  .haber-detay .yazar-kt-kutular .yazkat li a,
  .haber-detay .yazar-kt-kutular .yazkat li a b{ font-size:16px !important; }
  .haber-detay .yazar-kt-kutular > div:not(.yazkat) a{ font-size:14px !important; }
  /* dokunmatikte hover yok — kalıcı gölge oyunu yapma */
  .haber-detay .yazar-kt-kutular:hover{ transform:none; }
}

/* ==========================================================================
   9. YAZAR DETAY SAYFASI (bir yazarın yazı listesi)
   NOT: Bu sayfanın HTML'i elimde yok; aşağıdaki .yazar-resim ve .yazar-yazilar
   sınıfları tema.css.php.src (satır 183 ve 320-322) içinde GERÇEKTEN tanımlı
   olduğu için hedeflendi — uydurma sınıf yok. Sayfa yoksa kural ölü kalır,
   yan etkisi olmaz.
   ========================================================================== */

/* yazar künyesi: eski hâli width:110px + float:left + padding:15px */
.haber-detay .yazar-resim{
  float:none !important;
  width:auto !important;
  padding:14px 16px !important;
  margin:0 0 20px !important;
  background:var(--wash) !important;
  border:1px solid var(--line);
  border-left:3px solid var(--brand);
  border-radius:var(--yuvarlak);
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-baslik) !important;
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--ink) !important;
  line-height:1.3 !important;
}
.haber-detay .yazar-resim img,
.haber-detay .yazar-resim img:hover{
  float:none !important;
  width:64px !important;
  height:64px !important;
  flex:0 0 64px;
  border-radius:50% !important;
  object-fit:cover;
  object-position:50% 18%;
  border:2px solid var(--bg) !important;
  box-shadow:0 0 0 1px var(--line);
  margin:0 !important;
  padding:0 !important;
  background:var(--bg);
}
.haber-detay .yazar-resim a{
  color:var(--ink) !important;
  text-decoration:none !important;
}
.haber-detay .yazar-resim a:hover{ color:var(--brand) !important; }

/* yazarın yazı listesi: arrow.png arka planı yerine ikon, satırlar kart gibi */
.haber-detay .yazar-yazilar{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.haber-detay .yazar-yazilar li{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  border-bottom:1px solid var(--line-soft) !important;
}
.haber-detay .yazar-yazilar li:last-child{ border-bottom:0 !important; }
.haber-detay .yazar-yazilar li a,
.haber-detay .yazar-yazilar li a:hover{
  display:flex !important;
  align-items:baseline;
  gap:10px;
  background-image:none !important;   /* ../tema/arrow.png kalksın */
  background:transparent !important;
  padding:13px 4px !important;
  font-family:var(--font-baslik) !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  transition:color .16s ease, padding-left .16s ease;
}
.haber-detay .yazar-yazilar li a::before{
  content:"\f105";                    /* FontAwesome 4.7 — sağ chevron */
  font-family:FontAwesome;
  font-size:13px;
  font-weight:normal;
  color:var(--brand);
  flex:0 0 auto;
  transition:transform .16s ease;
}
.haber-detay .yazar-yazilar li a:hover{
  color:var(--brand) !important;
  padding-left:9px !important;
}
/* satırdaki tarih/özet metni varsa (CMS li içine düz metin basıyor) */
.haber-detay .yazar-yazilar li{
  font-family:var(--font-govde) !important;
  font-size:13px !important;
  color:var(--muted) !important;
}

/* ==========================================================================
   10. YAZI (MAKALE) DETAYI — okuma deneyimi
   Yazı detayı haber detayla aynı kabı (.haber-detay/.haber-baslik/.haber-metin)
   kullanır; tipografi 3. bölümde zaten kuruldu. Buradaki tek fark yazar
   kimliğini öne çıkaran üst blok: .yazar-resim varsa künye kartını başlığın
   altına, tarih şeridiyle aynı ritimde yerleştir.
   ========================================================================== */
.haber-detay:has(.yazar-resim) .haber-baslik{
  margin-bottom:12px !important;
}
/* künye kartında tarih (.haber-tarih) künyenin yanında dursun */
.haber-detay .yazar-resim .haber-tarih,
.haber-detay .yazar-resim + .haber-tarih{
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  color:var(--muted) !important;
}
.haber-detay .yazar-resim .haber-tarih b{ font-weight:600 !important; }

/* köşe yazısı gövdesi: haber metniyle aynı aile, biraz daha yüksek satır
   aralığı ve ilk paragraf vurgusu — okuma kolonu 68ch ile sınırlı */
.haber-detay:has(.yazar-resim) .haber-metin,
.haber-detay:has(.yazar-resim) #haber-metin{
  line-height:1.82 !important;
}
.haber-detay:has(.yazar-resim) .haber-metin > p:first-child{
  font-size:18.5px !important;
  color:var(--ink) !important;
}
/* yazıda alıntı bloğu köşe yazısında daha görünür olsun */
.haber-detay:has(.yazar-resim) .haber-metin blockquote{
  font-family:var(--font-baslik) !important;
  font-size:19px !important;
  font-weight:600 !important;
  line-height:1.5 !important;
  background:transparent !important;
  border-left:3px solid var(--brand) !important;
  padding:6px 0 6px 18px !important;
}
@media (max-width:620px){
  .haber-detay .yazar-resim{
    padding:12px !important;
    gap:11px;
    font-size:16px !important;
  }
  .haber-detay .yazar-resim img{
    width:52px !important; height:52px !important; flex:0 0 52px;
  }
  .haber-detay .yazar-yazilar li a{ font-size:15px !important; }
}


/* ======================= REHBER-ILAN ======================= */

/* ==========================================================================
   FİRMA REHBERİ + İLANLAR — modern-ic.css'e EK
   Sayfalar: /firmalar/ , /ilanlar/  (ve add-firm.php / add-advert.php formları)

   YAPI NOTU — iki sayfa ORTAK ŞABLON DEĞİL:
     firmalar.html : .buyuk-cerceve > div[style="margin-left:-30px"] > .kutu-haberler
                     .kutu-haberler > a>img.img-rounded + .baslik + .ozet ×2-3
                     (.ozet satırları: adres = i.icon-edit-sign,
                                       telefon = i.icon-phone-sign,
                                       e-posta = i.icon-envelope)
     ilanlar.html  : .buyuk-cerceve > .dikey-haberler
                     .dikey-haberler > a>img.img-rounded + .baslik + .katicon>ul>li.active

   modern.css bu iki sınıfın ANA SAYFA sürümünü zaten tasarladı. Burada YALNIZCA
   bu iki sayfada bozulan yerler düzeltiliyor; genel kart stili tekrar YAZILMIYOR.
   ========================================================================== */


/* ==========================================================================
   1. FİRMA REHBERİ — .kutu-haberler kartları
   ========================================================================== */

/* --- 1a. HTML'e gömülü negatif marj: kart listesi içeriğin 30px soluna taşıyor.
       Sarmalayıcıyı aynı zamanda kartlar arası boşluğu veren kolona çeviriyoruz. */
.buyuk-cerceve > div[style*="margin-left:-30px"]{
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* --- 1b. Firma kartı ---
   KRİTİK: modern.css `.kutu-haberler .ozet{grid-row:2}` diyor. Firma kartında
   2-3 adet .ozet var; hepsi grid-row:2'ye çivilendiği için AYNI hücrede üst üste
   biniyordu. Satır yerleşimini serbest bırakıp (grid-row:auto) görseli tüm
   satırlara yayıyoruz. row-gap:0 sayesinde `span 6`in ürettiği boş satırlar
   yükseklik ekLEMEZ; satır arası boşluk margin ile veriliyor.               */
.kutu-haberler:has(> a[href*="/firma/"]){
  grid-template-columns:150px minmax(0,1fr) !important;
  column-gap:18px !important;
  row-gap:0 !important;
  align-items:start;
  align-content:start;
  /* düz listeden rehber kartına */
  background:var(--bg);
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak);
  padding:14px !important;
  box-shadow:0 1px 2px rgba(13,36,64,.05);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kutu-haberler:has(> a[href*="/firma/"]):hover{
  border-color:#CFD8E0 !important;
  box-shadow:var(--golge-hover);
  transform:translateY(-1px);
}

/* --- 1c. Firma görseli: LOGO olabilir, kırpma YOK ---
   İlan/haber kartlarında object-fit:cover doğru; burada değil. Firma kaydı
   çoğu zaman bir LOGO (şeffaf/beyaz zeminli, kenar boşluklu). cover logoyu
   kırpar veya kadraja zorlar. contain + --wash zemin + iç boşluk = logo da
   vitrin fotoğrafı da bozulmadan oturur. Oran, üretilen küçük görselle
   (186×96) aynı tutuldu ki boş bant oluşmasın.                              */
.kutu-haberler:has(> a[href*="/firma/"]) > a:first-of-type{
  grid-column:1;
  grid-row:1 / span 6;      /* başlık + tüm .ozet satırları boyunca */
  align-self:start;
  background:var(--wash);
  border:1px solid var(--line-soft);
  border-radius:5px;
  overflow:hidden;
  min-width:0;
}
.kutu-haberler:has(> a[href*="/firma/"]) img,
.kutu-haberler:has(> a[href*="/firma/"]) img:hover{
  width:100% !important;
  height:auto !important;
  aspect-ratio:186 / 96;
  object-fit:contain !important;      /* logo ezilmesin: cover DEĞİL */
  object-position:center;
  background:var(--bg);
  padding:6px !important;
  box-sizing:border-box;
  border:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  float:none !important;
  display:block;
  transform:none !important;          /* modern.css hover scale(1.05) iptal:
                                         contain edilmiş logoyu kırpardı */
  transition:opacity .2s ease;
}
.kutu-haberler:has(> a[href*="/firma/"]):hover img{ opacity:.88; }

/* --- 1d. Firma adı --- */
.kutu-haberler:has(> a[href*="/firma/"]) .baslik{
  grid-column:2 !important;
  grid-row:1 !important;
  font-family:var(--font-baslik) !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  color:var(--ink) !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  margin:0 0 8px !important;
  padding:0 !important;
}
.kutu-haberler:has(> a[href*="/firma/"]) .baslik a{
  font-family:var(--font-baslik) !important;
  font-size:17px !important;
  font-weight:700 !important;
  color:var(--ink) !important;
  text-decoration:none !important;
}
.kutu-haberler:has(> a[href*="/firma/"]) .baslik a:hover{ color:var(--brand) !important; }

/* --- 1e. İletişim satırları (adres / telefon / e-posta) ---
   grid-row:auto = modern.css'in grid-row:2 çivisini söküyoruz; satırlar
   otomatik olarak 2, 3, 4... hücrelerine akıyor.                           */
.kutu-haberler:has(> a[href*="/firma/"]) .ozet{
  grid-column:2 !important;
  grid-row:auto !important;
  width:auto !important;
  height:auto !important;
  margin:0 0 5px !important;
  padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:var(--body) !important;
}
.kutu-haberler:has(> a[href*="/firma/"]) .ozet:last-child{ margin-bottom:0 !important; }

/* satır = ikon + metin; uzun adres/e-posta taşmasın, ikon hizada kalsın */
.kutu-haberler:has(> a[href*="/firma/"]) .ozet a{
  display:flex !important;
  align-items:flex-start;
  gap:8px;
  color:var(--body) !important;
  text-decoration:none !important;
  overflow-wrap:anywhere;
}
.kutu-haberler:has(> a[href*="/firma/"]) .ozet a:hover{ color:var(--brand) !important; }

/* --- 1f. Eski icon-* ikonları ---
   Sayfada icon-edit-sign / icon-phone-sign / icon-envelope var; bunlar
   Font Awesome 3 adlandırması. Sitede FA 4.7 de yüklü olduğu için glifi
   doğrudan biz basıyoruz — hangi FA sürümünün kazandığından bağımsız,
   ikon her koşulda ve DOĞRU anlamıyla görünür (adres için kalem değil pin). */
.kutu-haberler:has(> a[href*="/firma/"]) .ozet i{
  font-family:FontAwesome !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-size:12.5px !important;
  line-height:1.6 !important;
  flex:0 0 auto;
  width:15px;
  text-align:center;
  color:var(--brand) !important;
  margin:0 !important;
}
.kutu-haberler:has(> a[href*="/firma/"]) .ozet i.icon-edit-sign::before{  content:"\f041" !important; } /* harita pini  */
.kutu-haberler:has(> a[href*="/firma/"]) .ozet i.icon-phone-sign::before{ content:"\f095" !important; } /* telefon      */
.kutu-haberler:has(> a[href*="/firma/"]) .ozet i.icon-envelope::before{   content:"\f0e0" !important; } /* zarf         */


/* ==========================================================================
   2. İLANLAR — .dikey-haberler kartları
   ========================================================================== */

/* --- 2a. Kart ızgarası: sabit 3 sütun yerine sığdıkça doldur --- */
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]){
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;
  gap:16px !important;
  align-items:start;
}

/* --- 2b. İlan kartı: çerçeveli kutu (ilan listesi rehberden farklı okunmalı) ---
   Eski tema height:150px veriyordu, ayrıca HTML'de inline style="height:150px"
   var — ikisi de başlığı kırpıyordu; !important ile açıyoruz.               */
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) > .dikey-haberler{
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 0 12px !important;
  background:var(--bg);
  border:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;   /* modern.css'in line-soft alt çizgisini kapat */
  border-radius:var(--yuvarlak);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(13,36,64,.05);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) > .dikey-haberler:hover{
  border-color:#CFD8E0 !important;
  box-shadow:var(--golge-hover);
  transform:translateY(-2px);
}

/* --- 2c. İlan görseli: kartın üstünde tam genişlik, taşmasız ---
   Burada object-fit:cover DOĞRU: içerik fotoğraf (araç/emlak), logo değil. */
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) > .dikey-haberler > a:first-of-type{
  display:block;
  background:var(--wash);
  line-height:0;
}
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) img,
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) img:hover{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9;
  object-fit:cover !important;
  border:0 !important;
  border-radius:0 !important;        /* kart zaten yuvarlak + overflow:hidden */
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  display:block;
  transition:transform .45s ease;
}
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) > .dikey-haberler:hover img{
  transform:scale(1.04);
}

/* --- 2d. İlan başlığı --- */
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) .baslik,
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) .baslik a{
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  font-family:var(--font-baslik) !important;
  font-size:15.5px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  display:block;
}
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) .baslik{
  margin:12px 0 0 !important;
  padding:0 13px !important;
}
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) .baslik a:hover{
  color:var(--brand) !important;
}

/* --- 2e. Kategori rozeti (.katicon) ---
   HTML'de inline margin-top:-55px; margin-left:2px var — eski tema rozeti
   görselin üstüne negatif marjla "çekiyordu". modern.css bunu zaten mutlak
   konuma aldı; burada sadece kart köşesine göre ince ayar yapıyoruz.        */
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) .katicon{
  top:10px !important;
  left:10px !important;
  margin:0 !important;
  padding:0 !important;
}
.buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) .katicon li.active a{
  background:var(--brand) !important;   /* ilan kategorisi marka rengiyle vurgulu */
}

/* --- 2f. Başlıktaki "İlan Ekle" bağlantısını butona çevir ---
   HTML: <h1>İLANLAR | <a href="/add-advert.php"><font color="#fff" size="2">
   ...</a></h1> — </font> KAPATILMAMIŞ ve renk beyaz. modern.css rengi zaten
   eziyor; biz görsel olarak da eylem butonu yapıyoruz.                      */
.ic-sayfalar-baslik h1 a[href^="/add-advert.php"],
.ic-sayfalar-baslik h1 a[href^="/add-firm.php"],
.ic-sayfalar-baslik h1 a[href^="/add-advert.php"] font,
.ic-sayfalar-baslik h1 a[href^="/add-firm.php"] font{
  color:#fff !important;
  font-family:var(--font-baslik) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none !important;
}
.ic-sayfalar-baslik h1 a[href^="/add-advert.php"],
.ic-sayfalar-baslik h1 a[href^="/add-firm.php"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--brand) !important;
  border-radius:100px;
  padding:4px 12px !important;
  margin-left:10px;
  vertical-align:middle;
  transition:background .16s ease;
}
.ic-sayfalar-baslik h1 a[href^="/add-advert.php"]::before,
.ic-sayfalar-baslik h1 a[href^="/add-firm.php"]::before{
  content:"\f067";                      /* artı */
  font-family:FontAwesome;
  font-size:9px;
  font-weight:400;
}
.ic-sayfalar-baslik h1 a[href^="/add-advert.php"]:hover,
.ic-sayfalar-baslik h1 a[href^="/add-firm.php"]:hover{
  background:var(--navy) !important;
}
.ic-sayfalar-baslik h1 a[href^="/add-advert.php"]:hover font,
.ic-sayfalar-baslik h1 a[href^="/add-firm.php"]:hover font{ color:#fff !important; }


/* ==========================================================================
   3. KATEGORİ SÜZGECİ (sağ sütun) — .blok-baslik + .g-kategoriler
   modern.css .anket widget başlığını tasarlamış ama .blok-baslik'i ATLAMIŞ;
   .cerceve-anket'in border-top:0 olduğu için başlıksız kart kırık görünüyor.
   Aşağıdaki başlık .anket ile birebir aynı dilde.
   ========================================================================== */
.sag-blok .blok-baslik{
  background:var(--wash) !important;
  background-image:none !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  border:1px solid var(--line) !important;
  border-bottom:0 !important;
  border-radius:var(--yuvarlak) var(--yuvarlak) 0 0 !important;
  padding:12px 15px !important;
  margin:0 !important;
  box-sizing:border-box;
}
.sag-blok .blok-baslik .baslik{
  display:flex !important;
  align-items:center;
  gap:9px;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  font-family:var(--font-baslik) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy) !important;
  background:transparent !important;
  text-shadow:none !important;
  line-height:1.25 !important;
  padding:0 !important;
  margin:0 !important;
  white-space:normal !important;
}
.sag-blok .blok-baslik .baslik::before{
  content:"\f0b0";                      /* süzgeç ikonu */
  font-family:FontAwesome;
  font-size:12px;
  font-weight:400;
  color:var(--brand);
  flex:0 0 auto;
  width:16px;
  text-align:center;
}

/* --- Kategori listesi ---
   Eski: li{float:left;width:140px} — 302px'lik sütuna zar zor sığan, modern
   iç boşlukla taşan iki sütun. Gerçek 2 sütunlu ızgaraya çeviriyoruz.
   NOT: firmalar sayfasında 65 kategori var; kaydırma alanı kasıtlı
   (overflow:auto), eski temanın overflow:hidden kırpması DEĞİL.             */
.g-kategoriler{
  max-height:360px;
  overflow-y:auto;
  overscroll-behavior:contain;
  margin:0 -4px 0 0;
  padding-right:4px;
}
.g-kategoriler ul{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 8px;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.g-kategoriler li{
  float:none !important;
  width:auto !important;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.g-kategoriler li a{
  display:block !important;
  background-image:none !important;     /* tema/arrow.png PNG okunu kaldır */
  background:transparent !important;
  font-family:var(--font-govde) !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  color:var(--body) !important;
  padding:6px 8px 6px 16px !important;
  border-radius:4px;
  text-decoration:none !important;
  position:relative;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:background .14s ease, color .14s ease;
}
.g-kategoriler li a::before{
  content:"\f105";                      /* ince sağ ok */
  font-family:FontAwesome;
  font-size:11px;
  color:var(--line);
  position:absolute;
  left:5px; top:50%;
  transform:translateY(-50%);
  transition:color .14s ease;
}
.g-kategoriler li a:hover{
  background:var(--wash) !important;
  color:var(--brand) !important;
  font-weight:400 !important;
}
.g-kategoriler li a:hover::before{ color:var(--brand); }
/* aktif kategori (CMS li.active basıyorsa) */
.g-kategoriler li.active a{
  background:var(--wash) !important;
  color:var(--brand) !important;
  font-weight:700 !important;
}

/* kaydırma çubuğu widget'ı bozmasın */
.g-kategoriler::-webkit-scrollbar{ width:6px; }
.g-kategoriler::-webkit-scrollbar-track{ background:transparent; }
.g-kategoriler::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.g-kategoriler::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
.g-kategoriler{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }


/* ==========================================================================
   4. GENEL FORM KATMANI
   Hedef: add-firm.php / add-advert.php, iletişim formu, üyelik, yorum...
   Kalıp (iletisim.html'de doğrulandı, Bootstrap 2):
     form.form-horizontal > fieldset > .control-group
        > label.control-label + .controls > input|select|textarea
   Bu sınıflar eski CSS'te HİÇ tanımlı değil (bootstrap yüklenmiyor), yani
   formlar şu an tarayıcı varsayılanıyla çıplak duruyor. Bu yüzden burada
   !important'a çok az yerde ihtiyaç var — sadece eski temanın sabit
   genişlikli .textarea / .styledselect_* / .alert kurallarını ezerken.
   Kapsam #icerik-orta ile sınırlı: sağ blok ve üst menü formlarına dokunmaz.
   ========================================================================== */

#icerik-orta form.form-horizontal,
#icerik-orta form{
  margin:0 0 8px;
  max-width:720px;
}
#icerik-orta fieldset{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}
#icerik-orta legend{
  font-family:var(--font-baslik);
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  border:0;
  border-left:4px solid var(--brand);
  padding:2px 0 2px 12px;
  margin:0 0 16px;
  width:auto;
}

/* --- 4a. Satır: etiket solda, alan sağda --- */
#icerik-orta .control-group{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:6px 18px;
  align-items:start;
  margin:0 0 16px;
  padding:0;
}
#icerik-orta .control-label{
  grid-column:1;
  font-family:var(--font-govde);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  padding-top:9px;          /* alanın ilk satırıyla hizala */
  margin:0;
  text-align:left;
  width:auto;
  float:none;
}
/* zorunlu alan yıldızı — CMS <span class="zorunlu">*</span> basıyorsa */
#icerik-orta .control-label .zorunlu,
#icerik-orta .control-label .required{ color:var(--brand); margin-left:2px; }

#icerik-orta .controls{
  grid-column:2;
  margin:0;
  padding:0;
  min-width:0;
  float:none;
}
/* etiketi olmayan satır (gizli alanlar + gönder butonu) tam genişlik alsın */
#icerik-orta .control-group:not(:has(> .control-label)) .controls{
  grid-column:1 / -1;
}

/* --- 4b. Alanlar --- */
#icerik-orta input[type=text],
#icerik-orta input[type=email],
#icerik-orta input[type=tel],
#icerik-orta input[type=url],
#icerik-orta input[type=number],
#icerik-orta input[type=password],
#icerik-orta input[type=search],
#icerik-orta input[type=date],
#icerik-orta textarea,
#icerik-orta select,
#icerik-orta textarea.textarea,
#icerik-orta .yorum-input{
  display:block !important;
  box-sizing:border-box;
  width:100% !important;          /* eski 328px/250px/150px sabitlerini ez */
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 0 2px !important;
  padding:9px 12px !important;
  font-family:var(--font-govde) !important;
  font-size:14.5px !important;
  line-height:1.45 !important;
  color:var(--ink) !important;
  background:var(--bg) !important;
  background-image:none;
  border:1px solid var(--line) !important;
  border-radius:5px !important;
  box-shadow:none !important;
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;
}
#icerik-orta textarea,
#icerik-orta textarea.textarea{
  min-height:140px !important;
  resize:vertical;
  overflow:auto !important;       /* eski .textarea overflow:hidden metni yutuyordu */
  line-height:1.6 !important;
}
/* dar alanlar zorla tam genişliğe çıkmasın (güvenlik kodu vb.) */
#icerik-orta input[type=text][size="2"],
#icerik-orta input[type=text][maxlength="2"]{
  width:80px !important;
  text-align:center;
}

/* select: özel ok (appearance:none sonrası) */
#icerik-orta select{
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:34px !important;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%) !important;
  background-position:calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px) !important;
  background-size:5px 5px, 5px 5px !important;
  background-repeat:no-repeat !important;
}
/* çok seçimli select ok göstermesin */
#icerik-orta select[multiple],
#icerik-orta select[size]:not([size="1"]){
  background-image:none !important;
  padding-right:12px !important;
  min-height:120px !important;
}

/* --- 4c. Odak durumu: klavye erişilebilirliği --- */
#icerik-orta input:focus,
#icerik-orta textarea:focus,
#icerik-orta select:focus{
  outline:2px solid var(--navy) !important;
  outline-offset:1px;
  border-color:var(--navy) !important;
}
#icerik-orta input::placeholder,
#icerik-orta textarea::placeholder{ color:var(--muted); opacity:1; }
#icerik-orta input:disabled,
#icerik-orta textarea:disabled,
#icerik-orta select:disabled{
  background:var(--wash) !important;
  color:var(--muted) !important;
  cursor:not-allowed;
}

/* --- 4d. Dosya yükleme (firma logosu / ilan görseli) ---
   Yerel dosya seçici düğmesi tarayıcı varsayılanı olarak çirkin ve
   Türkçe formlarda hizasız duruyor; kutuyu "bırakma alanı"na çeviriyoruz. */
#icerik-orta input[type=file]{
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin:0 0 2px;
  padding:12px;
  font-family:var(--font-govde);
  font-size:13.5px;
  color:var(--body);
  background:var(--wash);
  border:1px dashed var(--line);
  border-radius:5px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
#icerik-orta input[type=file]:hover{ border-color:var(--muted); background:var(--bg); }
#icerik-orta input[type=file]:focus{ outline:2px solid var(--navy); outline-offset:1px; }
#icerik-orta input[type=file]::file-selector-button{
  font-family:var(--font-baslik);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  background:var(--navy);
  border:0;
  border-radius:4px;
  padding:7px 13px;
  margin:0 12px 0 0;
  cursor:pointer;
  transition:background .16s ease;
}
#icerik-orta input[type=file]:hover::file-selector-button{ background:var(--brand); }
/* eski WebKit sözdizimi (yaşlı tarayıcılar) */
#icerik-orta input[type=file]::-webkit-file-upload-button{
  font-family:var(--font-baslik);
  font-size:12px; font-weight:700;
  color:#fff; background:var(--navy);
  border:0; border-radius:4px;
  padding:7px 13px; margin:0 12px 0 0;
  cursor:pointer;
}
/* captcha görseli forma otursun */
#icerik-orta .controls img#captchaimg,
#icerik-orta img#captchaimg{
  display:block;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg);
  max-width:100%;
  height:auto;
  margin:0 0 4px;
}

/* --- 4e. Onay kutusu / radyo: metniyle hizalı --- */
#icerik-orta .controls input[type=checkbox],
#icerik-orta .controls input[type=radio]{
  width:auto !important;
  height:auto !important;
  display:inline-block !important;
  margin:0 7px 0 0 !important;
  padding:0 !important;
  vertical-align:-2px;
  accent-color:var(--brand);
  cursor:pointer;
}
#icerik-orta .controls label.checkbox,
#icerik-orta .controls label.radio,
#icerik-orta .controls label.inline{
  display:inline-flex;
  align-items:center;
  gap:0;
  font-family:var(--font-govde);
  font-size:14px;
  color:var(--body);
  font-weight:400;
  margin:0 16px 6px 0;
  cursor:pointer;
}

/* --- 4f. Butonlar ---
   modern.css `input[type=submit],button` için zaten lacivert buton veriyor;
   burada .btn / .btn-small / .arsiv-secim (tanımsız Bootstrap 2 sınıfları) ve
   inline style="background:#3B5998" gibi gömülü renkler eziliyor.           */
#icerik-orta input[type=submit],
#icerik-orta input[type=button],
#icerik-orta input[type=reset],
#icerik-orta button,
#icerik-orta .btn,
#icerik-orta a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto !important;
  box-sizing:border-box;
  font-family:var(--font-baslik) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  line-height:1.2 !important;
  color:#fff !important;
  background:var(--navy) !important;
  background-image:none !important;
  border:0 !important;
  border-radius:5px !important;
  padding:11px 22px !important;
  margin:0 8px 0 0 !important;
  text-decoration:none !important;
  text-shadow:none !important;
  cursor:pointer;
  transition:background .16s ease, transform .1s ease;
}
#icerik-orta input[type=submit]:hover,
#icerik-orta button:hover,
#icerik-orta .btn:hover,
#icerik-orta a.btn:hover{ background:var(--brand) !important; }
#icerik-orta input[type=submit]:active,
#icerik-orta button:active,
#icerik-orta .btn:active{ transform:translateY(1px); }
#icerik-orta input[type=submit]:focus-visible,
#icerik-orta button:focus-visible,
#icerik-orta .btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* ikincil buton: sıfırla / vazgeç */
#icerik-orta input[type=reset],
#icerik-orta .btn-secondary,
#icerik-orta .btn.iptal{
  color:var(--body) !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
}
#icerik-orta input[type=reset]:hover,
#icerik-orta .btn-secondary:hover{
  color:var(--ink) !important;
  background:var(--wash) !important;
  border-color:var(--muted) !important;
}
/* .btn-small gerçekten küçük olsun */
#icerik-orta .btn-small,
#icerik-orta input.btn-small{
  font-size:12px !important;
  padding:8px 16px !important;
}

/* --- 4g. Hata / bilgi mesajları ---
   .alert eski temada width:250px + float:left ile form alanlarının yanına
   kaçıyordu; .success zaten yeşil kutu ama eski tipografide.                */
#icerik-orta .alert,
#icerik-orta .success,
#icerik-orta .hata,
#icerik-orta .uyari,
#icerik-orta .help-block,
#icerik-orta .help-inline{
  display:block;
  float:none !important;
  width:auto !important;
  max-width:100%;
  box-sizing:border-box;
  font-family:var(--font-govde) !important;
  font-size:13.5px !important;
  line-height:1.5 !important;
  border-radius:5px;
  margin:0 0 16px !important;
  padding:11px 14px !important;
}
/* nötr / bilgi */
#icerik-orta .alert{
  color:var(--ink) !important;
  background:var(--wash) !important;
  border:1px solid var(--line) !important;
  border-left:3px solid var(--navy) !important;
}
/* başarı */
#icerik-orta .success,
#icerik-orta .alert-success{
  color:#1E6B39 !important;
  background:#EAF7EF !important;
  border:1px solid #BFE5CC !important;
  border-left:3px solid #2E9E58 !important;
}
/* hata */
#icerik-orta .alert-error,
#icerik-orta .alert-danger,
#icerik-orta .hata{
  color:#8C1520 !important;
  background:#FCEDEE !important;
  border:1px solid #F1C4C8 !important;
  border-left:3px solid var(--brand) !important;
}
/* ikonlu mesaj */
#icerik-orta .alert::before,
#icerik-orta .success::before,
#icerik-orta .hata::before,
#icerik-orta .alert-error::before{
  font-family:FontAwesome;
  font-size:12.5px;
  margin-right:8px;
}
#icerik-orta .alert::before{ content:"\f05a"; }        /* bilgi */
#icerik-orta .success::before,
#icerik-orta .alert-success::before{ content:"\f058"; } /* onay  */
#icerik-orta .hata::before,
#icerik-orta .alert-error::before,
#icerik-orta .alert-danger::before{ content:"\f06a"; }  /* ünlem */

/* alan altı küçük yardım/hata metni: kutu değil, satır */
#icerik-orta .help-block,
#icerik-orta .help-inline{
  background:transparent !important;
  border:0 !important;
  padding:2px 0 0 !important;
  margin:0 !important;
  font-size:12.5px !important;
  color:var(--muted) !important;
}
/* hatalı alanı işaretle (Bootstrap 2: .control-group.error) */
#icerik-orta .control-group.error .control-label{ color:var(--brand); }
#icerik-orta .control-group.error input,
#icerik-orta .control-group.error textarea,
#icerik-orta .control-group.error select,
#icerik-orta input[aria-invalid="true"]{
  border-color:var(--brand) !important;
  background:#FEF8F8 !important;
}
#icerik-orta .control-group.error .help-block,
#icerik-orta .control-group.error .help-inline{ color:var(--brand) !important; }


/* ==========================================================================
   5. SAYFALAMA + İÇERİK İÇİ ARAMA KUTUSU
   ========================================================================== */

/* --- 5a. Sayfalama (.sayfalama) ---
   Eski: li{float:left;background:#ccc}, li a{width:24px} — dar, gri,
   dokunmatikte küçük hedef. Not: verilen iki sayfada yalnızca 4 kayıt olduğu
   için CMS bu bloğu basmadı; sınıf tema.css.php.src (271-280) içinde gerçek. */
#icerik-orta .sayfalama{
  width:auto !important;
  overflow:visible !important;
  position:static !important;
  clear:both;
  margin:22px 0 6px !important;
  padding:16px 0 0 !important;
  border-top:1px solid var(--line-soft);
}
#icerik-orta .sayfalama ul{
  display:flex !important;
  flex-wrap:wrap;
  gap:6px;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
#icerik-orta .sayfalama li{
  float:none !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  font-family:var(--font-govde) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  color:inherit !important;
}
#icerik-orta .sayfalama li a{
  display:flex !important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:auto !important;
  min-width:36px;
  height:36px;
  padding:0 11px !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:5px !important;
  color:var(--body) !important;
  font-family:var(--font-govde) !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  text-align:center;
  text-decoration:none !important;
  font-variant-numeric:tabular-nums;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
#icerik-orta .sayfalama li a:hover{
  background:var(--wash) !important;
  border-color:var(--muted) !important;
  color:var(--ink) !important;
}
/* aktif sayfa */
#icerik-orta .sayfalama li.active,
#icerik-orta .sayfalama li.aktif{
  background:transparent !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  overflow:visible !important;
}
#icerik-orta .sayfalama li.active a,
#icerik-orta .sayfalama li.aktif a{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
  cursor:default;
}
/* "önceki / sonraki / 1-10 arası" gibi geniş durum düğmeleri */
#icerik-orta .sayfalama li.durum,
#icerik-orta .sayfalama li.durum a{
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
  padding:0 !important;
  background:transparent !important;
  color:inherit !important;
}
#icerik-orta .sayfalama li.durum a{
  min-width:auto;
  height:36px;
  padding:0 15px !important;
  background:var(--navy) !important;
  border-color:var(--navy) !important;
  color:#fff !important;
  font-family:var(--font-baslik) !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
}
#icerik-orta .sayfalama li.durum a:hover{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}

/* --- 5b. İçerik alanı arama / süzme kutusu ---
   Bu iki sayfada arama markup'ı YOK (sağ sütundaki .arama-tabo modern.css'te
   zaten tasarlı). Sınıf uydurmamak için kural GERÇEK ELEMAN TİPLERİNE bağlandı:
   içerik alanındaki tek satırlık arama formu (input + submit yan yana).      */
#icerik-orta form:has(> input[type=search]),
#icerik-orta form:has(> input[name*="ara"]),
#icerik-orta form:has(> input[name*="Ara"]),
#icerik-orta div#arama form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:stretch;
  max-width:520px;
  margin:0 0 18px;
}
#icerik-orta form:has(> input[type=search]) input[type=search],
#icerik-orta form:has(> input[name*="ara"]) input[type=text],
#icerik-orta form:has(> input[name*="Ara"]) input[type=text]{
  flex:1 1 220px;
  width:auto !important;
  min-width:0;
  margin:0 !important;
  padding-left:36px !important;
  background-image:none;
}
#icerik-orta form:has(> input[type=search]) input[type=submit],
#icerik-orta form:has(> input[name*="ara"]) input[type=submit],
#icerik-orta form:has(> input[name*="Ara"]) input[type=submit]{
  flex:0 0 auto;
  margin:0 !important;
  padding:0 20px !important;
}
/* arama alanının içine büyüteç: input'a ::before basılamadığı için
   sarmalayıcı üzerinden konumlandırılıyor */
#icerik-orta form:has(> input[type=search]),
#icerik-orta form:has(> input[name*="ara"]),
#icerik-orta form:has(> input[name*="Ara"]){
  position:relative;
}
#icerik-orta form:has(> input[type=search])::before,
#icerik-orta form:has(> input[name*="ara"])::before,
#icerik-orta form:has(> input[name*="Ara"])::before{
  content:"\f002";
  font-family:FontAwesome;
  font-size:13px;
  color:var(--muted);
  position:absolute;
  left:13px; top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;
}
/* arama sonucu yoksa: boş durum metni (CMS <div class="temizle"> ile
   biten boş .buyuk-cerceve bırakıyor) */
#icerik-orta .buyuk-cerceve:empty{ display:none !important; }


/* ==========================================================================
   6. DUYARLI DAVRANIŞ
   modern.css'in 620px kuralı .kutu-haberler .ozet'i yine grid-row:3'e
   çiviliyor; firma kartı için burada tekrar serbest bırakılıyor.
   ========================================================================== */
@media (max-width:960px){
  .kutu-haberler:has(> a[href*="/firma/"]){
    grid-template-columns:120px minmax(0,1fr) !important;
    column-gap:14px !important;
  }
  #icerik-orta .control-group{ grid-template-columns:150px minmax(0,1fr); }
}

@media (max-width:620px){
  /* firma kartı: görsel üstte, bilgiler altta */
  .kutu-haberler:has(> a[href*="/firma/"]){
    grid-template-columns:minmax(0,1fr) !important;
    row-gap:0 !important;
    padding:12px !important;
  }
  .kutu-haberler:has(> a[href*="/firma/"]) > a:first-of-type{
    grid-column:1 !important;
    grid-row:1 !important;
    margin-bottom:11px;
  }
  .kutu-haberler:has(> a[href*="/firma/"]) .baslik{
    grid-column:1 !important;
    grid-row:2 !important;
    font-size:16px !important;
  }
  .kutu-haberler:has(> a[href*="/firma/"]) .ozet{
    grid-column:1 !important;
    grid-row:auto !important;   /* modern.css'in grid-row:3 çivisini sök */
  }

  /* ilan ızgarası: dar ekranda iki sütun hâlâ okunabilir */
  .buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]){
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
    gap:12px !important;
  }
  .buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) .baslik,
  .buyuk-cerceve:has(> .dikey-haberler > a[href*="/ilan/"]) .baslik a{
    font-size:14px !important;
  }

  /* form: etiket alanın üstüne */
  #icerik-orta .control-group{
    grid-template-columns:minmax(0,1fr);
    gap:5px;
    margin-bottom:14px;
  }
  #icerik-orta .control-label{
    grid-column:1;
    padding-top:0;
    font-size:13.5px;
  }
  #icerik-orta .controls{ grid-column:1; }
  #icerik-orta input[type=submit],
  #icerik-orta button,
  #icerik-orta .btn{ width:100% !important; margin:0 0 8px !important; }

  /* kategori süzgeci dar ekranda tek sütun */
  .g-kategoriler ul{ grid-template-columns:minmax(0,1fr); }
  .g-kategoriler{ max-height:280px; }

  /* sayfalama dokunmatik hedefleri */
  #icerik-orta .sayfalama li a{ min-width:40px; height:40px; }
}


/* ======================= FORM-SAYFA ======================= */

/* ==========================================================================
   BÖLÜM 6-12 — FORMLAR / İLETİŞİM / STATİK SAYFA / ARAMA SONUCU / 404
   Sayfa grubu: iletisim.php, uye giris-kayit, sifremi unuttum, profil,
                page.php (künye vb.), results.php, 404.
   KAPSAM KURALI: her kural #icerik-orta ile başlar. Sağ blok (.sag-blok)
   widget'ları modern.css ile tasarlandı; oradaki .styledselect_form_4,
   .arsiv-secim, .arama-tabo, anket radyoları bu katmandan ETKİLENMEZ.
   ========================================================================== */

/* ---------- 6. SİTE GENELİ FORM TASARIMI (yalnız içerik alanı) ----------
   Not: HTML'de Bootstrap 2 sınıfları (.form-horizontal/.control-group/
   .control-label/.controls/.btn) kullanılmış ama sitede Bootstrap CSS'i
   yüklü DEĞİL — yani bu sınıfların hiçbir kuralı yok, form çıplak.
   Eski tema tarafındaki .textfield(300px)/.textarea(328px)/.yorum-input(250px)/
   .styledselect_form_*(300px) sabit genişlikleri ve "odak göstergesi yok"
   sorunu da burada kapatılıyor.                                            */

#icerik-orta form{ margin:0; }
#icerik-orta fieldset{
  border:0 !important; margin:0 !important; padding:0 !important;
  min-width:0;                 /* fieldset'in doğal min-width'i taşma yapar */
}
#icerik-orta legend{
  display:block; width:auto;
  font-family:var(--font-baslik) !important;
  font-size:14px !important; font-weight:800 !important;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink) !important;
  margin:0 0 12px !important; padding:0 !important;
}

/* --- form satırı --- */
#icerik-orta .control-group{
  display:block; clear:both;
  margin:0 0 18px !important;
  max-width:520px;
}

/* --- etiket: tema.css'teki label{width:100%;font-size:12px} eziliyor --- */
#icerik-orta .control-label,
#icerik-orta .control-group > label{
  display:block !important;
  float:none !important;
  width:auto !important;
  margin:0 0 6px !important; padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:13.5px !important; font-weight:600 !important;
  line-height:1.4 !important;
  letter-spacing:.005em;
  color:var(--navy) !important;      /* #0D2440 — beyaz üstünde ~13:1 kontrast */
  text-align:left !important;
}
#icerik-orta .controls{
  float:none !important; margin:0 !important; padding:0 !important;
}

/* --- zorunlu alan işareti: alanda required varsa etikete kırmızı yıldız --- */
#icerik-orta .control-group:has(:required) > .control-label::after,
#icerik-orta .control-group:has([aria-required="true"]) > .control-label::after{
  content:" *";
  color:var(--brand); font-weight:700;
}

/* --- metin alanları (ortak gövde) --- */
#icerik-orta input[type=text],
#icerik-orta input[type=email],
#icerik-orta input[type=password],
#icerik-orta input[type=tel],
#icerik-orta input[type=url],
#icerik-orta input[type=number],
#icerik-orta input[type=search],
#icerik-orta input[type=date],
#icerik-orta input[type=file],
#icerik-orta input:not([type]),
#icerik-orta textarea,
#icerik-orta select{
  box-sizing:border-box !important;
  display:block !important;
  float:none !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;              /* eski .textfield height:10px */
  min-height:44px;                     /* erişilebilir dokunma hedefi */
  margin:0 !important;
  padding:11px 13px !important;
  font-family:var(--font-govde) !important;
  font-size:15px !important;
  line-height:1.4 !important;
  color:var(--ink) !important;
  background:var(--bg) !important;
  background-image:none !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:none !important;
  outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
/* eski tema :hover'da arka planı grileştiriyordu — sadece kenarlığı koyulaştır */
#icerik-orta input[type=text]:hover,
#icerik-orta input[type=email]:hover,
#icerik-orta input[type=password]:hover,
#icerik-orta input:not([type]):hover,
#icerik-orta textarea:hover,
#icerik-orta select:hover{
  background:var(--bg) !important;
  border-color:var(--muted) !important;
}

/* --- ODAK: eski temada hiç yoktu; görünür halka zorunlu --- */
#icerik-orta input:focus,
#icerik-orta textarea:focus,
#icerik-orta select:focus{
  background:var(--bg) !important;
  border-color:var(--navy) !important;
  box-shadow:0 0 0 3px rgba(13,36,64,.18) !important;
}
#icerik-orta input:focus-visible,
#icerik-orta textarea:focus-visible,
#icerik-orta select:focus-visible,
#icerik-orta button:focus-visible,
#icerik-orta a:focus-visible,
#icerik-orta [type=submit]:focus-visible{
  outline:3px solid var(--navy) !important;
  outline-offset:2px !important;
}

/* yer tutucu metin — --muted beyaz üstünde ~4.6:1 */
#icerik-orta input::placeholder,
#icerik-orta textarea::placeholder{ color:var(--muted) !important; opacity:1; }

/* tarayıcı otomatik doldurma sarı arka planını bastır */
#icerik-orta input:-webkit-autofill,
#icerik-orta input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 40px var(--bg) inset !important;
}

/* --- çok satırlı alan (HTML'de cols="2" rows="7" var, CSS ezer) --- */
#icerik-orta textarea{
  min-height:170px !important;
  line-height:1.65 !important;
  overflow:auto !important;        /* eski .yorum-textArea overflow:hidden */
  resize:vertical;
}

/* --- açılır liste: yerli ok yerine kendi ok işaretimiz --- */
#icerik-orta select{
  cursor:pointer;
  padding-right:36px !important;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='%236B7885' d='M1.4 0 5.5 4.1 9.6 0 11 1.4 5.5 6.9 0 1.4z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 13px center !important;
  background-size:11px 7px !important;
}
#icerik-orta select[multiple]{
  background-image:none !important; padding-right:13px !important;
  min-height:140px !important;
}

/* --- onay kutusu / radyo düğmesi --- */
#icerik-orta input[type=checkbox],
#icerik-orta input[type=radio]{
  -webkit-appearance:auto; appearance:auto;
  display:inline-block !important;
  float:none !important;
  width:18px !important; height:18px !important;
  min-height:0 !important;
  margin:0 8px 0 0 !important; padding:0 !important;
  vertical-align:middle;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  accent-color:var(--brand);
  cursor:pointer; flex:0 0 auto;
}
/* kutu + metin birlikte 44px'lik tıklama alanı olsun */
#icerik-orta .controls label:has(input[type=checkbox]),
#icerik-orta .controls label:has(input[type=radio]),
#icerik-orta label.checkbox,
#icerik-orta label.radio{
  display:flex !important; align-items:center; gap:2px;
  width:auto !important; min-height:44px;
  margin:0 !important; padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:14.5px !important; font-weight:400 !important;
  color:var(--body) !important;
  cursor:pointer;
}

/* --- gönder butonu (içerik alanı birincil eylemi) --- */
#icerik-orta input[type=submit],
#icerik-orta input[type=button],
#icerik-orta input[type=reset],
#icerik-orta button,
#icerik-orta .btn{
  display:inline-flex; align-items:center; justify-content:center;
  float:none !important;
  width:auto !important;
  min-width:150px; min-height:44px;      /* dokunma hedefi */
  height:auto !important;
  margin:6px 0 0 !important;
  padding:12px 28px !important;
  font-family:var(--font-baslik) !important;
  font-size:13.5px !important; font-weight:700 !important;
  letter-spacing:.06em; text-transform:uppercase;
  color:#fff !important;
  background:var(--brand) !important; background-image:none !important;
  border:0 !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:var(--golge);
  text-shadow:none !important; text-decoration:none !important;
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease, transform .06s ease;
}
/* .btn-small içerik alanında butonu küçültmesin */
#icerik-orta .btn.btn-small{ padding:12px 28px !important; font-size:13.5px !important; }
#icerik-orta input[type=submit]:hover,
#icerik-orta button:hover,
#icerik-orta .btn:hover{
  background:var(--navy) !important;
  box-shadow:var(--golge-hover);
}
#icerik-orta input[type=submit]:active,
#icerik-orta button:active,
#icerik-orta .btn:active{ transform:translateY(1px); }
#icerik-orta input[type=submit][disabled],
#icerik-orta button[disabled]{
  background:var(--muted) !important; box-shadow:none !important;
  cursor:not-allowed; opacity:.8;
}
/* ikincil eylem (İptal / Vazgeç / Geri) — dışı çizgili */
#icerik-orta input[type=reset],
#icerik-orta input[type=button]{
  background:transparent !important;
  color:var(--navy) !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
#icerik-orta input[type=reset]:hover,
#icerik-orta input[type=button]:hover{
  background:var(--wash) !important; border-color:var(--muted) !important;
  color:var(--navy) !important;
}

/* gizli alanlar hiçbir koşulda yer kaplamasın */
#icerik-orta input[type=hidden]{ display:none !important; }

/* --- captcha (iletisim.php: #captchaimg + #captcha_input) --- */
#icerik-orta #captchaimg{
  display:block;
  max-width:100%; height:auto;
  margin:0 0 8px !important;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--wash);
}
#icerik-orta #captcha_input,
#icerik-orta input[name=GuvenlikKodu]{
  max-width:220px !important;
  margin-top:0 !important;          /* inline style="margin-top:10px" ezilir */
}
#icerik-orta .controls > br{ display:none; }

/* --- hatalı alan (tarayıcı doğrulaması + eski .error kalıbı) --- */
#icerik-orta input:user-invalid,
#icerik-orta textarea:user-invalid,
#icerik-orta select:user-invalid,
#icerik-orta .control-group.error input,
#icerik-orta .control-group.error textarea{
  border-color:#B02A21 !important;
  box-shadow:0 0 0 3px rgba(176,42,33,.16) !important;
}
#icerik-orta .control-group.error > .control-label{ color:#8E1B22 !important; }
#icerik-orta .help-inline,
#icerik-orta .help-block{
  display:block;
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  color:var(--muted) !important;
  margin:6px 0 0 !important;
}

/* ---------- 6b. HATA / BAŞARI MESAJLARI ----------
   Eski tema: .alert{width:250px;float:left} (akıştan çıkıyor, dar),
   .warning arka plansız, .success ikonsuz.                                */
#icerik-orta .success,
#icerik-orta .warning,
#icerik-orta .alert{
  position:relative;
  display:block;
  float:none !important;
  width:auto !important;
  clear:both;
  margin:0 0 18px !important;
  padding:13px 16px 13px 44px !important;
  border-radius:var(--yuvarlak) !important;
  font-family:var(--font-govde) !important;
  font-size:14.5px !important;
  line-height:1.55 !important;
}
#icerik-orta .success{
  color:#14663A !important;
  background:#E9F7EF !important;
  border:1px solid #B6E3C8 !important;
}
#icerik-orta .warning,
#icerik-orta .alert{
  color:#8E1B22 !important;
  background:#FCECEC !important;
  border:1px solid #F1C4C4 !important;
}
#icerik-orta .success::before,
#icerik-orta .warning::before,
#icerik-orta .alert::before{
  position:absolute; left:16px; top:14px;
  font-family:FontAwesome; font-size:15px; line-height:1;
}
#icerik-orta .success::before{ content:"\f058"; color:#14663A; }   /* check-circle */
#icerik-orta .warning::before,
#icerik-orta .alert::before{ content:"\f06a"; color:#8E1B22; }     /* exclamation-circle */
#icerik-orta .warning a,
#icerik-orta .alert a{
  color:#8E1B22 !important; font-weight:700 !important;
  margin:0 !important; padding:0 !important;
  text-decoration:underline; text-underline-offset:2px;
}
#icerik-orta .success a{ color:#14663A !important; font-weight:700 !important; }

/* ---------- 7. İLETİŞİM SAYFASI DÜZENİ ----------
   GÜVENCE: .haber-detay yalnızca hem form.form-horizontal hem de Maps
   gömüsü içeriyorsa ızgaraya döner. Böylece foto/haber/kategori iç
   sayfaları bu kuraldan etkilenmez. :has() desteklenmezse kural hiç
   uygulanmaz ve sayfa DOM sırasıyla tek sütun akar (güvenli geri düşüş).
   DOM sırası: bilgi başlığı > bilgi kutusu > harita başlığı > harita
               kutusu > form başlığı > form kutusu
   Yeni yerleşim: SOL sütun FORM, SAĞ sütun BİLGİLER, ALTTA tam en HARİTA. */
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal):has(iframe[src*="maps/embed"]){
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  column-gap:24px; row-gap:0;
  align-items:start;
}
/* Aşağıdaki yerleşim özellikleri ızgara olmayan sayfalarda etkisizdir,
   bu yüzden ek güvenceye gerek yok.                                        */
#icerik-orta .haber-detay > .ic-sayfalar-baslik:has(+ .buyuk-cerceve > form.form-horizontal){ grid-column:1; grid-row:1; }
#icerik-orta .haber-detay > .buyuk-cerceve:has(> form.form-horizontal){ grid-column:1; grid-row:2; }
#icerik-orta .haber-detay > .ic-sayfalar-baslik:has(+ .buyuk-cerceve > table){ grid-column:2; grid-row:1; }
#icerik-orta .haber-detay > .buyuk-cerceve:has(> table):has(~ .buyuk-cerceve > form.form-horizontal){ grid-column:2; grid-row:2; }
#icerik-orta .haber-detay > .ic-sayfalar-baslik:has(+ .buyuk-cerceve > iframe[src*="maps/embed"]){ grid-column:1 / -1; grid-row:3; }
#icerik-orta .haber-detay > .buyuk-cerceve:has(> iframe[src*="maps/embed"]){ grid-column:1 / -1; grid-row:4; }

/* başlıklar: inline style="margin-top:-3px" negatif marjı sıfırlanır,
   iki sütunun başlıkları aynı tabana oturur                                */
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) > .ic-sayfalar-baslik{
  margin:0 0 12px !important;
  align-self:end;
}
#icerik-orta .haber-detay > .ic-sayfalar-baslik:has(+ .buyuk-cerceve > iframe[src*="maps/embed"]){
  margin:30px 0 12px !important;
}

/* kutular kart görünümü kazansın (modern.css .buyuk-cerceve'yi şeffaflaştırıyor) */
#icerik-orta .buyuk-cerceve:has(> form.form-horizontal),
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) > .buyuk-cerceve{
  display:flow-root;
  height:auto !important;
  margin:0 !important;                 /* inline margin-bottom:8px ezilir */
  padding:20px 22px !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:var(--golge);
}
/* harita kutusu çerçevesiz, gömüyü köşelerden kırpsın */
#icerik-orta .buyuk-cerceve:has(> iframe[src*="maps/embed"]){
  padding:0 !important;
  overflow:hidden;
  border:1px solid var(--line) !important;
}
/* formdan önceki <br /><br /> boşlukları */
#icerik-orta .buyuk-cerceve:has(> form.form-horizontal) > br{ display:none; }
/* form kartı içinde son satırın alt marjı gereksiz */
#icerik-orta form.form-horizontal .control-group:last-child{ margin-bottom:0 !important; }

/* ---------- 8. İLETİŞİM BİLGİLERİ TABLOSU ----------
   HTML'de <table width="400"> + <td width="102|10|74" height="50">
   sunum nitelikleri var; hepsi eziliyor. Kural yalnızca iletişim
   sayfasının kart ızgarasında geçerli (fotolar.php'deki 300px'lik
   tabloya dokunmamak için).                                               */
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table{
  width:100% !important; max-width:100% !important;
  margin:0 !important;
  border-collapse:collapse !important;
  font-family:var(--font-govde) !important;
}
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td{
  width:auto !important; height:auto !important;
  padding:11px 0 !important;
  vertical-align:top !important;
  font-size:14.5px !important; line-height:1.55 !important;
  color:var(--body) !important;
  border-bottom:1px solid var(--line-soft) !important;
}
/* 1. sütun = etiket, 2. sütun = iki nokta, 3. sütun = değer */
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td:first-child{
  width:36% !important; padding-right:10px !important;
  color:var(--navy) !important;
}
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td:first-child b{
  font-weight:600 !important;
}
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td:nth-child(2){
  width:1% !important; padding-right:8px !important;
  color:var(--line) !important;
}
/* colspan'li ilk satır = firma adı başlığı */
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table tr:first-child td{
  padding:0 0 12px !important;
  font-family:var(--font-baslik) !important;
  font-size:16px !important; line-height:1.35 !important;
  color:var(--ink) !important;
  border-bottom:2px solid var(--line) !important;
}
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table tr:first-child b{
  font-weight:800 !important;
}
/* sondaki &nbsp; dolgu satırı boşluk üretmesin */
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table tr:last-child td{
  padding:0 !important; border:0 !important; font-size:0 !important;
}
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table a{
  color:var(--brand) !important; text-decoration:none;
}
#icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table a:hover{
  text-decoration:underline;
}

/* ---------- 9. HARİTA GÖMÜSÜ ----------
   HTML'de width="100%" height="450" nitelikleri var; yükseklik duyarlı
   hale getiriliyor.                                                        */
#icerik-orta iframe[src*="maps/embed"],
#icerik-orta iframe[src*="google.com/maps"]{
  display:block;
  width:100% !important; max-width:100% !important;
  height:clamp(260px,34vw,420px) !important;
  margin:0 !important;
  border:0 !important;
}

/* ---------- 10. STATİK SAYFA TİPOGRAFİSİ (künye, gizlilik, page.php) ----
   Haber gövdesiyle aynı aile/ritim; yalnızca DOĞRUDAN çocuk metin
   öğelerini hedefler, böylece liste sayfalarındaki kart içerikleri
   (.dikey-haberler, .kutu-haberler) etkilenmez.                            */
#icerik-orta .buyuk-cerceve > p,
#icerik-orta .buyuk-cerceve > div > p,
#icerik-orta .haber-detay > p{
  margin:0 0 1.1em !important; padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:16.5px !important; line-height:1.75 !important;
  color:var(--body) !important;
}
#icerik-orta .buyuk-cerceve > h2,
#icerik-orta .buyuk-cerceve > h3,
#icerik-orta .buyuk-cerceve > h4{
  font-family:var(--font-baslik) !important;
  font-weight:700 !important; color:var(--ink) !important;
  line-height:1.3 !important;
  margin:1.5em 0 .5em !important; padding:0 !important;
}
#icerik-orta .buyuk-cerceve > h2{ font-size:21px !important; }
#icerik-orta .buyuk-cerceve > h3{ font-size:18.5px !important; }
#icerik-orta .buyuk-cerceve > h4{ font-size:16.5px !important; }
#icerik-orta .buyuk-cerceve > ul,
#icerik-orta .buyuk-cerceve > ol{
  margin:0 0 1.1em 1.35em !important; padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:16.5px !important; line-height:1.75 !important;
  color:var(--body) !important;
  list-style-position:outside;
}
#icerik-orta .buyuk-cerceve > ul > li,
#icerik-orta .buyuk-cerceve > ol > li{ margin:0 0 .45em !important; }
#icerik-orta .buyuk-cerceve > blockquote{
  margin:1.3em 0 !important; padding:14px 18px !important;
  background:var(--wash);
  border-left:3px solid var(--brand);
  border-radius:0 var(--yuvarlak) var(--yuvarlak) 0;
  font-family:var(--font-govde) !important;
  font-size:16.5px !important; line-height:1.7 !important;
  color:var(--ink) !important; font-style:normal;
}
#icerik-orta .buyuk-cerceve > p a,
#icerik-orta .buyuk-cerceve > ul a,
#icerik-orta .buyuk-cerceve > ol a{
  color:var(--brand) !important;
  text-decoration:underline; text-underline-offset:2px;
}
/* eski <font color=...> etiketlerini nötrle (statik metin bağlamında) */
#icerik-orta .buyuk-cerceve > font,
#icerik-orta .buyuk-cerceve > p font,
#icerik-orta .buyuk-cerceve > ul font,
#icerik-orta .buyuk-cerceve > table font{
  font-family:var(--font-govde) !important;
  font-size:inherit !important;
  color:inherit !important;
}
/* statik metin içindeki görsellerin sabit width/height nitelikleri */
#icerik-orta .buyuk-cerceve > img,
#icerik-orta .buyuk-cerceve > p img{
  max-width:100% !important; height:auto !important;
  border-radius:var(--yuvarlak);
  margin:8px 0;
}

/* ---------- 11. ARAMA SONUÇLARI (results.php) ----------
   İçerik alanında yeniden basılan arama kutusu. Sağ bloktaki
   .arama-tabo / .input-append kutusu KAPSAM DIŞI.                          */
#icerik-orta form[action*="results.php"],
#icerik-orta form[action*="arama"]{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 20px !important;
}
#icerik-orta form[action*="results.php"] input[type=text],
#icerik-orta form[action*="arama"] input[type=text]{
  flex:1 1 240px; width:auto !important; max-width:430px;
}
#icerik-orta form[action*="results.php"] .btn,
#icerik-orta form[action*="results.php"] input[type=submit],
#icerik-orta form[action*="arama"] input[type=submit]{
  flex:0 0 auto; min-width:120px; margin:0 !important;
}
/* aranan kelimenin vurgusu (CMS <b>/<strong> ile sarıyorsa) */
#icerik-orta .buyuk-cerceve mark,
#icerik-orta .buyuk-cerceve > p strong{
  background:rgba(200,30,40,.10);
  color:var(--ink) !important;
  padding:0 2px; border-radius:2px;
}

/* ---------- 12. BOŞ DURUM: "SONUÇ BULUNAMADI" ve 404 ----------
   Çerçevenin tek içeriği bir uyarı mesajıysa, onu dar bir mesaj şeridi
   yerine ortalanmış boş-durum panosuna dönüştür.                           */
#icerik-orta .buyuk-cerceve > .warning:only-child,
#icerik-orta .buyuk-cerceve > .alert:only-child,
#icerik-orta .haber-detay > .warning:only-of-type:last-child{
  margin:0 !important;
  padding:46px 26px !important;
  text-align:center;
  background:var(--wash) !important;
  border:1px dashed var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  color:var(--body) !important;
  font-size:16px !important;
  line-height:1.65 !important;
}
#icerik-orta .buyuk-cerceve > .warning:only-child::before,
#icerik-orta .buyuk-cerceve > .alert:only-child::before,
#icerik-orta .haber-detay > .warning:only-of-type:last-child::before{
  content:"\f119";                    /* frown-o */
  position:static;
  display:block;
  margin:0 0 14px;
  font-family:FontAwesome; font-size:38px; line-height:1;
  color:var(--muted);
}
#icerik-orta .buyuk-cerceve > .warning:only-child a,
#icerik-orta .buyuk-cerceve > .alert:only-child a{
  display:inline-block;
  margin-top:16px !important;
  padding:12px 26px !important;
  min-height:44px; line-height:20px;
  background:var(--brand) !important; color:#fff !important;
  border-radius:var(--yuvarlak);
  font-family:var(--font-baslik) !important;
  font-size:13px !important; font-weight:700 !important;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none !important;
}
#icerik-orta .buyuk-cerceve > .warning:only-child a:hover,
#icerik-orta .buyuk-cerceve > .alert:only-child a:hover{
  background:var(--navy) !important;
}

/* ---------- 13. DUYARLI DAVRANIŞ ---------- */
@media (max-width:1120px){
  /* içerik sütunu daralıyor (sağ blok 300px) — kart iç boşluklarını kıs */
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal){ column-gap:18px; }
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) > .buyuk-cerceve{
    padding:16px 16px !important;
  }
}
@media (max-width:620px){
  /* iletişim ızgarası tek sütuna iner; DOM sırası geri gelir:
     bilgiler > harita > form                                             */
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal){ display:block; }
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) > .buyuk-cerceve{
    margin:0 0 8px !important;
  }
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) > .ic-sayfalar-baslik{
    margin:26px 0 12px !important;
  }
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) > .ic-sayfalar-baslik:first-child{
    margin-top:0 !important;
  }
  /* bilgi tablosu satırları blok olsun, iki nokta sütunu gizlensin */
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table,
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table tbody,
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table tr,
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td{
    display:block !important; width:auto !important;
  }
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table tr{
    padding:10px 0; border-bottom:1px solid var(--line-soft);
  }
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td{
    padding:0 !important; border:0 !important;
  }
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td:nth-child(2){
    display:none !important;
  }
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td:first-child{
    width:auto !important; margin:0 0 3px !important;
    font-size:11.5px !important; letter-spacing:.06em; text-transform:uppercase;
    color:var(--muted) !important;
  }
  /* form: mobilde tam genişlik, buton bloklaşsın */
  #icerik-orta .control-group{ max-width:none; }
  #icerik-orta input[type=submit],
  #icerik-orta button[type=submit],
  #icerik-orta .btn{ width:100% !important; }
  #icerik-orta form[action*="results.php"] .btn,
  #icerik-orta form[action*="results.php"] input[type=submit]{ width:100% !important; }
  #icerik-orta .buyuk-cerceve > p,
  #icerik-orta .buyuk-cerceve > ul,
  #icerik-orta .buyuk-cerceve > ol{ font-size:16px !important; line-height:1.7 !important; }
}
@media (prefers-reduced-motion:reduce){
  #icerik-orta input,#icerik-orta textarea,#icerik-orta select,
  #icerik-orta .btn,#icerik-orta button{ transition:none !important; }
}

/* ##########################################################################
   GUVENLIK AGI — EN SONDA OLMALI
   Bu dosyada 38 adet display:grid/flex !important var. Bunlar CMS'in inline
   style="display:none" ile gizledigi ogeleri (sekme panelleri, acilir kutular,
   kosullu bloklar) istemeden acabilir — ana sayfada bu hata bir kez yasandi.
   Asagidaki kural, CMS ne gizlediyse gizli kalmasini garanti eder.
   jQuery .show() inline stili display:block yaptigi icin bu kural o an
   eslesmez ve oge normal sekilde acilir.
   ########################################################################## */
[style*="display: none"],
[style*="display:none"],
[style*="DISPLAY: none"],
[style*="display : none"]{
  display:none !important;
}

/* ##########################################################################
   SAG BLOK REKLAMLARI  (.sag-blok-banner-1 — haber detayda 5 adet)
   modern.css'teki ".sag-blok-banner-1{margin:0 0 0 !important}" kurali ust
   bosluğu sifirliyor ve reklam ustundeki module yapisiyordu. Burada alt/ust
   bosluk diger widget'larla ESITLENDI (18px) ve reklam sutun genisligine
   yayildi. NOT: bu dosya yalnizca ALT SAYFALARDA yuklenir.
   ########################################################################## */
.sag-blok > .sag-blok-banner-1{
  margin:18px 0 0 !important;
  padding:0 !important;
  width:auto !important;
  max-width:none !important;
  text-align:center;
  box-sizing:border-box;
}
.sag-blok > .sag-blok-banner-1:first-child{ margin-top:0 !important; }
.sag-blok > .sag-blok-banner-1 a{
  display:block !important;
  line-height:0;
}
.sag-blok > .sag-blok-banner-1 img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:var(--yuvarlak);
}
/* iframe/script ile gelen reklamlar da sutuna yayilsin */
.sag-blok > .sag-blok-banner-1 iframe,
.sag-blok > .sag-blok-banner-1 ins,
.sag-blok > .sag-blok-banner-1 > div{
  max-width:100% !important;
  margin:0 auto !important;
}
.haber-baslik{
  font-family:var(--font-baslik) !important;
  font-size:clamp(26px,2.6vw,38px) !important;
  font-weight:800 !important;
  line-height:1.14 !important;
  letter-spacing:-.022em;
  color:var(--ink) !important;
  text-shadow:none !important;
  border:0 !important;
  width:auto !important;
  margin:4px 0 10px !important;
  padding:0 !important;
}

/* ---------- 2) ICERIK: SPOT + GOVDE ---------- */
/* spot paragrafi — govdeden ayrisan giris */
.haber-detay > .haber-metin[style*="bold"]{
  font-family:var(--font-govde) !important;
  font-size:18.5px !important;
  font-weight:600 !important;
  line-height:1.62 !important;
  color:var(--ink) !important;
  margin:0 0 16px !important;
  padding:0 0 0 16px !important;
  border-left:3px solid var(--brand) !important;
}
/* manset gorseli — inline 658x330 kirilgan */
.haber-detay img[style*="658px"],
.haber-detay > a > img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  aspect-ratio:2 / 1;
  object-fit:cover;
  border:0 !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:0 2px 6px rgba(13,36,64,.10), 0 14px 30px -14px rgba(13,36,64,.40);
  display:block;
  margin:0 0 4px !important;
}
/* govde metni */
.haber-detay > .haber-metin:not([style*="bold"]){
  font-family:var(--font-govde) !important;
  font-size:17.5px !important;
  line-height:1.8 !important;
  color:var(--body) !important;
  width:auto !important;
  margin:20px 0 0 !important;
  padding:0 !important;
}
#iceriks p{ margin:0 0 1.15em !important; font-size:inherit; line-height:inherit; }
#iceriks img{ max-width:100% !important; height:auto !important; border-radius:var(--yuvarlak); margin:10px 0; }
#iceriks a{ color:var(--brand) !important; text-decoration:underline; text-underline-offset:2px; }
#iceriks h2,#iceriks h3{
  font-family:var(--font-baslik) !important; font-weight:700 !important;
  color:var(--ink) !important; line-height:1.3 !important; margin:1.5em 0 .5em !important;
}
#iceriks blockquote{
  border-left:3px solid var(--brand); background:var(--wash);
  margin:1.4em 0 !important; padding:15px 20px !important;
  border-radius:0 var(--yuvarlak) var(--yuvarlak) 0;
}

/* ---------- 3) SOSYAL PAYLASIM (duzeltildi) ----------
   ONCEKI HATA: arka plan rengini <a> uzerine vermistim. Sayfaya gomulu
   <style>'da renkler <li> UZERINDE tanimli:
     .SocialTools li.facebook{background-color:#4862a3}  ...
   ve .SocialTools li a{color:#ffffff}. Benim <a> zeminim uygulanmayinca
   BEYAZ YAZI BEYAZ ZEMIN kaldi — ikonlar gorunmuyordu.
   Simdi renk <li>'ye veriliyor, <a> saydam.                              */
.haber-detay > table[width="300"]{ display:none !important; }
.haber-detay .g-plus{ display:none !important; }

.SocialTools{
  width:auto !important;
  height:auto !important;
  position:static !important;
  margin:16px 0 20px !important;
  padding:0 !important;
  border:0 !important;
}
.SocialTools ul{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:0 !important; padding:0 !important;
  list-style:none !important;
  height:auto !important;
}
/* RENK LI UZERINDE */
.SocialTools ul li,
.SocialTools li{
  float:none !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  list-style:none !important;
  border-radius:100px !important;
  overflow:hidden;
  background-color:var(--navy) !important;
  transition:transform .16s ease, filter .16s ease;
}
.SocialTools li:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.SocialTools li.facebook{ background-color:#1877F2 !important; }
.SocialTools li.twitter { background-color:#000000 !important; }   /* 24.08.2026: eski Twitter mavisi (#1D9BF0) X'in marka rengi siyaha
      cevrildi. Bu dosya paketten SONRA yuklendigi icin modern.css'teki
      siyah kurali eziyordu; ustune yeni kural yazmak yerine kaynagi
      degistirildi. Ikonun kendisi modern.css'te SVG maskeyle X. */
.SocialTools li.linkedin{ background-color:#0A66C2 !important; }
.SocialTools li.whatsapp{ background-color:#25D366 !important; display:none !important; }
.SocialTools li.print   { background-color:#5A6672 !important; }
.SocialTools li.resizer { background-color:var(--wash) !important; }
.SocialTools li.google  { display:none !important; }   /* servis kapali */

/* <a> saydam, sadece dolgu ve yazi */
.SocialTools ul li a,
.SocialTools li a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  float:none !important;
  width:auto !important;
  height:auto !important;
  line-height:1 !important;
  padding:11px 17px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:100px !important;
  background:transparent !important;
  font-family:var(--font-baslik) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  color:#fff !important;
  text-align:center !important;
  text-decoration:none !important;
  cursor:pointer;
}
.SocialTools ul li a i,
.SocialTools li a i,
.SocialTools li a .fa{
  float:none !important;
  width:auto !important;
  height:auto !important;
  line-height:1 !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  font-size:14px !important;
  color:inherit !important;
}
/* yazi boyutu buyut/kucult dugmeleri */
.SocialTools li.resizer a,
.SocialTools li.resizer a:first-child,
.SocialTools li.resizer a:last-child{
  float:none !important; width:auto !important;
  position:static !important;
  color:var(--body) !important;
  font-size:13px !important;
  padding:11px 13px !important;
}
.SocialTools li.resizer a:first-child::after,
.SocialTools li.resizer a:last-child::after{ position:static !important; }
.SocialTools li .drp{ display:none !important; }

/* ---------- 4) YORUM POPUP (fancybox iframe + news-comment.php) ----------
   Popup icerigi ayri bir sayfa: news-comment.php (modern.css + modern-ic.css
   yukluyor). Govdesinde float:left, formunda margin-left:-70px vardi.       */
.fancybox-wrap{ max-width:96vw !important; }
.fancybox-skin{
  background:var(--bg) !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:0 10px 44px -10px rgba(13,36,64,.55) !important;
  padding:0 !important;
}
.fancybox-inner,.fancybox-outer{ max-width:100% !important; }
.fancybox-iframe{ width:100% !important; border-radius:var(--yuvarlak); background:var(--bg); }
.fancybox-overlay{ background:rgba(8,14,20,.62) !important; }
.fancybox-close{
  width:34px !important; height:34px !important;
  top:-42px !important; right:-2px !important;
  background:rgba(255,255,255,.16) !important;
  border-radius:50% !important;
}
.fancybox-close::before{
  content:"\f00d"; font-family:FontAwesome; color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center; height:100%;
}

/* ---------- 5) BOLUM BASLIKLARI: ZEMINE OTURT ---------- */
.haber-detay .ic-sayfalar-baslik,
#icerik-orta .ic-sayfalar-baslik{
  background:var(--wash) !important;
  background-image:none !important;
  border:1px solid var(--line) !important;
  border-left:4px solid var(--brand) !important;
  border-radius:var(--yuvarlak) !important;
  width:auto !important; height:auto !important;
  overflow:visible !important;
  margin:30px 0 16px !important;
  padding:12px 16px !important;
  box-sizing:border-box;
}
.haber-detay .ic-sayfalar-baslik h1,
#icerik-orta .ic-sayfalar-baslik h1{
  display:flex !important;
  align-items:center;
  gap:9px;
  font-family:var(--font-baslik) !important;
  font-size:13.5px !important;
  font-weight:800 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink) !important;
  text-shadow:none !important;
  margin:0 !important; padding:0 !important;
  width:auto !important; height:auto !important;
}
.haber-detay .ic-sayfalar-baslik h1 > i{ color:var(--brand) !important; font-size:14px; }
/* FACEBOOK YORUM basligindaki inline background:#3B5998 ezildi,
   yerine facebook mavisi sadece sol seritte kaldi */
.haber-detay .ic-sayfalar-baslik[style*="3B5998"]{
  border-left-color:#3B5998 !important;
}
.haber-detay .ic-sayfalar-baslik[style*="3B5998"] h1 > i{ color:#3B5998 !important; }
/* sag aksiyon baglantisi (YORUM YAP) — inline color:#fff gorunmez yapiyordu */
.haber-detay .dhb,
.haber-detay .ic-sayfalar-baslik .dhb{
  float:none !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
  width:auto !important;
  font-size:inherit !important;
}
.haber-detay .dhb a,
.haber-detay .dhb a:hover,
.haber-detay .ic-sayfalar-baslik .dhb a{
  display:inline-flex !important;
  align-items:center; gap:7px;
  float:none !important;
  background:var(--brand) !important;
  color:#fff !important;
  font-family:var(--font-baslik) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:7px 14px !important;
  border-radius:100px !important;
  text-decoration:none !important;
  white-space:nowrap;
  transition:filter .16s ease;
}
.haber-detay .dhb a:hover{ filter:brightness(1.1); }
.haber-detay .dhb a i{ font-size:12px; }
/* facebook yorum sayaci butona benzemesin */
.haber-detay .ic-sayfalar-baslik[style*="3B5998"] .dhb{
  background:transparent !important;
  color:var(--muted) !important;
  font-family:var(--font-govde) !important;
  font-size:12px !important;
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  padding:0 !important;
}

/* facebook yorum kutusu tasmasin (width zorlamasi 21.08.2026'da kaldirildi,
   gerekcesi yukaridaki blokta) */
.fb-comments,.fb-comments iframe,.fb-comments span{
  max-width:100% !important;
}

/* ---------- 6) ILGILI HABERLER (8 adet) ---------- */
.haber-detay .buyuk-cerceve:has(> .dikey-haberler){
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:20px 18px !important;
}
@media (max-width:1120px){
  .haber-detay .buyuk-cerceve:has(> .dikey-haberler){ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:900px){
  .haber-detay .buyuk-cerceve:has(> .dikey-haberler){ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:620px){
  .haber-baslik{ font-size:24px !important; }
  .haber-detay > .haber-metin[style*="bold"]{ font-size:16.5px !important; }
  div#iceriks{ font-size:16.5px; line-height:1.75; }   /* !important YOK - A+/A- */
  .haber-detay .buyuk-cerceve:has(> .dikey-haberler){ grid-template-columns:minmax(0,1fr) !important; }
  .haber-detay .ic-sayfalar-baslik h1{ flex-wrap:wrap; }
}

/* ##########################################################################
   21.08.2026 — MANSET GORSELI SPOTA YAKLASTIRILDI
   Gorsel, ikinci bir .haber-metin kutusunun icinde ve o kutu <br /> ile
   basliyor. Onceki "<br> gizle" kuralim .haber-detay'in DOGRUDAN cocuklari
   icindi; bu <br> bir seviye iceride oldugundan yakalanmiyordu.
   Kutu :has(> a.fancybox) ile hedeflendi — govde metnindeki satir
   sonlarina dokunulmuyor.
   ########################################################################## */
.haber-detay .haber-metin:has(> a.fancybox) > br,
.haber-detay .haber-metin:has(> a[class*="fancybox"]) > br{
  display:none !important;
}
.haber-detay .haber-metin:has(> a.fancybox),
.haber-detay .haber-metin:has(> a[class*="fancybox"]){
  margin-top:6px !important;
  padding-top:0 !important;
}
/* tarih rozeti: gomulu margin-top:-14px ile ustteki bloga biniyordu */
.haber-detay > div[style*="margin-top: -14px"],
.haber-detay > div[style*="margin-top:-14px"]{
  float:none !important;
  margin:0 0 10px !important;
  text-align:right;
}
.haber-detay .haber-tarih{
  float:none !important;
  display:inline-block;
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  color:var(--muted) !important;
  padding:0 !important; margin:0 !important;
}
.haber-detay .haber-tarih b{ font-weight:600 !important; color:var(--muted) !important; }

/* ##########################################################################
   21.08.2026 — SOSYAL CUBUK: KART + ALTTAKI KALDIRILDI
   Sayfada IKI adet .SocialTools var:
     +3470  manset gorselinin altinda   -> KALIR, kart icine alindi
     +7010  metnin sonunda (#iceriks'in ardinda) -> KALDIRILDI (istek)
   Ayirt edici bir sinif/id yok; ikincisi kardes birlestirici ile hedeflendi.
   ########################################################################## */
.haber-detay .SocialTools ~ .SocialTools,
#iceriks ~ .SocialTools,
.haber-metin #iceriks ~ .SocialTools{
  display:none !important;
}

/* kalan cubuk kart icinde */
.haber-detay .SocialTools{
  background:var(--wash) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  padding:12px 14px !important;
  margin:14px 0 22px !important;
  box-sizing:border-box;
}

/* metin sonundaki kaynak / okunma satirlari */
.haber-detay span[style*="color:#999"],
.haber-detay span[style*="color: #999"]{
  display:block !important;
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  color:var(--muted) !important;
  margin:0 0 4px !important;
}
.haber-detay span[style*="color:#999"] b{
  color:var(--ink) !important; font-weight:700 !important;
}

/* ##########################################################################
   21.08.2026 — BASLIK SARMASI: DOGAL AKIS
   .haber-baslik'e "text-wrap:balance" vermistim. Bu ozellik satirlari ESIT
   UZUNLUKTA dengeler; yani yer olsa bile 1. satiri bilerek doldurmaz ve
   baslik erkenden iki satira duser. Kaldirildi — yazi satiri doldurur,
   sigmayinca alt satira gecer.
   ########################################################################## */
.haber-baslik,
.haber-detay .haber-baslik{
  text-wrap:wrap !important;
  text-wrap-style:auto !important;
  hyphens:manual;
  overflow-wrap:break-word;
}

/* ##########################################################################
   21.08.2026 — KIRINTI YOLU (breadcrumb) KART ICINDE
   DOM: <div class="buradasiniz"><ul><li><a>Ana Sayfa</a>&raquo;<li>
        <li><a>DUNYA</a></li></ul></div>
   NOT: isaretleme bozuk — ilk <li> kapatilmamis, ayirici &raquo; li disinda.
   Tarayici duzeltiyor; kural her iki durumda da calisacak sekilde yazildi.
   ########################################################################## */
.haber-detay .buradasiniz,
#icerik-orta .buradasiniz{
  display:block !important;
  float:none !important;
  position:static !important;
  width:auto !important;
  margin:0 0 16px !important;
  padding:9px 14px !important;
  background:var(--wash) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  box-sizing:border-box;
}
.haber-detay .buradasiniz > ul,
#icerik-orta .buradasiniz > ul{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 7px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.haber-detay .buradasiniz li,
#icerik-orta .buradasiniz li{
  display:flex !important;
  align-items:center;
  float:none !important;
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.haber-detay .buradasiniz,
.haber-detay .buradasiniz a,
.haber-detay .buradasiniz li,
#icerik-orta .buradasiniz,
#icerik-orta .buradasiniz a,
#icerik-orta .buradasiniz li{
  font-family:var(--font-govde) !important;
  font-size:12.5px !important;
  line-height:1.3 !important;
  color:var(--muted) !important;
  text-decoration:none !important;
}
.haber-detay .buradasiniz a:hover,
#icerik-orta .buradasiniz a:hover{ color:var(--brand) !important; }
/* ilk baglantiya ev ikonu */
.haber-detay .buradasiniz li:first-child a::before,
#icerik-orta .buradasiniz li:first-child a::before{
  content:"\f015";
  font-family:FontAwesome;
  font-size:11px;
  margin-right:6px;
  color:var(--muted);
}
/* son adim vurgulu */
.haber-detay .buradasiniz li:last-child a,
#icerik-orta .buradasiniz li:last-child a{
  color:var(--ink) !important;
  font-weight:600 !important;
}

/* ##########################################################################
   21.08.2026 — YORUM POPUP (news/article/videos-comment.php) YENIDEN
   Eski yapi Bootstrap 2 "form-horizontal" idi ve icine gomulu negatif/sabit
   olculerle iki form yan yana zorlanmisti:
     <form style="margin-left:-70px">
     <div style="margin-left:140px; line-height:40px">      (baslik)
     <textarea style="height:200px; width:217px">
     <div style="margin-left:310px">                        (uye girisi)
     <div style="height:200px; margin-top:-477px">          (block-login.php)
   Bu -477px, uye giris formunu misafir formunun YAZI ALANI uzerine
   bindiriyordu. PHP tarafinda hepsi sinifa cevrildi; burada iki form
   alt alta, ayri birer kart olarak kuruluyor.
   ########################################################################## */
body[bgcolor="#FFFFFF"]{
  float:none !important;
  min-height:0 !important;
  width:auto !important;
  margin:0 !important;
  padding:24px 26px 28px !important;
  background:var(--wash) !important;
  font-family:var(--font-govde) !important;
  font-size:15px !important;
  line-height:1.6 !important;
  color:var(--body) !important;
  box-sizing:border-box;
}
body[bgcolor="#FFFFFF"] > div{ background:transparent !important; }

/* ust bilgi: hangi habere yorum yapiliyor */
body[bgcolor="#FFFFFF"] > div > b:first-child{
  display:block;
  font-family:var(--font-baslik) !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  color:var(--ink) !important;
  margin:0 0 12px !important;
}
body[bgcolor="#FFFFFF"] b[style*="F00"]{ color:var(--brand) !important; }

/* kurallar metni — kucuk, gri, kutuda */
body[bgcolor="#FFFFFF"] .ayrac{ border:0 !important; height:0 !important; margin:0 !important; }
body[bgcolor="#FFFFFF"] .yorum-kurallar{
  display:block;
  background:#FFF9E6;
  border:1px solid #F0E0AE;
  border-left:3px solid #D9A93B;
  border-radius:var(--yuvarlak);
  padding:11px 14px;
  font-size:12px !important;
  line-height:1.55 !important;
  color:#6A5A2E !important;
  margin:0 0 18px;
}

/* ---- iki form da birer KART ---- */
body[bgcolor="#FFFFFF"] form.form-horizontal{
  display:block !important;
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:20px 20px 22px !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  box-shadow:0 1px 3px rgba(13,36,64,.06) !important;
  box-sizing:border-box;
}
body[bgcolor="#FFFFFF"] fieldset{ margin:0 !important; padding:0 !important; border:0 !important; }

/* uye giris bloklari: -477px kacisi ve 310px girintisi iptal, alta yerlestir */
body[bgcolor="#FFFFFF"] .uye-giris-sarmal{
  display:block !important;
  float:none !important;
  clear:both !important;
  width:auto !important;
  margin:16px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
}
body[bgcolor="#FFFFFF"] .uye-giris-blok{
  display:block !important;
  float:none !important;
  clear:both !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

/* bolum basliklari ("MISAFIR OLARAK...", "UYE GIRISI YAPARAK...") */
body[bgcolor="#FFFFFF"] .yorum-blok-baslik{
  display:block !important;
  width:auto !important;
  margin:0 0 16px !important;
  padding:0 0 11px !important;
  line-height:1.3 !important;
  font-family:var(--font-baslik) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy) !important;
  border:0 !important;
  border-bottom:2px solid var(--navy) !important;
}

/* alan gruplari: etiket ustte, alan altta */
body[bgcolor="#FFFFFF"] .control-group{
  display:block !important;
  float:none !important;
  clear:both !important;
  width:auto !important;
  margin:0 0 14px !important;
  padding:0 !important;
  border:0 !important;
}
body[bgcolor="#FFFFFF"] .control-group:last-child{ margin-bottom:0 !important; }
body[bgcolor="#FFFFFF"] .control-label{
  display:block !important;
  float:none !important;
  width:auto !important;
  text-align:left !important;
  margin:0 0 6px !important;
  padding:0 !important;
  font-family:var(--font-baslik) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted) !important;
  line-height:1.2 !important;
}
body[bgcolor="#FFFFFF"] .controls{
  display:block !important;
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
}

/* alanlar */
body[bgcolor="#FFFFFF"] input[type=text],
body[bgcolor="#FFFFFF"] input[type=email],
body[bgcolor="#FFFFFF"] input[type=password],
body[bgcolor="#FFFFFF"] textarea{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:10px 12px !important;
  font-family:var(--font-govde) !important;
  font-size:15px !important;
  line-height:1.45 !important;
  color:var(--ink) !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
body[bgcolor="#FFFFFF"] textarea{
  min-height:132px !important;
  resize:vertical !important;
}
body[bgcolor="#FFFFFF"] input:focus,
body[bgcolor="#FFFFFF"] textarea:focus{
  outline:2px solid var(--navy) !important;
  outline-offset:1px;
  border-color:var(--navy) !important;
}
body[bgcolor="#FFFFFF"] input::placeholder{ color:var(--muted) !important; }
body[bgcolor="#FFFFFF"] form > fieldset > br,
body[bgcolor="#FFFFFF"] .controls > br{ display:none !important; }

/* karakter sayaci: alan degil, rozet */
body[bgcolor="#FFFFFF"] small{
  display:flex !important;
  align-items:center; gap:7px;
  margin:8px 0 0 !important;
  font-size:12px !important;
  color:var(--muted) !important;
}
body[bgcolor="#FFFFFF"] small br{ display:none !important; }
body[bgcolor="#FFFFFF"] input[name="remLensoz"]{
  display:inline-block !important;
  width:54px !important;
  padding:3px 7px !important;
  font-size:12px !important;
  font-weight:700 !important;
  text-align:center !important;
  color:var(--navy) !important;
  background:var(--wash) !important;
  border:1px solid var(--line) !important;
  border-radius:100px !important;
  pointer-events:none;
}

/* captcha: gorsel + alan yan yana */
body[bgcolor="#FFFFFF"] .controls:has(> #captchaimg){
  display:flex !important;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
body[bgcolor="#FFFFFF"] #captchaimg{
  display:block !important;
  flex:0 0 auto;
  max-width:180px !important;
  height:auto !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  margin:0 !important;
  background:var(--wash);
}
body[bgcolor="#FFFFFF"] #captcha_input{
  flex:1 1 190px;
  width:auto !important;
  margin:0 !important;
}

/* butonlar */
body[bgcolor="#FFFFFF"] .controls:has(> .btn),
body[bgcolor="#FFFFFF"] .controls:has(> input[type=submit]){
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:4px !important;
}
body[bgcolor="#FFFFFF"] input[type=submit],
body[bgcolor="#FFFFFF"] button,
body[bgcolor="#FFFFFF"] .btn{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:11px 20px !important;
  font-family:var(--font-baslik) !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.03em;
  line-height:1.2 !important;
  text-decoration:none !important;
  border-radius:6px !important;
  text-shadow:none !important;
  cursor:pointer;
  box-shadow:none !important;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
/* birincil: Gonder / Giris Yap */
body[bgcolor="#FFFFFF"] input[type=submit],
body[bgcolor="#FFFFFF"] button[type=submit],
body[bgcolor="#FFFFFF"] .btn-danger{
  min-width:150px !important;
  color:#fff !important;
  background:var(--brand) !important;
  background-image:none !important;
  border:1px solid var(--brand) !important;
}
body[bgcolor="#FFFFFF"] input[type=submit]:hover,
body[bgcolor="#FFFFFF"] .btn-danger:hover{ background:#A9161F !important; border-color:#A9161F !important; }
/* ikincil: Sifremi Unuttum / Uye Ol */
body[bgcolor="#FFFFFF"] a.btn{
  color:var(--navy) !important;
  background:var(--bg) !important;
  background-image:none !important;
  border:1px solid var(--line) !important;
}
body[bgcolor="#FFFFFF"] a.btn:hover{
  color:var(--brand) !important;
  border-color:var(--brand) !important;
  background:var(--wash) !important;
}

/* uyari / sonuc mesajlari */
body[bgcolor="#FFFFFF"] .warning,
body[bgcolor="#FFFFFF"] .basarili,
body[bgcolor="#FFFFFF"] .hata{
  display:block !important;
  float:none !important;
  margin:0 0 14px !important;
  padding:10px 13px !important;
  font-size:13px !important;
  line-height:1.45 !important;
  border-radius:6px !important;
  background:#FDECEE !important;
  border:1px solid #F3C2C7 !important;
  border-left:3px solid var(--brand) !important;
  color:#8E1B22 !important;
}
body[bgcolor="#FFFFFF"] .temizle{ clear:both; height:0; }

/* giris yapmis uye paneli */
body[bgcolor="#FFFFFF"] ul.kullanici_paneli{
  list-style:none !important;
  margin:0 !important; padding:0 !important;
  display:flex; flex-wrap:wrap; gap:8px;
}
body[bgcolor="#FFFFFF"] ul.kullanici_paneli li{
  margin:0 !important; padding:0 !important; background:none !important; border:0 !important;
}
body[bgcolor="#FFFFFF"] ul.kullanici_paneli li a{
  display:inline-block; padding:7px 13px;
  font-size:13px; color:var(--navy) !important;
  background:var(--wash); border:1px solid var(--line);
  border-radius:6px; text-decoration:none !important;
}
body[bgcolor="#FFFFFF"] ul.kullanici_paneli li a:hover{ color:var(--brand) !important; border-color:var(--brand); }

@media (max-width:520px){
  body[bgcolor="#FFFFFF"]{ padding:16px 14px 20px !important; }
  body[bgcolor="#FFFFFF"] form.form-horizontal{ padding:15px 14px 17px !important; }
  body[bgcolor="#FFFFFF"] input[type=submit],
  body[bgcolor="#FFFFFF"] .btn{ flex:1 1 100%; }
}


/* ##########################################################################
   21.08.2026 — VIDEO GALERI SAG BLOKU  (/video-galeri/ ve /video-galeri/kategori/)
   Onceki turda bu sayfanin YALNIZ icerik alani duzenlenmisti; sag blok
   ("VIDEO KATEGORILERI" + "VIDEOLAR / COK IZLENENLER / YORUMLANANLAR")
   bilerek disarida birakilmisti. Kullanici bozuklugu orada bildirdi.

   Tarayicida OLCULEN bozukluklar (getBoundingClientRect + getComputedStyle):
     1) .ckic_top-haber 196px yuksekti; .haber 92px'lik GORSEL sutununda hem
        gorseli hem de aciklama metnini tasiyordu -> metin 92px'e sikisiyordu.
     2) Izlenme rozeti (.video-galeri-baslik-blok) float:right + margin-top:-27px
        ile aciklamanin uzerine biniyordu; beyaz metin, kayan doku.
     3) Secili sekme ("COK IZLENENLER") metni digerleriyle AYNI renkteydi.
     4) Kategori listesinin <ul> yuksekligi 0'di (float'lar kapsanmiyor),
        maddeler 2 sutuna float'lanmis, eski tema/video.gif ikonu kullaniliyordu.
     5) "YORUMLANANLAR" sekmesinin paneli BOMBOS aciliyordu.

   KATMAN SECIMI: bu kurallar bilerek modern-ic.css'e yazildi. .ckic ve
   .TabbedPanels ANA SAYFADA DA var; ana sayfa dondurulmus oldugu icin
   (kullanicinin "vazgecilmez kurali") oraya dokunulmadi. Ana sayfa
   modern-ic.css'i hic yuklemiyor -> sifir yan etki. Ana sayfada da ayni
   gorunum istenirse 3 numarali kural modern.css'e tasinir.
   ########################################################################## */

/* ---------- 1. ckic OGESI: ACIKLAMA METNI GORSEL SUTUNUNU SISIRIYORDU ----------
   Ayni modulun HABER surumunde (include/top-news.php) aciklama <a> ICINDE
   duruyor ve modern.css'teki ".ckic_top-haber > .haber a{font-size:0}" onu
   zaten kapatiyor. VIDEO surumunde (include/top-comments-videos.php satir 22)
   aciklama <a> DISINDA, ciplak bir metin dugumu -> o kural ona degmiyordu.
   font-size'i .haber'in KENDISINE veriyoruz; ciplak metin de kapanir.
   Gorsel bir replaced element oldugu icin font-size'dan etkilenmez.
   OLCUM: .ckic_top-haber 196px -> 85px, .haber 169px -> 58px.            */
.ckic_top-haber > .haber{
  font-size:0 !important;
  line-height:0 !important;
}

/* ---------- 2. IZLENME ROZETI ----------
   modern.css'te ".ckic > .video-galeri-baslik-blok{display:none}" var ama o
   secici ANA SAYFA yapisina gore yazilmis: orada rozet .ckic_top-haber'in
   DISINDA, .ckic'in dogrudan cocugu. Video/galeri surumunde rozet
   .ckic_top-haber'in ICINDE -> secici yakalamiyordu.
   Kullanici "kaldir okunma sayilarini cok okunanlardan" demisti; ayni karar. */
.ckic_top-haber > .video-galeri-baslik-blok{
  display:none !important;
}

/* ---------- 3. SEKME ETIKETI RENGI ----------
   Spry secili <li>'ye .TabbedPanelsTabSelected ekliyor ve modern.css ona
   marka rengi + 2px alt cizgi veriyor. Ama metin ic <div class="baslik">'te
   ve modern.css satir 47-53'teki genel ".baslik{color:var(--ink)!important}"
   onu eziyordu -> iki sekme de AYNI koyu renkte kaliyordu.
   (0,2,0) ozgullukle (0,1,0)'i asiyoruz; renk artik <li>'den miras alinir:
   secili = marka kirmizi, digerleri = --muted.                            */
.TabbedPanelsTab > .baslik,
.TabbedPanelsTab > .baslik a{
  color:inherit !important;
}

/* ---------- 4. VIDEO KATEGORILERI ----------
   Eski tema (tema.css 435-437): li{float:left;width:140px}
   + a{background:url(../tema/video.gif) no-repeat; padding-left:25px}
   modern.css'te bu modul icin HIC kural yoktu. <ul> float'lari kapsamadigi
   icin yuksekligi 0'di; kutu yuksekligini yalnizca .temizle ayakta tutuyordu.
   OLCUM: ul 0px -> 176px.                                                 */
.sag-blok .video-kategoriler > ul{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  list-style:none !important;
  float:none !important;
}
.sag-blok .video-kategoriler > ul > li{
  display:block !important;
  float:none !important;
  clear:none !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  background:none !important;
  border:0 !important;
}
.sag-blok .video-kategoriler > ul > li > a{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:9px 11px !important;
  background-image:none !important;        /* tema/video.gif kapatildi */
  background-color:var(--wash) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  font-family:var(--font-baslik) !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  color:var(--navy) !important;
  text-decoration:none !important;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
/* FontAwesome tema.css.php ve diger.css icinde @import ile geliyor —
   olculdu: U+F04B genisligi 31px (serif fallback 10px olurdu). */
.sag-blok .video-kategoriler > ul > li > a::before{
  content:"\f04b";                          /* fa-play */
  font-family:FontAwesome !important;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  font-size:8px;
  line-height:1;
  padding-left:1px;
  color:#fff;
  background:var(--brand);
  border-radius:50%;
  transition:background-color .16s ease, color .16s ease;
}
.sag-blok .video-kategoriler > ul > li > a:hover{
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
}
.sag-blok .video-kategoriler > ul > li > a:hover::before{
  background:#fff;
  color:var(--brand);
}
.sag-blok .video-kategoriler > .temizle{ display:none !important; }

/* ---------- 5. ICERIGI BOS IKINCI SEKMEYI GIZLE ----------
   videoyorumlarigoster(3) bos donunce "YORUMLANANLAR" sekmesi tiklaninca
   bombos bir panel aciyordu.
   DIKKAT: ":has() icinde :has()" CSS'te GECERSIZDIR — ic ice yazilan ilk
   denemem sessizce dusmustu (olcumle yakalandi). Iki :has() ayni duzeyde:
     1. kosul: widget gercekten .ckic panelleri kullaniyor (yanlis widget'i vurma)
     2. kosul: 2. panelde hic .ckic_top-haber yok (yani bombos)
   Yorum eklenirse kural kendiliginden devre disi kalir, sekme geri gelir.   */
.TabbedPanels:has(> .TabbedPanelsContentGroup > .TabbedPanelsContent > .ckic):not(:has(> .TabbedPanelsContentGroup > .TabbedPanelsContent:nth-of-type(2) > .ckic > .ckic_top-haber)) > .TabbedPanelsTabGroup > .TabbedPanelsTab:nth-of-type(2){
  display:none !important;
}


/* ##########################################################################
   21.08.2026 — SOSYAL EKLENTI IFRAME'LERI OYNATICI SAYILMASIN
   Facebook (comments, comments-count, like) kendi iframe'lerini yukleyemedigi
   ya da henuz olculemedigi anda inline "width:0px; height:0px" ile katliyor.
   Bizim video/oran/zemin kurallarimizdan HICBIRI bunlara dokunmamali; aksi
   halde katlanmis kutu tekrar acilip siyah bir dikdortgen olarak gorunuyor.
   ########################################################################## */
#icerik-orta iframe[src*="facebook.com/plugins"],
#icerik-orta iframe[src*="facebook.net"],
#icerik-orta .fb_iframe_widget iframe,
#icerik-orta .fb-comments iframe,
#icerik-orta .fb-like iframe{
  aspect-ratio:auto !important;
  background:transparent !important;
  border:0 !important;
}
/* FB widget sarmalayicisi da kendi olcusunu korusun */
#icerik-orta .fb_iframe_widget,
#icerik-orta .fb_iframe_widget > span{
  max-width:100% !important;
  background:transparent !important;
}
/* ##########################################################################
   21.08.2026 — "DAHA FAZLA HABER GOSTER" DUGMESI  (/gunun-haberleri/)
   today.php:122-129 ve today-ajax.php:30-38 ayni dugumu basiyor; ikisinde de
   ESKI TEMA gomulu stili var:
     background:#eee url(../tema/menu-bg.png) repeat-x;  color:#FFF;
     border:solid 1px #dddddd; -moz-border-radius:6px; -webkit-border-radius:6px
   Yani ACIK GRI zemin uzerinde BEYAZ yazi + 2013 sprite'i + on ekli yuvarlaklik.
   PHP yerine CSS ile duzeltiyoruz: AJAX ile SONRADAN eklenen dugmeler de
   ayni bicimi alsin (JS her "daha fazla"da yeni bir .morebox basiyor).
   Gomulu stili ezmek icin !important sart.
   ########################################################################## */
.morebox{
  display:block !important;
  width:auto !important;
  margin:24px 0 10px !important;
  padding:0 !important;
  background:var(--wash) !important;
  background-image:none !important;      /* tema/menu-bg.png devre disi */
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  color:var(--navy) !important;          /* beyaz-uzerine-gri okunmazligi biter */
  font-weight:400 !important;
  font-size:inherit !important;
  text-align:center !important;
  overflow:hidden !important;
  transition:background-color .18s ease, border-color .18s ease;
}
.morebox > a.more{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:auto !important;
  padding:15px 18px !important;
  margin:0 !important;
  font-family:var(--font-baslik) !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  letter-spacing:.04em;
  line-height:1.2 !important;
  color:var(--navy) !important;
  text-decoration:none !important;
  background:none !important;
  border:0 !important;
  transition:color .18s ease;
}
/* FontAwesome tema.css.php/diger.css icinde @import ile geliyor */
.morebox > a.more::after{
  content:"\f107";                       /* fa-angle-down */
  font-family:FontAwesome !important;
  font-size:16px;
  line-height:1;
  opacity:.75;
}
.morebox:hover{
  background:var(--brand) !important;
  border-color:var(--brand) !important;
}
.morebox:hover > a.more{ color:#fff !important; }
.morebox:hover > a.more::after{ opacity:1; }
/* yukleniyor durumu: JS dugumun icini <img src="tema/loading.gif"> ile degistiriyor */
.morebox > img{
  display:block !important;
  margin:15px auto !important;
  width:auto !important;
  max-width:100% !important;
}
@media (max-width:620px){
  .morebox > a.more{ padding:13px 14px !important; font-size:12.5px !important; }
}


/* ##########################################################################
   21.08.2026 — RSS SERVISLERI SAYFASI  (/rss/ -> rss-s.php)
   Eski hali: cerceve/kart YOK; iceriik <table width="429" height="32"> icinde
   dokuluyordu. Her kategori hucresinde </a><br /><br /> vardi ve tablonun
   ICINDE (tr disinda) basibos bir <br /><br /> daha — tarayici onu tablodan
   disari tasiyip ustte bosluk aciyordu. Basliklar bu yuzden "havada" duruyordu.
   XML baglantilari 36x14'luk tema/xml.gif goruntusuydu.
   PHP tarafinda gereksiz <br>/bos <p>/sabit olculer temizlendi ve tabloya
   .rss-tablo sinifi verildi; bicim burada.
   ########################################################################## */
#icerik-orta .buyuk-cerceve:has(> .rss-tablo){
  display:block !important;
  width:auto !important;
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  padding:22px 24px !important;
  margin:0 0 18px !important;
  box-shadow:var(--golge);
}
#icerik-orta .buyuk-cerceve:has(> .rss-tablo) > p{
  margin:0 0 10px !important;
  padding:0 !important;
  font-family:var(--font-govde) !important;
  font-size:15.5px !important;
  line-height:1.65 !important;
  color:var(--body) !important;
}
#icerik-orta .buyuk-cerceve:has(> .rss-tablo) > p:last-of-type{ margin-bottom:0 !important; }
#icerik-orta .buyuk-cerceve:has(> .rss-tablo) > p strong{
  color:var(--ink) !important;
  font-weight:700 !important;
}

#icerik-orta .rss-tablo{
  width:100% !important;
  height:auto !important;
  border-collapse:collapse !important;
  border:0 !important;
  margin:8px 0 0 !important;      /* satirlar esit yukseklikte kalsin diye ust bosluk tabloda */
  table-layout:auto !important;
}
#icerik-orta .rss-tablo td{
  width:auto !important;
  height:auto !important;
  padding:14px 0 !important;
  border:0 !important;
  border-bottom:1px solid var(--line-soft) !important;
  vertical-align:middle !important;
  background:transparent !important;
}
#icerik-orta .rss-tablo tr:last-child td{ border-bottom:0 !important; padding-bottom:2px !important; }

/* sol sutun: servis adi (ilk 3 satirda duz metin, digerlerinde <span><a>) */
#icerik-orta .rss-tablo td:first-child,
#icerik-orta .rss-tablo td:first-child span,
#icerik-orta .rss-tablo td:first-child a{
  font-family:var(--font-baslik) !important;
  font-size:14.5px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  background:none !important;
  padding:0 !important;
}
#icerik-orta .rss-tablo td:first-child{ padding:14px 0 !important; }
#icerik-orta .rss-tablo td:first-child a:hover{ color:var(--brand) !important; }

/* sag sutun: XML rozeti — tema/xml.gif gizlenip yerine RSS turuncusu hap dugme */
#icerik-orta .rss-tablo td:last-child{
  width:1% !important;
  white-space:nowrap !important;
  text-align:right !important;
}
#icerik-orta .rss-tablo td:last-child > a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 15px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:100px !important;
  background:#F3701F !important;
  color:#fff !important;
  font-family:var(--font-baslik) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.07em;
  line-height:1 !important;
  text-decoration:none !important;
  transition:filter .16s ease, transform .16s ease;
}
#icerik-orta .rss-tablo td:last-child > a:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  color:#fff !important;
}
#icerik-orta .rss-tablo td:last-child > a > img{ display:none !important; }
/* FontAwesome tema.css.php/diger.css icinde @import ile geliyor */
#icerik-orta .rss-tablo td:last-child > a::before{
  content:"\f09e";                       /* fa-rss */
  font-family:FontAwesome !important;
  font-size:12px;
  line-height:1;
}
#icerik-orta .rss-tablo td:last-child > a::after{ content:"XML"; }

@media (max-width:620px){
  #icerik-orta .buyuk-cerceve:has(> .rss-tablo){ padding:16px 14px !important; }
  #icerik-orta .rss-tablo td:first-child,
  #icerik-orta .rss-tablo td:first-child span,
  #icerik-orta .rss-tablo td:first-child a{ font-size:13.5px !important; }
  #icerik-orta .rss-tablo td:last-child > a{ padding:7px 12px !important; }
}


/* ##########################################################################
   21.08.2026 — YOL VE TRAFIK DURUMU  (/yol-durumu -> trafik.php)
   Bu sayfa ionCube ile sifreli; modern.css/modern-ic.css'i sayfaya
   include/modern-css-enjekte.php enjekte ediyor (bkz. trafik.php sarmalayicisi).
   YAPI FARKI: sayfada #icerik-orta ve .sag-blok YOK — #icerik'in dogrudan
   cocuklari basliK + Yandex harita kabi (#map). modern.css #icerik'i
   "1fr + 340px" izgarasi yaptigi icin harita OTOMATIK olarak 2. sutuna
   (340px'lik sag blok sutununa) dusuyordu. Olculdu: #map x=992 g=340.
   Bu sayfa tipinde izgarayi tek sutuna indir.
   ########################################################################## */
#icerik:has(> #map){
  grid-template-columns:minmax(0,1fr) !important;
  row-gap:0 !important;
}
#icerik:has(> #map) > .ic-sayfalar-baslik{
  grid-column:1 / -1 !important;
  width:auto !important;
  margin:30px 0 16px !important;
}
#icerik > #map{
  grid-column:1 / -1 !important;
  width:auto !important;
  min-width:0 !important;
  height:clamp(420px,62vh,660px) !important;
  margin:0 0 26px !important;
  border:1px solid var(--line) !important;
  border-radius:var(--yuvarlak) !important;
  overflow:hidden !important;
  background:var(--wash) !important;
  box-shadow:var(--golge);
}
/* Yandex katmanlari kabin yuvarlak koselerini tasmasin */
#icerik > #map > *{ max-width:100% !important; }
@media (max-width:620px){
  #icerik > #map{ height:clamp(320px,54vh,460px) !important; }
}

/* ---------------------------------------------------------------------------
   22.08.2026 — RESPONSIVE: alt sayfalarda iki sutunlu duzenin cokmesi
   BELIRTI: haber/galeri/yazar gibi TUM alt sayfalarda 900px altinda icerik
   sutunu 0px'e dusuyor, sag blok icerigin uzerine biniyor, baslik harf harf
   dikey akiyordu.
   KOK SEBEP: bu dosyadaki
       .sag-blok{ grid-column:2 !important; grid-row:1 !important; }
   kurali MEDYA SORGUSU DISINDA ve !important. modern.css 900px altinda
   #icerik'i tek sutuna dusuruyor, ama bu kural sag bloku yine 2. sutuna
   zorluyor -> ortuk ikinci sutun olusuyor ve icerige 0px kaliyor.
   Olculdu: izgara sablonu "0px 325px", #icerik-orta genislik 0.
   COZUM: dar ekranda her iki ogeyi de 1. sutuna al, satirlari akisa birak.
   Olcum sonrasi: sablon "347px", icerik 347px, sag blok icerigin ALTINDA.
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  #icerik{
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto !important;
  }
  #icerik > #icerik-orta,
  #icerik > .sag-blok{
    grid-column:1 !important;
    grid-row:auto !important;
    width:auto !important;
    min-width:0 !important;
    float:none !important;
  }
}

/* ==========================================================================
   6.5b  FOTOĞRAF SAHNESİ — MOBİL YÜKSEKLİK DÜZELTMESİ
   Sorun: 6.5'teki temel kural sahneye height:clamp(300px,64vh,680px) veriyor.
   Mobil karsiligi (@media max-width:760px, height:clamp(240px,52vh,420px))
   dosyada temel kuraldan ONCE geldigi ve ozgullukler esit oldugu icin
   kaynak sirasi geregi kaybediyordu. Sonuc: 390x844 telefonda sahne 576px,
   icindeki gorsel 199px -> kutunun ucte ikisi bos koyu alan.
   Cozum: telefon/tablette sahne gorseli sarsin (height:auto), gorsel de
   ekranin belli bir oranini asmasin. Bu blok dosyanin SONUNDA durur,
   boylece esit ozgullukteki catismalari kaynak sirasi geregi kazanir.
   ========================================================================== */
@media (max-width:760px){
  #icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a,
  .buyuk-cerceve a.foto-sahne{
    height:auto !important;
    min-height:200px !important;
    padding:10px !important;
  }
  #icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a > img,
  .buyuk-cerceve a.foto-sahne > img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:66vh !important;
  }
}
@media (max-width:480px){
  #icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a,
  .buyuk-cerceve a.foto-sahne{
    min-height:170px !important;
    padding:8px !important;
  }
  #icerik:has(.fotogaleribilgi) div[align="center"]:has(> .pagination) > a > img,
  .buyuk-cerceve a.foto-sahne > img{
    max-height:60vh !important;
  }
}

/* ==========================================================================
   7b  İLETİŞİM SAYFASI — MOBİL TEK SÜTUN
   Bolum 7'deki izgara iki sutunlu ve mobil karsiligi yoktu: 390px'te form
   174px, bilgi kutusu 149px'e sikisiyor, e-posta adresi kutuyu tasiriyordu.
   Cocuklara sabit grid-row verildigi icin sutun sayisini 1'e dusurmek tek
   basina yetmez (ayni satiri paylasan iki oge ust uste biner); bu yuzden
   yerlesim tamamen sifirlanip sira `order` ile kuruluyor:
   FORM -> BILGILER -> HARITA (masaustundeki soldan saga okuma sirasi).
   ========================================================================== */
@media (max-width:760px){
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal):has(iframe[src*="maps/embed"]){
    grid-template-columns:minmax(0,1fr) !important;
    column-gap:0 !important;
  }
  /* tum cocuklarin sabit yerlesimini birak */
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) > .ic-sayfalar-baslik,
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) > .buyuk-cerceve{
    grid-column:1 !important;
    grid-row:auto !important;
    width:auto !important;
    min-width:0 !important;
  }
  /* okuma sirasi */
  #icerik-orta .haber-detay > .ic-sayfalar-baslik:has(+ .buyuk-cerceve > form.form-horizontal){ order:1 !important; }
  #icerik-orta .haber-detay > .buyuk-cerceve:has(> form.form-horizontal){                        order:2 !important; }
  #icerik-orta .haber-detay > .ic-sayfalar-baslik:has(+ .buyuk-cerceve > table){                 order:3 !important; margin-top:26px !important; }
  #icerik-orta .haber-detay > .buyuk-cerceve:has(> table):has(~ .buyuk-cerceve > form.form-horizontal){ order:4 !important; }
  #icerik-orta .haber-detay > .ic-sayfalar-baslik:has(+ .buyuk-cerceve > iframe[src*="maps/embed"]){    order:5 !important; }
  #icerik-orta .haber-detay > .buyuk-cerceve:has(> iframe[src*="maps/embed"]){                          order:6 !important; }

  /* uzun e-posta/adres kutuyu tasirmasin */
  #icerik-orta .haber-detay:has(> .buyuk-cerceve > form.form-horizontal) .buyuk-cerceve > table td{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
  /* form alanlari tam genislik */
  #icerik-orta form.form-horizontal input[type="text"],
  #icerik-orta form.form-horizontal input[type="email"],
  #icerik-orta form.form-horizontal input:not([type]),
  #icerik-orta form.form-horizontal textarea,
  #icerik-orta form.form-horizontal select{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* ==========================================================================
   9  ANKET LISTESI — YANLIS GIRINTI
   Genel amacli "#icerik-orta .buyuk-cerceve > ul{margin-left:1.35em}" kurali
   (madde isaretli metin listeleri icin yazilmisti) kart izgarasi olan
   ul.diger-haberler'e de uygulaniyordu: baslik seridi x=14'ten, kartlar
   x=36'dan basliyordu. Yalniz bu listeyi disari aliyoruz.
   ========================================================================== */
#icerik-orta .buyuk-cerceve > ul.diger-haberler{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ==========================================================================
   10  SINEMA SAYFASI — FLOAT MERDIVENI
   .films kartlari float:left ve yukseklikleri degisken (73/95/139/161px).
   Kisa bir kart raf birakinca sonraki kart ona takiliyor, satirlar kayiyor
   ve aralarda bosluk kaliyordu. Ayrica .haber-detay float'lari kapsamadigi
   icin yuksekligi 97px'te kaliyor, kartlar kutunun disina tasip alttaki
   bloklarin uzerine biniyordu.
   - Her genislikte: kapsayici float'lari icine alsin (tasma/binme biter).
   - <=900px: izgaraya gecilir; satirlar hizalanir, merdiven tamamen biter.
     Basliklar ve diger kardesler tum satiri kaplar.
   ========================================================================== */
#icerik-orta .haber-detay:has(> .films){
  display:flow-root;          /* float kapsama - masaustu gorunumu degismez */
}
@media (max-width:900px){
  #icerik-orta .haber-detay:has(> .films){
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(min(96px,100%),1fr)) !important;
    gap:18px 12px !important;
    align-items:start !important;
  }
  #icerik-orta .haber-detay:has(> .films) > .films{
    float:none !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
  }
  /* baslik, ayrac vb. tum satiri kaplasin */
  #icerik-orta .haber-detay:has(> .films) > :not(.films){
    grid-column:1 / -1 !important;
  }
  /* izgarada <br> bos satir acmasin */
  #icerik-orta .haber-detay:has(> .films) > br{ display:none !important; }
  /* afisler ayni oranda olsun ki satirlar duzgun otursun */
  #icerik-orta .haber-detay:has(> .films) > .films img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:2 / 3;
    object-fit:cover !important;
    display:block !important;
    border-radius:6px;
  }
  #icerik-orta .haber-detay:has(> .films) > .films a{
    display:block !important;
    width:auto !important;
  }
}

/* ============================================================================
   HABER KUNYESI — kaynak / editor / okunma sayisi          (24.08.2026)
   ----------------------------------------------------------------------------
   SORUN: Bu ucu, haber gövdesinin hemen altinda ciplak
          <span style="color:#999">...</span><br /><br />
   olarak duruyordu. Kendi kabi olmadigi icin makale tipografisini miras
   aliyor, son paragrafa yapisiyor ve okuyucuya haber metninin devami gibi
   gorunuyordu (ekran goruntusunde de boyle rapor edildi).

   COZUM: Gövdeden ince bir cizgiyle ayrilan, kendi ritmi ve hiyerarsisi olan
   kunye seridi. Etiket kucuk/versal/soluk, deger koyu; ikonlar marka renginde.
   Okunma sayisi masaustunde saga yaslanir, mobilde akista kalir.
   ============================================================================ */
.hp-kunye{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 24px;
  margin:24px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--line);
  font-family:var(--font-govde);
  font-size:13px;
  line-height:1.45;
  color:var(--muted);
}
.hp-kunye__oge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.hp-kunye__oge .fa{
  color:var(--brand);
  font-size:13px;
  line-height:1;
}
.hp-kunye__etiket{
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}
.hp-kunye__deger{
  color:var(--ink);
  font-weight:600;
  white-space:normal;          /* uzun kaynak adi sarabilsin */
}
/* okunma sayisi serinin sagina yaslanir; digerleri solda kalir */
.hp-kunye__okunma{ margin-left:auto; }

@media (max-width:640px){
  .hp-kunye{
    gap:8px 18px;
    margin-top:20px;
    padding-top:12px;
    font-size:12.5px;
  }
  /* 24.08.2026: okunma sayisi MOBILDE DE saga yaslanir (kullanici istegi).
     Onceden burada margin-left:0 ile akisa birakiliyordu; artik her
     genislikte serit in sagina hizali duruyor. Kaynak solda, okunma sagda. */
  .hp-kunye__okunma{ margin-left:auto; }
}

/* ----------------------------------------------------------------------------
   PAYLASIM CUBUGU — yazi boyutu denetimi (A+ / A-)          (24.08.2026)
   Renkli paylasim dugmelerinin yaninda duran A+/A- kutusunun zemini
   var(--wash) idi; beyaz uzerinde neredeyse gorunmuyordu ve ozellikle
   mobilde alt satira dustugunde bicimsiz duz metin gibi kaliyordu.
   Kendi cercevesi verildi; boylece bir denetim ogesi oldugu okunuyor.
   ---------------------------------------------------------------------------- */
.SocialTools li.resizer{
  border:1px solid var(--line) !important;
  background-color:var(--bg) !important;
}
.SocialTools li.resizer:hover{
  transform:none;                 /* metin dugmesi ziplamasin */
  border-color:#CFD6DD !important;
}
.SocialTools li.resizer a{
  color:var(--body) !important;
}

/* ----------------------------------------------------------------------------
   PAYLASIM CUBUGU — TUM GENISLIKLERDE AYNI DUZEN            (24.08.2026)
   ----------------------------------------------------------------------------
   Bu kurallar once yalnizca mobile (max-width:640px) uygulaniyordu. Masaustu
   ve tablette ise uc ayri gorsel dil yan yana duruyordu:
     - renkli, metinli haplar (Paylas / Tweetle / Paylas)
     - beyaz cercevelli, farkli genislikte A+/A- kutusu
     - hepsinden genis kirmizi "Sesli Dinle"
   Uc farkli boy ve bicim serit i dagitiyordu. Kullanicinin mobilde begendigi
   duzen (esit daireler + kompakt A+/A-) TUM genisliklere tasindi; medya
   sorgusu kaldirildi.

   Duzen: sosyal ikonlar ve ses dugmesi 38px esit daire, A+/A- ayni
   yukseklikte kompakt hap. A+/A- ve ses dugmesi seridin SAGINA yaslanir,
   sosyal ikonlar solda kalir.

   NEDEN font-size:0 : "Paylas" metni <a> icinde CIPLAK bir metin dugumu,
   kendi sarmalayicisi yok; secici ile gizlenemiyor. Ust ogede font-size:0
   verip ikonda geri acmak bu yapida tek temiz yol. Erisilebilirlik icin
   her dugmede title ve aria-label var.

   Kurallar dosyanin SONUNDA cunku 5216'daki ".SocialTools ul li a" (0,3,1)
   daha ozgul; onun ONUNDE yazilan kurallar etkisiz kaliyordu.
   ---------------------------------------------------------------------------- */
.SocialTools ul,
.haber-detay .SocialTools ul{
  flex-wrap:nowrap !important;
  gap:8px !important;
  align-items:center !important;
}
/* sosyal dugmeler + sesli dinle: yalnizca ikon, esit daire */
.SocialTools ul li:not(.resizer) a,
.SocialTools li:not(.resizer) a{
  font-size:0 !important;
  gap:0 !important;
  padding:0 !important;
  width:38px !important;
  height:38px !important;
  justify-content:center !important;
  border-radius:100px !important;
}
.SocialTools ul li:not(.resizer) a i,
.SocialTools li:not(.resizer) a i,
.SocialTools li:not(.resizer) a .fa{
  font-size:15px !important;
  margin:0 !important;
}
/* A+ / A- : ayni yukseklik, kompakt, seridin sagina yaslanir.
   li'ye ACIK yukseklik veriliyor: icindeki iki <a> ve ::after sozde
   ogeleri yuzunden kutu kendiliginden dairelerden YUKSEK cikiyordu. */
.SocialTools li.resizer{
  margin-left:auto !important;
  height:38px !important;
  display:inline-flex !important;
  align-items:center !important;
  overflow:visible !important;
}
.SocialTools ul li.resizer a,
.SocialTools li.resizer a{
  font-size:13px !important;
  padding:0 9px !important;
  gap:2px !important;
  width:auto !important;
  height:36px !important;
}

@media (max-width:640px){
  .SocialTools ul,
  .haber-detay .SocialTools ul{ gap:7px !important; }
}

/* ============================================================================
   SESLI DINLE DUGMESI                                        (24.08.2026)
   ----------------------------------------------------------------------------
   Paylasim cubugunda A- 'nin sagina, marka renginde bir dugme. Okuma
   suruyorken renk koyulasir ve ikon duraklat'a doner (JS yonetir).
   Kose yazisi sayfasinda paylasim cubugu olmadigi icin ayrica bagimsiz
   .hp-dinle-serit bicimi tanimli.
   Mobil davranis: yukaridaki "tek satir" kurallari .hp-dinle'yi de
   :not(.resizer) oldugu icin 38px'lik ikon dairesine cevirir; boylece
   dugme eklenmesine ragmen serit tek satirda kalir.
   ============================================================================ */
.SocialTools li.hp-dinle{
  background-color:var(--brand) !important;
}
.SocialTools li.hp-dinle.hp-dinle--aktif{
  background-color:var(--brand-dark) !important;
}
.SocialTools li.hp-dinle a{
  color:#fff !important;
}

/* Kose yazisi sayfasi: bagimsiz serit */
.hp-dinle-serit{
  margin:14px 0 18px;
}
.hp-dinle-serit a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:100px;
  background:var(--brand);
  color:#fff !important;
  font-family:var(--font-govde);
  font-size:13px; font-weight:600;
  line-height:1;
  text-decoration:none !important;
  transition:background .16s ease;
}
.hp-dinle-serit a:hover{ background:var(--brand-dark); }
.hp-dinle-serit .fa{ font-size:15px; }
.hp-dinle-serit.hp-dinle--aktif a{ background:var(--brand-dark); }

@media (max-width:640px){
  .hp-dinle-serit a{ padding:9px 15px; font-size:12.5px; }
}

/* ----------------------------------------------------------------------------
   OKUMA HIZI ROZETI                                          (24.08.2026)
   Kullanici "cok yavas" dedi. Varsayilan hiz 1.15'e cikarildi, ayrica
   okuma sirasinda tiklanabilir bir hiz rozeti gosteriliyor (1 / 1,15 /
   1,3 / 1,5 / 0,9). Rozet YALNIZCA okuma surerken gorunur; bostayken
   gizli oldugu icin mobildeki tek satir duzenini bozmuyor.
   ---------------------------------------------------------------------------- */
.hp-hiz{
  display:none !important;
}
.hp-hiz.hp-hiz--acik{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:0 11px;
  height:38px;
  border-radius:100px !important;
  background:var(--wash) !important;
  border:1px solid var(--line) !important;
  color:var(--body) !important;
  font-family:var(--font-govde) !important;
  font-size:12.5px !important; font-weight:700 !important;
  line-height:1;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.hp-hiz.hp-hiz--acik:hover{ border-color:#CFD6DD !important; }

/* bagimsiz seritte (kose yazisi sayfasi) rozet dugmenin yanina gelir */
.hp-dinle-serit + .hp-hiz.hp-hiz--acik{
  margin-left:8px;
  height:34px;
  vertical-align:middle;
}