/* ==========================================================================
   SAYFA — BLOG (liste + detay)
   ========================================================================== */

.mu-blog { padding-block: clamp(28px, 4vw, 48px) clamp(64px, 9vw, 112px); }

.mu-blog__arac {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--cizgi);
}
.mu-blog__filtre { gap: 8px; }
.mu-blog__ara { min-width: 240px; }
.mu-blog__ara .mu-girdi {
  --alan-bg: rgba(255, 255, 255, 0.05);
  --alan-cizgi: var(--lacivert-600);
  min-height: 44px;
}

/* --------------------------------------------------------------- ızgara */
.mu-blog-izgara { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) { .mu-blog-izgara { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .mu-blog-izgara { grid-template-columns: repeat(3, 1fr); } }

.mu-yazi-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-2), transform var(--t-2) var(--e-cik);
}
.mu-yazi-kart:hover { border-color: var(--kirmizi-500); transform: translateY(-4px); }
.mu-yazi-kart__gorsel { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--zemin-2); }
.mu-yazi-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-3) var(--e-cik); }
.mu-yazi-kart:hover .mu-yazi-kart__gorsel img { transform: scale(1.05); }
.mu-yazi-kart__kategori {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-metin);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin);
  background: rgba(11, 29, 51, 0.78);
  border: 1px solid var(--cizgi);
  padding: 5px 9px;
  border-radius: var(--r-xs);
  backdrop-filter: blur(4px);
}
.mu-yazi-kart__govde { padding: var(--sp-5); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mu-yazi-kart__bas {
  font-family: var(--font-baslik);
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--metin);
}
.mu-yazi-kart__bas a::after { content: ""; position: absolute; inset: 0; }
.mu-yazi-kart__ozet {
  font-size: var(--fs-sm);
  color: var(--metin-2);
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mu-yazi-kart__alt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px dashed var(--cizgi);
  font-family: var(--font-metin);
  font-size: var(--fs-micro);
  color: var(--metin-3);
}

/* Öne çıkan yazı */
.mu-yazi-kart--one {
  grid-column: 1 / -1;
  flex-direction: column;
}
@media (min-width: 860px) {
  .mu-yazi-kart--one { flex-direction: row; align-items: stretch; }
  .mu-yazi-kart--one .mu-yazi-kart__gorsel { width: 52%; aspect-ratio: auto; min-height: 320px; }
  .mu-yazi-kart--one .mu-yazi-kart__govde { justify-content: center; padding: clamp(24px, 3.4vw, 48px); }
  .mu-yazi-kart--one .mu-yazi-kart__bas { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
  .mu-yazi-kart--one .mu-yazi-kart__ozet { font-size: var(--fs-lg); -webkit-line-clamp: 4; line-clamp: 4; }
}

/* ============================================================ DETAY === */
.mu-okuma-cubugu {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 1);
  background: transparent;
  pointer-events: none;
}
.mu-okuma-cubugu span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--kirmizi-600), var(--kirmizi-500));
  transition: width 80ms linear;
}

.mu-yazi-bas {
  position: relative;
  overflow: hidden;
  padding-block: clamp(36px, 6vw, 76px) clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--cizgi);
}
.mu-yazi-bas__ic { position: relative; display: grid; gap: var(--sp-4); max-width: 800px; }
.mu-yazi-bas h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; }
.mu-yazi-bas__ozet { font-size: clamp(1.02rem, 2vw, 1.24rem); line-height: 1.68; color: var(--metin-2); max-width: 62ch; }
.mu-yazi-bas__meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--cizgi);
  font-family: var(--font-metin);
  font-size: var(--fs-xs);
  color: var(--metin-3);
}
.mu-yazi-bas__meta span { display: inline-flex; align-items: center; gap: 7px; }
.mu-yazi-bas__meta .mu-ikon { width: 14px; height: 14px; color: var(--kirmizi-500); }
.mu-yazi-bas__yazar strong { color: var(--metin); }

.mu-yazi-gorsel {
  margin-block: 0;
  border-bottom: 1px solid var(--cizgi);
  background: var(--zemin-2);
}
.mu-yazi-gorsel img { width: 100%; max-height: 420px; object-fit: cover; }

.mu-yazi-alan {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  padding-block: clamp(40px, 6vw, 72px);
  align-items: start;
}
@media (min-width: 1000px) { .mu-yazi-alan { grid-template-columns: minmax(0, 1fr) 260px; } }

.mu-yazi-yan { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: var(--sp-5); }
@media (max-width: 999px) { .mu-yazi-yan { position: static; } }
.mu-yazi-yan__bas {
  font-family: var(--font-metin);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-etiket);
  text-transform: uppercase;
  color: var(--metin-3);
  margin-bottom: var(--sp-3);
}
.mu-yazi-yan__liste { display: grid; gap: var(--sp-4); }
.mu-yazi-yan__oge { display: grid; gap: 5px; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--cizgi); }
.mu-yazi-yan__oge:last-child { border-bottom: 0; padding-bottom: 0; }
.mu-yazi-yan__kat { font-family: var(--font-metin); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kirmizi-500); }
.mu-yazi-yan__ad { font-size: var(--fs-sm); font-weight: 700; color: var(--metin); line-height: 1.35; }
.mu-yazi-yan__ad:hover { color: var(--kirmizi-500); }

.mu-yazi-paylas { display: flex; gap: 8px; }
.mu-yazi-paylas a, .mu-yazi-paylas button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  color: var(--metin-2);
  transition: all var(--t-2);
}
.mu-yazi-paylas a:hover, .mu-yazi-paylas button:hover {
  border-color: var(--kirmizi-500); color: var(--kirmizi-500); background: var(--kirmizi-sis);
}
.mu-yazi-paylas .mu-ikon { width: 17px; height: 17px; }

.mu-yazi-son {
  background: var(--zemin-2);
  border-top: 1px solid var(--cizgi);
  padding-block: clamp(48px, 7vw, 88px);
  text-align: center;
}
.mu-yazi-son .mu-etiket { justify-content: center; }
.mu-yazi-son h2 { margin-block: var(--sp-3) var(--sp-4); font-size: var(--fs-h2); }
.mu-yazi-son p { max-width: 52ch; margin-inline: auto; }
.mu-yazi-son__aksiyon { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); }

.mu-yazi-yukleniyor { padding-block: clamp(48px, 8vw, 96px); display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.mu-yazi-yukleniyor h1 { font-size: var(--fs-h2); }