/* surum 2 */
/* Blog yazısı ve liste sayfası. Sitenin çizgisi: keskin köşe, büyük harfli
   etiket, mor vurgu. Okuma satırı ~68 karakter, metin 18 px (telefonda 17). */

.yazi { max-width: 720px; margin: 0 auto; padding: 72px 24px 40px; }
.yazi-iz { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 36px; }
.yazi-iz a { color: var(--brand); display: inline-block; padding: 12px 0; }
.yazi-cip { display: inline-block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand); padding: 5px 10px; margin: 0 0 20px; }
.yazi h1 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; color: var(--ink); margin: 0 0 20px; text-wrap: balance; }
.yazi-meta { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.yazi-diller { font-size: 13px; color: var(--ink-3); margin: 0 0 40px; }
.yazi-diller a { color: var(--brand); display: inline-block; padding: 13px 4px; }

.kutu-etiket { font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--brand) !important; font-weight: 600; margin: 0 0 10px !important; }
.kisa-cevap { border: 1px solid var(--line); border-left: 3px solid var(--brand); background: #faf7ff; padding: 22px 24px; margin: 0 0 28px; }
.kisa-cevap p { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0; }

.icindekiler { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0 14px; margin: 0 0 44px; }
.icindekiler ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 32px; }
.icindekiler li { font-size: 15px; line-height: 1.45; margin: 0 0 8px; break-inside: avoid; color: var(--ink-3); }
.icindekiler a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.icindekiler a:hover { color: var(--brand); border-bottom-color: var(--brand); }

.yazi-govde p, .yazi-govde li { font-size: 18px; line-height: 1.72; color: var(--ink-2); }
.yazi-govde p { margin: 0 0 22px; }
.yazi-govde h2, .sss h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); margin: 56px 0 18px; scroll-margin-top: 88px; text-wrap: balance; }
.yazi-govde h3 { font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 32px 0 12px; }
.yazi-govde strong { color: var(--ink); font-weight: 600; }
.yazi-govde a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.yazi-govde ul, .yazi-govde ol { padding-left: 24px; margin: 0 0 26px; }
.yazi-govde ul { list-style: disc; }
.yazi-govde li { margin: 0 0 10px; padding-left: 4px; }
.yazi-govde li::marker { color: var(--brand); }
.yazi-govde blockquote { border-left: 3px solid var(--brand); margin: 32px 0; padding: 4px 0 4px 22px; }
.yazi-govde blockquote p { color: var(--ink); font-size: 19px; }
.yazi-govde .not { background: #f6f6f8; border: 1px solid var(--line); padding: 18px 22px; margin: 28px 0; }
.yazi-govde .not p:last-child { margin: 0; }

.tablo { overflow-x: auto; margin: 8px 0 30px; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.tablo table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
.tablo th, .tablo td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; color: var(--ink-2); }
.tablo th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: #f6f6f8; font-weight: 600; }
.tablo tr:last-child td { border-bottom: 0; }

.yazi-cta { margin: 56px 0 0; padding: 28px; background: var(--ink); color: #fff; }
.yazi-cta .kutu-etiket { color: #c9a6ff !important; }
.yazi-cta-baslik { font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 10px; color: #fff; }
.yazi-cta p { color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.6; margin: 0 0 20px; }
.yazi-cta-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }
.yazi-cta .btn-solid { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }
.yazi-cta .btn-flat { color: #fff; border-color: rgba(255,255,255,.4); min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }

.sss { margin: 8px 0 0; }
.sss-oge { border-top: 1px solid var(--line); padding: 20px 0 4px; }
.sss-oge h3 { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0 0 8px; }
.sss-oge p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; }

.ilgili { max-width: 1080px; margin: 0 auto; padding: 24px 24px 96px; }
.ilgili-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ilgili-kart { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s; min-height: 160px; }
.ilgili-kart:hover { border-color: var(--brand); }
.ilgili-cip { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.ilgili-baslik { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ink); flex: 1; }
.ilgili-dk { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* Liste: üç dilin listesi sayfada, görünen dil html[lang] ile seçilir */
.blog-sayfa { max-width: 1080px; margin: 0 auto; padding: 72px 24px 96px; }
.blog-dil { display: none; }
html[lang="en"] .blog-dil[data-dil="en"], html[lang="tr"] .blog-dil[data-dil="tr"], html[lang="sr-Latn"] .blog-dil[data-dil="sr"] { display: block; }
.blog-dil h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 500; letter-spacing: -.03em; margin: 0 0 14px; color: var(--ink); }
.blog-sayfa .blog-list { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: none; margin-top: 0; }
.blog-sayfa .post-card { display: flex; flex-direction: column; }
.blog-sayfa .post-excerpt { flex: 1; }
.blog-dil .lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 640px; margin: 0 0 40px; }

@media (max-width: 700px) {
  .yazi { padding: 40px 20px 24px; }
  .yazi-iz { margin-bottom: 20px; }
  .icindekiler ol { columns: 1; }
  .icindekiler li a { display: inline-block; padding: 10px 0; }
  .icindekiler li { margin: 0; }
  .yazi-govde p, .yazi-govde li { font-size: 17px; line-height: 1.7; }
  .kisa-cevap { padding: 18px; }
  .kisa-cevap p { font-size: 17px; }
  .yazi-cta { padding: 22px 20px; margin-left: -20px; margin-right: -20px; }
  .yazi-cta-dugmeler a { width: 100%; justify-content: center; }
  .ilgili { padding: 16px 20px 72px; }
  .ilgili-izgara { grid-template-columns: 1fr; }
  .ilgili-kart { min-height: 0; }
  .blog-sayfa { padding: 40px 20px 72px; }
  .blog-sayfa .blog-list { grid-template-columns: 1fr; }
  /* Tablo telefonda kaydırılmaz: her satır, başlıkları etiket olan bir kart olur */
  .tablo { border: 0; overflow: visible; }
  .tablo table, .tablo tbody, .tablo tr, .tablo td { display: block; width: 100%; min-width: 0; }
  .tablo thead { display: none; }
  .tablo tr { border: 1px solid var(--line); border-left: 3px solid var(--brand); margin: 0 0 12px; padding: 6px 0; }
  .tablo td { border: 0; padding: 6px 14px; font-size: 15px; }
  .tablo td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 2px; }
  .tablo td:first-child { font-weight: 600; color: var(--ink); }
}