:root {
    --d-black: #1e293b;
    --d-gray: #475569;
    --d-light: #f8fafc;
    --d-border: #e2e8f0;
    --d-accent: #2563eb;
}

/* 1. ARTICLE HERO (DARK MODE) */
.article-hero {
    padding: 180px 0 100px; /* Header altı boşluk */
    text-align: center; 
    background-color: #0f172a; /* Slate 900 */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Arka Plan Efektleri */
.hero-glow-1 {
    position: absolute; top: -30%; left: 10%; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
    filter: blur(80px); z-index: 0; pointer-events: none;
}
.hero-glow-2 {
    position: absolute; bottom: -20%; right: 10%; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 70%);
    filter: blur(80px); z-index: 0; pointer-events: none;
}
.hero-pattern {
    position: absolute; inset: 0; opacity: 0.03;
    background-image: url('images/cubes.png');
    z-index: 0; pointer-events: none;
}

.hero-content { position: relative; z-index: 10; max-width: 900px; margin: 0 auto; px: 20px; }

.article-cat {
    display: inline-block; 
    background: rgba(59,130,246,0.1); 
    border: 1px solid rgba(59,130,246,0.2);
    color: #93c5fd; /* Açık Mavi */
    padding: 6px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; margin-bottom: 24px; letter-spacing: 1px;
    text-decoration: none; transition: 0.3s;
}
.article-cat:hover { background: rgba(59,130,246,0.2); color: white; }

.article-title {
    font-size: 2.5rem; lg:font-size: 3.5rem; font-weight: 800; line-height: 1.2;
    letter-spacing: -1px; margin-bottom: 20px; color: white;
}

.article-meta {
    display: flex; justify-content: center; align-items: center; gap: 15px;
    color: #94a3b8; /* Slate 400 */ font-size: 0.95rem;
}
.meta-sep { width: 4px; height: 4px; background: #475569; border-radius: 50%; }

/* FEATURED IMAGE (Hero ile birleşik görünüm) */
.featured-image-wrap {
    max-width: 1200px; margin: -60px auto 60px; px-6; position: relative; z-index: 20;
}
.featured-img {
    width: 100%; height: 500px; object-fit: cover; border-radius: 20px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2); /* Gölge ile derinlik */
    border: 4px solid white;
}

/* 2. LAYOUT (Content + Sidebar) */
.detail-container {
    display: grid; gap: 80px;
    max-width: 1200px; margin: 0 auto 100px; padding: 0 20px;
    align-items: start;
}

/* ARTICLE CONTENT TYPOGRAPHY */
.article-body { font-size: 1.125rem; line-height: 1.8; color: #334155; }

.article-body p { margin-bottom: 1.5em; }

.article-body h2 {
    font-size: 2rem; font-weight: 800; color: #0f172a; margin: 2em 0 0.8em;
    letter-spacing: -0.5px;
}
.article-body h3 {
    font-size: 1.5rem; font-weight: 700; color: #0f172a; margin: 1.5em 0 0.8em;
}

/* Blockquote */
.article-body blockquote {
    border-left: 4px solid var(--d-accent); padding-left: 25px; margin: 2em 0;
    font-style: italic; font-size: 1.25rem; color: #0f172a; background: #f8fafc;
    padding: 30px; border-radius: 0 12px 12px 0;
}

/* Social Share Bar */
.share-bar {
    display: flex; gap: 10px; margin: 40px 0; border-top: 1px solid var(--d-border);
    border-bottom: 1px solid var(--d-border); padding: 20px 0; align-items: center;
    flex-wrap: wrap;
}
.share-label { font-weight: 700; font-size: 0.9rem; margin-right: 15px; text-transform: uppercase; }
.share-btn {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1rem; transition: 0.3s; text-decoration: none;
}
.share-btn:hover { transform: translateY(-3px); }

.s-linkedin { background: #0077b5; }
.s-twitter { background: #000; }
.s-whatsapp { background: #25d366; }
.s-facebook { background: #1877f2; }
.s-copy { background: #64748b; }

/* RELATED POSTS */
.related-section { background: #f8fafc; padding: 80px 0; border-top: 1px solid var(--d-border); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; px-6; }
.rel-card { background: white; border-radius: 12px; overflow: hidden; border: 1px solid var(--d-border); transition: 0.3s; }
.rel-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.rel-img { height: 200px; width: 100%; object-fit: cover; }
.rel-body { padding: 20px; }
.rel-title { font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; line-height: 1.4; min-height: 49px; }
.rel-link { color: var(--d-accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .article-hero { padding: 140px 0 80px; }
    .article-title { font-size: 2rem; }
    .featured-image-wrap { margin-top: -40px; padding: 0 20px; }
    .featured-img { height: 300px; }
    .detail-container { grid-template-columns: 1fr; gap: 40px; }
    .related-grid { grid-template-columns: 1fr; padding: 0 20px; }
}