/* ARTICLE CONTAINER */

.container { max-width: 900px; margin: 3rem auto; padding: 0 2rem; flex: 1; }

.back-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); text-decoration: none; margin-bottom: 2rem; transition: 0.3s; }

.back-link:hover { color: #667eea; transform: translateX(-5px); }

.article-card { 
            background: rgba(255, 255, 255, 0.03); 
            border: 1px solid rgba(255, 255, 255, 0.1); 
            border-radius: 20px; 
            overflow: hidden; 
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
        }

.article-cover { width: 100%; height: 400px; object-fit: cover; }

.article-content { padding: 3rem; }

.article-meta { 
            display: flex; flex-wrap: wrap; gap: 14px 20px; 
            color: rgba(255,255,255,0.5); 
            font-size: 0.9rem; 
            margin-bottom: 1.5rem; 
            border-bottom: 1px solid rgba(255,255,255,0.1); 
            padding-bottom: 1.5rem;
        }

.meta-item i { color: #667eea; margin-right: 5px; }

.article-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

.article-tags span {
            padding: 6px 10px;
            border: 1px solid rgba(102, 126, 234, 0.28);
            border-radius: 8px;
            color: #a5b4fc;
            background: rgba(102, 126, 234, 0.12);
            font-size: 0.82rem;
            font-weight: 800;
        }

.article-title { 
            font-size: 2.5rem; font-weight: 800; line-height: 1.3; margin-bottom: 1rem; 
            background: linear-gradient(135deg, #ffffff, #a5b4fc); 
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }

.article-body { 
            font-size: 1.1rem; line-height: 1.8; color: rgba(255,255,255,0.9); 
        }

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

.article-body h2 { color: #fff; margin: 2rem 0 1rem; font-size: 1.8rem; }

.article-body img { max-width: 100%; border-radius: 10px; margin: 20px 0; }

.article-body code { background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; font-family: monospace; color: #667eea; }

@media (max-width: 768px) { 
            .article-content { padding: 1.5rem; } 
            .article-cover { height: 250px; }
            .article-title { font-size: 1.8rem; }
        }