/* Blog — yazı sayfaları ve dizin.
   styles.css'in üstüne biner: başlık çubuğu, altbilgi ve marka renkleri
   oradan gelir; buraya yalnız OKUMA biçimi eklenir. */

:root {
  --yazi-en: 44rem;
  --murekkep: #2A1119;
  --soluk: #6B5860;
  --bordo: #7D1F35;
  --altin: #E8A020;
  --krem: #FFFAF8;
}

.container--dar { max-width: var(--yazi-en); }

/* ---- Kahraman ---- */
.yazi-kahraman {
  position: relative;
  background: #3A0F1C center/cover no-repeat;
  color: var(--krem);
  padding: clamp(4rem, 12vw, 8rem) 0 clamp(2rem, 6vw, 3.5rem);
  margin-bottom: clamp(1.8rem, 5vw, 3rem);
}
/* Perde: fotoğrafın üstünde beyaz yazı her karede okunmalı. */
.yazi-kahraman::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,6,11,.55) 0%, rgba(20,6,11,.88) 100%);
}
.yazi-kahraman > * { position: relative; }
.yazi-kahraman--duz { background-image: linear-gradient(135deg,#7D1F35,#3A0F1C); }
.yazi-etiket {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #2A0A14;
  background: var(--altin); padding: .35rem .85rem; border-radius: 999px;
  text-decoration: none; margin-bottom: 1rem;
}
.yazi-kahraman h1 {
  font-size: clamp(1.85rem, 5.2vw, 3.1rem); line-height: 1.14;
  margin: 0 0 .9rem; letter-spacing: -.01em; color: #fff;
}
.yazi-ozet {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.55;
  margin: 0; color: rgba(255,250,248,.9); max-width: 34rem;
}

/* ---- Gövde ---- */
.yazi-govde { color: var(--murekkep); padding-bottom: 3rem; }
.blok { margin-bottom: 2.2rem; }
.yazi-govde h2 {
  font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.25;
  margin: 2.4rem 0 .7rem; letter-spacing: -.005em;
}
.blok:first-of-type h2 { margin-top: 0; }
/* Okuma ölçüsü: 44rem genişlik + 1.78 satır yüksekliği. Uzun metinde
   ikisi de şart; önceki dizgi 1.05rem/1.75'ti ve satırlar çok sıkışıktı. */
.yazi-govde p { font-size: 1.09rem; line-height: 1.78; margin: 0 0 1.15rem; }
.yazi-govde p:last-child { margin-bottom: 0; }

.yazi-govde figure { margin: 1.7rem 0 1.4rem; }
.yazi-govde figure img {
  width: 100%; height: auto; display: block; border-radius: 16px;
  box-shadow: 0 12px 30px rgba(42,17,25,.13);
}
.yazi-govde figcaption {
  font-size: .84rem; color: var(--soluk); margin-top: .55rem;
  padding-left: .2rem; border-left: 3px solid var(--altin);
  padding-left: .7rem; line-height: 1.5;
}

/* Vurgu cümlesi: görselin yerine geçen nefes. */
.vurgu {
  margin: 1.9rem 0; padding: 0 0 0 1.3rem;
  border-left: 4px solid var(--altin);
  font-size: clamp(1.2rem, 2.9vw, 1.55rem); line-height: 1.4;
  font-weight: 600; color: var(--bordo);
}

.video-sarmal {
  position: relative; padding-top: 56.25%; margin: 2.2rem 0 .6rem;
  border-radius: 16px; overflow: hidden; background: #1a0a10;
  box-shadow: 0 12px 30px rgba(42,17,25,.16);
}
.video-sarmal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-not { font-size: .86rem; color: var(--soluk); margin: 0 0 2rem; }

.yazi-soru {
  border-radius: 16px; padding: 1.2rem 1.4rem; margin: 2.2rem 0;
  background: rgba(125,31,53,.06); border: 1px solid rgba(125,31,53,.16);
}
.yazi-soru__etiket {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soluk); margin: 0 0 .35rem;
}
.yazi-soru__metin { font-weight: 650; margin: 0; font-size: 1.05rem; }

.kaynaklar { margin: 3rem 0 1rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(42,17,25,.12); }
.kaynaklar h2 { font-size: .95rem !important; margin: 1.2rem 0 .5rem !important;
  letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); }
.kaynaklar ol, .kaynaklar ul { padding-left: 1.15rem; margin: 0; }
.kaynaklar li { font-size: .85rem; line-height: 1.55; color: var(--soluk);
  margin-bottom: .4rem; }

