/* m.bafrahaber.tr (mobil site) -- sil bastan tasarim, 1. asama
   (2026-07-14, kullanici wireframe'i: notlar_yeni_site/1.png).
   tokens.css'in ARDINDAN yuklenir -- oradaki degiskenleri (--bh-gap,
   --bh-bar-h vb.) SADECE mobil sayfalarda gecerli olacak sekilde
   ezer (bu dosya yalnizca layouts/mobile.html.slim'de yukleniyor,
   www/vip'e hic etkisi yok). 390px genislik kullanicinin tasarim
   REFERANSI (iPhone 390px mantigi) -- CSS'te sabit max-width olarak
   ZORLANMIYOR, gercek cihaz genisligine akici (fluid) uyum saglar. */

:root {
  --bh-gap: 16px;
  --bh-bar-h: 50px;
}

html, body {
  /* tokens.css'teki masaustu konteyner genislikleri (--bh-outer-w:1600px,
     --bh-body-w:1240px) burada override EDILMEDEN, .bh-outer/.bh-mid/
     .bh-body mobilde de o genislige kapaniyordu -- sayfa gercekte 1600px
     genisliginde render olup mobil tarayicida sadece SOL ucu gorunuyordu,
     yatay surukleyince geri kalani (www ile birebir ayni gorunum) ortaya
     cikiyordu (2026-07-14, kullanici bulgusu: "farey sola cekince sagda
     www gorunuyor"). overflow-x:hidden, manset/kategori/yazarlar grid
     gibi HENUZ mobile-ozel CSS'i olmayan (bilinçli olarak sonraya
     birakilan) bolumlerin sabit piksel genislikleri tasarsa bile sayfayi
     yatay kaydirilabilir hale getirip www gorunumunu disari sizdirmasini
     engelleyen bir guvenlik agi. */
  overflow-x: hidden;
  max-width: 100vw;
}
.bh-outer, .bh-mid, .bh-body {
  max-width: 100% !important;
}

body {
  margin: 0;
  /* Sabit (position:fixed) ust bar normal akistan ciktigi icin, altindaki
     icerigin bar'in ARKASINDA baslamamasi icin ayni yukseklikte bosluk. */
  padding-top: var(--bh-bar-h);
}

/* ---- Sabit ust logo bar (hamburger + logo + hesap) ----
   .bh-bar'in (tokens.css) temel gorunumunu (siyah zemin, 50px yukseklik,
   beyaz yazi, flex+gap) miras alir -- sadece konumlandirma + 3 ogenin
   dagilimi burada ekleniyor (2026-07-14, kullanici: "en ustteki logo bar
   sabit olacak"). */
.m-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  justify-content: space-between;
}
/* Cok dar ekranlarda (Huawei P30 Lite gibi ~360px viewport) hamburger
   ikonu flex-shrink ile kucup "ezilmis" gorunebiliyordu -- tokens.css'te
   ".bh-hamburger-btn" icin flex-shrink hic belirtilmemis, varsayilan
   olarak (1) alan sikisinca kuculuyor. Boyutu SABIT kalacak sekilde
   flex-shrink:0 eklendi (2026-07-15, kullanici: "hamburger menü de
   görsel de gördüğün gibi yukarında aşağı ezilmiş görünüyor").
   .m-topbar__logo zaten overflow:hidden ile kisiliyor, kalan alani
   hamburger/hesap ikonlarindan degil logo metninden almasi gerekiyor. */
