/* BafraHaber -- ortak grid olculeri + renk paleti tokenleri (www/vip/m/v ortak taban) */

:root {
  /* Grid olculeri (masaustu) */
  --bh-outer-w: 1600px;
  --bh-body-w: 1240px;
  --bh-gap: 20px;
  --bh-tower-w: 160px;
  --bh-tower-h: 600px;
  --bh-masthead-h: 160px;
  --bh-bar-h: 50px;

  /* Sabit marka renkleri (bar'lar) -- temadan bagimsiz */
  --bh-bar-bg: #000000;
  --bh-bar-fg: #ffffff;

  /* Fontlar -- ana site fontu "Inter" (kullanici referans verdi:
     sozcu.com.tr detay.css'inde tek gercek yuklu web fontu Inter idi --
     Georgia/SF Pro sadece kucuk widget'larin fallback stack'iydi, marka
     fontu degildi). --bh-font-serif SADECE masthead logo/slogani icin
     kaliyor (ayrica onaylanmis, kasitli farkli bir marka karari). */
  --bh-font-serif: "Merriweather", Georgia, serif;
  --bh-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* Manset basligi (.ms-title) icin -- canli/eski sitenin manset
     fontuyla (.manset-title h2, style.scss) AYNI olsun diye (2026-07-17,
     kullanici: "fontu Raleway'e çevir"). Genel site fontu (--bh-font-sans
     = Inter) BUNDAN etkilenmiyor, sadece manset basligi. */
  --bh-font-headline: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Light (gunduz) -- varsayilan. Metin rengi sozcu.com.tr'nin body
     rengiyle (Bootstrap --bs-body-color: #212529, saf siyah degil,
     yumusak neredeyse-siyah) birebir ayni. */
  --bh-bg: #ffffff;
  --bh-fg: #212529;
  --bh-surface: #f5f5f5;
  --bh-border: #e0e0e0;
  --bh-muted: #6b7280;
}

[data-theme="dark"] {
  /* Dark (gece) -- saf siyah degil, koyu "gece mavisi" tonu. Yazi rengi
     sozcu.com.tr'nin kendi karanlik mod --bs-body-color degeriyle ayni
     (#dee2e6). */
  --bh-bg: #0d1117;
  --bh-fg: #dee2e6;
  --bh-surface: #161b22;
  --bh-border: #2a2f3a;
  --bh-muted: #9aa4b2;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bh-bg);
  color: var(--bh-fg);
  font-family: var(--bh-font-sans);
  transition: background-color .15s ease, color .15s ease;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---- Genel iskelet konteynerleri (tum platformlarda ortak yapi) ---- */

.bh-outer {
  max-width: var(--bh-outer-w);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* Kuleli sayfalarda (www/m -- bh-outer--sides) center yerine space-between:
   sayfa parse edilirken bh-mid henuz DOM'a girmeden once (sadece iki kule
   varken) center kuleleri ortada bir cift olarak gosterip bh-mid gelince
   kenara zipratiyordu. VIP'te kule reklam olmadigindan (bh-outer tek
   cocuklu, sadece bh-mid) bu degisiklik ORAYA uygulanmiyor -- space-between
   tek cocukla sola yapisir, VIP ortali kalmasi gerektigi icin duz .bh-outer
   (center) korunuyor. */
.bh-outer--sides {
  justify-content: space-between;
}
.bh-tower {
  width: var(--bh-tower-w);
  flex: 0 0 var(--bh-tower-w);
  /* Masthead'e bitisik durmasin diye gap kadar bosluk -- sticky top da
     ayni degerde, boylece kayarken de ayni bosluk korunuyor. */
  margin-top: var(--bh-gap);
  position: sticky;
  top: var(--bh-gap);
}
/* Sag kule HTML'de artik bh-mid'den ONCE (erken) render ediliyor ki tarayici
   devasa ana icerigi ayristirmayi bitirmeden onu boyayabilsin -- gorsel
   soldan-saga sirayi (sol kule, icerik, sag kule) burada order ile
   koruyoruz, DOM sirasindan bagimsiz. */
.bh-tower-left { order: 1; }
.bh-tower-right { order: 3; }
@media (max-width: 1599px) {
  .bh-tower { display: none; }
  /* Bu genislikte kuleler display:none oldugu icin bh-outer--sides tek
     cocuklu (sadece bh-mid) kaliyor -- space-between o durumda sola
     yapisirdi, VIP'teki gibi center'a donuyoruz. */
  .bh-outer--sides { justify-content: center; }
}
.bh-mid {
  order: 2;
  width: 100%;
  max-width: calc(var(--bh-body-w) + (var(--bh-gap) * 2));
  padding: 0 var(--bh-gap);
}
.bh-body {
  max-width: var(--bh-body-w);
  margin: 0 auto;
}

/* ---- Bar bilesenleri (masthead, nav, son dakika vb ortak taban) ---- */

.bh-masthead {
  width: 100%;
  height: var(--bh-masthead-h);
  background: var(--bh-bar-bg);
  color: var(--bh-bar-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Footer -- masthead gibi %100 genislik (edge-to-edge, kule/gap disinda).
   Icerik ileride admin surukle-birak sistemiyle dinamik dolacak, simdilik
   bos -- yukseklik sabit degil (padding ile nefes payi), icerik gelince
   dogal buyuyecek. */
.bh-footer {
  width: 100%;
  min-height: 160px;
  padding: var(--bh-gap) 0;
  background: var(--bh-bar-bg);
  color: var(--bh-bar-fg);
  margin-top: calc(var(--bh-gap) * 2);
  box-sizing: border-box;
}

.bh-masthead__logo {
  font-family: var(--bh-font-serif);
  font-weight: 700;
  font-size: 40px;
  margin: 0;
  letter-spacing: .5px;
}
.bh-masthead__logo a { color: inherit; }
.bh-masthead__slogan {
  font-family: var(--bh-font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  margin: 4px 0 0;
  opacity: .85;
}

.bh-bar {
  height: var(--bh-bar-h);
  background: var(--bh-bar-bg);
  color: var(--bh-bar-fg);
  display: flex;
  align-items: center;
  gap: var(--bh-gap);
  padding: 0 var(--bh-gap);
}
.bh-bar__spacer { flex: 1; }

/* Masthead ile nav bar arasinda bosluk + scroll'da masthead'in yerini alan
   yapisan menu davranisi: nav bar'i position:sticky yapmak yeterli -- asagi
   kaydirinca masthead (ustunde, normal akista) gorunum disina cikar, nav bar
   top:0'da yapisir; yukari kaydirinca masthead tekrar gorunur (JS gerekmez). */
.bh-nav {
  margin-top: var(--bh-gap);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Reklamsiz platformlarda (vip) son dakika nav'in hemen ardindan geliyor --
   aralarina da gap koy. www'de araya revive banner girdigi icin (kendi
   margin'i zaten var) bu kural orada eslesmez, cift bosluk olusmaz. */
.bh-nav + .bh-son-dakika {
  margin-top: var(--bh-gap);
}

/* Son Dakika seridi -- birden fazla son haber sirayla (crossfade) donuyor */
.bh-son-dakika__ticker {
  position: relative;
  flex: 1;
  height: 20px;
  overflow: hidden;
  min-width: 0;
}
.bh-son-dakika__item {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bh-son-dakika__item.active {
  opacity: 1;
  visibility: visible;
}
.bh-son-dakika__namaz {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 14px;
  white-space: nowrap;
}
/* Namaz vaktinin SOLUNDA, sadece masaüstü (2026-07-17, kullanici:
   "masaüstünde bara namaz vakti soluna sadece nöbetçi eczane yaz ve
   link ver") -- .bh-son-dakika__namaz ile AYNI gorunum. */
.bh-son-dakika__eczane {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 14px;
  white-space: nowrap;
}

/* ---- Yer tutucu (placeholder) alanlar -- kule/Revive/vb ---- */

.bh-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--bh-border);
  color: var(--bh-muted);
  font-size: 12px;
  background: var(--bh-surface);
  text-align: center;
  line-height: 1.4;
}
.bh-tower .bh-placeholder { width: 100%; height: var(--bh-tower-h); }
.bh-tower-link { display: block; width: 100%; height: var(--bh-tower-h); text-decoration: none; }
.bh-tower-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.bh-revive-banner { width: 100%; margin: var(--bh-gap) 0; }
.bh-revive-banner .bh-placeholder { width: 100%; height: 250px; }

/* ---- Tema toggle butonu (tum platformlarda ortak, tek partial) ---- */

.bh-theme-toggle {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--bh-bar-fg);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.bh-theme-toggle:hover { background: rgba(255,255,255,.1); }

/* ---- Kutu Haber -- son dakika seridinin altindaki 3'lu (veya 4'lu) kart
   grid'i. Admin tarafindan kart sayisi ayarlanabilir olacak (ileride);
   simdilik sabit 3 kart, en son yayinlanan haberlerden besleniyor. ---- */

.kutu-haber {
  display: grid;
  grid-template-columns: repeat(3, 400px);
  gap: var(--bh-gap);
  margin: var(--bh-gap) 0;
}
.kutu-haber__card {
  position: relative;
  display: block;
  width: 400px;
  height: 250px;
  border-radius: 0;
  overflow: hidden;
  background: var(--bh-surface);
}
.kutu-haber__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* SEO: artik gercek <img alt="..."> etiketi -- object-fit ile
     background-size:cover ayniyla ayni gorsel sonucu veriyor. */
  object-fit: cover;
  background-size: cover;
  background-position: center;
}
/* Anasayfa YAZARLAR kutusu -- koseyazisi kapaklari genelde metin/gradyan
   gomulu eski gorseller, kirpma yerine tam sigdirma (article-hero/
   category-grid--posts ile ayni mantik, 2026-07-12). */
.yazarlar-grid .kutu-haber__bg {
  object-fit: contain;
  background: #fff;
}
.kutu-haber__bg--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-muted);
  font-size: 32px;
}
.kutu-haber__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.75));
}
.kutu-haber__title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Manşetler grid'inin sag ust kartinin (3. kart) yerine gecen Vefat linkleri
   kutusu -- ayni 400x250 hucreyi kapliyor ama gorsel kart degil, alt alta
   metin link listesi (bkz. shared/_manset_grid.html.slim, idx==2). */
