/* ═══════════════════════════════════════════════════════════════════════
   MANŞET — EraNews demosundan ÖLÇÜLEREK alındı      yeni3/manset.css
   -----------------------------------------------------------------------
   Demodan (eranews.joomlatema.net) alınan gerçek değerler:
     .jt3-title h4      Oswald 20px/1 · ağırlık 400 · BÜYÜK HARF · beyaz
     .jt3-introtext     15px/1.43 beyaz
     .jt3-black-overlay rgba(0,0,0,.6) DÜZ zemin + 15px dolgu  (gradyan DEĞİL)
     .dotted-overlay    görselin üstünde nokta deseni
     a.toc              56×45 küçük resim, şerit zemini siyah
     a.toc::after       bottom:100% (küçük resmin ÜSTÜNDE) · scale(0)→scale(1)
                        geçiş: transform .3s, opacity .4s
     Davranış           küçük resmin ÜZERİNE GELİNCE slayt değişir
   Tek fark: çizgi rengi. Demoda #f80000 kırmızı; bu sitenin vurgusu kahve
   olduğu için --z kullanıldı. Kırmızı istenirse --ymn-cizgi değiştirilir.
   ═══════════════════════════════════════════════════════════════════════ */

.ymn{ --ymn-cizgi: var(--z); position:relative; background:#000 }

/* ── Sahne: slaytlar üst üste, görünen "on" ── */
.ymn-sahne{position:relative;overflow:hidden;background:#0c0a09}
.ymn-slayt{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .45s ease}
.ymn-slayt.on{position:relative;opacity:1;visibility:visible}
/* Yığın yüksekliğini ilk slayt belirler; diğerleri üstüne biner */
.ymn-im{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#0c0a09}
.ymn-im img{width:100%;height:100%;object-fit:cover;display:block}

/* Nokta deseni — demodaki dots-overlay.png yerine CSS ile üretildi
   (başkasının varlığına bağlanmıyoruz) */
.ymn-nokta-desen{position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.42) 1px,transparent 1px);
  background-size:3px 3px}

/* ── Yazı perdesi: DÜZ siyah, gradyan yok (demodaki gibi) ── */
/* Perde TAM GENİŞLİK — kısa başlıkta küçülüp "gölge gibi" kalmasın
   (müşteri şikâyeti). Demoda içerik kadardı; burada sağa da yaslı. */
.ymn-yazi{position:absolute;left:0;right:0;bottom:0;z-index:40;
  background:rgba(0,0,0,.6);padding:15px}
.ymn-kick{display:inline-block;margin-bottom:9px;background:var(--z);color:#fff;
  padding:4px 9px;font:700 .62rem/1 var(--m);letter-spacing:.13em;text-transform:uppercase}
.ymn-bas{display:block;color:#fff;text-decoration:none;
  font:400 20px/1 "Oswald","Roboto Condensed",var(--d);
  text-transform:uppercase;letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ymn-bas:hover{color:var(--zk)}
/* Özet başlığın ALTINDA — demodaki introtext ölçüsü 15px/1.43 */
.ymn-ozet{margin:9px 0 0;color:#fff;font:400 15px/1.43 var(--m);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── Küçük resim şeridi ── */
.ymn-serit{display:flex;align-items:stretch;background:#000;overflow:hidden}
.ymn-kucuk{position:relative;flex:1 1 0;min-width:0;border:none;padding:0;cursor:pointer;
  background:none;overflow:hidden;line-height:0}
.ymn-kucuk img{width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:56/37;opacity:.72;transition:opacity .25s ease}
.ymn-kucuk:hover img,.ymn-kucuk.secili img{opacity:1}

/* Kırmızı/kahve çizgi — küçük resmin ÜSTÜNDE, ölçekle açılır.
   Demodaki kural: bottom:100%, scale(0)→scale(1), .3s/.4s */
.ymn-kucuk::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:var(--ymn-cizgi);z-index:3;
  opacity:0;transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .3s ease,opacity .4s ease}
.ymn-kucuk.secili::after,.ymn-kucuk:hover::after{opacity:1;transform:scaleX(1)}

.ymn-daha{flex:0 0 auto;display:flex;align-items:center;padding:0 14px;
  color:var(--z);text-decoration:none;background:#000;
  font:700 .7rem/1 var(--m);letter-spacing:.08em;text-transform:uppercase}
.ymn-daha:hover{color:#fff;background:var(--z)}

@media (max-width:760px){
  .ymn-yazi{padding:12px}
  .ymn-bas{font-size:17px}
  .ymn-ozet{font-size:13.5px;-webkit-line-clamp:2}
  .ymn-kucuk img{opacity:.85}
  .ymn-daha{padding:0 10px;font-size:.62rem}
}

/* Koyu temada şerit zaten siyah; perde biraz daha koyu olsun */
:root[data-tema="koyu"] .ymn-yazi{background:rgba(0,0,0,.72)}