/* icerik-html.css — blog / haber / duyuru detay govdesi (panelden yapistirilan HTML) icin tasma korumasi
   ve yazar bilesenleri. Sinif: .rich-content (Blog .article-content, Haber .news-text, Duyuru .notice-text).
   Renkler icerik-sayfa.css ile ayni: #064A97 #1bb5cc #021c3a #f5f9ff. Kural belgesi: ICERIK-HTML-KURALI.md */

.rich-content {
    --rc-primary: #064A97;
    --rc-accent: #1bb5cc;
    --rc-dark: #021c3a;
    --rc-light: #f5f9ff;
    --rc-border: #e6eef7;
    --rc-text: #1a2a3f;
    --rc-muted: #5a6a82;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Yapistirilan icerik sabit genisliklerle gelse de kolondan tasmaz */
.rich-content *,
.rich-content *::before,
.rich-content *::after { box-sizing: border-box; }
.rich-content > *,
.rich-content div,
.rich-content section,
.rich-content article { max-width: 100%; min-width: 0; }
.rich-content [style*="width"] { max-width: 100% !important; }
.rich-content img,
.rich-content video,
.rich-content canvas,
.rich-content svg { max-width: 100%; height: auto; }
.rich-content iframe,
.rich-content embed,
.rich-content object { max-width: 100%; }
.rich-content figure { margin: 24px 0; max-width: 100%; }
.rich-content figcaption { font-size: 14px; color: var(--rc-muted); margin-top: 8px; }
.rich-content pre { max-width: 100%; overflow-x: auto; padding: 16px; background: var(--rc-light); border: 1px solid var(--rc-border); border-radius: 10px; font-size: 14px; }
.rich-content code { overflow-wrap: anywhere; }
.rich-content pre code { overflow-wrap: normal; }

/* Tablolar: sarmalayici yoksa bile yatay kaydir */
.rich-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; margin: 24px 0; }
.rich-content th,
.rich-content td { padding: 10px 14px; border: 1px solid var(--rc-border); text-align: left; vertical-align: top; min-width: 96px; overflow-wrap: normal; word-break: normal; }
.rich-content th { background: var(--rc-light); color: var(--rc-dark); font-weight: 600; }

.rich-content h2, .rich-content h3, .rich-content h4 { color: var(--rc-dark); line-height: 1.3; text-wrap: balance; margin: 36px 0 14px; }
.rich-content ul, .rich-content ol { padding-left: 1.4em; margin: 0 0 20px; }
.rich-content li { margin-bottom: 8px; }
.rich-content a { color: var(--rc-primary); text-decoration: underline; text-underline-offset: 3px; }
.rich-content a:hover { color: var(--rc-accent); }
.rich-content blockquote { margin: 28px 0; padding: 20px 24px; background: var(--rc-light); border-radius: 12px; color: var(--rc-dark); font-size: 1.05em; }
.rich-content blockquote p:last-child { margin-bottom: 0; }
.rich-content blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--rc-muted); }

/* Yazar bilesenleri (yalniz sinif; ic CSS / sabit genislik yok) */
.rich-content .rc-callout { margin: 28px 0; padding: 18px 20px; background: var(--rc-light); border: 1px solid var(--rc-border); border-radius: 12px; color: var(--rc-text); }
.rich-content .rc-callout > :first-child { margin-top: 0; }
.rich-content .rc-callout > :last-child { margin-bottom: 0; }
.rich-content .rc-callout-title { display: block; font-weight: 700; color: var(--rc-primary); margin-bottom: 6px; }

.rich-content .rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 28px 0; }
.rich-content .rc-card { padding: 18px 20px; background: #fff; border: 1px solid var(--rc-border); border-radius: 12px; box-shadow: 0 2px 10px rgba(2, 28, 58, .06); }
.rich-content .rc-card h3, .rich-content .rc-card h4 { margin: 0 0 8px; font-size: 1.05em; }
.rich-content .rc-card > :last-child { margin-bottom: 0; }

.rich-content .rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; margin: 28px 0; padding: 0; list-style: none; }
.rich-content .rc-stats li { margin: 0; padding: 14px 16px; background: var(--rc-light); border-radius: 12px; color: var(--rc-muted); font-size: 14px; }
.rich-content .rc-stats strong { display: block; font-size: 1.6em; line-height: 1.2; color: var(--rc-primary); }

.rich-content .rc-steps { counter-reset: rc-step; list-style: none; margin: 28px 0; padding: 0; }
.rich-content .rc-steps > li { counter-increment: rc-step; position: relative; margin: 0 0 14px; padding: 4px 0 4px 52px; min-height: 40px; }
.rich-content .rc-steps > li::before { content: counter(rc-step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--rc-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.rich-content .rc-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.rich-content .rc-table-wrap > table { display: table; min-width: 480px; margin: 0; width: 100%; }

.rich-content .rc-faq { margin: 24px 0; }
.rich-content .rc-faq details { border: 1px solid var(--rc-border); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; background: #fff; }
.rich-content .rc-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--rc-dark); }
.rich-content .rc-faq summary:focus-visible { outline: 3px solid var(--rc-accent); outline-offset: 3px; border-radius: 6px; }
.rich-content .rc-faq details[open] summary { color: var(--rc-primary); }
.rich-content .rc-faq details > :last-child { margin-bottom: 16px; }

.rich-content .rc-cta { margin: 36px 0; padding: 28px 24px; text-align: center; background: var(--rc-dark); color: #fff; border-radius: 16px; }
.rich-content .rc-cta h2, .rich-content .rc-cta h3 { margin: 0 0 8px; color: #fff; }
.rich-content .rc-cta p { margin: 0 0 16px; color: #d6e6f7; }
.rich-content .rc-cta a { display: inline-block; padding: 12px 24px; background: var(--rc-accent); color: var(--rc-dark); font-weight: 700; border-radius: 10px; text-decoration: none; }
.rich-content .rc-cta a:hover { background: #fff; color: var(--rc-dark); }
.rich-content .rc-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 575px) {
    .rich-content th, .rich-content td { padding: 8px 10px; min-width: 88px; }
    .rc-cta { padding: 22px 16px; }
}