/* ---- Uygulama çağrısı ---- */
.app-cta {
  border-radius: 20px; padding: 1.6rem 1.7rem; margin: 2.6rem 0;
  background: linear-gradient(135deg, #7D1F35 0%, #3A0F1C 100%);
  color: var(--krem);
}
.app-cta__baslik { font-weight: 700; font-size: 1.2rem; margin: 0 0 .45rem; }
.app-cta__metin { margin: 0 0 1.1rem; line-height: 1.62; font-size: .99rem;
  color: rgba(255,250,248,.9); }
.app-cta__butonlar { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; }
.app-cta .btn {
  display: inline-block; padding: .7rem 1.25rem; border-radius: 999px;
  font-weight: 650; text-decoration: none; font-size: .95rem;
  border: 2px solid rgba(255,250,248,.45); color: var(--krem);
}
.app-cta .btn--primary { background: var(--altin); border-color: var(--altin);
  color: #2A0A14; }

/* ---- Sonraki yazılar ---- */
.sonraki { margin: 3rem 0 1rem; }
.sonraki h2 { font-size: 1.1rem !important; margin-bottom: 1rem !important; }
.sonraki-izgara { display: grid; gap: .9rem; }
.sonraki-kart {
  display: block; padding: 1rem 1.15rem; border-radius: 14px;
  border: 1px solid rgba(42,17,25,.14); text-decoration: none;
  color: var(--murekkep); transition: border-color .15s, transform .15s;
}
.sonraki-kart:hover { border-color: var(--bordo); transform: translateY(-2px); }
.sonraki-kart__etiket { display: block; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--soluk); margin-bottom: .25rem; }
.sonraki-kart__baslik { font-weight: 650; line-height: 1.35; }

/* ---- Dizin ---- */
.blog-dizin { padding: clamp(2rem, 6vw, 3.5rem) 0 3rem; color: var(--murekkep); }
.blog-dizin h1 { font-size: clamp(2rem, 5.5vw, 3rem); margin: 0 0 .6rem; }
.blog-dizin .lede { font-size: 1.1rem; line-height: 1.6; color: var(--soluk);
  max-width: 38rem; margin: 0 0 2.4rem; }
.blog-izgara { display: grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.blog-kart__ort img { width: 100%; height: auto; display: block;
  border-radius: 14px; box-shadow: 0 8px 22px rgba(42,17,25,.12); }
.blog-kart__etiket { font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bordo); font-weight: 700;
  margin: .85rem 0 .25rem; }
.blog-kart h2 { font-size: 1.15rem; line-height: 1.32; margin: 0 0 .4rem; }
.blog-kart h2 a { color: inherit; text-decoration: none; }
.blog-kart h2 a:hover { color: var(--bordo); }
.blog-kart p { font-size: .93rem; line-height: 1.58; color: var(--soluk); margin: 0; }

/* Reklam alanı: birim kimliği gelmeden gizli (docs/web-ads-landing.md). */
.adzone { min-height: 300px; margin: 2.4rem 0; }
.adzone--pending { display: none; }

/* ---- Yana dayalı görseller ----
   Tam genişlik görsel her blokta metni ikiye bölüyor ve sayfa "resim,
   paragraf, resim, paragraf" diye tek düze akıyordu. Görsel artık küçük
   ve yana dayalı: metin yanından akıyor, tıklayınca büyüyor. */
.yazi-govde figure.yan { margin: .4rem 0 1rem; }
.yazi-govde figure.yan img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(42,17,25,.15);
  transition: transform .18s ease;
}
.yazi-govde figure.yan a.buyut { display: block; cursor: zoom-in; }
.yazi-govde figure.yan a.buyut:hover img { transform: scale(1.015); }
.yazi-govde figure.yan figcaption {
  font-size: .78rem; line-height: 1.45; margin-top: .45rem;
  border-left: 3px solid var(--altin); padding-left: .6rem; color: var(--soluk);
}
@media (min-width: 720px) {
  .yazi-govde figure.yan { width: 46%; }
  .yazi-govde figure.yan--sag { float: right; margin: .4rem 0 1rem 1.6rem; }
  .yazi-govde figure.yan--sol { float: left;  margin: .4rem 1.6rem 1rem 0; }
  .blok::after { content: ""; display: block; clear: both; }
}

/* ---- Büyüteç (lightbox) ----
   Kütüphanesiz: bağlantı görselin kendisine gidiyor, JavaScript araya
   girip katmanda açıyor. JS çalışmazsa bağlantı yine de görseli açar. */
.buyutec {
  position: fixed; inset: 0; z-index: 999; display: none;
  background: rgba(16,6,10,.92); align-items: center; justify-content: center;
  padding: 4vmin; cursor: zoom-out;
}
.buyutec.acik { display: flex; }
.buyutec img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.buyutec__kapat {
  position: absolute; top: 1.2rem; right: 1.4rem; font-size: 2rem;
  color: #fff; background: none; border: 0; cursor: pointer; line-height: 1;
}