.kutu-haber__vefat {
  width: 400px;
  height: 250px;
  box-sizing: border-box;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.kutu-haber__vefat-header {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--bh-muted);
}
.kutu-haber__vefat-header a {
  color: inherit;
}
.kutu-haber__vefat-header a:hover {
  text-decoration: underline;
}
.kutu-haber__vefat-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bh-border);
}
.kutu-haber__vefat-link:last-child { border-bottom: none; padding-bottom: 0; }
.kutu-haber__vefat-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bh-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kutu-haber__vefat-date {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--bh-muted);
  white-space: nowrap;
}

/* Yazarlar grid -- yatay, 4'lu. 400x250'nin 4 karta olcegi (1240-3*20)/4=295,
   oran korunarak yukseklik 295*(250/400)=184px. */
.yazarlar-grid {
  display: grid;
  grid-template-columns: repeat(4, 295px);
  gap: var(--bh-gap);
  margin: var(--bh-gap) 0;
}

/* .bh-bar ve .yazarlar-grid'i TEK div'e sarmak icin -- display:contents
   sayesinde .yazarlar-section DOM'da var ama layout'a katilmiyor, boylece
   ikisi sanki hala kardesmis gibi (mevcut margin/gap davranisi bozulmadan)
   dizilirken, ileride "ana sayfa yonetimi" bu iki elemani TEK blok olarak
   ac/kapa veya tasiyabilecek (2026-07-13, kullanici talebi). */
.yazarlar-section {
  display: contents;
}

/* Yazar karti -- gorsel slider'i + altinda sabit isim etiketi (eskiden
   isim gorselin ustune overlay'di, ama artik gorsel kayan bir slider
   oldugu icin isim ayri, sabit bir satira alindi). */
.yazar-card {
  display: flex;
  flex-direction: column;
}
.yazar-slider {
  position: relative;
  width: 295px;
  height: 184px;
  background: #fff;
}
/* Gorsel/track'in kirpma (overflow:hidden) sorumlulugu buraya tasindi --
   .yazar-slider'in KENDISI artik overflow:visible (varsayilan), boylece
   .yazar-slider-dots (hala .yazar-slider'in dogrudan cocugu) mobilde
   kutunun DISINA konumlandirilabiliyor (2026-07-15, kullanici: "sarı
   dotları resim üzerinde resim altına al"). www/vip'te GORSEL DEGISIM
   YOK -- .yazar-slider'in boyutu/rengi ayni, kirpma hala tam olarak
   ayni alanda (bu ic div, .yazar-slider'in inset:0 tam ustunde). */
.yazar-slider-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.yazar-slider-track {
  display: flex;
  height: 100%;
  transition: transform .5s ease;
}
.yazar-slide {
  min-width: 100%;
  height: 100%;
  display: block;
}
.yazar-slide-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}
.yazar-slide-bg--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-muted);
  font-size: 32px;
}
.yazar-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.85);
  color: #333;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.yazar-slider-arrow:hover {
  background: #fff;
}
.yazar-slider-prev {
  left: 6px;
}
.yazar-slider-next {
  right: 6px;
}
.yazar-slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 2;
}
.yazar-slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
}
.yazar-slider-dot.active {
  background: #f4c430;
}
.yazar-card-name {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* .bh-bar ve .kategori-grid'i TEK div'e sarmak icin -- .yazarlar-section ile
   ayni desen (display:contents, mevcut layout/margin bozulmadan), ileride
   "ana sayfa yonetimi" bu ikisini TEK blok olarak ac/kapa/tasiyabilecek
   (2026-07-13, kullanici talebi). */
.kategori-section {
  display: contents;
}

/* Kategori grid -- VIP'te 3 esit sutun (400px, toplam 1240px), sag sutunda
   dikey 3'lu slider. www'de sag sutun 360px sabit (reklam genisligi), sol
   iki sutun (420+420=840) + sag (360) + 2*20 gap = 1240.
   Ana kart alani (kg-main-rows) 2026-07-21'de degisti (kullanici: "ana
   sayfa kategori gridlerinde görseller eziliyor... 4:3 oran ile 2 card
   altına 3 card onun altına 2 card denesi yapalım") -- eski sabit
   170/280/170 satir yukseklikleri (420x150 gibi asiri genis/kisa
   hucrelerde object-fit:cover agir kirpma yapiyordu) kaldirildi, artik
   tek grid-row icinde ic ice flex satirlar + her kart aspect-ratio:4/3
   ile kendi oranini koruyor, satir yuksekligi ARTIK SABIT DEGIL. */
.kategori-grid {
  display: grid;
  grid-template-columns: repeat(3, 400px);
  gap: var(--bh-gap);
  margin: var(--bh-gap) 0;
  align-items: stretch;
}
.kategori-grid--ad {
  grid-template-columns: 420px 420px 360px;
}
.kg-main-rows {
  grid-column: 1 / span 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bh-gap);
}
.kg-row {
  display: flex;
  gap: var(--bh-gap);
}
.kg-card-43 {
  position: relative;
  display: block;
  flex: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bh-surface);
}
.kg-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}
.kg-bg--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-muted);
  font-size: 32px;
}
.kg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.75));
}
.kg-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Sag sutun (kg-side-col, sutun 3, TEK grid-row -- kg-main-rows ile ayni
   satir, yuksekligi kg-main-rows'un dogal yuksekligine gore otomatik
   esitleniyor, align-items:stretch sayesinde) -- www'de 360x360 sabit
   reklam + altinda kalan yuksekligi dolduran kart (flex:1); VIP'te dikey
   slider (sabit 300px) + ayni sekilde kalani dolduran kart. Reklam/slider
   flex-shrink:0 ile SABIT kaliyor, sadece kg-card__e esnek. */
.kg-side-col {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bh-gap);
}
.kg-side-col .kg-ad-slot {
  width: 360px;
  height: 360px;
  flex-shrink: 0;
}
.kg-side-col .kg-slider {
  height: 300px;
  flex-shrink: 0;
}
/* Reklam/slider'in altinda kalan bosluk -- tek buyuk kart yerine kucuk
   kutulu link haber listesi (2026-07-21, kullanici: "altta kalan
   boşlukları da küçük kutulu link haber olarak tamamla" -- article-
   related-item ile AYNI kucuk kutu+baslik satiri, haber detay
   sayfasindaki sidebar'la ayni desen), overflow:hidden ile sigmayan
   fazlalik sessizce kirpiliyor. CSS Grid (minmax(0,1fr) ile, icerigin
   dogal boyutundan bagimsiz kesin esit satirlar) + gorseli buyutme
   (height:100%) denemesi 4 ogeyle hala tasiyordu -- kullanici: "www ve
   vip te olmadı. 3 lü yap kurtar beni de kendini de" -- 3'e inince
   kalan yukseklik payi rahatlikla sigiyor. SADECE bu kategori grid
   baglaminda -- haber detay sayfasindaki AYNI .article-related-item
   bileseni (sabit kucuk 90x70 thumb) etkilenmiyor. */
.kg-side-col .kg-link-list {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.kg-side-col .kg-link-list .article-related-item {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.kg-side-col .kg-link-list .article-related-thumb {
  width: 130px;
  height: 100%;
  min-height: 0;
}

.kg-slider {
  position: relative;
  overflow: hidden;
}
.kg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  /* Kullanici "cok hizli" dedi -- 4.5sn/0.6sn'den 7sn/1sn'e yavaslatildi. */
  transition: opacity 1s ease;
}
.kg-slide.active { opacity: 1; visibility: visible; }
.kg-slide-dots {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.kg-slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---- Haber Detay Sayfasi -- baslik %100 (iki sutuna bolunmeden once),
   altinda ana icerik (860px) + sag sidebar (360px), gap 20px (860+20+360=1240,
   sitedeki standart gap/genislik matematigiyle ayni). Tipografi detaylari
   kullanici ileride ayrica verecek -- simdilik makul varsayilan. ---- */
.article-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 6px;
}

/* Breadcrumb -- ana kategori / alt kategori (varsa) / baslik. Baslik
   segmenti tiklanamaz (mevcut sayfa), ellipsis ile tasma engelleniyor. */
.article-breadcrumb {
  display: flex;
  height: var(--bh-bar-h);
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #ccc;
  background: #000;
  padding: 0 12px;
  margin: 0 0 10px;
}
.article-breadcrumb a {
  color: #ccc;
  text-decoration: none;
}
.article-breadcrumb a:hover { text-decoration: underline; color: #fff; }
.article-breadcrumb-sep { opacity: .5; }
.article-breadcrumb-current {
  max-width: 420px;
  color: #fff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Baslik alti meta bilgi satiri -- yayin/duzenleme tarihi, kaynak, muhabir,
   okunma/yorum sayisi. Noktalarla (•) ayrilmis, satir doluysa sarabiliyor. */
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--bh-muted);
  margin: 0 0 14px;
}
.article-meta-item strong { font-weight: 700; color: var(--bh-fg); }
.article-meta-item--updated strong,
.article-meta-item--updated { color: #c0392b; }
.article-meta-item--clickable { cursor: pointer; }
.article-meta-item--clickable:hover { color: var(--bh-fg); text-decoration: underline; }
.article-meta-sep { opacity: .4; }
#comment-jump-badge {
  cursor: pointer;
  font-size: 13px;
  color: var(--bh-fg);
  font-weight: 600;
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--bh-border);
}
#comment-jump-badge:hover { text-decoration: underline; }

