/* blog-article.css — Gelecek Yazılım Blog Yazıları */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* Inherits from shared.css, add article-specific styles */
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:0;padding:5rem 4%;max-width:1400px;margin:0 auto}
.article-body{padding-right:4rem;border-right:1px solid var(--border)}
.article-sidebar{padding-left:3rem}

/* ARTICLE META */
.art-tag{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:.5rem}
.art-title{font-size:clamp(2rem,4vw,4rem);font-weight:300;letter-spacing:-.04em;line-height:1.04;margin-bottom:1.5rem;color:var(--fg)}
.art-meta{display:flex;align-items:center;gap:1.5rem;padding:1.25rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:2.5rem;flex-wrap:wrap}
.art-meta-item{display:flex;align-items:center;gap:.45rem;font-size:.68rem;color:var(--muted);letter-spacing:.04em}
.art-meta-dot{width:4px;height:4px;border-radius:50%;background:var(--muted2);flex-shrink:0}

/* ARTICLE CONTENT */
.art-content h2{font-size:clamp(1.4rem,2.5vw,2.2rem);font-weight:400;letter-spacing:-.03em;line-height:1.2;margin:3rem 0 1.25rem;color:var(--fg)}
.art-content h3{font-size:clamp(1.05rem,1.3vw,1.3rem);font-weight:600;margin:2.25rem 0 .85rem;color:var(--fg)}
.art-content p{font-size:clamp(.9rem,1.05vw,1.05rem);color:#3a3a36;line-height:1.95;margin-bottom:1.4rem}
.art-content strong{font-weight:600;color:var(--fg)}
.art-content ul,.art-content ol{margin:1.25rem 0 1.5rem 1.5rem}
.art-content li{font-size:clamp(.88rem,1vw,1rem);color:#3a3a36;line-height:1.85;margin-bottom:.55rem}
.art-content blockquote{border-left:3px solid var(--green);padding:1.25rem 1.75rem;background:var(--bg2);margin:2rem 0;border-radius:0 5px 5px 0}
.art-content blockquote p{font-size:clamp(.88rem,1vw,1rem);color:var(--muted);font-style:italic;margin-bottom:0}
.art-content .callout{background:var(--dark);color:#fff;padding:1.75rem 2rem;border-radius:6px;margin:2rem 0}
.art-content .callout h4{font-size:clamp(.85rem,1vw,.95rem);font-weight:600;color:#fff;margin-bottom:.5rem;letter-spacing:.04em}
.art-content .callout p{font-size:clamp(.82rem,.95vw,.92rem);color:rgba(255,255,255,.65);margin-bottom:0;line-height:1.8}
.art-content table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:clamp(.8rem,.95vw,.92rem)}
.art-content th{background:var(--dark);color:#fff;padding:.75rem 1rem;text-align:left;font-size:clamp(.65rem,.8vw,.75rem);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.art-content td{padding:.75rem 1rem;border-bottom:1px solid var(--border);color:#3a3a36;vertical-align:top}
.art-content tr:last-child td{border-bottom:none}
.art-content tr:hover td{background:var(--bg2)}

/* CTA IN ARTICLE */
.art-cta{background:var(--dark);border-radius:8px;padding:2.5rem;margin:3rem 0;text-align:center}
.art-cta h4{font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:300;color:#fff;letter-spacing:-.03em;margin-bottom:.85rem}
.art-cta p{font-size:clamp(.82rem,.95vw,.92rem);color:rgba(255,255,255,.45);margin-bottom:1.5rem;line-height:1.75}
.art-cta-acts{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ARTICLE NAV */
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:4rem}
.art-nav-item{padding:2rem;transition:background .25s}
.art-nav-item:first-child{border-right:1px solid var(--border)}
.art-nav-item:hover{background:var(--bg2)}
.art-nav-dir{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.art-nav-title{font-size:clamp(.85rem,1vw,.96rem);font-weight:500;line-height:1.4}

/* TAGS */
.art-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--border)}
.art-tag-chip{font-size:.62rem;letter-spacing:.06em;border:1px solid var(--border);border-radius:3px;padding:.32rem .72rem;color:var(--muted);transition:all .2s;cursor:default}
.art-tag-chip:hover{border-color:var(--fg);color:var(--fg)}

@media(max-width:900px){.article-layout{grid-template-columns:1fr}.article-body{padding-right:0;border-right:none}.article-sidebar{padding-left:0;margin-top:3rem;padding-top:3rem;border-top:1px solid var(--border)}.art-nav{grid-template-columns:1fr}}