/* Teknik makale sayfaları ve makale listesi */
.art-page { background: var(--bg-canvas, #f6f8fb); }
.art-cat { color: var(--gold-deep, #003f73); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }

.art-head { background: linear-gradient(135deg, var(--bg-deep, #eef2f7), #dbe3ee); padding: clamp(2.5rem, 7vw, 5rem) var(--gutter, 1.25rem) clamp(1.75rem, 4vw, 3rem); }
.art-head__inner { margin: 0 auto; max-width: 46rem; }
.art-crumb { align-items: center; color: var(--ink-muted, #5a6672); display: flex; font-size: 0.8125rem; gap: 0.5rem; margin-bottom: 1.25rem; }
.art-crumb a { color: inherit; text-decoration: none; }
.art-crumb a:hover { text-decoration: underline; }
.art-head h1 { color: var(--ink-primary, #22272a); font-size: clamp(1.75rem, 4.6vw, 2.75rem); font-weight: 400; line-height: 1.15; margin: 0.6rem 0 1rem; }
.art-lead { color: var(--ink-secondary, #3d4752); font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.7; margin: 0 0 1.25rem; }
.art-meta { color: var(--ink-muted, #5a6672); display: flex; flex-wrap: wrap; font-size: 0.8125rem; gap: 0.5rem; }

.art-body { margin: 0 auto; max-width: 46rem; padding: clamp(1.75rem, 4vw, 3rem) var(--gutter, 1.25rem); color: var(--ink-primary, #22272a); font-size: 1.0625rem; line-height: 1.75; }
.art-body h2 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 500; line-height: 1.25; margin: 2.25rem 0 0.75rem; }
.art-body h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 0.4rem; color: var(--gold-deep, #003f73); }
.art-body p { margin: 0 0 1rem; }
.art-body ul, .art-body ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.art-body li { margin: 0.4rem 0; }
.art-body a { color: var(--gold-primary, #00579c); text-underline-offset: 0.2em; }
.art-formula { background: #fff; border-left: 3px solid var(--gold-primary, #00579c); font-weight: 500; padding: 0.8rem 1rem; }
.art-note { background: #fff; border: 1px solid var(--hairline-strong, #22272a3d); color: var(--ink-muted, #5a6672); font-size: 0.875rem; line-height: 1.6; margin-top: 2.25rem; padding: 0.9rem 1.1rem; }
.art-table { margin: 0 0 1.5rem; overflow-x: auto; }
.art-table table { background: #fff; border-collapse: collapse; font-size: 0.9375rem; min-width: 32rem; width: 100%; }
.art-table th, .art-table td { border: 1px solid var(--hairline-strong, #22272a3d); line-height: 1.5; padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.art-table th { background: var(--bg-deep, #eef2f7); font-weight: 600; }

.art-more { border-top: 1px solid var(--hairline-strong, #22272a3d); margin: 0 auto; max-width: 46rem; padding: 2rem var(--gutter, 1.25rem) 3rem; }
.art-more h2 { font-size: 1.25rem; font-weight: 500; margin: 0 0 1rem; }
.art-more ul { display: grid; gap: 0.6rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.art-more a { color: inherit; text-decoration: none; }
.art-more li a { background: #fff; border: 1px solid var(--hairline-strong, #22272a3d); display: grid; gap: 0.25rem; padding: 0.8rem 1rem; transition: border-color 0.2s; }
.art-more li a:hover { border-color: var(--gold-primary, #00579c); }
.art-more li strong { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.art-all { color: var(--gold-primary, #00579c); font-size: 0.875rem; font-weight: 600; }

/* Liste */
.art-list-sub { color: var(--ink-secondary, #3d4752); font-size: 0.9375rem; line-height: 1.6; margin: -0.5rem 0 1.25rem; max-width: 46rem; }
.art-list-title { font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 500; margin: 0 0 1.25rem; }
.art-grid { display: grid; gap: clamp(0.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 2.5rem; }
.art-card { background: #fff; border: 1px solid var(--hairline-strong, #22272a3d); border-top: 3px solid var(--gold-primary, #00579c); color: inherit; display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.1rem, 2vw, 1.5rem); text-decoration: none; transition: box-shadow 0.25s, transform 0.25s; }
.art-card:hover { box-shadow: 0 14px 30px -18px #22272a66; transform: translateY(-2px); }
.art-card h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.35; margin: 0; }
.art-card p { color: var(--ink-secondary, #3d4752); flex: 1; font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.art-card__meta { color: var(--ink-muted, #5a6672); font-size: 0.75rem; }
.art-card__more { color: var(--gold-deep, #003f73); font-size: 0.8125rem; font-weight: 600; }
@media (max-width: 720px) {
  .art-grid { grid-template-columns: 1fr; }
  .art-body { font-size: 1rem; }
  .art-table table { font-size: 0.8125rem; min-width: 28rem; }
}