.yorum-yap-rail {
  position: absolute;
  right: 0;
  width: 100px;
  pointer-events: none;
}
.yorum-yap-fab {
  pointer-events: auto;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 58px;
  height: 58px;
  margin: 0 auto;
  background: var(--bh-fg);
  color: var(--bh-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.yorum-yap-fab-icon { font-size: 17px; line-height: 1; }

#back-to-top-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 58px;
  height: 58px;
  margin: 0;
  background: var(--bh-fg);
  color: var(--bh-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  z-index: 40;
}
#back-to-top-btn.is-visible { display: flex; }
#back-to-top-btn span:first-child { font-size: 16px; line-height: 1; }

/* Paylas butonlari -- yuvarlak, marka rengi, kucuk ikon. Instagram
   butonunun href'i yok (button), tiklayinca linki kopyalar -- kopyalandi
   metni JS ile kisaca gosterilip gizleniyor. */
.article-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}
.article-share-popup-wrap { position: relative; }
.article-share-popup {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 10px;
  gap: 8px;
  align-items: center;
  background: var(--bh-bg);
  border: 1px solid var(--bh-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  z-index: 30;
}
.article-share-popup.is-open { display: flex; }
.article-gnews-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 0 0 16px;
}
.article-share-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--bh-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.article-share-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity .15s;
}
.article-share-btn:hover { opacity: .85; }
.article-share-btn svg { width: 17px; height: 17px; }
.article-share-btn--fb { background: #1877F2; }
.article-share-btn--x  { background: #000; }
.article-share-btn--wa { background: #25D366; }
.article-share-btn--ig { background: transparent; padding: 0; }
.article-share-btn--ig svg { width: 34px; height: 34px; }
.article-share-btn--gnews { background: #fff; border: 1px solid var(--bh-border); }
.article-share-btn--gnews svg { width: 18px; height: 18px; }

/* Spot artik h2 (SEO: ikinci baslik seviyesi) -- gorsel olarak h1'den
   belirgin sekilde daha hafif, paragraf gibi davraniyor. */
/* Hero gorseli edge-to-edge (860px, tam genislik) kaliyor, ama altindaki
   metin icerik (spot, paylas satiri, gövde) sagdan/soldan girintili --
   kullanici referans ekran goruntusu verdi (gorsel tam genislik, metin
   iceride bosluklu). Once --bh-gap (20px) idi, kullanici "daha da artir,
   belirgin olsun" dedi -- 40px'e (2x gap) cikarildi. */
.article-spot,
.article-share,
/* Govde tipografisi -- kullanici sozcu.com.tr ile karsilastirdi ("bizimki
   kucuk kalin ve siki kalmis"), sebep: hic font-size/line-height
   tanimlanmamisti, tarayici varsayilanina (16px, siki satir araligi)
   dusuyordu. Sozcu'nun ferah/rahat gorunumune gore ayarlandi: 18px govde
   metni, 1.8 line-height (bariz satir arasi bosluk), 400 (normal) agirlik
   -- Inter'in kalin gorunmesi de bu agirlik eksikliginden kaynaklaniyordu. */
.article-body {
  padding: 0 100px;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 400;
  color: var(--bh-fg);
}
.article-body p {
  margin: 0 0 22px;
}
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  margin: 32px 0 16px;
}
.article-body a {
  color: #1a56db;
  text-decoration: underline;
}
.article-body img {
  border-radius: 6px;
  margin: 8px 0 22px;
}
.article-spot {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bh-fg);
  margin: 0 0 16px;
}

/* Emoji tepki tablosu ve etiket tablosu -- govde ile ayni girintiyi
   (2x gap) paylasiyor, alt alta gorunuyor. Emoji tablosu haber govdesinden
   biraz daha ayrilsin diye (kullanici istegi) ust bosluk normalden fazla. */
.article-emoji-table {
  padding: 0 100px;
  margin: 36px 0 20px;
}
.article-tag-table {
  padding: 0 100px;
  margin: 0 0 20px;
}
.article-emoji-table-label,
.article-tag-table-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--bh-muted);
  margin: 0 0 10px;
}
/* Tek sira, kibar -- sigmazsa satir kaymiyor/sarmiyor, yatay kayiyor
   (overflow-x: auto). Isim sadece hover title'inda, oy sayisi kucuk bir
   rozet olarak ikonun sag-alt kosesinde goruluyor. */
.article-emoji-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 4px 8px;
}
.article-emoji-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--bh-border);
  border-radius: 50%;
  background: var(--bh-surface);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.article-emoji-btn:hover { background: var(--bh-border); }
.article-emoji-btn.is-active {
  border-color: #f4c430;
  background: rgba(244,196,48,.15);
}
.article-emoji-img { width: 24px; height: 24px; object-fit: contain; }
.article-emoji-count {
  position: absolute;
  bottom: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.article-tag-table {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.article-tag-table-label { margin: 0; }
.article-tag-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  color: var(--bh-fg);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.article-tag-badge:hover { background: var(--bh-border); }

/* Haber detay hero gorseli -- sabit 860:600 (manset slider ile AYNI oran --
   detay/manset gorselleri artik sunucu tarafinda hep 860x600'e kirpilarak
   kaydediliyor, bu yuzden burada da ayni oran kullanilinca hicbir kirpma
   OLMUYOR, tam piksel eslesme). CLS icin onceden ayrilmis alan. TUM
   gorseller (oran ne olursa olsun) contain ile HICBIR KIRPMA olmadan
   gosterilir -- yan/ust-alt bosluklar beyaz kalir (2026-07-12: kullanici
   "kesilmesin" dedi -- once sadece dikey/orana uymayan fotolar icin
   (.is-portrait, JS ile eklenir) boyleydi, yatay ama 860:600 oranina tam
   uymayan kapak fotolari (orn. eski koseyazisi gorselleri) hala
   kirpiliyordu). Sunucu tarafinda zaten dogru 860x600'e kirpilmis
   gorseller (detay/manset) icin gorsel fark yok (oran zaten birebir
   ayni), sadece oran uymayanlar icin kirpma yerine sigdirma devreye
   giriyor. */
.article-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 860 / 600;
  overflow: hidden;
  background: #fff;
  margin-bottom: 14px;
}
.article-hero-fg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
}
/* Oran uymayan kapaklarda contain'in biraktigi bos alani doldurmak icin --
   ustteki asil gorsel (kesilmeden, metin/yazi kaybolmadan) AYNI KALIR,
   arkasinda AYNI gorselin bulaniklastirilmis/cover ile buyutulmus bir
   kopyasi bosluklari dolduruyor (2026-07-13, kullanici: "kesilirse
   yazılar kesilebilir ... görsel alanı doldursun. cover yapma" -- crop
   degil, arka plan doldurma). transform:scale(1.1) blur kenarindaki
   netlesen kenar seridini gizler. */
.article-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px);
  transform: scale(1.1);
}
.article-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--bh-gap);
}
.article-main {
  position: relative;
  flex: 1;
  min-width: 0;
}
.article-sidebar {
  width: 360px;
  flex: 0 0 360px;
}

/* Paylas satirinin ALTINDA kendi satirinda, sag kenara yasli -- once
   .article-share icindeydi, Sesli Oku eklenince satir sikisiyordu
   (2026-07-23, kullanici: "google logosu sıkışmış... onların altına al").
   Konteyneri artik .article-gnews-row (justify-content:flex-end). */
.article-gnews-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--bh-border);
  border-radius: 999px;
  background: var(--bh-surface);
  color: var(--bh-fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.article-gnews-btn:hover { background: var(--bh-border); }
.article-gnews-icon { width: 18px; height: 18px; flex-shrink: 0; }

.article-sidebar-cat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--bh-gap) 0 12px;
}
.article-sidebar-cat-dot {
  width: 14px;
  height: 14px;
  background: #e74c3c;
  flex-shrink: 0;
}
.article-sidebar-cat-bar strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
/* ---- Infinite scroll (haber detay altinda otomatik sonraki haber
   yukleme, 2026-07-06) -- her eklenen haber onceki habereden bariz
   ayrilsin diye ust kalin kenarlik + bosluk. ---- */
.infinite-scroll-divider {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 4px solid var(--bh-border);
}