.m-topbar .bh-hamburger-btn {
  flex-shrink: 0;
}
.m-topbar__logo {
  flex: 1;
  text-align: center;
  color: inherit;
  text-decoration: none;
  font-family: var(--bh-font-serif);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-topbar__account {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* ---- Sürükle-bırak hazırlığı ----
   Ana sayfadaki her blok (Son Haberler, 1:1 Reklam, Kutu Haber, Manşet
   Slider, Manşet Altı Navbar) .m-block ile sarmalanıyor -- ileride bir
   yönetim sayfasının bu bloklari bulup siralamasi icin bir DOM/CSS
   kancasi (2026-07-14, kullanici: "bütün bloklar ileride ... sürükle
   bırak şeklinde yer değişebilir, buna hazır ol"). Su an gercek
   surukle-birak JS'i YOK, sadece bloklar arasi 16px bosluk (GAP 16 PX,
   wireframe) burada saglaniyor.
   display:contents KULLANILMAZ (masaustundeki .yazarlar-section'dan
   farkli olarak) -- burada bloklar zaten dikey akista tek tek stack
   oluyor, gap icin gercek bir blok elemani olmasi gerekiyor. */
.m-block {
  margin-bottom: var(--bh-gap);
}
.m-block:last-child {
  margin-bottom: 0;
}
/* Son Haberler barinin zemini beyaz (bkz. asagida) -- altindaki 16px'lik
   GAP da sayfa zemini (beyaz) oldugu icin ikisi birlesip gereksiz/asiri
   genis tek bir beyaz alan gibi gorunuyordu (2026-07-14, kullanici:
   "son haberlerin altı beyaz... arada galiba gap var... gap varsa
   oradan kaldır"). Sadece bu blogun ALTINDAKI bosluk kaldirildi, diger
   bloklar arasindaki 16px GAP (wireframe) korunuyor. */
.m-block[data-m-block="son_haberler"] {
  margin-bottom: 0;
}
/* Reklamin (360x360 kare, genelde beyaz zeminli/beyaz kenar bosluklu bir
   gorsel) altinda/ustunde kalan 16px'lik GAP de sayfa zemini (beyaz) ile
   birlesip ayni "asiri beyazlik" izlenimini veriyordu (2026-07-14,
   kullanici: "kutu haberin üstünde de aynı durum var... reklamın altı
   ve üstünde gap var"). Reklam ile bir onceki (son_haberler, zemini
   zaten beyaz) ve bir sonraki (kutu_haber) blok arasindaki bosluklar
   kaldirildi -- reklam artik dogrudan onceki/sonraki blogun bitisiginde. */
.m-block[data-m-block="reklam_1_1"] {
  margin-bottom: 0;
}

/* ---- 1:1 reklam (ads/revive/_desk_kare, zoneid=2) ----
   Kendi 360x360 sabit boyutunu tasiyor (bkz. _desk_kare.html.slim) --
   burada sadece mobil genislige gore ORTALAMA. */
.m-block[data-m-block="reklam_1_1"] {
  display: flex;
  justify-content: center;
}

/* ---- Kutu Haber: 3'lu grid, 400px sabit kart yerine akici/esit 3 sutun. */
.kutu-haber {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px;
  margin-bottom: var(--bh-gap);
}
.kutu-haber .kutu-haber__card {
  width: 100%;
}
/* "Manşetler" grid'indeki Vefat linkleri kutusu -- masaustunde 400x250
   sabit, mobilde akici genislik + otomatik yukseklik (icerik kadar). */
.kutu-haber__vefat {
  width: 100% !important;
  height: auto !important;
}

/* ---- Manşet Slider: www'nin sabit 860px genisligi yerine tam-genislik.
   .manset-slider'in KENDI kurali (home/index.html.slim) DEGISTIRILMEDI --
   bu SADECE mobilde gecerli, sonradan gelen bir override (bkz. plan).
   .bh-media-row'un KENDISI mobilde .m-block class'ini tasiyor (ayri bir
   sarmalayici DEGIL). .bh-media-sidebar (ikincil sutun -- mini slider +
   reklam) mobilde wireframe'de yok, gizleniyor. */
.bh-media-row.m-block {
  display: block;
}
.bh-media-row.m-block .manset-slider {
  width: 100% !important;
}
/* www'nin ".ms-slide{height:600px}" kurali (home/index.html.slim inline
   css:) SABIT piksel -- mobilde genislik 860px'ten ~390px'e dusunce, 600px
   sabit yukseklik oraniyla slider bozuk gorunuyordu. HeadlineImageGenerator
   zaten mobil icin AYRI, KARE (800x800) manset gorseli uretiyor
   (M_SIZE = [800,800], bkz. app/services/headline_image_generator.rb) --
   slider da bu gorsellerle eslesecek sekilde 1:1 kare oraninda (2026-07-14,
   kullanici: "mobil manşet slider için özel görsel üretiyoruz, orası da
   kare olacak"). */
/* 2026-07-21 (3. deneme): .manset-slider'in KENDISINE aspect-ratio:1/1
   uygulamak, altina normal akista eklenen .ms-dots barini kare kutunun
   disina itip overflow:hidden ile KIRPIYORDU (numaratör ya hiç görünmüyor
   ya da görsel numaratöre yer acmak icin sikismis/ezilmis gibi
   görünüyordu) -- kullanici: "numaratörü görselin altına al. görsel
   ezilmesin". Kare oran SADECE .ms-slide'a (gercek slayt/gorsel kutusu)
   uygulanir, .manset-slider'in kendisi icerikten (kare gorsel + altindaki
   numaratör barinin toplami) dogal yuksekligini alir -- boylece gorsel
   ASLA sikismaz, numarator de KIRPILMADAN gorselin hemen altinda kalir. */
.bh-media-row.m-block .manset-slider {
  height: auto !important;
}
.bh-media-row.m-block .ms-slide {
  height: auto !important;
  aspect-ratio: 1 / 1;
}
.bh-media-row.m-block .bh-media-sidebar {
  display: none;
}
/* 2026-07-18'de mobilde gizlenmisti, 2026-07-23'te iOS swipe sorunu
   surerken gecici olarak geri acilmisti -- swipe artik native scroll-snap
   ile guvenilir calistigi icin (kullanici: "oldu şimdi ilerliyor. gayet
   iyi çalışıyor") oklara gerek kalmadi, tekrar gizlendi. */
.bh-media-row.m-block .ms-arrow {
  display: none;
}
/* Slider alti numara (dots) barinda www'de "justify-content:space-between"
   ile 20-25 numara TUM slider genisligine (860px) yayiliyordu -- numaralar
   sabit boyutlu (32px, flex-shrink:0) oldugu icin mobil genislikte
   (~390px) sigmiyor, sayfanin genel overflow-x:hidden'i (bkz. yukarida)
   yuzunden 10'dan sonrasi TAMAMEN KESILIYOR, ulasilamiyor du (2026-07-14,
   kullanici: "10 dan sonra iler gidince 11... görünsün. şimdi
   görünmüyor"). Konteyner kendi icinde yatay kaydirilabilir yapildi --
   ileri gidildikce aktif numarayi gorunur tutan scrollIntoView cagrisi
   (home/index.html.slim, goTo() icinde) sonraki numaralarin sirayla
   ortaya cikmasini sagliyor. */
.bh-media-row.m-block .ms-dots {
  justify-content: flex-start;
  /* www'nin sabit 12px sol/sag padding'i -- 18px'e cikarinca 10.
     numara sagdan taşiyordu (2026-07-15, kullanici: "SAĞDA DURUYOR.
     10 NUMARANIN BİR KISMI KESİK"), simetrige donulunce hala "biraz
     daha sola" istendi. Sol padding'i AZALTMAK (12px'in ALTINA)
     tasma riski YARATMAZ (sadece sagdan bosluk acar) -- 6px'e
     dusuruldu. */
  padding-left: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 2026-07-21 (3. deneme): artik position:absolute/gradyan YOK --
     numaratör www ile AYNI mantikla normal akista, GORSELIN ALTINDA
     duz siyah zemin uzerinde duruyor (kullanici: "numaratörü görselin
     altına al. görsel ezilmesin"). Bunu KIRPILMADAN calisir hale
     getiren asil degisiklik yukaridaki .manset-slider kuralinda --
     aspect-ratio artik SADECE .ms-slide'da, .manset-slider kendisi
     serbest yukseklikte, bu yuzden dots barina yer aciliyor,
     overflow:hidden onu artik kirpmiyor. */
}
.bh-media-row.m-block .ms-dots::-webkit-scrollbar {
  display: none;
}
/* ms-fade artik gereksiz (dots kendi gradyanini geri kazandi) - zaten
   home/index.html.slim'de .m-block .ms-fade{display:none} ile kapali. */
.bh-media-row.m-block .ms-bg {
  object-fit: cover;
}

/* ---- Manşet Üstü Bar -- Nöbetçi Eczane / Hava Durumu / Namaz Vakti
   (shared/_manset_ustu_bar, mobile-only partial, 2026-07-14, kullanici:
   once "manset altı" idi, sonra "adını manset üstü bar ver ve mansetn
   üstüne koy" ile Kutu Haber ile Manşet Slider arasina tasindi, ismi de
   buna gore guncellendi). 3 esit sutun, son_haberler ile ayni siyah/
   beyaz bar deseni (.bh-bar). */
.m-manset-ustu-bar {
  justify-content: space-between;
  padding: 0 8px;
}
.m-manset-ustu-bar__item {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-manset-ustu-bar__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 15px;
}
.m-manset-ustu-bar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f4c430;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* ---- Son Haberler (shared/_son_dakika, www ile AYNI partial) ----
   Partial'in kendisi www'de kullanildigi haliyle hava durumu + namaz
   vakti ikonlarini da tasiyor -- kullanici bunlari ISTEMEDI, sadece
   "sadece son haberler" istedi (2026-07-14: "SON HABERLER BARINDA
   SADECE SON HABERLER OLMALI... ÜZERİNDE HAVA DURUMU VAR NAMAZ VAKTİ
   VAR. AMA BEN BUNLARI DEMEDİM"). Partial'i CATALLAMAK (mobil icin ayri
   bir kopya) yerine, tek partial'i koruyup SADECE mobilde bu iki ogeyi
   CSS ile gizlemek tercih edildi -- www/vip regresyon riski sifir. */
.m-block[data-m-block="son_haberler"] .bh-son-dakika__namaz,
.m-block[data-m-block="son_haberler"] .bh-son-dakika__hava {
  display: none;
}
/* Saat ikonu -- www'deki 16px yerine mobilde daha buyuk/belirgin, tepe
   bardaki hamburger ikonuyla (20px genislik, kalin cizgiler) ayni
   agirlikta gorunsun istendi (2026-07-14, kullanici: "son haberler
   ikonu saat daha büyük ve siyah olsun yukarıdaki hamburger ikon gibi
   belirgin olsun", sonra: "saat ile başlıklar aynı yatay hizada değil.
   saat yukarıda. ayrıca saati biraz daha büyük yap"). Renk zaten
   .bh-son-dakika'nin --bh-fg (siyah, bkz. yukarida) rengini SVG'nin
   currentColor'i uzerinden miras aliyor. Hizalama sorunu: <svg>
   varsayilan olarak inline-block gibi davranip METIN BASELINE'ina
   (harflerin alt cizgisine, harflerin TAM ORTASINA degil) hizalaniyordu
   -- bu yuzden yanindaki ticker yazisindan daha yukarida duruyordu.
   .bh-son-dakika__clock'u flex+align-items:center yapip svg'yi
   vertical-align'dan tamamen kurtardik. */
.m-block[data-m-block="son_haberler"] .bh-son-dakika__clock {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.m-block[data-m-block="son_haberler"] .bh-son-dakika__clock svg {
  display: block;
  width: 26px;
  height: 26px;
}

/* ---- Manşetler / Yazarlar / Samsun-Gündem-Asayiş kategori grid'leri ----
   Kullanicinin acik talimatiyla mobilde artik hic RENDER EDILMIYORLAR
   (home/index.html.slim'de "if plt != 'm'" ile) -- "RESPONSİVE SİTE
   YAPMIYORUZ. MOBİL TAMAMEN AYRI OLACAK... ÖNCE MANŞET ALTINDAKİ HERŞEYİ
   SİL" (2026-07-14). Adim adim, manset slider'in ustunden asagi inilerek
   ayri ayri tasarlanacaklar -- bu CSS bloğu bu yuzden kaldirildi (artik
   hedefleyecek bir DOM'u yok, olu kod olurdu). */

/* ---- Hesap acilir menusu (nav-account-user) -- mobilde HOVER degil
   TIKLAMA ile acilir/kapanir (dokunmatik ekranda hover kavrami yok).
   tokens.css'teki ":hover" kurali (masaustu) burada gecersiz kaliyor,
   ".is-open" class'i (bkz. mobile.html.slim'deki onclick) devreye
   giriyor. (2026-07-14, kullanici: "ÜYE İSMİ ORADA YAZMAYACAK.
   ÜZERİNE TIKLANDIĞINDA AÇILAN MENÜDE ÜYE İSMİ PROFİL SAYFASI ÇIKIŞ
   MENÜSÜ OLACAK".) */
.m-nav-account {
  position: relative;
}
.m-nav-account .nav-account-dropdown {
  display: none;
  top: calc(100% + 8px);
}
.m-nav-account.is-open .nav-account-dropdown {
  display: block;
}
.m-nav-account__name {
  padding: 9px 14px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bh-muted);
  white-space: nowrap;
}

/* ---- Son Haberler (shared/_son_dakika, www ile AYNI partial) ----
   "SON HABERLER:" etiketi kaldirildi -- sadece saat ikonu + kayan
   haberler kalsin istendi. Zemin/yazi rengi --bh-bg/--bh-fg (tema
   degiskenleri) ile beyaz/siyah yapildi -- bu ayni zamanda dark tema
   acildiginda otomatik dogru renklere donuyor (2026-07-14, kullanici:
   "ARKA PLAN RENGİ BEYAZ YAZILAR SİYAH OLACAK... SİSTEMDE DARK TEMA DA
   OLACAK. WWW İLE AYNI" -- www'nin --bh-bar-* renkleri BILEREK "temadan
   bagimsiz" tutulmustu (bkz. tokens.css), ama kullanici burada ACIKCA
   tema degiskenlerine uymasini istedi, bu yuzden --bh-bar-* yerine
   --bh-bg/--bh-fg kullanildi). */
.m-block[data-m-block="son_haberler"] .bh-son-dakika {
  background: var(--bh-bg);
  color: var(--bh-fg);
}
.m-block[data-m-block="son_haberler"] strong {
  display: none;
}

/* NOT: 1:1 reklam ESKIDEN burada konteyneri %100 genislige geriyordu,
   ama Revive'daki gercek gorsel HER ZAMAN sabit 360x360px (HTML'de
   width/height olarak gomulu) -- dar ekranlarda (Huawei P30 Lite gibi
   ~360px'ten dar viewport) konteyner gorselden KUCUK kaliyor, gorsel
   tasip YARISI KESILMIS gorunuyordu (2026-07-15, kullanici: "ana
   sayfada zone 2 reklamın yarısı görünmesine rağmen detay sayfasındaki
   aynı reklam tam göründü"). O %100 gerdirme kurali TAMAMEN KALDIRILDI
   -- yukarida (satir ~119) zaten var olan "display:flex;justify-
   content:center" kurali artik TEK basina, SABIT 360x360 boyutu
   ORTALIYOR (haber detay sayfasindaki ".article-top-ad" ile AYNI
   yaklasim -- 2026-07-15, daha once "reklamın altında çok boşluk var"
   sikayeti uzerine orada da ayni sekilde duzeltilmisti). */

/* ---- Kutu Haber kartlari -- www'de gorselin UZERINE bindirilmis
   (absolute + gradyan) baslik mobilde ISTENMEDI: gorsel duz, altinda
   TEK SATIR baslik (tasani kes) (2026-07-14, kullanici: "yazıları
   resmin üzerine gelmeyecek. görsel altında tek satır olacak. fazlası
   kesilecek"). */
.kutu-haber .kutu-haber__card {
  display: flex;
  flex-direction: column;
  height: auto;
}
.kutu-haber .kutu-haber__bg {
  position: static;
  height: 80px;
  border-radius: 0;
}
.kutu-haber .kutu-haber__overlay {
  display: none;
}
.kutu-haber .kutu-haber__title {
  position: static;
  color: var(--bh-fg);
  text-shadow: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 4px 2px 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Yazarlar -- www'nin "4 sabit yazar" kurali AYNEN korunuyor,
   sadece grid mobilde 4 sutun yerine 2 sutun x 2 satir (2026-07-14,
   kullanici: "yazarları www deki kural ile 4 lü grid yap. 2 şer yan
   yana"). .yazar-slider sabit 295px genislik yerine sutuna gore akici. */
.m-block[data-m-block="yazarlar"] .yazarlar-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
.m-block[data-m-block="yazarlar"] .yazar-slider {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 295 / 184;
  /* Dotlar artik kutunun DISINA (altina) tasindigi icin (bkz. asagida),
     .yazar-card-name'in ustune binmesin diye bosluk ayrildi -- ilk
     denemede (18px + name'in kendi 8px margin-top'u) dot ile isim
     arasinda gereksiz genis bir bosluk birakiyordu (2026-07-15,
     kullanici: "DOT İLE İSİM ARASI ÇOK UZAK... ORTADA FAZLA BEYAZLIK").
     14px'e dusuruldu, name'in kendi ust bosluguna asagida ayrica el
     atildi. */
  margin-bottom: 14px;
}
/* Oklar mobilde gizli -- gecis parmakla kaydirma (swipe) ile (JS'i
   home/index.html.slim'de, touchstart/touchend, tum platformlarda
   ortak/zararsiz) (2026-07-14, kullanici: "yazarların üstündeki okları
   kaldır ama parmak ile kaysın"). */
.m-block[data-m-block="yazarlar"] .yazar-slider-arrow {
  display: none;
}
/* Dotlar www'de resmin UZERINDE (bottom:6px) duruyordu -- mobilde
   resmin ALTINA alindi (shared/_yazarlar_grid.html.slim'de artik ayri
   bir .yazar-slider-clip ic div'i kirpmayi ustlendigi icin .yazar-
   slider'in KENDISI tasmaya izin veriyor, dot'lar kutunun tam altina
   (top:100%) konumlanabiliyor). Renk sari (#f4c430) yerine siyah
   (2026-07-15, kullanici: "sarı dotları resim üzerinde resim altına
   al. dotlar siyah olsun"). */
.m-block[data-m-block="yazarlar"] .yazar-slider-dots {
  bottom: auto;
  top: 100%;
  margin-top: 6px;
}
.m-block[data-m-block="yazarlar"] .yazar-slider-dot {
  background: rgba(0, 0, 0, .25);
}
.m-block[data-m-block="yazarlar"] .yazar-slider-dot.active {
  background: #000;
}
.m-block[data-m-block="yazarlar"] .yazar-card-name {
  margin-top: 0;
}

/* ---- Kategoriler (Samsun/Gündem/Asayiş/Ulusal) -- shared/_kategori_grid
   www'de 3 sutun (ana 2-3-2 kart alani + 3. sutunda reklam+kart veya
   VIP'te dikey slider). 3. sutun mobilde gizli, ana alan 2 sutuna
   iniyor. Kart dizilisi 2026-07-21'de degisti (bkz. tokens.css'teki AYNI
   tarihli not) -- artik her satir (kg-row) kendi kartlarini tasiyor,
   mobilde HER satir flex-wrap ile 2'ye bolunuyor (kullanicinin mevcut
   "2'li" mobil tercihiyle tutarli), her kart aspect-ratio:4/3 ile kendi
   oranini koruyor (sabit piksel yukseklik YOK, object-fit:cover ile
   kirpma da agir degil artik). */
.m-block[data-m-block^="kategori_"] .kategori-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
/* 2026-07-23, kullanici bulgusu: "mobil kategori gridde bir boşluk var" --
   desktop'ta 2-3-2 diye AYRI 3 satira (kg-row) bolunmus 7 kart, mobilde
   her satir KENDI ICINDE 2'ye kirilinca ORTADAKI 3'lu satirin 3. karti
   kendi satirinda YALNIZ kalip yaninda bos hucre biraktiriyordu (7 kart /
   3 ayri satir kutusu = ortada kirilma). kg-row'lari display:contents ile
   kutu olmaktan cikarip TUM 7 karti kg-main-rows'un TEK, kesintisiz
   flex-wrap akisina veriyoruz -- bosluk artik SADECE gercekten en sonda
   (7 tek sayi oldugu icin) olusabilir, ortada asla.*/
.m-block[data-m-block^="kategori_"] .kg-main-rows {
  flex-direction: row;
  flex-wrap: wrap;
}
.m-block[data-m-block^="kategori_"] .kg-row {
  display: contents;
}
.m-block[data-m-block^="kategori_"] .kg-card-43 {
  flex: 0 0 calc(50% - var(--bh-gap) / 2);
}
.m-block[data-m-block^="kategori_"] .kg-slider,
.m-block[data-m-block^="kategori_"] .kg-ad-slot,
.m-block[data-m-block^="kategori_"] .kg-side-col,
.m-block[data-m-block^="kategori_"] .kg-card__e {
  display: none;
}
/* Kart basligi (www'de 16px, buyuk masaustu kartlar icin) kucuk mobil
   kartlarda uzun basliklarda gorseli neredeyse tamamen kapliyordu --
   font kuculdu + 2 satirla sinirlandi, fazlasi kesiliyor (2026-07-14,
   kullanici: "küçük kutuların başlıkları resmi kaplamış... 2 satır
   deneyelim, artanı kesilebilir"). */
.m-block[data-m-block^="kategori_"] .kg-title {
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 360x100 yatay reklam (ads/revive/_yatay_kucuk, zoneid=3) -- Manşet
   Altı Bar ile Yazarlar arasi (2026-07-15, kullanici verdigi Revive
   kodu). 1:1 reklamdaki AYNI ortalama deseni. */
.m-block[data-m-block="reklam_yatay_kucuk"] {
  display: flex;
  justify-content: center;
}

/* ==== Haber Detay Sayfasi (articles/show, _article_content) ====
   Ilk asama -- adim adim ilerleniyor (2026-07-15, kullanici: "adım adım
   ilerle. sidebarsız bir model çıkacak. reklam alanlarını sonra
   vereceğim"). Reklam bloklari (ust yatay banner + sidebar'daki iki
   reklam alani) zaten _article_content.html.slim'de Ruby seviyesinde
   "ads_ok" ile mobilde hic render edilmiyor -- burada SADECE sidebar'in
   KENDISI (reklamsiz kalan "ilgili haberler" kismi dahil, HENUZ nereye
   tasinacagi kararlastirilmadi) gizleniyor ve baslik/govde tek sutuna
   iniyor. */
.article-layout {
  display: block;
}
.article-sidebar {
  display: none;
}
.article-title {
  font-size: 22px;
  line-height: 1.3;
}
/* Disaridan tek bir kenar boslugu -- breadcrumb/baslik/meta-row/govde
   hepsi ayni --bh-gap kadar iceriden basliyor (2026-07-15, kullanici:
   "başlık ve yayın tarihi yazan yer çok soldan başlamış makul bir
   boşluktan başlasın"). Masaustunde bu boslugu .bh-mid (layout'ta)
   veriyordu -- mobil layout'ta boyle bir sarmalayici hic yok, her
   sayfa/bolum kendi boslugunu kendi veriyor (ayni desen: .bh-bar,
   .kutu-haber vb.). */
.article-content-block {
  padding: 0 var(--bh-gap);
}
/* Breadcrumb -- www'nin 12px fontu + sabit 50px yukseklik mobilde
   sigmayip alta taşiyordu ("sarkmış") -- kucultuldu + sabit yukseklik
   yerine icerige gore buyuyebilen min-height'e gecildi (2026-07-15,
   kullanici: "breadcrumb kategoriden aşağı sarkmış daha küçük olarak
   hemen yanına al sarkmasın"). Kenar boslugu artik disaridaki
   .article-content-block'tan geldigi icin kendi 12px padding'i de
   kaldirildi (cift bosluk olmasin).
   NOT: bu kural hem m.css hem v.css'te bilerek AYRI AYRI tanimli --
   proje kurali, iki dosya birbirinden BAGIMSIZ (bkz. dosya basi notu). */
.article-breadcrumb {
  /* Detay gorseliyle AYNI edge-to-edge desen -- disaridaki
     .article-content-block'un 16px padding'ini asip tam ekran
     kenarina yayiliyor (2026-07-15, kullanici: "bread nav %100
     olsun" -- ilk denemede sadece "width:100%" ile SADECE padding
     ICI genislikte kaliyordu, yetmedi). margin-top: reklamla arasinda
     zaten gap var (ad'in kendi margin-bottom'u, komsu marginler
     CSS'te CAKISIR/collapse olur, ikiye katlanmaz) ama reklamin hic
     render EDILMEDIGI durumlar icin de (v.css'teki AYNI duzeltme,
     2026-07-15, kullanici: "her yer siyah olmuş") guvenlik agi. */
  margin-top: var(--bh-gap);
  width: calc(100% + var(--bh-gap) * 2);
  margin-left: calc(-1 * var(--bh-gap));
  margin-right: calc(-1 * var(--bh-gap));
  padding: 6px var(--bh-gap);
  box-sizing: border-box;
  height: auto;
  min-height: 36px;
  font-size: 10px;
}
/* Paylas/kaydet satiri + govde + spot -- www'nin 100px yatay padding'i
   (genis masaustu sutunu icin) mobilde neredeyse tum genisligi
   yutuyordu (2026-07-15, kullanici: "haber metni www deki girinti ile
   buraya gelmiş. çok az a bir girinti ver"). Paylas satiri da
   ortalandi ("paylaş kaydet vs ortalı olarak oraya sığsın"). */
.article-spot,
.article-share,
.article-body {
  padding: 0 4px !important;
}
.poll-detail-body {
  padding: 0 4px !important;
}
.article-share {
  justify-content: center;
  flex-wrap: wrap;
}
/* Emoji tepki + etiket + yorum bolumleri -- AYNI 100px padding sorunu,
   bunlarda TAMAMEN kaldirildi (disaridaki .article-content-block'un
   16px'i yeterli) -- "genislik %100 gibi olsun" (2026-07-15, kullanici). */
.article-emoji-table,
.article-tag-table {
  padding: 0 !important;
}
.comment-box {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#comment-list-wrap {
  padding: 0 !important;
}

/* ---- 2. asama: logo bar alti reklam, kaynak/yorum tasima, paylas
   satiri yeniden duzeni (2026-07-15, kullanici, tek uzun mesaj). ---- */

/* Logo bar altindaki zone2 (kare) reklam. Gercek gorseli Revive'da
   SABIT 360x360px (HTML'de width/height olarak gomulu) -- konteyneri
   %100'e gerince gorsel yine 360x360 kalip geri kalan alan bos/seffaf
   gorunuyordu ("reklamın altında çok boşluk var", 2026-07-15).
   Konteyner KENDI dogal 360x360 boyutuna donup ORTALANDI -- boylece
   konteyner=gorsel, bosluk sorunu tamamen bitiyor (kenarlarda simetrik
   bosluk KASITLI). Kullanici zone'u/gorseli ileride 390x390 yaparsa
   (kendi ifadesiyle: "ben hızlıca reklam zone değerini ve yüklenen
   reklamı 390 yapabilirim"), bu kural da o olcuye guncellenecek --
   sadece ustteki bar'dan ayiran GAP (margin-top) korunuyor. */
.article-top-ad {
  display: flex;
  justify-content: center;
  margin-top: var(--bh-gap);
}

/* Detay gorseli -- disaridaki .article-content-block'un 16px padding'ini
   asip TAM EKRAN KENARINA kadar yayiliyor (2026-07-15, kullanici: "detay
   resmi width %100 olsun"). Kaynak etiketi resmin sag-alt kosesine
   bindirilmis kucuk bir rozet (2026-07-15, kullanici: "kaynak detay
   resminin sağ alt üzerrinde olsun"). */
.article-hero {
  margin-left: calc(-1 * var(--bh-gap));
  margin-right: calc(-1 * var(--bh-gap));
  width: calc(100% + var(--bh-gap) * 2);
}
.article-hero-source {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  letter-spacing: .3px;
}

/* Paylas satiri -- "Paylaş:" etiketi kaldirildi, satir sardirilabilir +
   ortalandi (2026-07-15, kullanici: "paylaş yazısını kaldır", "paylaş
   kaydet vs ortalı olarak oraya sığsın"). */
.article-share-label {
  display: none;
}
.article-share {
  justify-content: center;
  flex-wrap: wrap;
}
/* Yorumlar dairesel butonu -- diger paylas butonlariyla (34px daire)
   AYNI olcude, notlu (sayi) rozeti .article-emoji-count ile AYNI kucuk-
   pill desenini kullaniyor (2026-07-15, kullanici: "paylaş butonlarının
   sağına yorumlar ikonu koy. onlarla aynı güzellikte olsun. yorum varsa
   sayısı yazsın"). */
.article-share-btn--comment {
  position: relative;
  background: #4b5563;
  border: none;
}
.article-share-btn-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;
}
/* Kaydet butonu -- paylas butonlariyla AYNI tarz (34px daire, sadece
   ikon, metin etiketi gizli) (2026-07-15, kullanici: "kaydet butonu da
   paylaş butonları gibi aynı tarza olsun"). */
.article-save-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  margin-left: 0;
  border: none;
  background: #4b5563;
  color: #fff;
  justify-content: center;
}
.article-save-label {
  display: none;
}
/* Google Haberler -- paylas satirinin ALTINA, TAM GENISLIK
   (2026-07-15, kullanici: "google haberler ikonu paylaşın altında ve
   tam geniş olsun"). Slim'de TASINMADI -- ".article-share"in
   flex-wrap:wrap + bu butonun flex-basis:100% kombinasyonu, DOM
   sirasi/www gorunumu degismeden kendi satirina "tasiyor". Metni de
   mobilde degisti (2026-07-15, kullanici: "üzerinde, google'da tercih
   edilen kaynak olarak ekleyin yaz" -- bu metin _article_content.
   html.slim'de Ruby seviyesinde "mobilish" ile zaten degisiyor). */
.article-gnews-btn {
  flex-basis: 100%;
  order: 99;
  margin-left: 0;
  margin-top: 8px;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
  /* Uzun mobil metni ("Google'da Tercih Edilen Kaynak Olarak Ekleyin")
     www'nin 14px fontuyla 2 satira bolunuyordu -- kucultulup satir
     kirilmasi engellendi, TEK satira sigdirildi (2026-07-15, kullanici:
     "google tercih edilen yazıları küçük de olsa tek satıra sığdır"). */
  padding: 8px 10px;
  gap: 5px;
  font-size: 10px;
  white-space: nowrap;
}
.article-gnews-btn .article-gnews-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==== Kategori Sayfasi (categories/show) ====
   Haber detay sayfasindaki AYNI ilk-asama mantigi: sidebar (reklam +
   slider) gizli, tek sutun, baslik kucultuldu (2026-07-15, kullanici:
   "aynı mantıkla kategori sayfalarını yap"). Reklamlar zaten Ruby
   seviyesinde "ads_ok" ile mobilde render edilmiyor. */
.category-layout {
  display: block;
  padding: 0 var(--bh-gap);
}
.category-sidebar {
  display: none;
}
.category-title {
  font-size: 20px;
}
.category-header {
  /* Sabit logo bar'a bitisip tek buyuk siyah blok gibi gorunuyordu --
     breadcrumb'taki AYNI duzeltme (2026-07-15, kullanici: "logobar ile
     kategori arasına gap koy. siyah olmuş"). */
  margin-top: var(--bh-gap);
  padding: 10px var(--bh-gap);
}
.category-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ==== Galeri / Video Detay Sayfalari (galleries/show, videos/show) ====
   Bu sayfalar zaten kategori sayfasiyla (.category-layout/.category-
   sidebar) VE haber detayiyla (.article-breadcrumb) AYNI class'lari
   kullaniyor -- sidebar/kenar-bosluk/breadcrumb-gap duzeltmeleri BURAYA
   KADAR ZATEN otomatik uygulaniyordu. Sadece .post-title (32px, yazar
   yazisi/galeri/video ortak basligi) ve .post-body'nin (150px girinti,
   .article-body'deki AYNI sorun) mobile-ozel duzeltmesi kaldi
   (2026-07-15, kullanici: "galeri ve videoyu yap"). */
.post-title {
  font-size: 20px;
  line-height: 1.3;
}
.post-body {
  padding: 0 4px !important;
}
/* Breadcrumb/baslik/meta-row bu iki sayfada (haber detayin aksine) hicbir
   kenar-bosluklu sarmalayici icinde degildi -- metin ekran kenarina
   yapisik cikiyordu (2026-07-15, kullanici: "bread nav üzerindeki
   yazılar ile başlık sola bitişik çıkmış. haberlerdeki kadar soldan
   boşluk ver"). */
.post-header-block {
  padding: 0 var(--bh-gap);
}

/* ==== Yazarlar Sayfasi (writers/index) ====
   Zaten .category-header/.category-layout/.category-sidebar KULLANIYOR --
   sidebar/kenar-bosluk/baslik duzeltmeleri buraya kadar otomatik
   uygulaniyordu. Sadece kendine ozgu .writers-grid'in 4 sutunu 2'ye
   indirildi (2026-07-15, kullanici: "yazarlar sayfasını uyumla"). */
.writers-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* ==== Yazar Profil Sayfasi (writers/show) ====
   Breadcrumb + profil basligi artik .post-header-block sarmalayicisi
   icinde (yukaridaki kural zaten 0 var(--bh-gap) kenar boslugu
   veriyor -- .writer-profile-header'in KENDI horizontal padding'ini
   AYRICA eklemek cift bosluk yaratirdi, sadece vertical padding'i
   korundu). Arama/siralama filtresi sabit min-width (220px) + yan yana
   select+buton yuzunden dar ekranda tasiyordu -- alt alta sardirildi
   (2026-07-15, kullanici: "profil resmi ve bread'deki yazı çok solda...
   filtre taşmış. onu sığdır"). */
.writer-search-form {
  flex-wrap: wrap;
}
.writer-search-input {
  min-width: 0;
  flex: 1 1 100%;
}
.writer-sort-select {
  flex: 1;
  min-width: 0;
}

/* ==== Yazar Yazısı Okuma Sayfasi (posts/show) ====
   Kapak resmi altindaki paylas/kaydet/begen satirinda "Paylaş:" etiketi
   zaten gizli, .article-share zaten ortalanmis+sardirilabilir (ust
   kurallar, bare selector -- otomatik miras aliniyor). Kaydet (.article-
   save-btn) zaten dairesel/metinsiz oluyordu -- Beğen (.post-like-btn)
   AYNI aile degil, kendi metin+sayi etiketiyle satiri tasiyordu
   ("iç içe girmiş", 2026-07-15, kullanici) -- paylas butonlariyla AYNI
   dairesel tarza getirildi. */
.post-like-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
  background: #4b5563;
  color: #fff;
  border: none;
}
.post-like-btn.is-active {
  background: #e74c3c;
  border: none;
}
.post-like-label {
  display: none;
}
.post-like-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;
}
.post-like-btn {
  position: relative;
}
/* "Yazarın Diğer Yazıları" -- www'nin 150px yatay girintisi kaldirildi
   (2026-07-15, kullanici: "sayfanın en altındaki yazarın diğer yazıları
   bölümünü mobil uyumlu yap"). */
.post-other-posts {
  padding: 20px var(--bh-gap) !important;
}
.post-other-posts-list li {
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* ==== Footer sayfalari (pages/show -- Kurumsal/Politikalar/Kadro/
   Sozlesmeler altindaki sayfalar, TEK ortak template) ====
   .category-header zaten kategori sayfalariyla AYNI kurali kullaniyor
   (yukarida, gap+padding otomatik geldi). .page-body ise (.post-body'deki
   AYNI 150px masaustu yatay girinti sorunu) hicbir padding'li
   sarmalayici icinde DEGIL (page/show.html.slim'de dogrudan ust
   seviyede), bu yuzden .post-body'nin aksine (o .post-header-block
   icinde, sadece 4px residual yeterliydi) burada TAM var(--bh-gap)
   gerekiyor (2026-07-15, kullanici: "footerdaki kurumsal ve
   politikalar alttlarındaki sayfaları mobil uyumlu yap"). */
.page-body {
  padding: 20px var(--bh-gap) 40px !important;
}
.page-content img {
  max-width: 100%;
  height: auto;
}

/* Ilgili Haberler -- mobilde kolon sayisi mobile_cols'a gore (2026-07-23) */
.related-news-block .rn-grid { grid-template-columns: 1fr !important; }
.related-news-block .rn-grid[data-mobile-cols="2"] { grid-template-columns: repeat(2, 1fr) !important; }
.related-writers-block .rw-grid { grid-template-columns: 1fr !important; }
.related-writers-block .rw-grid[data-mobile-cols="2"] { grid-template-columns: repeat(2, 1fr) !important; }
.related-files-block .rf-grid { grid-template-columns: 1fr !important; }
.related-files-block .rf-grid[data-mobile-cols="2"] { grid-template-columns: repeat(2, 1fr) !important; }