/* ─── TEMEL SAYFA YERLEŞİMİ ─── */
        .article-page-wrapper {
            width: 100%;
            padding-top: 130px;
            padding-bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* ─── BREADCRUMB (GEZİNME YOLU) ─── */
        /* Yeniden kullanım: Tüm iç sayfalarda geçerlidir. */
        .cn-breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.82rem;
            color: var(--text-muted);
            margin-bottom: 28px;
            flex-wrap: wrap;
        }
        .cn-breadcrumb a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s;
        }
        .cn-breadcrumb a:hover { color: var(--primary); }
        .cn-breadcrumb .sep {
            color: rgba(255,255,255,0.15);
            font-size: 0.7rem;
        }
        .cn-breadcrumb .current { color: rgba(255,255,255,0.5); }

        /* ─── KATEGORİ ROZETİ (BADGE) ─── */
        /* Yeniden kullanım: --badge-bg ve --badge-color CSS değişkenleriyle özelleştirilebilir.
           Kullanım örneği:
           <span class="cn-badge cn-badge--yeni-surum">Yeni Sürüm</span>
        */
        .cn-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: var(--badge-bg, rgba(255,255,255,0.06));
            color: var(--badge-color, #fff);
            border: 1px solid var(--badge-border, rgba(255,255,255,0.1));
        }
        .cn-badge--yeni-surum {
            --badge-bg: rgba(255, 42, 42, 0.12);
            --badge-color: #ff6464;
            --badge-border: rgba(255, 42, 42, 0.35);
        }
        .cn-badge--duyuru {
            --badge-bg: rgba(245, 158, 11, 0.1);
            --badge-color: #f59e0b;
            --badge-border: rgba(245, 158, 11, 0.3);
        }
        .cn-badge--topluluk {
            --badge-bg: rgba(99, 102, 241, 0.1);
            --badge-color: #818cf8;
            --badge-border: rgba(99, 102, 241, 0.3);
        }

        /* ─── MAKALE HERO BÖLÜMÜ ─── */
        /* Yeniden kullanım: Her haberin üst başlık alanı için kullanılır. */
        .article-hero {
            width: 100%;
            max-width: 860px;
            padding: 0 20px;
            margin-bottom: 50px;
            animation: fadeInUp 0.8s ease forwards;
        }
        .article-hero-top {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 22px;
            flex-wrap: wrap;
        }
        .article-date-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.82rem;
            color: var(--text-muted);
            font-weight: 500;
        }
        .article-date-badge i { color: rgba(255,255,255,0.2); font-size: 0.75rem; }

        /* Sayfa başlığı h1 (makale) */
        .article-hero h1 {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(1.9rem, 4vw, 3rem);
            font-weight: 900;
            line-height: 1.2;
            letter-spacing: -0.5px;
            margin-bottom: 18px;
            /* Gradient metin – tema ile uyumlu */
            background: linear-gradient(140deg, #ffffff 0%, #9f9f9f 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .article-hero h1 .hl-red {
            background: linear-gradient(135deg, #c50909 0%, #ff5050 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Öne çıkan özet satırı */
        .article-lead {
            font-size: 1.05rem;
            color: #8a8a8f;
            line-height: 1.75;
            border-left: 3px solid rgba(255,42,42,0.4);
            padding-left: 18px;
            margin-bottom: 30px;
        }

        /* ─── MAKALE META BİLGİSİ ─── */
        /* Yeniden kullanım: Yazar, tarih, okuma süresi her haberde kullanılabilir. */
        .article-meta {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 16px 22px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 14px;
            flex-wrap: wrap;
        }
        .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        .meta-item i {
            color: var(--primary);
            font-size: 0.8rem;
            opacity: 0.7;
        }
        .meta-divider {
            width: 1px;
            height: 20px;
            background: rgba(255,255,255,0.06);
        }
        .meta-item strong { color: rgba(255,255,255,0.65); }

        /* ─── MAKALE GÖVDE KAPSAYICISI ─── */
        .article-body {
            width: 100%;
            max-width: 860px;
            padding: 0 20px 100px;
            animation: fadeInUp 1s ease forwards;
        }

        /* Bölüm ayırıcı */
        .section-divider {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,42,42,0.2), transparent);
            margin: 50px 0;
        }

        /* ─── TİPOGRAFİ SİSTEMİ ─── */
        /* h1 yukarıda .article-hero içinde tanımlandı. */

        .article-body h2 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.65rem;
            font-weight: 800;
            color: #fff;
            margin: 52px 0 18px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .article-body h2::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 28px;
            background: var(--primary);
            border-radius: 4px;
            flex-shrink: 0;
        }
        .article-body h2 i {
            font-size: 1.1rem;
            color: var(--primary);
            opacity: 0.8;
        }

        .article-body h3 {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.25rem;
            font-weight: 700;
            color: #e8e8e8;
            margin: 36px 0 14px;
        }

        .article-body h4 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--primary);
            margin: 28px 0 10px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-family: 'Montserrat', sans-serif;
        }

        .article-body h5 {
            font-size: 0.95rem;
            font-weight: 700;
            color: rgba(255,255,255,0.5);
            margin: 22px 0 8px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .article-body h6 {
            font-size: 0.82rem;
            font-weight: 600;
            color: rgba(255,255,255,0.3);
            margin: 16px 0 6px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }

        /* Paragraf */
        .article-body p {
            font-size: 0.98rem;
            color: #8d8d96;
            line-height: 1.8;
            margin-bottom: 18px;
        }

        /* Kalın */
        .article-body strong, .article-body b {
            color: #d4d4d8;
            font-weight: 700;
        }

        /* İtalik */
        .article-body em, .article-body i.text-em {
            color: #a1a1aa;
            font-style: italic;
        }

        /* Altı çizili */
        .article-body u {
            text-decoration-color: rgba(255,42,42,0.5);
            text-underline-offset: 3px;
            color: #c4c4ca;
        }

        /* Üstü çizili */
        .article-body s, .article-body del {
            color: rgba(255,255,255,0.25);
            text-decoration-color: rgba(255,42,42,0.4);
        }

        /* Inline kod */
        .article-body code {
            background: rgba(255,42,42,0.08);
            border: 1px solid rgba(255,42,42,0.15);
            color: #ff8080;
            padding: 2px 8px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            font-size: 0.88em;
        }

        /* ─── BİLGİ KUTULARI ─── */
        /* Yeniden kullanım: .info-box--[tip] ile renk teması değiştirilebilir.
           Mevcut tipler: (default kırmızı), --warning (sarı), --success (yeşil), --info (mavi)
        */
        .info-box {
            --ib-color: rgba(255, 42, 42, 0.6);
            --ib-bg: rgba(255, 42, 42, 0.06);
            --ib-border: rgba(255, 42, 42, 0.2);
            position: relative;
            background: var(--ib-bg);
            border: 1px solid var(--ib-border);
            border-left: 4px solid var(--ib-color);
            border-radius: 14px;
            padding: 22px 24px;
            margin: 30px 0;
            transition: box-shadow 0.4s ease, border-color 0.4s ease;
        }
        .info-box:hover {
            box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 0 1px var(--ib-border);
        }
        .info-box--warning {
            --ib-color: rgba(245, 158, 11, 0.8);
            --ib-bg: rgba(245, 158, 11, 0.05);
            --ib-border: rgba(245, 158, 11, 0.2);
        }
        .info-box--success {
            --ib-color: rgba(16, 185, 129, 0.8);
            --ib-bg: rgba(16, 185, 129, 0.05);
            --ib-border: rgba(16, 185, 129, 0.2);
        }
        .info-box--info {
            --ib-color: rgba(99, 102, 241, 0.8);
            --ib-bg: rgba(99, 102, 241, 0.05);
            --ib-border: rgba(99, 102, 241, 0.2);
        }
        .info-box-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .info-box-header i {
            color: var(--ib-color);
            font-size: 1rem;
        }
        .info-box-header span {
            font-weight: 700;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--ib-color);
        }
        .info-box p {
            margin: 0;
            font-size: 0.92rem;
            color: rgba(255,255,255,0.6);
            line-height: 1.7;
        }

        /* ─── ÖNE ÇIKAN ALINTI / VURGU KUTUSU ─── */
        /* Yeniden kullanım: Önemli açıklamalar veya dikkat çekilmesi gereken metinler için. */
        .highlight-quote {
            position: relative;
            padding: 30px 35px;
            margin: 40px 0;
            background: linear-gradient(135deg, rgba(255,42,42,0.07) 0%, rgba(10,10,10,0.6) 100%);
            border-radius: 18px;
            border: 1px solid rgba(255,42,42,0.12);
            overflow: hidden;
            transition: all 0.4s ease;
        }
        .highlight-quote:hover {
            border-color: rgba(255,42,42,0.3);
            box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 50px rgba(255,42,42,0.04);
        }
        .highlight-quote::before {
            content: '\201C';
            position: absolute;
            top: -10px;
            left: 20px;
            font-size: 8rem;
            line-height: 1;
            color: rgba(255,42,42,0.08);
            font-family: 'Montserrat', sans-serif;
            font-weight: 900;
            pointer-events: none;
        }
        .highlight-quote p {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            color: rgba(255,255,255,0.8);
            line-height: 1.65;
            margin: 0;
            position: relative;
            z-index: 1;
        }
        .highlight-quote cite {
            display: block;
            margin-top: 14px;
            font-size: 0.82rem;
            color: var(--text-muted);
            font-style: normal;
            font-weight: 500;
        }
        .highlight-quote cite::before { content: '— '; }

        /* ─── İKONLU ÖZELLİK LİSTESİ ─── */
        /* Yeniden kullanım: Herhangi bir sayfada özellik listesi için kullanılabilir.
           İkon rengi --feature-icon ile, metin rengi varsayılan temadan alınır.
        */
        .feature-list {
            list-style: none;
            padding: 0;
            margin: 20px 0 28px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 10px;
        }
        .feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 13px 16px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.04);
            border-radius: 11px;
            font-size: 0.92rem;
            color: rgba(255,255,255,0.6);
            line-height: 1.5;
            transition: all 0.3s ease;
            cursor: default;
        }
        .feature-list li:hover {
            background: rgba(255,42,42,0.05);
            border-color: rgba(255,42,42,0.15);
            color: rgba(255,255,255,0.8);
            transform: translateX(4px);
        }
        .feature-list li i {
            color: var(--primary);
            font-size: 0.85rem;
            margin-top: 2px;
            flex-shrink: 0;
            opacity: 0.8;
            transition: opacity 0.3s;
        }
        .feature-list li:hover i { opacity: 1; }

        /* Düz ikonlu liste (daha küçük, tek sütun) */
        .icon-list {
            list-style: none;
            padding: 0;
            margin: 16px 0 24px;
        }
        .icon-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 7px 0;
            font-size: 0.93rem;
            color: #8d8d96;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            transition: color 0.3s;
        }
        .icon-list li:last-child { border-bottom: none; }
        .icon-list li:hover { color: rgba(255,255,255,0.75); }
        .icon-list li i {
            width: 20px;
            text-align: center;
            color: var(--primary);
            font-size: 0.8rem;
            opacity: 0.7;
            flex-shrink: 0;
        }

        /* ─── DUYURU / ÖNEMLİ KUTU ─── */
        /* Yeniden kullanım: Tarihleri veya önemli kararları vurgulamak için */
        .announcement-box {
            text-align: center;
            padding: 40px 30px;
            margin: 36px 0;
            background: linear-gradient(145deg, rgba(15,15,15,0.9), rgba(5,5,5,0.95));
            border: 1px solid rgba(255,42,42,0.2);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
        }
        .announcement-box:hover {
            border-color: rgba(255,42,42,0.4);
            box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 60px rgba(255,42,42,0.03);
        }
        .announcement-box::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 100%, rgba(255,42,42,0.06) 0%, transparent 70%);
            pointer-events: none;
        }
        .announcement-label {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--primary);
            opacity: 0.7;
            margin-bottom: 12px;
        }
        .announcement-box .big-date {
            font-family: 'Montserrat', sans-serif;
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 900;
            background: linear-gradient(135deg, #ffffff 0%, #666 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.1;
            margin-bottom: 8px;
        }
        .announcement-box .big-date span {
            background: linear-gradient(135deg, #c50909 0%, #ff5050 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .announcement-box p {
            color: var(--text-muted);
            font-size: 0.9rem;
            margin: 0;
        }

        /* ─── YOL HARİTASI / TİMELİNE ─── */
        /* Yeniden kullanım: Sürüm planları, yol haritası gibi ardışık içerikler için.
           Her roadmap-item ayrı bir kart olarak eklenilebilir veya çıkarılabilir.
        */
        .roadmap-timeline {
            position: relative;
            padding-left: 30px;
            margin: 10px 0 40px;
        }
        .roadmap-timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 16px;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, var(--primary) 0%, rgba(255,42,42,0.05) 100%);
        }
        .roadmap-item {
            position: relative;
            margin-bottom: 24px;
            opacity: 0;
            transform: translateX(20px);
            animation: slideInRight 0.6s ease forwards;
        }
        .roadmap-item:nth-child(1) { animation-delay: 0.1s; }
        .roadmap-item:nth-child(2) { animation-delay: 0.2s; }
        .roadmap-item:nth-child(3) { animation-delay: 0.3s; }
        .roadmap-item:nth-child(4) { animation-delay: 0.4s; }
        .roadmap-item:nth-child(5) { animation-delay: 0.5s; }
        .roadmap-item:nth-child(6) { animation-delay: 0.6s; }

        @keyframes slideInRight {
            to { opacity: 1; transform: translateX(0); }
        }

        .roadmap-item::before {
            content: '';
            position: absolute;
            left: -35px;
            top: 18px;
            width: 12px;
            height: 12px;
            background: var(--bg-dark);
            border: 2px solid var(--primary);
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .roadmap-item:hover::before {
            background: var(--primary);
            box-shadow: 0 0 12px rgba(255,42,42,0.6);
        }

        .roadmap-card {
            background: rgba(15,15,15,0.6);
            border: 1px solid rgba(255,255,255,0.04);
            border-radius: 16px;
            padding: 22px 26px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        .roadmap-card::before {
            content: '';
            position: absolute;
            left: 0; top: 0;
            width: 3px;
            height: 100%;
            background: var(--primary);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .roadmap-item:hover .roadmap-card {
            border-color: rgba(255,42,42,0.2);
            background: rgba(20,20,20,0.8);
            transform: translateX(6px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }
        .roadmap-item:hover .roadmap-card::before { opacity: 1; }

        .roadmap-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            flex-wrap: wrap;
            gap: 8px;
        }
        .roadmap-version {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            font-size: 1rem;
            color: #fff;
        }
        .roadmap-date {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--primary);
            background: rgba(255,42,42,0.1);
            border: 1px solid rgba(255,42,42,0.2);
            padding: 4px 12px;
            border-radius: 50px;
        }
        .roadmap-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .roadmap-card ul li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.88rem;
            color: #71717a;
            line-height: 1.5;
            transition: color 0.3s;
        }
        .roadmap-item:hover .roadmap-card ul li { color: #8d8d96; }
        .roadmap-card ul li i {
            color: rgba(255,42,42,0.5);
            font-size: 0.7rem;
            margin-top: 4px;
            flex-shrink: 0;
            transition: color 0.3s;
        }
        .roadmap-item:hover .roadmap-card ul li i { color: var(--primary); }

        /* Son sürüm — özel vurgu */
        .roadmap-item--final .roadmap-card {
            background: linear-gradient(135deg, rgba(255,42,42,0.06) 0%, rgba(10,10,10,0.8) 100%);
            border-color: rgba(255,42,42,0.15);
        }
        .roadmap-item--final .roadmap-version {
            background: linear-gradient(135deg, #ff2a2a 0%, #ff8080 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* ─── ETİKET ŞERİDİ ─── */
        /* Yeniden kullanım: Makale sonuna etiket eklemek için */
        .tag-strip {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 50px;
            padding-top: 24px;
            border-top: 1px solid rgba(255,255,255,0.04);
        }
        .tag-strip-label {
            font-size: 0.78rem;
            color: rgba(255,255,255,0.2);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 600;
        }
        .tag-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 50px;
            font-size: 0.78rem;
            color: rgba(255,255,255,0.35);
            transition: all 0.3s ease;
            text-decoration: none;
        }
        .tag-pill:hover {
            background: rgba(255,42,42,0.08);
            border-color: rgba(255,42,42,0.25);
            color: rgba(255,100,100,0.8);
        }

        /* ─── MAKALELERARASİ GEZİNME ─── */
        /* Yeniden kullanım: Her haber sayfasının altına eklenebilir */
        .article-nav {
            width: 100%;
            max-width: 860px;
            padding: 0 20px 80px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        .article-nav-card {
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 20px 24px;
            background: rgba(10,10,10,0.6);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 16px;
            text-decoration: none;
            transition: all 0.4s ease;
            color: inherit;
        }
        .article-nav-card:hover {
            border-color: rgba(255,42,42,0.2);
            background: rgba(20,20,20,0.8);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        .article-nav-card--next { text-align: right; }
        .nav-card-label {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--primary);
            opacity: 0.7;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .article-nav-card--next .nav-card-label { justify-content: flex-end; }
        .nav-card-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: rgba(255,255,255,0.6);
            transition: color 0.3s;
            line-height: 1.4;
        }
        .article-nav-card:hover .nav-card-title { color: #fff; }

        /* ─── YARDIMCI ANİMASYONLAR ─── */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(25px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ─── MOBİL UYUMLULUK ─── */
        @media (max-width: 768px) {
            .article-hero h1 { font-size: 1.75rem; }
            .article-meta { gap: 12px; }
            .meta-divider { display: none; }
            .feature-list { grid-template-columns: 1fr; }
            .roadmap-timeline { padding-left: 22px; }
            .article-nav { grid-template-columns: 1fr; }
            .article-nav-card--next { text-align: left; }
            .article-nav-card--next .nav-card-label { justify-content: flex-start; }
            .announcement-box { padding: 28px 20px; }
        }
        @media (max-width: 480px) {
            .article-hero { padding: 0 15px; }
            .article-body { padding: 0 15px 80px; }
            .article-nav { padding: 0 15px 60px; }
            .highlight-quote { padding: 22px 22px; }
        }