.article-related-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bh-border);
  text-decoration: none;
}
.article-related-item:last-child { border-bottom: none; }
.article-related-thumb {
  width: 90px;
  height: 70px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--bh-surface);
}
.article-related-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-muted);
  font-size: 20px;
}
.article-related-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bh-fg);
}
.kg-slide-dot.active { background: #f4c430; }

/* ---- Kategori Listeleme Sayfasi (categories#show) -- grid + sagda
   kategoriye ozel slider. Govde 1240 = ana grid (860) + gap (20) +
   slider (360), sitedeki standart matematikle ayni. ---- */
.category-header {
  background: #000;
  color: #fff;
  padding: 10px 12px;
  /* Onceki tek yerde uzerindeki elemana (nav ya da reklam banner'i) gore
     kural yazmak kirilgan cikti -- www'de banner'in kendi margin-bottom'u
     TEORIDE yeterli olmali ama kullanici gercek tarayicida "barlar
     arasinda bosluk yok" bulgusunu bildirdi (2026-07-21). Margin collapse
     zaten max() aldigi icin (toplama degil) burada kosulsuz margin-top
     eklemek WWW'de banner'in 20px'iyle CAKISMAZ, cift bosluk olusturmaz
     -- sadece hangi eleman onceden gelirse gelsin garanti bosluk saglar. */
  margin-top: var(--bh-gap);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.category-header .gallery-category-tab { color: #ccc; }
.category-header .gallery-category-tab:hover { color: #fff; }
.category-header .gallery-category-tab.is-active { color: #fff; border-bottom-color: #fff; }
.writer-search-form { display: flex; gap: 8px; }
.writer-search-input {
  padding: 8px 12px;
  border: 1px solid var(--bh-border);
  font-size: 13px;
  min-width: 220px;
  color: var(--bh-fg);
  background: var(--bh-bg);
}
.writer-search-input:focus { outline: none; border-color: var(--bh-fg); }
.writer-search-btn {
  padding: 8px 18px;
  background: var(--bh-fg);
  color: var(--bh-bg);
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.category-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
}
/* Kategori sayfasinda AYRI bir siyah breadcrumb bari yerine (cift siyah
   bar cirkin duruyordu, 2026-07-13 kullanici bulgusu), ust kategoriye
   link -- SADECE varsa -- basligin hemen ustune, AYNI .category-header
   bar'i icine tasindi. Kok kategoride (parent yok) bu satir hic
   render edilmiyor. NOT: paylasilan .article-breadcrumb bileseni (19
   baska sayfada kullaniliyor) burada KULLANILMIYOR, dokunulmadi. */
.category-header__parent {
  font-size: 12px;
  color: #ccc;
  margin-bottom: 4px;
}
.category-header__parent a { color: #ccc; text-decoration: none; }
.category-header__parent a:hover { text-decoration: underline; color: #fff; }
.category-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--bh-gap);
  margin-top: 16px;
}
.category-main {
  position: relative;
  flex: 1;
  min-width: 0;
}
.category-sidebar {
  width: 360px;
  flex: 0 0 360px;
}
/* mcw-widget'in kendi margin-top'u normalde ustundeki reklamdan ayirmak
   icin (bkz. shared/_most_commented_widget.html.slim) -- ama reklam
   gosterilmeyen platformlarda (vip) widget sidebar'in ILK elemanı
   oluyor ve bu ust bosluk, ana sutunun basiyla hizasiz, sarkik
   duruyordu (2026-07-21, kullanici bulgusu: "en çok lar üstündeki gap'ı
   kaldır çünkü düzgün durmuyor"). Ilk eleman oldugunda bosluk gereksiz. */
.category-sidebar > .mcw-widget:first-child {
  margin-top: 0;
}
.category-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--bh-muted);
  font-size: 15px;
}

/* Grid -- 3 esit sutun (860px govdeye gore, oran korunarak, sabit piksel
   degil -- boylece 860'a tam oturuyor: (860-2*20)/3 = 273.3px). */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bh-gap);
}
/* Grid karti -- sitedeki TUM grid'lerde (kategoriler, galeriler, videolar,
   yazar yazilari) ortak: gorsel UZERINE yazi YOK, baslik/tarih/okunma
   sayisi gorselin ALTINDA (kullanicinin verdigi referans ekran
   goruntusune gore). */
.category-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.category-card picture { display: block; }
.category-card-bg {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: var(--bh-surface);
}
/* Yazar/koseyazisi kapaklari genelde metin/gradyan gomulu eski gorseller
   (article-hero'daki ayni sorun) -- kirpma yerine tam sigdirma. SADECE bu
   grid (.category-grid--posts) icin, diger tum kategori/galeri/video/arama
   grid'leri (duz fotograf) hala cover ile dolduruyor (2026-07-12,
   kullanici: "gridde de kesilmis"). */
.category-grid--posts .category-card-bg {
  object-fit: contain;
  background: #fff;
}
.category-card-bg--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-muted);
  font-size: 28px;
}
.category-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bh-fg);
  margin: 10px 0 4px;
}
.category-card-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--bh-muted);
}

/* Sayfalama -- proje zaten kendi ozel Kaminari partial'larini
   (app/views/kaminari/*.slim) kullaniyor, tam inline stille geliyor
   (kaminari-nav/kaminari-page vb.) -- burada sadece sayfa icinde
   ortalamak icin sarmalayici gerekiyor. */
.category-pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* Yazarlar (Writers) grid -- kisi/avatar karti, haber kartlarindan farkli:
   dairesel foto + isim + unvan, ortalanmis metin. */
.writers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bh-gap);
}
.writer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  text-decoration: none;
}
.writer-card-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  background: var(--bh-bg);
  display: block;
}
.writer-card-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--bh-muted);
}
.writer-card-name { font-size: 15px; font-weight: 700; color: var(--bh-fg); margin: 0 0 4px; }
.writer-card-role { font-size: 12px; color: var(--bh-muted); margin: 0; }

/* Tek yazar profili -- ust bilgi seridi + alt kismi category-layout/grid ile
   AYNI (yazarin yazilari da birer "kart", haber kartlariyla ayni dil). */
.writer-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--bh-border);
  margin-bottom: 20px;
}
.writer-profile-header > a { flex: 0 0 96px; }
.writer-profile-name a { color: inherit; text-decoration: none; }
.writer-profile-name a:hover { text-decoration: underline; }
.writer-profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 96px;
  background: var(--bh-surface);
}
.writer-profile-avatar--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--bh-muted);
}
.writer-profile-name { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.writer-profile-role { font-size: 13px; color: var(--bh-muted); margin: 0 0 8px; font-weight: 600; }
.writer-profile-bio { font-size: 14px; color: var(--bh-fg); margin: 0 0 8px; line-height: 1.6; }
.writer-profile-link { font-size: 13px; color: var(--bh-fg); text-decoration: underline; }
.writer-posts-title { font-size: 18px; font-weight: 700; margin: 0; }

.writer-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--bh-muted);
}
.writer-profile-meta-item { white-space: nowrap; }

.writer-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
}
.writer-stats .writer-search-form { flex: 1; }
.writer-sort-select {
  padding: 8px 12px;
  border: 1px solid var(--bh-border);
  font-size: 13px;
  color: var(--bh-fg);
  background: var(--bh-bg);
}
.writer-sort-select:focus { outline: none; border-color: var(--bh-fg); }

/* Yazar yazisi okuma sayfasi -- article-title/article-body ile ayni
   tipografi ama article-body'nin 100px yatay padding'i (yorum-yap-rail
   icin ayrilan bosluk) burada anlamsiz, bu yuzden ayri class. */
