/* Blog — liste ve yazı sayfaları. style.css'in üzerine yalnız bu sayfalarda yüklenir.
   Amaç: hızlı açılan, sade, okunur, arama motoruna açık sayfalar. Vurgu rengi yalnız bağlantı ve kategori etiketinde. */

/* ---------- Liste sayfası ---------- */
.bg-giris { background: var(--zemin); border-bottom: 1px solid var(--cizgi); }
.bg-giris-ic { padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 36px); display: grid; gap: 14px; justify-items: start; }
.bg-etiket { margin: 0; font-family: var(--yazi-baslik); font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vurgu); }
.bg-giris h1 { margin: 0; max-width: 20ch; font-family: var(--yazi-baslik); font-size: clamp(34px, 4.2vw, 56px); font-weight: 700; line-height: 1.02; letter-spacing: -0.012em; color: var(--murekkep); text-wrap: balance; }
.bg-giris-metin { margin: 0; max-width: 62ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--ikincil); }

/* Kategori sekmeleri: bağlantı listesi; JS varsa sayfada süzer, yoksa hepsi görünür */
.bg-kategoriler { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.bg-kategoriler a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--cizgi-guclu); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--murekkep); text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bg-kategoriler a:hover { border-color: var(--murekkep); }
.bg-kategoriler a[aria-current="true"] { background: var(--murekkep); border-color: var(--murekkep); color: var(--beyaz); }

.bg-liste { background: var(--kanvas); }
.bg-liste-ic { padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); display: grid; gap: clamp(28px, 3vw, 40px); }

/* Yazı kartları: beyaz kart, üstte 16:9 görsel, altında kategori · tarih, başlık, özet */
.bg-kartlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bg-kart { min-width: 0; display: grid; grid-template-rows: auto 1fr; background: var(--zemin); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px var(--golge-ince); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.bg-kart:hover { box-shadow: 0 1px 2px var(--golge-ince), 0 16px 36px -22px var(--golge-guclu); transform: translateY(-2px); }
.bg-kart[hidden] { display: none; }
.bg-kart-gorsel { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kart-zemin); }
.bg-kart-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bg-kart-metin { display: grid; align-content: start; gap: 10px; padding: 18px 20px 22px; }
.bg-kunye { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--soluk); }
.bg-kunye .bg-kat { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vurgu); }
.bg-kunye time { white-space: nowrap; }
.bg-kart h2, .bg-kart h3 { margin: 0; font-family: var(--yazi-baslik); font-size: 25px; font-weight: 600; line-height: 1.12; letter-spacing: -0.005em; color: var(--murekkep); }
.bg-kart h2 a, .bg-kart h3 a { color: inherit; text-decoration: none; }
.bg-kart h2 a::after, .bg-kart h3 a::after { content: ""; position: absolute; inset: 0; }
.bg-kart { position: relative; }
.bg-kart h2 a:hover, .bg-kart h3 a:hover { color: var(--vurgu); }
.bg-ozet { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ikincil); }
.bg-oku { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--vurgu); }

/* Öne çıkan (en yeni) yazı: tam genişlikte, solda görsel sağda metin */
.bg-one { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--zemin); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px var(--golge-ince); }
.bg-one[hidden] { display: none; }
.bg-one .bg-kart-gorsel { aspect-ratio: auto; min-height: 100%; }
.bg-one .bg-kart-metin { padding: clamp(24px, 3vw, 40px); gap: 14px; align-content: center; }
.bg-one h2 { margin: 0; font-family: var(--yazi-baslik); font-size: clamp(28px, 2.8vw, 38px); font-weight: 600; line-height: 1.08; letter-spacing: -0.008em; color: var(--murekkep); text-wrap: balance; }
.bg-one h2 a { color: inherit; text-decoration: none; }
.bg-one h2 a::after { content: ""; position: absolute; inset: 0; }
.bg-one h2 a:hover { color: var(--vurgu); }
.bg-one .bg-ozet { font-size: 16px; }

.bg-bos { margin: 0; padding: 32px; text-align: center; color: var(--soluk); background: var(--zemin); border-radius: 8px; }
.bg-bos[hidden] { display: none; }

/* Liste altı: kısa teklif çağrısı (tek satır kart) */
.bg-cagri { background: var(--zemin); border-top: 1px solid var(--cizgi); }
.bg-cagri-ic { padding-block: clamp(28px, 3.5vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.bg-cagri p { margin: 0; font-size: 16px; color: var(--ikincil); max-width: 60ch; }
.bg-cagri strong { color: var(--murekkep); }

@media (max-width: 1099px) {
  .bg-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .bg-one { grid-template-columns: 1fr; }
  .bg-one .bg-kart-gorsel { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 599px) {
  .bg-kartlar { grid-template-columns: 1fr; gap: 16px; }
  .bg-kart h2, .bg-kart h3 { font-size: 23px; }
}

/* ---------- Yazı sayfası ---------- */
.by-ust { background: var(--zemin); }
.by-ust-ic { padding-block: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px); display: grid; gap: 16px; max-width: 820px; }
.by-yol { font-size: 13.5px; color: var(--soluk); }
.by-yol ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.by-yol li + li::before { content: "/"; margin-right: 6px; color: var(--cizgi-guclu); }
.by-yol a { color: var(--soluk); text-decoration: none; }
.by-yol a:hover { color: var(--vurgu); text-decoration: underline; }
.by-ust h1 { margin: 0; font-family: var(--yazi-baslik); font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.04; letter-spacing: -0.012em; color: var(--murekkep); text-wrap: balance; }
.by-ozet { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ikincil); }
.by-kunye { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--soluk); padding-top: 14px; border-top: 1px solid var(--cizgi); }
.by-kunye .bg-kat { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vurgu); }
.by-kunye .by-ayrac { color: var(--cizgi-guclu); }

