/* HEADER FIX */
.header { padding: 16px 0 !important; }
/* MAKERHUB BLOG STYLES */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown .dropdown-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-dropdown .dropdown-toggle i { font-size: 10px; transition: transform 0.3s ease; }
.nav-dropdown:hover .dropdown-toggle i { transform: rotate(180deg); }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); padding: 8px 0; min-width: 220px; z-index: 1000; }
.nav-dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 10px 20px; color: #18181B; text-decoration: none; font-size: 14px; font-weight: 500; }
.dropdown-menu a:hover { background: #FFF9E0; }
.article-page { padding-top: 80px; }
.article-header { background: linear-gradient(135deg, #FFFEF5 0%, #FFF9E0 100%); padding: 60px 20px; }
.article-header-container { max-width: 800px; margin: 0 auto; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 14px; }
.breadcrumb a { color: #666; text-decoration: none; }
.breadcrumb a:hover { color: #18181B; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; font-size: 14px; }
.article-meta .category { background: #FFD600; color: #18181B; padding: 4px 12px; border-radius: 20px; font-weight: 600; }
.article-meta .date, .article-meta .reading-time { color: #666; }
.article-header h1 { font-size: 42px; font-weight: 700; color: #18181B; line-height: 1.2; margin-bottom: 16px; }
.article-subtitle { font-size: 20px; color: #444; }
.rating-display { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.rating-display .stars { color: #FFD600; font-size: 24px; }
.rating-display .rating-text { font-size: 16px; color: #666; }
.article-body { padding: 60px 20px; background: #fff; }
.article-content-wrapper { max-width: 800px; margin: 0 auto; }
.article-content-wrapper h2 { font-size: 28px; font-weight: 700; color: #18181B; margin-top: 48px; margin-bottom: 20px; padding-top: 24px; border-top: 1px solid #EEE; }
.article-content-wrapper h3 { font-size: 22px; font-weight: 600; color: #18181B; margin-top: 32px; margin-bottom: 16px; }
.article-content-wrapper p { font-size: 17px; line-height: 1.8; color: #333; margin-bottom: 20px; }
.article-content-wrapper ul, .article-content-wrapper ol { margin-bottom: 24px; padding-left: 24px; }
.article-content-wrapper li { font-size: 17px; line-height: 1.7; color: #333; margin-bottom: 12px; }
.intro-text { font-size: 19px; line-height: 1.8; margin-bottom: 32px; }
.table-of-contents { background: #F8F9FA; border-radius: 12px; padding: 24px 32px; margin-bottom: 40px; border-left: 4px solid #FFD600; }
.table-of-contents h2 { font-size: 18px; margin: 0 0 16px 0; padding: 0; border: none; }
.table-of-contents ol { margin: 0; padding-left: 20px; }
.table-of-contents li { font-size: 15px; margin-bottom: 8px; }
.table-of-contents a { color: #18181B; text-decoration: none; }
.table-of-contents a:hover { color: #B8A000; }
.article-content-wrapper table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 15px; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.article-content-wrapper thead { background: #18181B; color: #fff; }
.article-content-wrapper th { padding: 14px 16px; text-align: left; font-weight: 600; }
.article-content-wrapper td { padding: 14px 16px; border-bottom: 1px solid #EEE; }
.article-content-wrapper tbody tr:hover { background: #FFFEF5; }
.table-highlight, td.table-highlight, tr.table-highlight td { background: #FFF9E0 !important; font-weight: 600; }
.highlight-box { background: #F8F9FA; border-radius: 12px; padding: 24px; margin: 28px 0; border-left: 4px solid #FFD600; }
.highlight-box h4 { font-size: 17px; font-weight: 600; color: #18181B; margin: 0 0 12px 0; }
.highlight-box p { margin-bottom: 12px; }
.highlight-box p:last-child { margin-bottom: 0; }
.highlight-box ul { margin: 0; padding-left: 20px; }
.highlight-box.warning { background: #FFF5F5; border-left-color: #E53E3E; }
.highlight-box.warning h4 { color: #C53030; }
.highlight-box.success { background: #F0FFF4; border-left-color: #38A169; }
.highlight-box.success h4 { color: #276749; }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0; }
.pros, .cons { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.pros { border-top: 4px solid #38A169; }
.cons { border-top: 4px solid #E53E3E; }
.pros h4, .cons h4 { font-size: 17px; font-weight: 600; margin: 0 0 16px 0; }
.pros h4 { color: #276749; }
.cons h4 { color: #C53030; }
.pros ul, .cons ul { list-style: none; padding: 0; margin: 0; }
.pros li, .cons li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 15px; }
.pros li::before { content: '✓'; position: absolute; left: 0; color: #38A169; font-weight: 700; }
.cons li::before { content: '✗'; position: absolute; left: 0; color: #E53E3E; font-weight: 700; }
.verdict-box { background: #18181B; color: #fff; border-radius: 12px; padding: 32px; text-align: center; margin: 32px 0; }
.verdict-box h3 { font-size: 20px; margin: 0 0 16px 0; color: #fff; }
.verdict-stars { font-size: 36px; color: #FFD600; margin-bottom: 12px; }
.verdict-text { font-size: 18px; color: #CCC; margin: 0; }
.article-cta-box { background: linear-gradient(135deg, #FFD600 0%, #FFC700 100%); border-radius: 16px; padding: 40px; text-align: center; margin: 40px 0; }
.article-cta-box h3 { font-size: 24px; font-weight: 700; color: #18181B; margin: 0 0 12px 0; }
.article-cta-box p { font-size: 17px; color: #333; margin: 0 0 24px 0; }
.article-cta-box .btn { display: inline-block; background: #18181B; color: #fff; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: 16px; text-decoration: none; }
.article-cta-box .btn:hover { background: #333; }
.article-cta-box .btn.btn-large { padding: 16px 40px; font-size: 17px; }
.faq-section { margin: 32px 0; }
.faq-item { background: #F8F9FA; border-radius: 10px; margin-bottom: 12px; }
.faq-question { padding: 18px 24px; font-size: 16px; font-weight: 600; color: #18181B; cursor: pointer; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: '+'; float: right; font-size: 20px; color: #666; }
.faq-item[open] .faq-question::after { content: '−'; }
.faq-answer { padding: 0 24px 18px; font-size: 15px; line-height: 1.7; color: #444; }
.share-buttons { display: flex; align-items: center; gap: 12px; margin: 40px 0; padding-top: 32px; border-top: 1px solid #EEE; }
.share-buttons span { font-size: 15px; font-weight: 600; color: #666; }
.share-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; }
.share-btn.twitter { background: #1DA1F2; color: #fff; }
.share-btn.facebook { background: #4267B2; color: #fff; }
.share-btn.telegram { background: #0088CC; color: #fff; }
.share-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.author-box { display: flex; align-items: center; gap: 20px; background: #F8F9FA; border-radius: 12px; padding: 24px; margin: 40px 0; }
.author-avatar { width: 64px; height: 64px; background: linear-gradient(135deg, #FFD600 0%, #FFC700 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #18181B; }
.author-info h4 { font-size: 17px; font-weight: 600; color: #18181B; margin: 0 0 6px 0; }
.author-info p { font-size: 15px; color: #666; margin: 0; }
.related-links { background: #FFFEF5; border-radius: 12px; padding: 24px; margin: 32px 0; }
.related-links h3 { font-size: 17px; font-weight: 600; margin: 0 0 16px 0; }
.related-links ul { list-style: none; padding: 0; margin: 0; }
.related-links li { margin-bottom: 10px; }
.related-links a { color: #18181B; text-decoration: none; }
.related-links a:hover { color: #B8A000; }
@media (max-width: 768px) { .article-header { padding: 40px 16px; } .article-header h1 { font-size: 28px; } .article-body { padding: 40px 16px; } .pros-cons { grid-template-columns: 1fr; } .author-box { flex-direction: column; text-align: center; } }