.post-title { font-size: 32px; font-weight: 800; line-height: 1.25; margin: 0 0 10px; }
.post-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--bh-muted);
  margin-bottom: 20px;
}
.post-meta-writer { color: var(--bh-fg); font-weight: 600; text-decoration: none; }
.post-meta-writer:hover { text-decoration: underline; }
.post-body { padding: 0 150px; font-size: 18px; line-height: 1.8; font-weight: 400; color: var(--bh-fg); }
.post-body p { margin: 0 0 22px; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { font-size: 21px; font-weight: 700; line-height: 1.4; margin: 32px 0 16px; }
.post-body a { color: #1a56db; text-decoration: underline; }
.post-body img { max-width: 100%; border-radius: 6px; margin: 8px 0 22px; }
/* Bazi yazarlar Google Docs/Word'den yapistirip yolluyor -- gelen HTML'de
   her p/span'a gomulu inline style="font-family:Arial...;font-size:11pt"
   oluyor (docs-internal-guid iceren govde), bu da site fontunu (Inter)
   ezip metni ince/farkli gosteriyor (2026-07-20, kullanici bulgusu, id 36715).
   Baslik/link/gorsel kurallarina DOKUNMADAN (h1-4/a/img disarida tutuldu)
   sadece govde metnini !important ile site standardina zorluyoruz. */
.post-body p, .post-body span, .post-body li, .post-body div, .post-body td {
  font-family: var(--bh-font-sans) !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  color: var(--bh-fg) !important;
}

.post-other-posts {
  margin-top: 30px;
  padding: 20px 150px;
  border-top: 1px solid var(--bh-border);
}
.post-other-posts-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.post-other-posts-list { list-style: none; padding: 0; margin: 0 0 12px; }
.post-other-posts-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bh-border);
}
.post-other-posts-list li:last-child { border-bottom: none; }
.post-other-posts-link {
  color: var(--bh-fg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-other-posts-link:hover { text-decoration: underline; }
.post-other-posts-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--bh-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.post-other-posts-more { font-size: 13px; font-weight: 700; color: var(--bh-fg); text-decoration: none; }
.post-other-posts-more:hover { text-decoration: underline; }

/* Galeri detay -- canli sitedeki gibi HER FOTOGRAF KENDI ?page=N sayfasinda
   tek tek gosteriliyor (hepsi alt alta degil) -- boylece Google Analytics
   her fotografi ayri bir sayfa gorusu olarak sayiyor (gercek <a href> ile
   sayfa yenileniyor, JS/AJAX degil). */
.gallery-image-viewer { margin-bottom: 20px; display: flex; flex-direction: column; gap: 24px; }
.gallery-image-item { text-align: center; }
.gallery-image-photo-wrap { position: relative; display: inline-block; cursor: zoom-in; max-width: 100%; }
.gallery-image-photo { max-width: 100%; border-radius: 6px; display: block; }
.gallery-image-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  pointer-events: none;
}
.gallery-image-caption { font-size: 14px; color: var(--bh-muted); margin-top: 8px; }

/* Fotografa tiklayinca acilan tam ekran yakinlastirma -- canli sitedeki
   fancybox'a benzer ama harici kutuphane eklenmedi, saf JS/CSS. */
.gallery-zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
}
.gallery-zoom-overlay.is-open { display: flex; }
.gallery-zoom-img { max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: zoom-out; }
.gallery-zoom-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.gallery-image-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bh-border);
}
.gallery-image-nav-btn {
  padding: 8px 16px;
  background: var(--bh-fg);
  color: var(--bh-bg);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.gallery-image-nav-btn--disabled { background: var(--bh-surface); color: var(--bh-muted); cursor: default; }
.gallery-image-nav-count { font-size: 13px; color: var(--bh-muted); font-weight: 600; }

/* Galeri ana sayfa / kategori -- diger tum listeleme sayfalariyla
   (yazarlar, kategoriler) AYNI diloi kullanir: category-header +
   category-grid/category-card. Kategoriler arasi gecis icin sade,
   sitenin kendi renk tokenlariyla (mavi bar/canli site kopyasi degil)
   bir sekme satiri eklendi. */
.gallery-category-tabs { display: flex; gap: 16px; flex-wrap: wrap; }
.gallery-category-tab {
  font-size: 13px;
  font-weight: 600;
  color: var(--bh-muted);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.gallery-category-tab:hover { color: var(--bh-fg); }
.gallery-category-tab.is-active { color: var(--bh-fg); border-bottom-color: var(--bh-fg); }

.gallery-total-count { font-size: 13px; color: var(--bh-muted); margin: 0 0 12px; }


/* Video detay -- embed 16:9 sabit oran, tasma yok. */
.video-embed-wrap { margin-bottom: 20px; }
.video-embed-wrap iframe { display: block; width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 6px; }

/* Video grid karti -- category-card ile ayni, ortada bir oynat ikonu. */
.category-card-media { position: relative; }
.category-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 16px;
  padding-left: 3px;
  z-index: 1;
}
.video-related-article {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 20px 0;
  padding: 12px 14px;
  background: var(--bh-surface);
  border-left: 3px solid #378ADD;
  text-decoration: none;
}
.video-related-article-label { font-size: 10px; font-weight: 700; color: #378ADD; text-transform: uppercase; letter-spacing: .5px; }
.video-related-article-title { font-size: 14px; color: var(--bh-fg); font-weight: 600; line-height: 1.35; }

/* Sag slider -- kg-slider ile ayni mantik (crossfade, alt bilgi, dot'lar)
   ama bu sayfaya ozel class'lar (sayfalar arasi bagimsiz duzenlenebilsin). */
.category-side-slider {
  position: relative;
  width: 360px;
  height: 450px;
  margin-top: var(--bh-gap);
  overflow: hidden;
  background: #111;
}
.category-side-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
}
.category-side-slide.active { opacity: 1; visibility: visible; }
.category-side-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-side-slide-bg--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bh-muted);
  font-size: 32px;
}
.category-side-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,.8));
}
.category-side-slide-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.category-side-slide-dots {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.category-side-slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  padding: 0;
  cursor: pointer;
}
.category-side-slide-dot.active { background: #f4c430; }

/* ---- Yorum yazma alani (misafir + uye banner, emoji secici) ----
   Tema/dark-mode SADECE --bh-* token'lariyla saglaniyor, ayri bir
   [data-theme=dark] override YOK -- sitedeki diger her komponent gibi. */
.comment-box {
  margin-top: calc(var(--bh-gap) * 1.5);
  margin-left: 100px;
  margin-right: 100px;
  border: 1px solid var(--bh-border);
  overflow: hidden;
  background: var(--bh-bg);
}
.comment-member-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-gap);
  padding: 14px 18px;
  background: var(--bh-bar-bg);
  color: var(--bh-bar-fg);
  flex-wrap: wrap;
}
.comment-member-banner-info { display: flex; align-items: center; gap: 12px; }
.comment-member-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex: 0 0 36px;
}
.comment-member-title { font-size: 14px; font-weight: 700; color: var(--bh-bar-fg); margin: 0; }
.comment-member-sub { font-size: 12px; color: rgba(255, 255, 255, .65); margin: 2px 0 0; }
.comment-member-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.comment-member-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--bh-bar-fg); color: var(--bh-bar-fg); background: transparent;
  white-space: nowrap;
}
.comment-member-btn:hover { background: rgba(255, 255, 255, .1); }
.comment-member-btn--fill { background: var(--bh-bar-fg); color: var(--bh-bar-bg); }
.comment-member-btn--fill:hover { background: #e5e5e5; }

.comment-form-body { padding: 14px 18px; }
.comment-form-name {
  width: 100%; border: 1px solid var(--bh-border);
  padding: 9px 12px; font-size: 13px; font-family: var(--bh-font-sans);
  color: var(--bh-fg); background: var(--bh-bg); margin-bottom: 8px;
}
.comment-form-name:focus { outline: none; border-color: var(--bh-fg); }
.comment-form-textarea {
  width: 100%; min-height: 70px; resize: vertical;
  border: 1px solid var(--bh-border); padding: 12px;
  font-size: 14px; font-family: var(--bh-font-sans);
  color: var(--bh-fg); background: var(--bh-bg);
}
.comment-form-textarea:focus { outline: none; border-color: var(--bh-fg); }
.comment-form-textarea::placeholder { color: var(--bh-muted); }

.comment-emoji-picker {
  display: none; flex-wrap: wrap; gap: 6px; padding: 10px 0 0;
}
.comment-emoji-picker.is-open { display: flex; }
.comment-emoji-picker button {
  background: none; border: none; font-size: 20px; cursor: pointer;
  padding: 4px; line-height: 1;
}
.comment-emoji-picker button:hover { background: var(--bh-surface); }

.comment-form-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bh-border);
}
.comment-form-footer-left { display: flex; align-items: center; gap: 10px; }
.comment-emoji-toggle {
  background: none; border: none; font-size: 20px; cursor: pointer;
  padding: 2px; line-height: 1;
}
.comment-char-count { font-size: 12px; color: var(--bh-muted); }
.comment-submit-btn {
  padding: 9px 20px; border: 1px solid var(--bh-fg);
  background: var(--bh-bg); color: var(--bh-fg); font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.comment-submit-btn:hover { background: var(--bh-surface); }
.comment-submit-btn:disabled { opacity: .5; cursor: default; }

.comment-form-message { font-size: 13px; padding: 0 18px; display: none; }
.comment-form-message.is-visible { display: block; padding: 10px 18px; }
.comment-form-message--ok { color: #1a7f37; }
.comment-form-message--err { color: #c0392b; }

.comment-form-notice {
  font-size: 12px; color: var(--bh-muted); padding: 10px 18px;
  background: var(--bh-surface); border-top: 1px solid var(--bh-border);
}
.comment-form-notice a { color: var(--bh-fg); text-decoration: underline; }

/* ---- Site geneli uyelik giris/uye ol popup'i ----
   Koseler KARE (site kurali), tema/dark SADECE --bh-* token'lariyla. */
#auth-modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: var(--bh-gap);
}
#auth-modal-box {
  position: relative;
  width: 100%; max-width: 380px;
  background: var(--bh-bg);
  border: 1px solid var(--bh-border);
  padding: 28px 24px 24px;
}
#auth-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--bh-muted); cursor: pointer; padding: 4px;
}
#auth-modal-close:hover { color: var(--bh-fg); }
.auth-modal-tabs {
  display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--bh-border);
}
.auth-modal-tab {
  flex: 1; background: none; border: none; padding: 10px 0;
  font-size: 14px; font-weight: 700; color: var(--bh-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--bh-font-sans);
}
.auth-modal-tab.is-active { color: var(--bh-fg); border-bottom-color: var(--bh-fg); }
.auth-modal-panel .form-group { margin-bottom: 12px; }
.auth-modal-panel label {
  display: block; font-size: 12px; font-weight: 600; color: var(--bh-fg); margin-bottom: 4px;
}
.auth-modal-panel input[type="text"],
.auth-modal-panel input[type="tel"],
.auth-modal-panel input[type="password"],
.auth-modal-panel input[type="email"] {
  width: 100%; border: 1px solid var(--bh-border); padding: 9px 12px;
  font-size: 14px; font-family: var(--bh-font-sans);
  color: var(--bh-fg); background: var(--bh-bg); box-sizing: border-box;
}
.auth-modal-panel input:focus { outline: none; border-color: var(--bh-fg); }
.auth-modal-submit {
  width: 100%; padding: 11px; border: none; background: var(--bh-fg); color: var(--bh-bg);
  font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 4px;
  font-family: var(--bh-font-sans);
}
.auth-modal-submit:hover { opacity: .85; }
.auth-modal-error {
  font-size: 13px; color: #c0392b; margin: 0 0 12px; display: none;
}
.auth-modal-error.is-visible { display: block; }
.auth-modal-footnote {
  font-size: 12px; color: var(--bh-muted); text-align: center; margin: 14px 0 0;
}
.auth-modal-footnote a { color: var(--bh-fg); text-decoration: underline; }

/* ---- Tam sayfa uyelik panelleri (giris/kayit/sifre/aktivasyon) --
   modal ile AYNI .auth-modal-* siniflarini kullanir, tek tip gorunum. */