/* ---- Kategori şeridi ---- */
.kat-serit { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 2rem; }
.kat-serit__oge {
  padding: .45rem 1rem; border-radius: 999px; text-decoration: none;
  font-size: .92rem; font-weight: 600; color: var(--bordo);
  border: 1.5px solid rgba(125,31,53,.25); background: #fff;
}
.kat-serit__oge:hover { border-color: var(--bordo); }
.kat-serit__oge.aktif { background: var(--bordo); color: #fff;
  border-color: var(--bordo); }

/* ---- Manşet ---- */
.mansset {
  display: grid; gap: 1.4rem; margin: 0 0 3rem; text-decoration: none;
  color: var(--murekkep); align-items: center;
}
@media (min-width: 860px) { .mansset { grid-template-columns: 1.15fr 1fr; gap: 2.2rem; } }
.mansset__ort img { width: 100%; height: auto; display: block;
  border-radius: 18px; box-shadow: 0 14px 34px rgba(42,17,25,.16); }
.mansset__etiket { font-size: .74rem; letter-spacing: .1em; font-weight: 700;
  text-transform: uppercase; color: var(--bordo); }
.mansset h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.2;
  margin: .5rem 0 .6rem; }
.mansset p { color: var(--soluk); line-height: 1.6; margin: 0 0 .8rem; }
.mansset__git { font-weight: 700; color: var(--bordo); }
.mansset:hover h2 { color: var(--bordo); }

/* ---- Kategori bölümleri ---- */
.kat-bolum { margin: 0 0 3rem; }
.kat-bolum__basi { border-top: 3px solid var(--bordo); padding-top: .8rem;
  margin-bottom: 1.4rem; }
.kat-bolum__basi h2 { font-size: 1.45rem; margin: 0 0 .2rem; }
.kat-bolum__basi h2 a { color: var(--bordo); text-decoration: none; }
.kat-bolum__basi p { color: var(--soluk); margin: 0; font-size: .95rem; }
.blog-kart h3 { font-size: 1.1rem; line-height: 1.32; margin: 0 0 .4rem; }
.blog-kart h3 a { color: inherit; text-decoration: none; }
.blog-kart h3 a:hover { color: var(--bordo); }
.blog-kart__etiket { display: inline-block; text-decoration: none; }
.blog-basi__ust { margin: 0 0 .4rem; }
.blog-basi__ust a { color: var(--bordo); font-weight: 600;
  text-decoration: none; font-size: .9rem; }

/* Kart ve manşet görselleri SABİT ORANDA kırpılır.
   Kaynak fotoğraflar farklı oranlarda (kimi dikey, kimi panoramik);
   olduğu gibi konunca ızgaradaki başlıklar farklı yüksekliklerde başlıyor
   ve sayfa tırtıklı görünüyordu. */
.blog-kart__ort img, .mansset__ort img {
  aspect-ratio: 16 / 10; object-fit: cover;
}
.mansset__ort img { aspect-ratio: 4 / 3; }
.blog-kart { display: flex; flex-direction: column; }
.blog-kart h3 { margin-top: 0; }

/* Yazı içindeki yan görsel de sabit oranda: metnin yanında akarken
   çok uzun bir dikey fotoğraf paragrafı ikiye bölüyordu. */
.yazi-govde figure.yan img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- Oyun rehberi (/rehber/) ---- */
.rehber-kahraman {
  background: linear-gradient(135deg, #7D1F35 0%, #3A0F1C 100%);
  color: var(--krem); padding: clamp(3rem, 9vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(1.8rem, 5vw, 2.8rem);
}
.rehber-kahraman h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.15;
  margin: 0 0 .8rem; color: #fff; }
.rehber-govde { color: var(--murekkep); padding-bottom: 3rem; }
.rehber-bolum { margin-bottom: 2.4rem; }
.rehber-bolum h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 .7rem; }
.rehber-bolum p { font-size: 1.05rem; line-height: 1.75; margin: 0 0 1rem; }
.tip-izgara { display: grid; gap: 1rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tip-kart { border: 1px solid rgba(42,17,25,.14); border-radius: 14px;
  padding: 1rem 1.15rem; background: #fff; }
.tip-kart h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--bordo); }
.tip-kart p { margin: 0; font-size: .93rem; line-height: 1.55;
  color: var(--soluk); }

.foot-social { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.sosyal-bag { display: inline-flex; align-items: center; gap: .42rem; }
.sosyal-bag svg { flex: none; opacity: .85; }
.sosyal-bag:hover svg { opacity: 1; }