/* ==================================================================
   ANASAYFA BLOG BOLUMU
   ------------------------------------------------------------------
   Tailwind build'inden bagimsiz, elle yazilmis; gerekcesi diger
   bolum CSS'leriyle ayni.

   YERLESIM NEDEN "1 BUYUK + 3 KUCUK"
   Eskiden dort yazi da esit boyutta, uc sutunlu izgaraya diziliyordu;
   dorduncu kart tek basina ikinci satirda kaliyor ve sayfa yarim
   kalmis gibi gorunuyordu. Simdi ilk yazi one cikan buyuk kart,
   kalan uc tanesi altta uclu sirada duruyor - dort icerik dort
   yuvaya tam oturuyor ve hiyerarsi de olusuyor.
================================================================== */

.bl{ background:#fff; padding:3.5rem 0; }
@media (min-width:1024px){ .bl{ padding:5rem 0; } }

.bl-kap{ max-width:80rem; margin:0 auto; padding:0 1rem; }
@media (min-width:640px){ .bl-kap{ padding:0 1.5rem; } }
@media (min-width:1024px){ .bl-kap{ padding:0 2rem; } }

/* ---------------- Baslik satiri ---------------- */
.bl-ust{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:2rem;
}
.bl-ust-sol{ max-width:40rem; }

.bl-etiket{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .8rem; border-radius:999px;
  background:#eff6ff; color:#1d4ed8;
  font-size:.7rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.bl-etiket i{ font-size:.68rem; }

.bl-baslik{
  margin:.85rem 0 0;
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  line-height:1.18; font-weight:800; letter-spacing:-.02em; color:#0f172a;
  text-wrap:balance;
}
.bl-alt{ margin:.6rem 0 0; font-size:.95rem; line-height:1.7; color:#64748b; }

.bl-tumu{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.7rem 1.2rem; border-radius:.7rem;
  border:1px solid #e2e8f0; background:#fff; color:#334155;
  font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.bl-tumu:hover{ border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }
.bl-tumu i{ font-size:.7rem; }

/* ---------------- Ortak kart ogeleri ---------------- */
.bl-kart{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.bl-kart:hover{
  border-color:#cbd5e1;
  box-shadow:0 18px 38px -20px rgba(15,23,42,.4);
  transform:translateY(-3px);
}

.bl-gorsel{
  position:relative; display:block; overflow:hidden;
  background:#f1f5f9;
}
.bl-gorsel img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.bl-kart:hover .bl-gorsel img{ transform:scale(1.05); }

/* Kategori rozeti gorselin uzerinde */
.bl-kat{
  position:absolute; left:.75rem; top:.75rem;
  padding:.28rem .68rem; border-radius:999px;
  background:rgba(255,255,255,.94);
  font-size:.68rem; font-weight:700; color:#1d4ed8;
  box-shadow:0 4px 10px -4px rgba(15,23,42,.4);
}

.bl-govde{ display:flex; flex-direction:column; flex:1 1 auto; padding:1.15rem 1.2rem 1.25rem; }

.bl-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .85rem;
  margin-bottom:.6rem;
  font-size:.73rem; color:#94a3b8;
}
.bl-meta span{ display:inline-flex; align-items:center; gap:.32rem; }
.bl-meta i{ font-size:.7rem; }

.bl-kart-baslik{
  margin:0;
  font-size:1.05rem; line-height:1.35; font-weight:700; letter-spacing:-.01em;
}
.bl-kart-baslik a{ color:#0f172a; text-decoration:none; }
.bl-kart:hover .bl-kart-baslik a{ color:#1d4ed8; }

.bl-ozet{
  margin:.55rem 0 0;
  font-size:.875rem; line-height:1.7; color:#64748b;
  /* Kart yukseklikleri birbirini tutsun diye ozet uc satirda kesiliyor */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.bl-devam{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:auto; padding-top:.9rem;
  font-size:.82rem; font-weight:700; color:#1d4ed8; text-decoration:none;
}
.bl-devam i{ font-size:.7rem; transition:transform .2s ease; }
.bl-kart:hover .bl-devam i{ transform:translateX(3px); }

/* ---------------- One cikan yazi ---------------- */
.bl-one{ margin-bottom:1.25rem; }
.bl-one .bl-gorsel{ aspect-ratio:16/10; }
.bl-one .bl-kart-baslik{ font-size:1.3rem; }
.bl-one .bl-ozet{ -webkit-line-clamp:4; font-size:.925rem; }

/* Genis ekranda gorsel solda, metin sagda */
@media (min-width:900px){
  .bl-one .bl-kart{ display:grid; grid-template-columns:1.15fr 1fr; align-items:stretch; }
  .bl-one .bl-gorsel{ aspect-ratio:auto; height:100%; min-height:19rem; }
  .bl-one .bl-govde{ padding:1.9rem 2rem; justify-content:center; }
  .bl-one .bl-kart-baslik{ font-size:1.55rem; line-height:1.25; }
}

.bl-one-rozet{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-bottom:.7rem; align-self:flex-start;
  padding:.25rem .6rem; border-radius:.4rem;
  background:#0f172a; color:#fff;
  font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}

/* ---------------- Alttaki uclu sira ---------------- */
.bl-izgara{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:1.25rem;
  align-items:stretch;
}
.bl-izgara .bl-gorsel{ aspect-ratio:16/10; }

@media (prefers-reduced-motion:reduce){
  .bl-kart:hover{ transform:none; }
  .bl-gorsel img,.bl-devam i{ transition:none; }
}