/* ==========================================================================
   BLOG (bloglar.php / blogyazi.php) - yalnizca blog sayfalarinda yuklenir.
   Renkler sitenin paletinden: #e31e25 (kirmizi), #2b2a28 (koyu), #f2f2f2 (gri)
   Yon icin mantiksal ozellikler (inline-start/end) kullanildi: Arapca (rtl)
   sayfada madde isaretleri ve kenarliklar kendiliginden saga gecer.
   ========================================================================== */

:root {
  --blog-kirmizi: #e31e25;
  --blog-koyu: #2b2a28;
  --blog-gri: #f2f2f2;
  --blog-cizgi: #e4e4e4;
  --blog-soluk: #6b6a67;
}

/* ---------- Tarih etiketi ---------- */
.blog-tarih {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400; letter-spacing: .02em;
  color: var(--blog-soluk);
}
.blog-tarih [uk-icon] { color: var(--blog-kirmizi); }

/* ---------- Liste kartlari ---------- */
.blog-kart {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--blog-cizgi);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.blog-kart:hover { border-color: transparent; box-shadow: 0 14px 34px rgba(43, 42, 40, .12); transform: translateY(-3px); }
.blog-kart-gorsel { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--blog-gri); }
.blog-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-kart-govde { padding: 20px 22px 6px; flex: 1 1 auto; }
.blog-kart-baslik { margin: 8px 0 10px; font-size: 19px; line-height: 1.35; font-weight: 500; }
.blog-kart-baslik a { color: var(--blog-koyu); text-decoration: none; }
.blog-kart-baslik a:hover { color: var(--blog-kirmizi); }
.blog-kart-ozet { margin: 0; font-size: 14.5px; line-height: 1.65; color: #55544f; }

.blog-devam {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px 22px 22px; font-size: 14px; font-weight: 500;
  color: var(--blog-kirmizi) !important; text-decoration: none !important;
}
.blog-devam [uk-icon] { transition: transform .2s ease; }
.blog-devam:hover [uk-icon] { transform: translateX(4px); }
[dir="rtl"] .blog-devam [uk-icon] { transform: scaleX(-1); }
[dir="rtl"] .blog-devam:hover [uk-icon] { transform: scaleX(-1) translateX(4px); }

.blog-sayfalama > * > * { color: var(--blog-koyu); font-size: 15px; }
.blog-sayfalama > .uk-active > * { color: #fff; background: var(--blog-kirmizi); padding: 5px 12px; }

/* ---------- Detay: baslik alani ---------- */
.blog-yazi-ust { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--blog-cizgi); }
.blog-yazi-baslik {
  margin: 0 0 12px; color: var(--blog-koyu);
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; font-weight: 600;
}
.blog-yazi-gorsel { margin: 0 0 30px; }
.blog-yazi-gorsel img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; }

/* ---------- Detay: galeri ---------- */
.blog-galeri { margin-top: 44px; }
.blog-galeri a { aspect-ratio: 4 / 3; background: var(--blog-gri); }
.blog-galeri img { width: 100%; height: 100%; object-fit: cover; }
.blog-bolum-baslik { font-size: 22px; font-weight: 500; margin: 0 0 16px; color: var(--blog-koyu); }

