/* ============================================================
   Bynteq v2.0 — article.css
   Article reader: layout, typography, TOC, share, author box,
   related articles, prev/next navigation
   ============================================================ */

/* ===== ARTICLE HEADER ===== */
.article-header{padding:calc(var(--navbar-h) + var(--space-2xl)) var(--space-xl) var(--space-xl);max-width:860px;margin:0 auto;text-align:center;}
.article-header .breadcrumb{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-lg);flex-wrap:wrap;}
.article-header .breadcrumb a{color:var(--text-secondary);transition:color var(--dur-fast);}
.article-header .breadcrumb a:hover{color:var(--accent-1);}
.article-header .breadcrumb span{color:var(--text-muted);}
.article-header h1{font-size:clamp(var(--text-2xl),4vw,var(--text-5xl));font-weight:800;line-height:1.15;margin-bottom:var(--space-lg);letter-spacing:-0.03em;}
.article-meta-row{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);flex-wrap:wrap;color:var(--text-muted);font-size:var(--text-sm);}
.article-meta-row .dot{width:4px;height:4px;background:var(--text-muted);border-radius:50%;}
.article-reading-stats{display:flex;align-items:center;gap:4px;color:var(--accent-2);font-weight:600;}

/* ===== COVER IMAGE ===== */
.article-cover-wrap{max-width:900px;margin:0 auto var(--space-2xl);padding:0 var(--space-xl);}
.article-cover-wrap img{width:100%;height:400px;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border);}

/* ===== SHARE BAR ===== */
.share-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-xl);flex-wrap:wrap;}
.share-bar span{font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);}
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);transition:all var(--dur-fast);text-decoration:none;}
.share-btn:hover{transform:translateY(-2px);}
.share-btn.twitter:hover{background:rgba(29,161,242,0.1);border-color:rgba(29,161,242,0.4);color:#1da1f2;}
.share-btn.whatsapp:hover{background:rgba(37,211,102,0.1);border-color:rgba(37,211,102,0.4);color:#25d366;}
.share-btn.copy:hover{background:rgba(99,102,241,0.1);border-color:var(--border-accent);color:var(--accent-1);}

/* ===== ARTICLE LAYOUT ===== */
.article-layout{display:grid;grid-template-columns:1fr 280px;gap:var(--space-2xl);max-width:1100px;margin:0 auto;padding:0 var(--space-xl) var(--space-3xl);align-items:start;}
.article-main{min-width:0;}
.article-sidebar{position:sticky;top:calc(var(--navbar-h) + var(--space-lg));display:flex;flex-direction:column;gap:var(--space-lg);}

/* ===== TOC ===== */
.article-toc{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-lg);}
.article-toc h3{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:var(--space-md);}
.article-toc ol{counter-reset:toc;display:flex;flex-direction:column;gap:4px;}
.article-toc ol li{counter-increment:toc;display:flex;align-items:flex-start;gap:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;}
.article-toc ol li::before{content:counter(toc);font-size:var(--text-xs);font-weight:700;color:var(--accent-1);background:rgba(99,102,241,0.1);border-radius:var(--radius-xs);min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.article-toc ol li a{color:inherit;transition:color var(--dur-fast);}
.article-toc ol li a:hover{color:var(--accent-1);}

/* ===== ARTICLE BODY ===== */
.article-body{font-size:var(--text-lg);line-height:1.8;color:var(--text-secondary);}
.article-body h2{font-size:var(--text-2xl);font-weight:700;margin:var(--space-2xl) 0 var(--space-md);color:var(--text-primary);padding-top:var(--space-md);border-top:1px solid var(--border);}
.article-body h3{font-size:var(--text-xl);font-weight:700;margin:var(--space-xl) 0 var(--space-sm);color:var(--text-primary);}
.article-body p{margin-bottom:var(--space-lg);}
.article-body ul,.article-body ol{margin:var(--space-lg) 0;padding-left:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);}
.article-body ul li{list-style:none;position:relative;padding-left:var(--space-lg);}
.article-body ul li::before{content:'';position:absolute;left:0;top:0.6em;width:8px;height:8px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));border-radius:50%;}
.article-body ol li{list-style:decimal;padding-left:var(--space-sm);}
.article-body blockquote{border-left:3px solid var(--accent-1);padding-left:var(--space-lg);margin:var(--space-xl) 0;font-size:var(--text-lg);color:var(--text-secondary);font-style:italic;}
.article-body code{font-family:var(--font-mono);font-size:0.85em;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:2px 6px;color:var(--accent-2);}
.article-body pre{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-lg);overflow-x:auto;margin:var(--space-xl) 0;}
.article-body pre code{background:none;border:none;padding:0;font-size:var(--text-sm);color:var(--text-primary);}
.article-body img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin:var(--space-xl) auto;max-width:100%;}
.article-body a{color:var(--accent-1);text-decoration:underline;text-underline-offset:3px;transition:color var(--dur-fast);}
.article-body a:hover{color:var(--accent-2);}