.login-wrap { width: 100%; max-width: 420px; padding: 16px; }
.login-box {
  background: var(--bh-bg); border: 1px solid var(--bh-border);
  padding: 32px 28px 28px;
  /* Panel eskiden body ile ayni renkti, kart gibi durmuyordu
     (2026-07-16, kullanici: "tablo içini biraz renklendir. dışı ile
     içi araında bir zıtlık olsun") -- body artik --bh-surface (bkz.
     layouts/uyelik.html.slim), burada da radius+golge ile belirgin
     bir "kart" hissi eklendi. */
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.login-box-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.login-box-logo {
  font-family: var(--bh-font-serif); font-weight: 700; font-size: 20px; color: var(--bh-fg);
}
.login-notice { font-size: 13px; color: #1a7f37; margin: 0 0 16px; }
/* SMS onayi bekleyen kayit mesaji icin -- .login-notice'un yesil/olumlu
   tonu yerine notr/sade (2026-07-16, kullanici: "az gösterişli olsun"). */
.login-notice-muted { font-size: 12px; color: var(--bh-muted); margin: 0 0 16px; }
.auth-modal-panel .form-group { position: relative; }
.auth-modal-panel .field-check {
  position: absolute; right: 12px; top: 32px; font-size: 16px; display: none;
}
.auth-modal-panel .field-check.ok { color: #16a34a; display: block; }
.auth-modal-panel .field-check.err { color: #dc2626; display: block; }

/* Kayit formundaki Ad/Soyad yan yana 2 sutunlu grid (users/registrations/
   new.html.slim VE shared/_auth_modal.html.slim'de AYNI inline stil,
   ikisi de bu class'i tasiyor) -- dar ekranlarda (login-wrap zaten
   max-width:420px, mobil cihazda daha da daralip) her sutuna cok az
   yer kalip alanlar sikisiyordu. Viewport bazli, platformdan bagimsiz
   (2026-07-15, kullanici: "üyelik her taraf" mobil uyumlu istegi). */
@media (max-width: 420px) {
  .auth-name-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Yorum kutusu -- giris yapmis uye banner'i (siyah bant, kare kose,
   .comment-member-banner ile ayni -- guest/uye banner'i JS ile toggle) ---- */
.comment-user-verified {
  color: #34d399; font-size: 12px; margin-left: 4px;
}
.comment-user-handle {
  font-weight: 400; color: rgba(255, 255, 255, .65); margin-left: 6px; font-size: 12px;
}
.comment-member-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ---- Nav bar -- giris yapmis kullanici icin isim + acilir menu
   (Profil / Cikis). Bar siyah oldugu icin --bh-bar-* token'lari, kare
   kose (site kurali). ---- */
.nav-account-user {
  position: relative;
  margin-left: var(--bh-gap);
}
.nav-account-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.nav-account-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  /* margin YOK -- tetikleyici ile menu arasinda bosluk olursa fare o
     bosluktan gecerken hover kaybolup menu kapaniyordu. Gorsel bosluk
     yerine ust kenardaki ilk oge (a:first-child) padding'iyle veriliyor,
     boylece hoverable alan (arka planla) kesintisiz kaliyor. */
  min-width: 130px;
  background: var(--bh-bar-bg);
  border: 1px solid rgba(255, 255, 255, .2);
  z-index: 50;
}
.nav-account-user:hover .nav-account-dropdown { display: block; }
.nav-account-dropdown a,
.nav-account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  color: var(--bh-bar-fg);
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.nav-account-dropdown a:hover,
.nav-account-dropdown button:hover {
  background: rgba(255, 255, 255, .12);
}

/* ---- Yorum gonderildi onay paneli -- kare kose (site kurali),
   tema/dark-mode --bh-* token'lariyla. ---- */
#comment-success-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: var(--bh-gap);
}
#comment-success-box {
  width: 100%; max-width: 360px;
  background: var(--bh-bg);
  border: 1px solid var(--bh-border);
  padding: 28px 24px 24px;
  text-align: center;
}
.comment-success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(22, 163, 74, .12);
  color: #16a34a;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
  margin: 0 auto 16px;
}
.comment-success-title {
  font-size: 18px; font-weight: 700; color: var(--bh-fg); margin: 0 0 10px;
}
.comment-success-body {
  font-size: 13px; color: var(--bh-muted); line-height: 1.6; margin: 0 0 20px;
}
.comment-success-btn {
  display: block; width: 100%; padding: 11px;
  background: var(--bh-bg); color: var(--bh-fg);
  border: 1px solid var(--bh-border);
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: var(--bh-font-sans);
  margin-bottom: 10px;
}
.comment-success-btn:hover { background: var(--bh-surface); }
.comment-success-footnote {
  font-size: 12px; color: var(--bh-muted); margin: 14px 0 0;
}

/* ---- Yorum bekleme suresi bildirimi -- habere ozel cooldown aktifken
   textarea yerine gosteriliyor. Kare kose (site kurali). ---- */
.comment-cooldown-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-gap);
  border: 1px solid var(--bh-border);
  background: var(--bh-surface);
  padding: 12px 16px;
}
.comment-cooldown-text {
  font-size: 14px;
  color: var(--bh-muted);
}
#comment-cooldown-timer {
  font-weight: 700;
  color: var(--bh-fg);
}
.comment-cooldown-notice .comment-submit-btn {
  opacity: .5;
  cursor: not-allowed;
}

/* ---- Yorum listesi -- sıralama/sayaç/kartlar/yanıt. Kare köşe (site
   kuralı), tema/dark --bh-* token'larıyla, sağ-sol 100px hizalı (haber
   gövdesiyle aynı). ---- */
#comment-list-wrap {
  margin-top: calc(var(--bh-gap) * 1.5);
  padding: 0 100px;
}
.comment-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
}
.comment-sort-dropdown { position: relative; }
#comment-sort-toggle {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bh-fg);
  cursor: pointer;
  font-family: var(--bh-font-sans);
}
.comment-sort-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--bh-bg);
  border: 1px solid var(--bh-border);
  z-index: 20;
}
.comment-sort-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--bh-fg);
  cursor: pointer;
  font-family: var(--bh-font-sans);
}
.comment-sort-menu button:hover { background: var(--bh-surface); }
.comment-count-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--bh-muted);
}
#comment-total-count { font-weight: 700; color: var(--bh-fg); }

.comment-thread {
  border: 1px solid var(--bh-border);
  border-left: 3px solid #185fa5;
  background: var(--bh-bg);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.comment-thread--pinned { border-left-color: #a32d2d; }
.comment-thread--hype { border-left-color: #ef9f27; }
.comment-card {
  position: relative;
}
.comment-card--child {
  margin-top: 12px;
  padding: 12px;
  background: var(--bh-surface);
  border-left: 2px solid var(--bh-border);
}
.comment-card--highlight {
  background: #fef9c3 !important;
  transition: background-color 2s ease;
}
.comment-children {
  margin-left: 24px;
}
.comment-fav-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: 1px solid var(--bh-border);
  width: 28px;
  height: 28px;
  font-size: 13px;
  cursor: pointer;
  color: var(--bh-muted);
}
.comment-fav-btn.is-active {
  background: var(--bh-fg);
  border-color: var(--bh-fg);
  color: var(--bh-bg);
}
.comment-hype-btn {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--bh-muted);
  background: none;
  border: 1px solid var(--bh-border);
  padding: 2px 8px;
  cursor: pointer;
  vertical-align: middle;
}
.comment-hype-btn.is-active {
  color: #b45309;
  border-color: #ef9f27;
  background: #faeeda;
}
.comment-pinned-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #a32d2d;
  background: #fcebeb;
  padding: 3px 8px;
  margin-bottom: 8px;
}
.comment-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.comment-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bh-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex: 0 0 36px;
}
.comment-card-meta { flex: 1; min-width: 0; }
.comment-card-name {
  font-size: 14px; font-weight: 700; color: var(--bh-fg);
}
.comment-you-tag {
  font-size: 11px; font-weight: 700; color: #16a34a;
  margin-left: 6px;
}
.comment-hype-badge {
  font-size: 11px; font-weight: 700; color: #b45309;
  margin-left: 6px;
}
.comment-card-sub {
  font-size: 12px; color: var(--bh-muted); margin-top: 2px;
}
.comment-card-body {
  font-size: 14px; color: var(--bh-fg); line-height: 1.6;
  margin-top: 10px; white-space: pre-wrap; word-break: break-word;
}
.comment-edited-note {
  font-size: 11px; color: var(--bh-muted); margin-top: 4px;
}
.comment-pending-note {
  font-size: 11px; color: #b45309; margin-top: 4px; font-weight: 600;
}
.comment-actions {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
}
.comment-actions button {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--bh-fg);
  cursor: pointer;
  font-family: var(--bh-font-sans);
}
.comment-actions button:hover { background: var(--bh-border); }