.by-kapak { margin: 0; }
.by-kapak-ic { max-width: 1000px; }
.by-kapak img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; }
.by-kapak figcaption { margin-top: 8px; font-size: 13px; color: var(--soluk); }

.by-govde { background: var(--zemin); }
.by-govde-ic { padding-block: clamp(28px, 3.5vw, 48px) clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 4vw, 64px); align-items: start; }
.by-icerik { min-width: 0; max-width: 72ch; font-size: 17px; line-height: 1.7; color: var(--murekkep); }
.by-icerik > * + * { margin-top: 1.1em; }
.by-icerik h2 { margin-top: 1.9em; font-family: var(--yazi-baslik); font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; line-height: 1.12; letter-spacing: -0.006em; color: var(--murekkep); }
.by-icerik h3 { margin-top: 1.5em; font-family: var(--yazi-baslik); font-size: 23px; font-weight: 600; line-height: 1.15; color: var(--murekkep); }
.by-icerik p { margin-bottom: 0; }
.by-icerik a { color: var(--vurgu); text-decoration: underline; text-underline-offset: 2px; }
.by-icerik ul, .by-icerik ol { padding-left: 1.3em; }
.by-icerik li + li { margin-top: 0.4em; }
.by-icerik strong { font-weight: 600; }
.by-icerik figure { margin: 1.6em 0; }
.by-icerik figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.by-icerik figcaption { margin-top: 8px; font-size: 13.5px; color: var(--soluk); }
.by-icerik blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--vurgu); color: var(--ikincil); font-size: 17px; }
.by-icerik table { width: 100%; border-collapse: collapse; font-size: 15px; }
.by-icerik th { text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soluk); padding: 0 8px 10px; border-bottom: 1px solid var(--cizgi-guclu); }
.by-icerik td { padding: 10px 8px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.by-icerik td:first-child { font-weight: 600; }

/* Kısa cevap kutusu: yazının ilk ekranında, Google öne çıkan parça için */
.by-kisa { padding: 18px 22px; background: var(--kart-zemin); border-radius: 8px; font-size: 16px; }
.by-kisa p { margin: 0; }
.by-kisa strong { display: block; margin-bottom: 4px; font-family: var(--yazi-baslik); font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--murekkep); }

/* Kaynak kutusu: dünya basınından haberlerde */
.by-kaynak { margin-top: 2em; padding: 16px 20px; border: 1px solid var(--cizgi); border-radius: 8px; font-size: 14.5px; color: var(--ikincil); }
.by-kaynak p { margin: 0; }
.by-kaynak strong { color: var(--murekkep); }

/* Yan sütun: yazı içi başlıklar, teklif kutusu */
.by-yan { position: sticky; top: 92px; display: grid; gap: 20px; }
.by-yan-kutu { padding: 20px 22px; background: var(--kart-zemin); border-radius: 8px; }
.by-yan-kutu p.by-yan-baslik { margin: 0 0 10px; font-family: var(--yazi-baslik); font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soluk); }
.by-yan-kutu ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.4; }
.by-yan-kutu ol a { color: var(--murekkep); text-decoration: none; }
.by-yan-kutu ol a:hover { color: var(--vurgu); }
.by-yan-kutu.koyu { background: var(--murekkep); color: var(--beyaz); }
.by-yan-kutu.koyu p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--giris-yazi); }
.by-yan-kutu.koyu p.by-yan-baslik { color: var(--vurgu-acik); margin-bottom: 10px; }
.by-yan-kutu.koyu .dugme { width: 100%; }

/* Yazar / imza */
.by-imza { margin-top: 2.4em; padding-top: 20px; border-top: 1px solid var(--cizgi); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 14.5px; color: var(--ikincil); }
.by-imza img { width: 48px; height: 48px; border-radius: 50%; background: var(--kart-zemin); padding: 8px; }
.by-imza strong { display: block; color: var(--murekkep); }

/* İlgili yazılar */
.by-ilgili { background: var(--kanvas); border-top: 1px solid var(--cizgi); }
.by-ilgili-ic { padding-block: clamp(32px, 4vw, 56px); display: grid; gap: 20px; }
.by-ilgili h2 { margin: 0; font-family: var(--yazi-baslik); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1.1; color: var(--murekkep); }

@media (max-width: 1099px) {
  .by-govde-ic { grid-template-columns: 1fr; }
  .by-yan { position: static; }
  .by-yan-kutu.icindekiler { display: none; }
}
@media (max-width: 599px) {
  .by-icerik { font-size: 16.5px; }
  .by-kapak img { aspect-ratio: 16 / 10; border-radius: 6px; }
}

/* Blog paylaş butonları */
.by-paylas-butonlar{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.by-paylas-butonlar a,.by-paylas-butonlar .by-kopya{font:inherit;font-size:14px;padding:7px 12px;border:1px solid var(--cizgi-guclu);border-radius:8px;background:var(--zemin);color:var(--murekkep);cursor:pointer;text-decoration:none;line-height:1;transition:border-color .15s,color .15s}
.by-paylas-butonlar a:hover,.by-paylas-butonlar .by-kopya:hover{border-color:var(--vurgu);color:var(--vurgu)}