/* ===== TIP / WARNING / CONCLUSION ===== */
.article-tip{background:rgba(34,211,238,0.06);border:1px solid rgba(34,211,238,0.2);border-left:4px solid var(--accent-2);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-xl) 0;}
.article-tip h4{font-size:var(--text-base);font-weight:700;color:var(--accent-2);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);}
.article-tip p{font-size:var(--text-sm);color:var(--text-secondary);margin:0;}
.article-warning{background:rgba(251,191,36,0.06);border:1px solid rgba(251,191,36,0.2);border-left:4px solid var(--accent-gold);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-xl) 0;}
.article-warning h4{font-size:var(--text-base);font-weight:700;color:var(--accent-gold);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm);}
.article-warning p{font-size:var(--text-sm);color:var(--text-secondary);margin:0;}
.article-conclusion{background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(34,211,238,0.05));border:1px solid var(--border-accent);border-radius:var(--radius-xl);padding:var(--space-xl);margin:var(--space-2xl) 0;}
.article-conclusion h3{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-sm);color:var(--text-primary);}
.article-conclusion p{font-size:var(--text-base);color:var(--text-secondary);margin:0;}

/* ===== TAKEAWAYS ===== */
.article-takeaways{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-xl);margin:var(--space-xl) 0;}
.article-takeaways h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm);}
.article-takeaways ul{display:flex;flex-direction:column;gap:var(--space-sm);padding-left:0;}
.article-takeaways ul li{list-style:none;padding-left:0;display:flex;align-items:flex-start;gap:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary);}
.article-takeaways ul li::before{display:none;}
.article-takeaways ul li .check{color:var(--accent-android);font-size:var(--text-base);flex-shrink:0;margin-top:2px;}

/* ===== FAQ ===== */
.article-faq{margin:var(--space-xl) 0;}
.article-faq h2{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-lg);}
.faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-sm);overflow:hidden;}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);cursor:pointer;font-weight:600;font-size:var(--text-base);color:var(--text-primary);transition:background var(--dur-fast);user-select:none;}
.faq-question:hover{background:var(--bg-card-hover);}
.faq-question .chevron{transition:transform var(--dur-base);font-size:var(--text-sm);color:var(--text-muted);flex-shrink:0;}
.faq-item.open .faq-question .chevron{transform:rotate(180deg);}
.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-out);}
.faq-answer p{padding:0 var(--space-lg) var(--space-md);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.7;}
.faq-item.open .faq-answer{max-height:300px;}

/* ===== AUTHOR BOX ===== */
.author-box{background:linear-gradient(135deg,rgba(99,102,241,0.06),rgba(34,211,238,0.04));border:1px solid var(--border-accent);border-radius:var(--radius-xl);padding:var(--space-xl);display:flex;gap:var(--space-lg);align-items:center;margin:var(--space-2xl) 0;}
.author-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));display:flex;align-items:center;justify-content:center;font-size:var(--text-2xl);font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 4px 16px rgba(99,102,241,0.3);}
.author-info h3{font-size:var(--text-lg);font-weight:700;margin-bottom:4px;}
.author-info .title{font-size:var(--text-sm);color:var(--accent-android);font-weight:600;margin-bottom:var(--space-sm);}
.author-info p{font-size:var(--text-sm);color:var(--text-secondary);margin:0;}

/* ===== PREV / NEXT ===== */
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin:var(--space-2xl) 0;}
.article-nav-link{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-lg);text-decoration:none;transition:transform var(--dur-base),box-shadow var(--dur-base),border-color var(--dur-base);}
.article-nav-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-accent);}
.article-nav-link.prev{text-align:left;}
.article-nav-link.next{text-align:right;}
.article-nav-link .nav-dir{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:4px;display:flex;align-items:center;gap:4px;}
.article-nav-link.next .nav-dir{justify-content:flex-end;}
.article-nav-link .nav-title{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);line-height:1.4;}

/* ===== RELATED ARTICLES ===== */
.related-articles{max-width:1100px;margin:0 auto;padding:var(--space-2xl) var(--space-xl) var(--space-3xl);}
.related-articles h2{font-size:var(--text-2xl);font-weight:700;margin-bottom:var(--space-xl);}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-lg);}
.related-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-xl);text-decoration:none;display:flex;flex-direction:column;gap:var(--space-sm);transition:transform var(--dur-base),box-shadow var(--dur-base),border-color var(--dur-base);position:relative;overflow:hidden;}
.related-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));opacity:0;transition:opacity var(--dur-base);}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-accent);}
.related-card:hover::before{opacity:1;}
.related-card h3{font-size:var(--text-base);font-weight:700;color:var(--text-primary);line-height:1.4;}
.related-card p{font-size:var(--text-sm);color:var(--text-secondary);}
.related-card .meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:auto;}