.comment-reply-box {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--bh-border);
  background: var(--bh-bg);
}
.comment-reply-member-row { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.comment-reply-member-icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; padding: 0;
  border: 1px solid var(--bh-border); background: var(--bh-surface); color: var(--bh-muted);
  cursor: pointer;
}
.comment-reply-member-icon--active {
  background: var(--bh-fg); color: var(--bh-bg); border-color: var(--bh-fg); cursor: default;
}
.comment-reply-textarea {
  width: 100%; min-height: 60px; resize: vertical;
  border: 1px solid var(--bh-border);
  padding: 8px; font-size: 13px; font-family: var(--bh-font-sans);
  color: var(--bh-fg); background: var(--bh-bg);
  box-sizing: border-box;
}
.comment-reply-emoji-picker {
  display: none; flex-wrap: wrap; gap: 4px; padding: 6px 0 0;
}
.comment-reply-emoji-picker.is-open { display: flex; }
.comment-reply-emoji-picker button {
  background: none; border: none; font-size: 16px; cursor: pointer; padding: 2px; line-height: 1;
}
.comment-reply-emoji-picker button:hover { background: var(--bh-surface); }
.comment-reply-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px;
}
.comment-reply-emoji-toggle { margin-right: auto; }
.comment-reply-footer button {
  padding: 7px 14px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--bh-border); background: var(--bh-surface);
  color: var(--bh-fg); font-family: var(--bh-font-sans);
}
.comment-reply-submit {
  background: var(--bh-fg) !important;
  color: var(--bh-bg) !important;
  border-color: var(--bh-fg) !important;
}
.comment-reply-sent-note {
  font-size: 12px; color: #1a7f37; margin-top: 8px;
}
.comment-children { margin-top: 4px; }

#comment-load-more {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  color: var(--bh-fg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--bh-font-sans);
}
#comment-load-more:hover { background: var(--bh-border); }
#comment-list-empty {
  font-size: 13px;
  color: var(--bh-muted);
  text-align: center;
  padding: 20px 0;
}

.comment-fav-note {
  font-size: 12px;
  color: #a32d2d;
  margin-top: 8px;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- Yanitin yanitindaki (2. kademe) ek gorsel ayrim -- daha da
   girintili + mavi sol cizgi + acik zemin (1. kademenin gri/surface
   zemininden farkli), hiyerarsi net gorunsun diye. ---- */
.comment-card--depth-2 {
  margin-left: 32px !important;
  background: var(--bh-bg) !important;
  border-left: 2px solid #185fa5 !important;
}

/* ---- Haber kaydet (fav) butonu -- kare kose (site kurali), tema/dark
   uyumlu. Paylas satirinin icinde, Google News butonundan once. ---- */
.article-save-btn, .article-tts-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--bh-border);
  background: var(--bh-bg);
  color: var(--bh-fg);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--bh-font-sans);
  cursor: pointer;
  margin-left: 10px;
}
.article-save-btn:hover, .article-tts-btn:hover { background: var(--bh-surface); }
.article-save-btn.is-active, .article-tts-btn.is-active {
  background: var(--bh-fg);
  border-color: var(--bh-fg);
  color: var(--bh-bg);
}
.post-like-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--bh-border);
  background: var(--bh-bg);
  color: var(--bh-fg);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--bh-font-sans);
  cursor: pointer;
}
.post-like-btn:hover { background: var(--bh-surface); }
.post-like-btn.is-active {
  background: var(--bh-fg);
  border-color: var(--bh-fg);
  color: var(--bh-bg);
}
.post-like-count { font-weight: 700; }

/* ---- Kurumsal Sayfalar (statik sayfa CMS) -- sidebar yok, sag/sol 150px
   girinti (kullanicinin acik talimati). Tipografi article-body ile ayni dil
   (18px/1.8/400 govde, 21px/700 basliklar) ama kendi class'i altinda --
   article-body ile KARISTIRILMAYACAK, ayri bir sayfa turu. ---- */
.page-body {
  padding: 24px 150px 60px;
}
.page-content {
  font-size: 18px;
  line-height: 1.8;
  font-weight: 400;
  color: var(--bh-fg);
}
.page-content p {
  margin: 0 0 22px;
}
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  margin: 32px 0 16px;
}
.page-content a {
  color: #1a56db;
  text-decoration: underline;
}
.page-content img {
  border-radius: 0;
  margin: 8px 0 22px;
}
.page-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.page-list-item {
  border-bottom: 1px solid var(--bh-border);
}
.page-list-item a {
  display: block;
  padding: 16px 4px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--bh-fg);
}
.page-list-item a:hover {
  color: #1a56db;
}

/* ---- Footer icerigi -- Kurumsal Sayfalar (PageCategory.in_footer) ile
   dinamik dolduruluyor (2026-07-05). Marka rengi (siyah/beyaz), border-radius
   sifir, sosyal ikonlar site geneli Setting[:facebook/twitter/instagram/youtube]
   degerlerinden turetiliyor -- ayri bir admin ayari GEREKMEDI. ---- */
.bh-footer-inner {
  max-width: var(--bh-body-w);
  margin: 0 auto;
  padding: 0 var(--bh-gap);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.bh-footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.bh-footer-brand { flex: 0 0 280px; }
.bh-footer-logo {
  font-family: var(--bh-font-serif);
  font-weight: 700;
  font-size: 24px;
  margin: 0;
}
.bh-footer-logo a { color: inherit; text-decoration: none; }
.bh-footer-slogan {
  font-family: var(--bh-font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  opacity: .75;
  margin: 4px 0 10px;
}
.bh-footer-desc {
  font-size: 13px;
  line-height: 1.6;
  opacity: .7;
  margin: 0 0 14px;
  max-width: 260px;
}
.bh-footer-social { display: flex; gap: 8px; }
.bh-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 0;
  color: inherit;
}
.bh-footer-social a:hover { background: rgba(255,255,255,.12); }
.bh-footer-social svg { width: 15px; height: 15px; fill: currentColor; }

.bh-footer-col { flex: 1 1 140px; min-width: 140px; }
.bh-footer-col-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0 0 12px;
  opacity: .9;
}
.bh-footer-col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bh-footer-col-list a { color: inherit; opacity: .75; text-decoration: none; font-size: 13px; }
.bh-footer-col-list a:hover { opacity: 1; text-decoration: underline; }

.bh-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 16px;
  font-size: 12px;
  opacity: .6;
  text-align: center;
}

/* ---- Tum Kategoriler cekmecesi (hamburger + soldan kayan drawer,
   2026-07-06) -- Haberturk mobil menusu referans alindi: ust bar sadece
   "hizli menu" olarak kaliyor, hamburger ikonu TUM kategorileri (alt
   kategoriler dahil, akordeon) gosterecek genis bir paneli aciyor.
   ILK FAZ: sadece ac/kapa mekanizmasi -- icerik (kategori listesi)
   KASITLI BOS, sonraki adimda doldurulacak. ---- */
.bh-hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 20px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  margin-right: 4px;
  flex-shrink: 0;
  text-decoration: none;
}
.bh-hamburger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
}
.bh-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 300;
}
.bh-drawer-overlay.is-open { display: block; }
.bh-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 360px;
  max-width: 85vw;
  background: var(--bh-bg);
  color: var(--bh-fg);
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
  box-shadow: 2px 0 24px rgba(0,0,0,.3);
}
.bh-drawer-overlay.is-open .bh-drawer { transform: translateX(0); }
.bh-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--bh-bar-bg);
  color: var(--bh-bar-fg);
  position: sticky;
  top: 0;
}
.bh-drawer-logo {
  font-family: var(--bh-font-serif);
  font-weight: 700;
  font-size: 18px;
}
.bh-drawer-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.bh-drawer-body {
  padding: 20px;
}

/* ---- Drawer icerigi -- MenuGroup/MenuItem ile admin'den yonetiliyor
   (2026-07-06). Native <details>/<summary> kullanildi -- akordeon icin
   ekstra JS gerekmiyor, tarayici yerlesik davranisi kullaniliyor. ---- */
.bh-drawer-group {
  border-bottom: 1px solid var(--bh-border);
}
.bh-drawer-group-title {
  padding: 14px 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bh-drawer-group-title::-webkit-details-marker { display: none; }
.bh-drawer-group-title::after {
  content: "▾";
  font-size: 12px;
  opacity: .6;
  transition: transform .15s ease;
}
.bh-drawer-group[open] > .bh-drawer-group-title::after {
  transform: rotate(180deg);
}
.bh-drawer-group-title--static {
  cursor: default;
  padding-top: 4px;
}
.bh-drawer-group-title--static::after { content: none; }
.bh-drawer-icon { margin-right: 8px; display: inline-block; }
.bh-drawer-group-list--ungrouped {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bh-border);
}
.bh-drawer-group-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bh-drawer-group-list a {
  color: var(--bh-fg);
  opacity: .8;
  font-size: 14px;
  text-decoration: none;
}
.bh-drawer-group-list a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Namaz vakitleri widget'i -- hem /namaz-vakitleri sayfasinda hem anasayfa
   sidebar'inda ayni partial (shared/_prayer_times_widget) ile kullanildigi
   icin sitenin ortak stil dosyasinda (sayfaya ozel css: blogu degil). */
.namaz-widget { border: 1px solid var(--bh-border); background: var(--bh-surface); border-radius: 0; }
.namaz-widget__baslik { display: flex; align-items: center; gap: 6px; background: #000; color: #fff; font-size: 13px; font-weight: 700; padding: 9px 12px; }
.namaz-widget__tarih { font-size: 11px; color: var(--bh-muted); text-align: center; padding: 6px 0 0; }
.namaz-widget__grid { padding: 8px 12px 10px; }
.namaz-widget__satir { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--bh-border); }
.namaz-widget__satir:last-child { border-bottom: none; }
.namaz-widget__etiket { color: var(--bh-muted); }
.namaz-widget__saat { color: var(--bh-fg); font-weight: 700; }
.namaz-widget__bos { padding: 12px; font-size: 12px; color: var(--bh-muted); text-align: center; }

.bh-son-dakika__hava {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 14px;
  white-space: nowrap;
}

/* İlgili Haberler bloğu -- haber gövdesine editörden eklenen kart grid'i
   (2026-07-23). Mobil kolon sayısı burada DEĞİL, m.css/v.css'te
   [data-mobile-cols] ile override edilir (masaüstü/mobil kolon ayrımı
   canlı sitedeki mantığın aynısı, bkz. ArticleRelatedNews). */
