/* ─────────────────────────────────────────────
 * ui-polish.css — Rakip demo tarzı ince rötuşlar
 * NOT: Kart hover transformları kullanıcı tercihi doğrultusunda YOK.
 * Sadece kalıcı görsel iyileştirmeler: bar, badge, spacing, TÜMÜ linki, a11y.
 * ───────────────────────────────────────────── */

/* ─── Kategori badge — kartın sol üstünde ─── */
.news-card .card-cat-badge {
    position: absolute; top: 10px; left: 10px; z-index: 3;
    background: rgba(220,38,38,.95); color: #fff;
    padding: 4px 9px; border-radius: 3px;
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ─── Başlık linki hover — kırmızı yumuşak (renk değişimi, motion yok) ─── */
.news-card:hover h3,
.news-card:hover h3 a,
.news-card:hover .news-title a { color: #dc2626; }

/* ─── Bölüm başlıkları — DETAY SAYFA (mh-related-news__head) stili ─── */
/* Kullanıcı isteği: haber detay sayfasındaki başlık + yatay çizgi tasarımı. */

.cat-trend-mast,
.section-header,
.mh-picks-head,
.mh-authors-head,
.block-section > header,
.section-block > header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 0 !important;
}

/* Renkli sol dikey çubuğu KALDIR — detay sayfada da yok */
.cat-trend-mast-bar,
.section-header::before,
.mh-picks-head::before {
    display: none !important;
}

/* İkon: sadece görsel süsleme — çok belirginse zayıflat */
.cat-trend-mast-icon-wrap {
    background: transparent !important;
    padding: 0 !important;
    color: var(--cat-accent, #dc2626);
    font-size: 14px;
}

/* Başlık: 18px, 800, letter-spacing 1px */
.cat-trend-mast-heading,
.section-header h2,
.section-header h3,
.mh-picks-head h2,
.mh-picks-head h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 1.08px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    line-height: 1.2;
    white-space: nowrap;
}

/* Sağa doğru uzayan yatay pembe çizgi — detay sayfadaki gibi */
.cat-trend-mast::after,
.section-header::after,
.mh-picks-head::after {
    content: '';
    flex: 1 1 0%;
    height: 1px;
    background: #fecaca;
    display: block;
}

/* "Tümü →" linki — çizgiden ÖNCE görünmesi için, kendi yatay pozisyonu ile */
.cat-trend-mast-more,
.section-header .section-more,
.section-header a.section-all,
.mh-picks-head .picks-more {
    order: 3;
    font-size: 12px; font-weight: 700;
    color: #dc2626;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid #fecaca;
    border-radius: 4px;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.cat-trend-mast-more:hover,
.section-header .section-more:hover,
.section-header a.section-all:hover {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
}

/* Yatay çizgi TÜMÜ linkinin ardında olsun */
.cat-trend-mast::after,
.section-header::after,
.mh-picks-head::after { order: 2; }
.cat-trend-mast-more,
.section-header .section-more,
.mh-picks-head .picks-more { order: 3; }

/* Başlığın soluyla çizgi arasında az boşluk (mh_left / mh_left konteynerini) */
.cat-trend-mast-left,
.mh-picks-head-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0;
}

/* ─── Kart tasarımı — detay sayfa mh-related-news__card ile aynı ─── */
.news-card,
.mh-picks-card,
.mg-card,
.strip-card,
.cat-card-zoom {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

/* ─── Manşet başlığı düşük gölge/legibility ─── */
.manset-title {
    text-shadow: 0 2px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.6);
    letter-spacing: -0.4px;
}

/* ─── Piyasa şeridi item hover (arkaplan renk, motion yok) ─── */
.market-strip .m-item {
    padding: 4px 8px;
    border-radius: 4px;
}
.market-strip .m-item:hover {
    background: rgba(251,191,36,.10);
}

/* ─── Category chip / tag hover (renk değişimi, motion yok) ─── */
.tag:hover, .cat-tag:hover, a.tag-link:hover {
    background: #dc2626 !important;
    color: #fff !important;
}

/* ─── Odaklanma (a11y) — kırmızı halka ─── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── Section spacing (rakip demoya benzet) ─── */
.section-block, .block-section, .home-section {
    margin-bottom: 32px;
}

/* ─── Sidebar widget başlık tutarlılığı ─── */
.sidebar-widget .widget-header h3,
.widget .widget-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-widget .widget-header h3 i,
.widget .widget-title i { color: #dc2626; font-size: 13px; }

/* ─── Mobile fine tune ─── */
@media (max-width: 640px) {
    .cat-trend-mast-heading, .section-header h2, .section-header h3 { font-size: 14.5px; }
    .cat-trend-mast, .section-header { margin-bottom: 12px; }
}

/* ─── HABER DETAY — Mobil Düzeltme ─────────────────────────
 * .detail-image negatif -20px margin ile mobilde viewport'u taşıyordu.
 * Ayrıca içerik görüntülerinin de max-width'ini kısıtla.
 * ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .detail-image,
    .article-image,
    figure.detail-image {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 6px;
        overflow: hidden;
    }
    .detail-image img,
    .article-image img,
    .article-body img,
    .article-content img,
    .infinite-article img,
    .detail-wrapper img.img-fluid {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    /* Başlık ve spot mobil daha okunur */
    .detail-title { font-size: 20px !important; line-height: 1.3 !important; margin-bottom: 12px !important; }
    .detail-spot { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 16px !important; }
    .detail-meta-bar {
        flex-wrap: wrap !important;
        gap: 8px 12px !important;
        padding: 12px 0 !important;
        margin: 16px 0 20px !important;
        font-size: 12.5px !important;
    }
    .detail-meta-bar > * { font-size: 12.5px !important; }
    /* Etiketler yatay taşmasın */
    .detail-tags-top {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .detail-tags-top a, .detail-tags-top .tag {
        font-size: 11.5px !important; padding: 4px 8px !important;
    }
    /* Sidebar üstte boşluk */
    .detail-sidebar { margin-top: 24px !important; }
    /* Related news 1 kolon */
    .mh-related-news__grid { grid-template-columns: 1fr !important; }
    .mh-related-news { margin: 28px 0 !important; padding-top: 16px !important; }
    /* Yorumlar iç padding küçült */
    .comments-section, .comments {
        padding: 16px !important;
        margin: 24px 0 !important;
    }
    /* Paylaşım butonları wrap */
    .detail-share, .share-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    /* Video/iframe responsive */
    .detail-wrapper iframe,
    .article-body iframe,
    .article-content iframe {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Tablolar yatay scroll */
    .detail-wrapper table,
    .article-body table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* ─── Mobilde sidebar: sadece REKLAM alanları görünsün ─── */
    /* Detay sayfa + anasayfa sidebar'ları için */
    .detail-sidebar aside.sidebar > *,
    .home-sidebar > *,
    aside.sidebar > *,
    .sidebar > .widget,
    .sidebar > .sidebar-widget {
        display: none !important;
    }
    /* Görünür kalanlar: Reklam + Yazarlar + Anket + Namaz + Hava Durumu */
    .detail-sidebar aside.sidebar > .sidebar-ad-slot,
    .detail-sidebar aside.sidebar > .widget-ad,
    .detail-sidebar aside.sidebar > [class*="ad-block"],
    .detail-sidebar aside.sidebar > .widget-columnists,
    .detail-sidebar aside.sidebar > .widget-poll-dynamic,
    .detail-sidebar aside.sidebar > .widget-poll,
    .detail-sidebar aside.sidebar > .widget-prayer,
    .detail-sidebar aside.sidebar > .widget-namaz,
    .detail-sidebar aside.sidebar > .widget-mini-weather,
    .detail-sidebar aside.sidebar > .widget-weather,
    .home-sidebar > .sidebar-ad-slot,
    .home-sidebar > .widget-ad,
    .home-sidebar > [class*="ad-block"],
    .home-sidebar > .widget-columnists,
    .home-sidebar > .widget-poll-dynamic,
    .home-sidebar > .widget-poll,
    .home-sidebar > .widget-prayer,
    .home-sidebar > .widget-namaz,
    .home-sidebar > .widget-mini-weather,
    .home-sidebar > .widget-weather,
    aside.sidebar > .sidebar-ad-slot,
    aside.sidebar > .widget-ad,
    aside.sidebar > [class*="ad-block"],
    aside.sidebar > .widget-columnists,
    aside.sidebar > .widget-poll-dynamic,
    aside.sidebar > .widget-poll,
    aside.sidebar > .widget-prayer,
    aside.sidebar > .widget-namaz,
    aside.sidebar > .widget-mini-weather,
    aside.sidebar > .widget-weather,
    .sidebar > .widget-ad,
    .sidebar > .sidebar-ad-slot,
    .sidebar > .widget.widget-ad,
    .sidebar > .widget-columnists,
    .sidebar > .widget-poll-dynamic,
    .sidebar > .widget-poll,
    .sidebar > .widget-prayer,
    .sidebar > .widget-namaz,
    .sidebar > .widget-mini-weather,
    .sidebar > .widget-weather {
        display: block !important;
    }
    /* Sidebar kapsayıcısı da boşluğu koru */
    .detail-sidebar, .home-sidebar {
        margin-top: 24px;
    }

    /* ─── DEMO HABER PAKETLERİ TARZI KART TABANLI DETAY ─────────
     * Referans: demo.haberpaketleri.com detay sayfası mobil görünümü
     * Beyaz kartlar, subtle shadow, kompakt padding, keskin köşeler
     * ─────────────────────────────────────────────────────────── */

    /* Body arka plan hafif gri — kartlar öne çıksın */
    body {
        background: #f3f4f6 !important;
    }

    /* Root container padding'ini sıfırla — kartlar tam kenar */
    .news-detail-root,
    .container.news-detail-root {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
    }

    /* Kart 1: Breadcrumb */
    .detail-breadcrumb-nav {
        background: #fff;
        padding: 8px 12px !important;
        margin: 0 0 8px !important;
        border-radius: 0 !important;
        border: 0 !important;
        font-size: 12px;
    }
    .detail-breadcrumb-nav a { color: #4b5563; }
    .detail-breadcrumb-nav > *:last-child { color: #dc2626; }

    /* Kart 2: Ana içerik (h1'den body'e kadar hepsi tek kart) */
    .detail-wrapper {
        background: #fff !important;
        padding: 14px 14px 16px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.05);
    }

    /* Başlık kompakt */
    .detail-title {
        font-size: 19px !important;
        font-weight: 800 !important;
        line-height: 1.32 !important;
        color: #111827 !important;
        margin: 0 0 8px !important;
    }

    /* Spot (özet) — arka plan yok, kompakt */
    .detail-spot {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        color: #374151 !important;
        margin: 0 0 12px !important;
        font-weight: 500;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* Meta bar — flex, ikonlu, gri renk */
    .detail-meta-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px 14px !important;
        padding: 10px 0 !important;
        margin: 0 0 12px !important;
        font-size: 12px !important;
        color: #6b7280 !important;
        border-top: 1px solid #f3f4f6 !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    .detail-meta-bar > * { font-size: 12px !important; color: #6b7280 !important; }
    .detail-meta-bar a { color: #dc2626 !important; font-weight: 700; }
    .detail-meta-bar i { color: #9ca3af; }

    /* Etiketler (üst) — hafif */
    .detail-tags-top {
        display: flex !important; flex-wrap: wrap !important;
        gap: 5px !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
    }
    .detail-tags-top a, .detail-tags-top .tag {
        font-size: 11px !important;
        padding: 3px 8px !important;
        background: #f3f4f6 !important;
        color: #4b5563 !important;
        border-radius: 3px !important;
        border: 0 !important;
    }

    /* Görsel: tam kenar (kart içinde padding'i geçmesin) */
    .detail-image, .article-image, figure.detail-image {
        margin: 0 0 12px !important;
        border-radius: 0 !important;
    }
    .detail-image img { border-radius: 0 !important; }

    /* İçerik gövdesi — okunabilir */
    .article-body, .article-content, .news-content, .detail-content,
    .infinite-article .article-body {
        font-size: 15px !important;
        line-height: 1.75 !important;
        color: #374151 !important;
    }
    .article-body p, .article-content p {
        margin-bottom: 14px !important;
    }

    /* Paylaşım çubuğu — kompakt, ikonlar dizisi */
    .detail-share, .share-bar, .news-share-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 12px 0 !important;
        margin: 14px 0 0 !important;
        border-top: 1px solid #f3f4f6 !important;
        align-items: center !important;
    }
    .detail-share a, .share-bar a, .news-share-toolbar a {
        width: 34px; height: 34px;
        border-radius: 4px !important;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 14px;
    }

    /* Detay içindeki sidebar/reklamlar kart içinde alt boşluğu */
    .detail-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .detail-sidebar {
        margin-top: 16px !important;
        padding: 0 !important;
    }
    /* Sidebar öğeleri de kart içinde ayrı ayrı beyaz olsun */
    .detail-sidebar > *,
    .detail-sidebar aside.sidebar > * {
        margin-bottom: 10px !important;
    }

    /* Kart 3: Benzer haberler (mh-related-news) */
    .mh-related-news {
        background: #fff !important;
        padding: 14px !important;
        margin: 15px 0 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.05);
    }
    .mh-related-news__head { margin-bottom: 12px !important; }
    .mh-related-news__title { font-size: 16px !important; letter-spacing: .8px !important; }

    /* Yorumlar kartı */
    .comments-section, .comments {
        background: #fff !important;
        padding: 14px !important;
        margin: 8px 0 0 !important;
        border-radius: 0 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.05);
        border: 0 !important;
    }
}