/* Shared visual language for content pages (blog, news and dictionary).
   It mirrors the homepage theme while leaving each page's layout and scripts
   in charge of their own components. */
:root {
    --content-navy: #101828;
    --content-ink: #172033;
    --content-blue: #2563eb;
    --content-blue-dark: #1d4ed8;
    --content-muted: #667085;
    --content-border: #e4e7ec;
    --content-canvas: #f3f6fb;
}

body.content-page {
    color: var(--content-ink);
    background-color: var(--content-canvas);
    background-image:
        linear-gradient(180deg, rgba(243,246,251,.9), rgba(243,246,251,.94)),
        url('/bg.webp');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    overflow-x: hidden;
}

body.content-page .site-nav {
    height: 68px;
    padding: 0 max(24px, calc((100vw - 1180px) / 2));
    background: rgba(16,24,40,.97);
    border-bottom: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 8px 24px rgba(16,24,40,.12);
}

body.content-page .nav-brand { font-size: 1.04rem; letter-spacing: -.02em; }
body.content-page .nav-brand-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--content-blue);
    font-size: 1.2rem;
}
body.content-page .nav-links { gap: 2px; }
body.content-page .nav-link { padding: 9px 14px; font-size: .83rem; }
body.content-page .nav-link.active { background: rgba(255,255,255,.1); }
body.content-page .nav-link.active::after { display: none; }
body.content-page .nav-toggle { min-width: 44px; min-height: 44px; }

body.content-page .page-container {
    width: min(1180px, 100%);
    max-width: none;
    padding: 48px 24px 64px;
}

body.content-page .glass-box {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(16,24,40,.09);
    backdrop-filter: blur(14px);
}

body.content-page .site-footer {
    background: rgba(16,24,40,.97);
    border-top: 1px solid rgba(255,255,255,.09);
}

/* Blog and news headers use the same compact, quiet surface as homepage cards. */
body.content-page .blog-header,
body.content-page .news-header,
body.content-page .sozluk-header {
    margin-bottom: 34px;
    padding: 34px 36px;
    text-align: left;
}
body.content-page .blog-header h1,
body.content-page .news-header h1,
body.content-page .sozluk-header h1 {
    color: var(--content-ink);
    font-size: clamp(2rem, 4vw, 2.65rem);
    letter-spacing: -.045em;
}
body.content-page .blog-header .accent-red,
body.content-page .news-header .accent-red,
body.content-page .sozluk-header .accent-red { color: var(--content-blue); }
body.content-page .blog-subtitle,
body.content-page .news-subtitle,
body.content-page .sozluk-subtitle { color: var(--content-muted); }

body.content-page .blog-card,
body.content-page .news-card,
body.content-page .sozluk-card {
    border: 1px solid rgba(228,231,236,.9);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 30px rgba(16,24,40,.08);
    backdrop-filter: blur(10px);
}
body.content-page .blog-card:hover,
body.content-page .news-card:hover,
body.content-page .sozluk-card:hover {
    border-color: rgba(37,99,235,.3);
    box-shadow: 0 20px 40px rgba(16,24,40,.13);
}
body.content-page .card-title,
body.content-page .news-card-title,
body.content-page .card-term-title { color: var(--content-ink); }
body.content-page .card-excerpt,
body.content-page .news-card-summary,
body.content-page .card-term-excerpt { color: #475467; }
body.content-page .card-tag,
body.content-page .card-term-category,
body.content-page .term-category-badge { color: var(--content-blue-dark); background: #eff6ff; border-color: #dbeafe; }
body.content-page .btn-primary {
    color: #fff;
    background: var(--content-blue);
    box-shadow: 0 10px 24px rgba(37,99,235,.2);
}
body.content-page .btn-primary:hover { background: var(--content-blue-dark); box-shadow: 0 14px 30px rgba(37,99,235,.24); }
body.content-page .article-tag {
    color: var(--content-blue-dark);
    background: #eff6ff;
    border-color: #bfdbfe;
}
body.content-page .article-content a { color: var(--content-blue-dark); }
body.content-page .article-content a:hover { color: #1e40af; }
body.content-page .article-content blockquote { border-left-color: var(--content-blue); }
body.content-page .blog-back-link {
    color: var(--content-blue-dark);
    background: rgba(255,255,255,.9);
    border: 1px solid var(--content-border);
}
body.content-page .blog-back-link:hover { color: #fff; background: var(--content-blue); }

/* Dictionary controls and term cards follow the same blue action palette. */
body.content-page .sozluk-search-box:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
body.content-page .search-clear:hover { color: var(--content-blue-dark); }
body.content-page .term-count { color: var(--content-muted); }
body.content-page .alpha-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: var(--content-blue-dark);
}
body.content-page .alpha-btn.active {
    background: var(--content-blue);
    border-color: var(--content-blue);
    box-shadow: 0 4px 12px rgba(37,99,235,.2);
}
body.content-page .card-letter-strip { background: linear-gradient(135deg, #172033 0%, #334155 40%, #2563eb 100%); }
body.content-page .card-letter-badge,
body.content-page .term-letter-badge { background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 6px 20px rgba(37,99,235,.24); }
body.content-page .card-read-more,
body.content-page .term-content a { color: var(--content-blue-dark); }
body.content-page .sozluk-back-link {
    color: var(--content-blue-dark);
    background: rgba(255,255,255,.9);
    border: 1px solid var(--content-border);
}
body.content-page .sozluk-back-link:hover { color: #fff; background: var(--content-blue); }
body.content-page .term-content blockquote { border-left-color: var(--content-blue); }
body.content-page .term-content code { color: var(--content-blue-dark); }
body.content-page .related-term-link:hover { border-color: #bfdbfe; color: var(--content-blue-dark); background: #eff6ff; }
body.content-page .related-term-link::before { color: var(--content-blue); }
body.content-page .sozluk-load-more-btn {
    background: var(--content-blue);
    box-shadow: 0 8px 18px rgba(37,99,235,.2);
}
body.content-page .sozluk-load-more-btn:hover { background: var(--content-blue-dark); }

@media (max-width: 768px) {
    body.content-page { background-attachment: scroll; }
    body.content-page .page-container { padding: 28px 16px 48px; }
    body.content-page .blog-header,
    body.content-page .news-header,
    body.content-page .sozluk-header { padding: 26px 22px; margin-bottom: 24px; }
    body.content-page .site-nav { height: auto; min-height: 62px; padding: 10px 16px; }
    body.content-page .nav-links.open { display: flex; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    body.content-page *, body.content-page *::before, body.content-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}