.related-news-block { clear: both; margin: 20px 0; }
.rn-grid { display: grid; gap: 4px; }
.rn-item {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  overflow: hidden;
}
.rn-img { width: 100%; line-height: 0; }
.rn-img-el { width: 100%; height: auto; display: block; }
.rn-noimg { width: 100%; aspect-ratio: 300 / 170; display: flex; align-items: center; justify-content: center; }
.rn-noimg span { color: #fff; font-size: 28px; font-weight: 700; }
.rn-footer { display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; flex-wrap: wrap; }
.rn-cat { font-size: 10px; font-weight: 700; letter-spacing: .3px; flex-shrink: 0; }
.rn-date { font-size: 10px; color: var(--bh-muted); flex-shrink: 0; }
.rn-stats { display: flex; gap: 8px; margin-left: auto; }
.rn-stat { font-size: 10px; color: var(--bh-muted); }
.rn-title { display: block; padding: 2px 8px 8px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--bh-fg); }
/* .article-body a / .post-body a (mavi + alti cizili, gomulu metin linkleri
   icin) kart linklerimizden (.rn-item/.rw-item) daha yuksek CSS onceligine
   sahipti (element+class > tek class) -- ilgili haber/yazar kartlari
   makale/yazi govdesine gomulunce mavi-alti-cizili "kaba" link gibi
   gorunuyordu (2026-07-24, kullanici: "kart altındaki yazılar çok kaba").
   Ayni veya daha yuksek oncelikle acikca text-decoration/renk sifirlaniyor. */
.article-body a.rn-item, .post-body a.rn-item,
.article-body a.rw-item, .post-body a.rw-item {
  text-decoration: none;
  color: inherit;
}
.rn-item, .rn-item:hover, .rn-item:visited,
.rw-item, .rw-item:hover, .rw-item:visited {
  text-decoration: none !important;
}
.rn-title, .rn-cat, .rn-date, .rn-stat,
.rw-name, .rw-label {
  text-decoration: none !important;
}
.rn-group-bar { margin-bottom: 6px; }
.rn-group-bar strong { font-size: 13px; letter-spacing: .3px; }

/* İlgili Yazar bloğu -- rn-grid ile ayni mantik, yazar kartlari icin
   (2026-07-23, kullanici: "aynı şekilde ilgili yazar ekle özelliğini yap"). */
.related-writers-block { clear: both; margin: 20px 0; }
.rw-group-bar { margin-bottom: 6px; }
.rw-group-bar strong { font-size: 13px; letter-spacing: .3px; }
.rw-grid { display: grid; gap: 12px; }
.rw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 12px 8px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
}
.rw-img { width: 64px; height: 64px; margin-bottom: 8px; }
.rw-img-el { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.rw-noimg { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rw-noimg span { color: #fff; font-size: 22px; font-weight: 700; }
.rw-name { font-size: 13px; font-weight: 700; color: var(--bh-fg); }
.rw-label { font-size: 10px; color: var(--bh-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }

/* İlgili Dosya bloğu -- editorde yazilan serbest isim + link (genelde
   Google Drive), dosya ikonuyla gosterilir (2026-07-24). */
.related-files-block { clear: both; margin: 20px 0; }
.rf-group-bar { margin-bottom: 6px; }
.rf-group-bar strong { font-size: 13px; letter-spacing: .3px; }
.rf-grid { display: grid; gap: 8px; }
.article-body a.rf-item, .post-body a.rf-item,
.rf-item, .rf-item:hover, .rf-item:visited {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  color: var(--bh-fg);
  text-decoration: none !important;
}
.rf-icon { font-size: 18px; flex-shrink: 0; }
.rf-name { font-size: 13px; font-weight: 600; line-height: 1.35; }

/* Anket widget'i -- var olan Poll modulunun govdeye gomulmesi
   (2026-07-24, kullanici: "anket ekleme özelliğini yap"). */
.poll-widget {
  clear: both;
  margin: 20px 0;
  padding: 16px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  font-family: var(--bh-font-sans);
}
.poll-widget-title { font-size: 15px; font-weight: 700; color: var(--bh-fg); margin-bottom: 6px; }
.poll-widget-desc { font-size: 13px; color: var(--bh-muted); margin-bottom: 12px; }
.poll-widget-options { display: flex; flex-direction: column; gap: 8px; }
.poll-widget-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--bh-border);
  cursor: pointer;
  overflow: hidden;
}
.poll-widget-option input { flex-shrink: 0; }
.poll-widget-option-text { position: relative; z-index: 1; font-size: 13px; font-weight: 600; color: var(--bh-fg); flex: 1; }
.poll-widget-option-bar {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--bh-border);
  z-index: 0;
}
.poll-widget-option-fill { display: block; height: 100%; background: rgba(55,138,221,.25); width: 0%; transition: width .4s; }
.poll-widget-option-pct { display: none; position: relative; z-index: 1; font-size: 12px; font-weight: 700; color: var(--bh-fg); flex-shrink: 0; }
.poll-widget.is-voted .poll-widget-option-bar { display: block; }
.poll-widget.is-voted .poll-widget-option-pct { display: block; }
.poll-widget.is-voted .poll-widget-option { cursor: default; }
.poll-widget-actions { margin-top: 12px; }
.poll-widget.is-voted .poll-widget-actions { display: none; }
.poll-widget-vote-btn {
  padding: 9px 20px;
  background: #378add;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--bh-font-sans);
  cursor: pointer;
}
.poll-widget-total { margin-top: 10px; font-size: 12px; color: var(--bh-muted); }
.poll-widget-msg { margin-top: 8px; font-size: 12px; color: #e74c3c; }

/* Anket SMS dogrulama adimlari (telefon girisi -> kod/link) -- border-radius
   sitede hicbir yerde yuvarlak degil kuralina uygun, tum inputlar/butonlar
   0 kose. */
.poll-widget-sms-phone-step, .poll-widget-sms-code-step { margin-top: 12px; }
.poll-widget-sms-label, .poll-widget-sms-code-hint { display: block; font-size: 12px; color: var(--bh-muted); margin-bottom: 6px; }
.poll-widget-sms-phone-row, .poll-widget-sms-code-row { display: flex; gap: 6px; }
.poll-widget-sms-prefix {
  display: flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--bh-border); background: var(--bh-surface);
  color: var(--bh-fg); font-size: 13px; font-weight: 700;
}
.poll-widget-sms-phone-input, .poll-widget-sms-code-input {
  flex: 1; height: 38px; border: 1px solid var(--bh-border);
  background: var(--bh-bg); color: var(--bh-fg); border-radius: 0;
  padding: 0 10px; font-size: 13px; font-family: var(--bh-font-sans);
}
.poll-widget-sms-send-btn, .poll-widget-sms-verify-btn {
  flex-shrink: 0; padding: 0 16px; border: none; background: #378add;
  color: #fff; font-size: 13px; font-weight: 700; font-family: var(--bh-font-sans);
  cursor: pointer;
}
.poll-widget-sms-send-btn:disabled, .poll-widget-sms-verify-btn:disabled { opacity: .6; cursor: default; }
.poll-widget-sms-link-msg { font-size: 13px; color: var(--bh-fg); }
.poll-widget-sms-timer { margin-top: 10px; font-size: 11px; color: var(--bh-muted); }
.poll-widget-sms-countdown { font-weight: 700; margin-left: 4px; }
.poll-widget-sms-resend { margin-top: 4px; font-size: 12px; }
.poll-widget-sms-resend-link { color: #378add; }

/* Anket KENDI sayfasinda (/anketler/:slug, .category-main icinde) ANA
   icerik olarak gosteriliyor -- sidebar/mobil-haber-alti gibi kucuk,
   sikistirilmis widget boyutlarindan FARKLI olarak, haber govde metniyle
   (.article-body 18px/1.8) ayni okuma boyutunda olmali (2026-07-24,
   kullanici: "hala kucuk site ile ayni degil"). Sidebar/mobil yerlesimler
   (.article-sidebar-poll, .article-mobile-poll) bu kuraldan ETKILENMEZ,
   sadece kendi sayfasindaki buyuk gosterim boyutlanir. */
.poll-detail-hero { width: 100%; margin-bottom: 14px; }
.poll-detail-hero-img { width: 100%; height: auto; display: block; }
.poll-detail-body { padding: 0 100px; }
.category-main .poll-widget { padding: 22px; }
.category-main .poll-widget-title { font-size: 20px; }
.category-main .poll-widget-desc { font-size: 16px; line-height: 1.7; }
.category-main .poll-widget-option-text { font-size: 16px; }
.category-main .poll-widget-option { padding: 12px 14px; }
.category-main .poll-widget-vote-btn { padding: 11px 24px; font-size: 15px; }
.category-main .poll-widget-sms-label,
.category-main .poll-widget-sms-code-hint,
.category-main .poll-widget-sms-phone-input,
.category-main .poll-widget-sms-code-input,
.category-main .poll-widget-sms-send-btn,
.category-main .poll-widget-sms-verify-btn { font-size: 15px; }

/* Anket widget'inin sabit yerlesimleri -- www masaustu sag sidebar (haber
   detay sayfasi, Admin > Anketler > "Masaustu Sidebar" ile secilen anket)
   ve mobil haber detayinda yorumlarin ustunde (Admin > "Mobil Haber Alti"),
   2026-07-24. */
.article-sidebar-poll { margin-top: var(--bh-gap); }
.article-mobile-poll { margin: 20px 0; }