/* Blog sayfalarına özel stiller. Neden ayrı dosya: site.css tasarım aracından üretilmiş, ona dokunmuyoruz. Bu dosya yalnızca /blog ve /blog/... sayfalarında 'e ekleniyor (SeoHead üzerinden), anasayfa fazladan bayt indirmiyor. Yazı gövdesi Markdown'dan HTML'e çevriliyor; oradan çıkan etiketler (h2, p, ul, blockquote...) tek tek biçimlendirilemez, o yüzden .blog-prose altında toplu kural yazıldı. Sitenin geri kalanı satır içi stil kullanıyor, burada mecburen değil. */ /* ---------- yazı gövdesi ---------- */ .blog-prose { font-size: 17px; line-height: 1.75; color: #2E2839; } .blog-prose > *:first-child { margin-top: 0; } .blog-prose > *:last-child { margin-bottom: 0; } .blog-prose p { margin: 0 0 22px; } .blog-prose h2 { font-size: clamp(23px, 3.4vw, 29px); font-weight: 700; letter-spacing: -0.6px; line-height: 1.25; color: #191223; margin: 46px 0 14px; } .blog-prose h3 { font-size: 20px; font-weight: 700; color: #191223; margin: 32px 0 10px; } .blog-prose ul, .blog-prose ol { margin: 0 0 22px; padding-left: 22px; } .blog-prose li { margin-bottom: 9px; } .blog-prose li::marker { color: #6D28D9; } .blog-prose a { color: #6D28D9; text-decoration: underline; text-underline-offset: 2px; } .blog-prose strong { font-weight: 600; color: #191223; } .blog-prose blockquote { margin: 0 0 22px; padding: 2px 0 2px 20px; border-left: 3px solid #DDD3F8; color: #4A4458; } .blog-prose img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 28px 0; } .blog-prose hr { border: 0; border-top: 1px solid #F0EBF8; margin: 40px 0; } .blog-prose code { background: #F5F3FF; color: #4C1D95; padding: 2px 6px; border-radius: 4px; font-size: 0.92em; } /* Geniş tablo sayfayı yatay kaydırtmasın; kendi içinde kaysın. */ .blog-prose .table-wrap { overflow-x: auto; margin: 0 0 22px; } .blog-prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .blog-prose th, .blog-prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid #F0EBF8; } .blog-prose th { font-weight: 600; color: #191223; background: #FBFAF8; } /* ---------- liste kartları ---------- */ .blog-card { display: block; background: #ffffff; border: 1px solid #F0EBF8; border-radius: 14px; padding: 26px 28px; color: inherit; text-decoration: none; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .blog-card:hover { border-color: #DDD3F8; box-shadow: 0 8px 28px rgba(25, 18, 35, 0.09); transform: translateY(-2px); } .blog-card:hover .blog-card-title { color: #6D28D9; } .blog-card-title { transition: color 0.18s ease; } /* Dokunmatik cihazda hover yok; sıçrama efekti kapansın. */ @media (hover: none) { .blog-card:hover { transform: none; box-shadow: none; border-color: #F0EBF8; } } @media (max-width: 640px) { .blog-prose { font-size: 16px; } .blog-card { padding: 22px 20px; } }