/* =============================================================================
 * makale.css — tekil makale
 *
 * Gövde WordPress editöründen gelir; `.mu-prose` o çıktıyı tasarımın
 * tipografisine oturtur. Ölçüler 06-tekil-makale.html'den birebirdir.
 * Kapsam kökü .mulubey-app.
 * ========================================================================== */

/* ── Zırh ─────────────────────────────────────────────────────────────────
 * `.elementor img{height:auto}` (0,1,1) hem 21:9 kapak görselini hem yuvarlak
 * avatarları eziyor → (0,2,1) ile geri al.
 * NOT: kapak ve avatar görsellerinin ölçüleri artık tasarımdaki gibi INLINE
 * `style` ile de taşınıyor (inline her zaman kazanır); buradaki kurallar
 * `max-width` sıfırlaması ve yedek olarak duruyor.
 * ------------------------------------------------------------------------- */
.mulubey-app .mu-post-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 46%;
  display: block;
}
.mulubey-app .mu-avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* ── Gövde tipografisi ────────────────────────────────────────────────────
 * mulubey.css `:where(p,ul,ol,figure){margin:0}` ve `:where(ul,ol){list-style:none}`
 * kurallarını (0,1,0) burada (0,2,1) ile geçiyoruz.
 * ------------------------------------------------------------------------- */
.mulubey-app .mu-prose {
  font-size: 18px;
  line-height: 1.85;
  color: #42413A;
}

/* Tasarım: gövde <p> — 06-tekil-makale.html satır 72-77/130
 * style="margin:0 0 26px;font-size:18px;line-height:1.85;color:#42413A" */
.mulubey-app .mu-prose p {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.85;
  color: #42413A;
}

/* Dropcap — ilk paragrafa CSS ile; içerik regex'le parçalanmaz. */
.mulubey-app .mu-prose > p:first-of-type::first-letter {
  float: left;
  font-family: Newsreader, Georgia, serif;
  font-size: 66px;
  line-height: .82;
  padding: 6px 12px 0 0;
  color: #56583C;
}

/* Tasarım: gövde <h2> — satır 75/83/129/132
 * style="margin:44px 0 16px;font-family:Newsreader,Georgia,serif;font-weight:400;
 *        letter-spacing:-.015em;font-size:clamp(25.8px,2.3vw,35px);line-height:1.2;color:#24251F" */
.mulubey-app .mu-prose h2 {
  margin: 44px 0 16px;
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
  letter-spacing: -.015em;
  font-size: clamp(25.8px, 2.3vw, 35px);
  line-height: 1.2;
  color: #24251F;
}
.mulubey-app .mu-prose h2:first-child { margin-top: 0; }

/* Tasarım: gövde içi <h3> — adım listesi satır 88 ve SSS satır 144
 * style="margin:0 0 6px|8px;font-size:16.5px;font-weight:600;color:#24251F"
 * font-family bildirilmiyor → gövde sans'ı miras alınır (--mu-sans).
 * Akışta duran bir alt başlık olduğu için ÜST boşluk eklendi (tasarımda h3 hep
 * dolgulu bir kutunun içindedir, üst boşluğu kap verir). */
.mulubey-app .mu-prose h3 {
  margin: 34px 0 8px;
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.4;
  color: #24251F;
}

/* Tasarımda <h4> yok; h3'ün bir kademe altı olarak türetildi. */
.mulubey-app .mu-prose h4 {
  margin: 26px 0 6px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  color: #24251F;
}

.mulubey-app .mu-prose a {
  color: #56583C;
  text-decoration: underline;
  text-decoration-color: rgba(154, 122, 80, .45);
  text-underline-offset: 3px;
  transition: color .18s, text-decoration-color .18s;
}
.mulubey-app .mu-prose a:hover,
.mulubey-app .mu-prose a:focus-visible {
  color: #24251F;
  text-decoration-color: #9A7A50;
}

.mulubey-app .mu-prose strong,
.mulubey-app .mu-prose b { font-weight: 600; color: #24251F; }
.mulubey-app .mu-prose em,
.mulubey-app .mu-prose i { font-style: italic; }

/* Alıntı — tasarımın çift iç çerçeveli bloğu */
.mulubey-app .mu-prose blockquote {
  margin: 0 0 34px;
  padding: 34px 36px;
  background: linear-gradient(180deg, #FEFCF9, #F8F3E9);
  border: 1px solid #E3D9C8;
  border-radius: 2px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6), inset 0 0 0 5px rgba(154, 122, 80, .18);
}
.mulubey-app .mu-prose blockquote p {
  margin: 0;
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-size: 21.2px;
  line-height: 1.45;
  color: #24251F;
}
.mulubey-app .mu-prose blockquote p + p { margin-top: 14px; }
.mulubey-app .mu-prose blockquote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7A5730;
}

/* Madde listesi — tasarımın tek madde-listesi deyimi "Anahtar noktalar" kutusudur
 * (satır 121-125): kap style="display:flex;flex-direction:column;gap:12px",
 * madde style="display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;
 *              font-size:16px;line-height:1.7;color:#42413A",
 * işaret style="margin-top:8px;width:5px;height:5px;background:#9A7A50;transform:rotate(45deg)".
 * 16px sütun + 12px boşluk = 28px metin girintisi. */