/* ---------- Detay: sol sutun (son yazilar) ---------- */
.blog-yan { background: var(--blog-gri); padding: 24px 20px 6px; }
.blog-yan-baslik {
  margin: 0 0 16px; padding-bottom: 12px; font-size: 18px; font-weight: 600; color: var(--blog-koyu);
  border-bottom: 2px solid var(--blog-kirmizi);
}
.blog-yan-liste { list-style: none; margin: 0; padding: 0; }
.blog-yan-liste > li + li { border-top: 1px solid #e0e0e0; }
.blog-yan-oge { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; text-decoration: none !important; }
.blog-yan-gorsel { flex: 0 0 84px; height: 64px; overflow: hidden; background: #fff; }
.blog-yan-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.blog-yan-oge:hover .blog-yan-gorsel img { transform: scale(1.06); }
.blog-yan-metin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.blog-yan-oge-baslik {
  color: var(--blog-koyu); font-size: 14.5px; line-height: 1.4; font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-yan-oge:hover .blog-yan-oge-baslik { color: var(--blog-kirmizi); }
.blog-yan-metin time { font-size: 12px; color: var(--blog-soluk); }
.blog-yan .blog-devam { margin: 6px 0 18px; }

/* ==========================================================================
   PANELDEN GIRILEN ICERIK (editor HTML'i)
   Baslik hiyerarsisi: sayfada tek H1 yazi basligidir; icerikte H2'den baslanir.
   Editor H1 uretse bile bolum basligi boyutunda gosterilir.
   ========================================================================== */
.blog-icerik { font-size: 16.5px; line-height: 1.8; color: #3a3935; font-weight: 300; overflow-wrap: break-word; }
.blog-icerik > :first-child { margin-top: 0; }
.blog-icerik > :last-child { margin-bottom: 0; }
.blog-icerik p { margin: 0 0 1.15em; }
.blog-icerik strong, .blog-icerik b { font-weight: 600; color: var(--blog-koyu); }

.blog-icerik h1, .blog-icerik h2, .blog-icerik h3,
.blog-icerik h4, .blog-icerik h5, .blog-icerik h6 {
  color: var(--blog-koyu); line-height: 1.3; margin: 1.8em 0 .6em; text-transform: none;
}
.blog-icerik h1, .blog-icerik h2 {
  font-size: 27px; font-weight: 600;
  padding-inline-start: 14px; border-inline-start: 4px solid var(--blog-kirmizi);
}
.blog-icerik h3 { font-size: 22px; font-weight: 600; }
.blog-icerik h4 { font-size: 19px; font-weight: 600; }
.blog-icerik h5 { font-size: 17px; font-weight: 600; }
.blog-icerik h6 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--blog-soluk); }

/* Madde isaretli liste: kirmizi kare isaret */
.blog-icerik ul, .blog-icerik ol { margin: 0 0 1.3em; padding: 0; }
.blog-icerik ul { list-style: none; }
.blog-icerik ul > li { position: relative; padding-inline-start: 26px; margin-bottom: .5em; }
.blog-icerik ul > li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: .72em;
  width: 8px; height: 8px; background: var(--blog-kirmizi); transform: rotate(45deg);
}
/* ic ice liste: bos daire */
.blog-icerik ul ul, .blog-icerik ol ul { margin: .5em 0 .3em; }
.blog-icerik ul ul > li::before { width: 7px; height: 7px; background: transparent; border: 1.5px solid var(--blog-kirmizi); border-radius: 50%; transform: none; }

/* Numarali liste: kirmizi daire icinde numara */
.blog-icerik ol { list-style: none; counter-reset: blog-sayac; }
.blog-icerik ol > li { position: relative; padding-inline-start: 40px; margin-bottom: .7em; counter-increment: blog-sayac; }
.blog-icerik ol > li::before {
  content: counter(blog-sayac); position: absolute; inset-inline-start: 0; top: .2em;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blog-kirmizi); color: #fff; font-size: 13px; font-weight: 600; line-height: 26px; text-align: center;
}
.blog-icerik ol ol { margin: .6em 0 .3em; }
.blog-icerik li > p { margin: 0; }

.blog-icerik a { color: var(--blog-kirmizi); text-decoration: underline; text-underline-offset: 3px; }
.blog-icerik a:hover { color: var(--blog-koyu); }

.blog-icerik blockquote {
  margin: 1.6em 0; padding: 18px 24px; background: var(--blog-gri);
  border-inline-start: 4px solid var(--blog-kirmizi);
  font-size: 18px; font-style: italic; color: var(--blog-koyu);
}
.blog-icerik blockquote p:last-child { margin-bottom: 0; }

.blog-icerik img { max-width: 100%; height: auto !important; }
.blog-icerik figure { margin: 1.6em 0; }
.blog-icerik figcaption { font-size: 13px; color: var(--blog-soluk); margin-top: 6px; }
.blog-icerik iframe, .blog-icerik video { max-width: 100%; }
.blog-icerik iframe[src*="youtube"], .blog-icerik iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.blog-icerik hr { border: 0; border-top: 1px solid var(--blog-cizgi); margin: 2em 0; }

.blog-icerik table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; }
.blog-icerik th, .blog-icerik td { border: 1px solid var(--blog-cizgi); padding: 10px 12px; text-align: start; }
.blog-icerik th, .blog-icerik thead td { background: var(--blog-koyu); color: #fff; font-weight: 500; }
.blog-icerik tbody tr:nth-child(even) { background: #fafafa; }

/* ---------- Mobil ---------- */
@media (max-width: 959px) {
  .blog-yan { margin-top: 10px; }
}
@media (max-width: 639px) {
  .blog-icerik { font-size: 15.5px; line-height: 1.75; }
  .blog-icerik h1, .blog-icerik h2 { font-size: 22px; }
  .blog-icerik h3 { font-size: 19px; }
  .blog-icerik h4 { font-size: 17px; }
  .blog-kart-baslik { font-size: 17px; }
  .blog-icerik table { display: block; overflow-x: auto; }
}