.mulubey-app .mu-prose ul {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.mulubey-app .mu-prose ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.7;
  color: #42413A;
}
.mulubey-app .mu-prose ul li:last-child { margin-bottom: 0; }
.mulubey-app .mu-prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: #9A7A50;
  transform: rotate(45deg);
}

/* Sıralı liste — tasarımın "01 / 02 / 03" adım şeridi (satır 84-106)
 * kap    style="display:flex;flex-direction:column;margin-bottom:34px"
 * satır  style="display:flex;gap:18px;padding:18px 0;border-bottom:1px solid #E9E1D3"
 * numara style="flex:0 0 auto;font-family:Newsreader,Georgia,serif;font-size:20.2px;color:#7A5730;line-height:1.3"
 * başlık style="margin:0 0 6px;font-size:16.5px;font-weight:600;color:#24251F"
 * metin  style="margin:0;font-size:16px;line-height:1.75;color:#4B4A42"
 * `flex:0 0 auto` karşılığı grid'de `max-content` sütunudur. */
.mulubey-app .mu-prose ol {
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  counter-reset: mu-step;
  display: flex;
  flex-direction: column;
}
.mulubey-app .mu-prose ol > li {
  counter-increment: mu-step;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #E9E1D3;
  font-size: 16px;
  line-height: 1.75;
  color: #4B4A42;
}
.mulubey-app .mu-prose ol > li::before {
  content: counter(mu-step, decimal-leading-zero);
  font-family: Newsreader, Georgia, serif;
  font-size: 20.2px;
  line-height: 1.3;
  color: #7A5730;
}
.mulubey-app .mu-prose ol > li strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16.5px;
  font-weight: 600;
  color: #24251F;
}
.mulubey-app .mu-prose ol > li p { margin: 0 0 8px; font-size: 16px; line-height: 1.75; color: #4B4A42; }
.mulubey-app .mu-prose ol > li p:last-child { margin-bottom: 0; }
.mulubey-app .mu-prose ol ul,
.mulubey-app .mu-prose ul ul { margin: 10px 0 0; }
.mulubey-app .mu-prose ol ol { margin: 10px 0 0; }

/* Yazı içi görsel */
.mulubey-app .mu-prose figure { margin: 0 0 34px; }
.mulubey-app .mu-prose img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.mulubey-app .mu-prose figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6E6C60;
}
.mulubey-app .mu-prose .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.mulubey-app .mu-prose .alignleft { float: left; margin: 0 26px 20px 0; max-width: 50%; }
.mulubey-app .mu-prose .alignright { float: right; margin: 0 0 20px 26px; max-width: 50%; }
.mulubey-app .mu-prose .wp-caption { max-width: 100%; }

.mulubey-app .mu-prose hr {
  margin: 40px 0;
  border: 0;
  height: 1px;
  background: #E9E1D3;
}

/* Tablo — Kit'in gri td katmanı mulubey.css'te sıfırlandı, çizgileri geri ver. */
.mulubey-app .mu-prose table {
  margin: 0 0 34px;
  font-size: 15.5px;
  line-height: 1.6;
}
.mulubey-app .mu-prose th,
.mulubey-app .mu-prose td {
  padding: 12px 14px;
  border-bottom: 1px solid #E9E1D3;
  text-align: left;
  vertical-align: top;
}
.mulubey-app .mu-prose th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7A5730;
}

.mulubey-app .mu-prose code,
.mulubey-app .mu-prose kbd {
  font-size: .92em;
  padding: 2px 6px;
  border: 1px solid #E9E1D3;
  border-radius: 2px;
  background: #FBF8F2;
  color: #24251F;
}
.mulubey-app .mu-prose pre {
  margin: 0 0 30px;
  padding: 20px 22px;
  border: 1px solid #E3D9C8;
  border-radius: 2px;
  background: #FBF8F2;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.7;
}
.mulubey-app .mu-prose pre code { border: 0; padding: 0; background: none; }

.mulubey-app .mu-prose iframe,
.mulubey-app .mu-prose video { max-width: 100%; border-radius: 2px; }

/* Son bloğun alt boşluğu bir sonraki kutuyla çakışmasın. */
.mulubey-app .mu-prose > *:last-child { margin-bottom: 0; }

/* ── Duyarlı ──────────────────────────────────────────────────────────────
 * 1000px altında iki kolon tek kolona iner (mulubey.css [data-post]); başlık
 * bandındaki boş yan kolon o noktada yer kaplamamalı.
 * ------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .mulubey-app [data-rail] { display: none; }
}

@media (max-width: 640px) {
  .mulubey-app .mu-prose p { font-size: 17px; }
  .mulubey-app .mu-prose > p:first-of-type::first-letter { font-size: 58px; padding-right: 10px; }
  .mulubey-app .mu-prose ol > li { gap: 14px; }
}