/* ==================================================
   HERO V4 – WIDE EDITORIAL (FINAL)
   - Container: .container-wide (1440)
   - İçte boxed off-white panel
================================================== */

.hero-v4{
  background:transparent;
  padding:20px 0 24px;
  margin-top:10px; /* core üstte de var, home’da sabitle */
}

/* Boxed panel: artık container'ı değil grid'i box'lıyoruz */
.hero-v4 .hero-grid-v4{
  background:#f7f8fa;                 /* off white */
  border-radius:20px;
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  padding:15px;
  padding-bottom:10px;
  box-sizing:border-box;
}

/* GRID */
.hero-grid-v4{
  display:grid;
  grid-template-columns: 1.6fr 0.8fr 1fr;
  gap:24px;
}

/* SOL – BÜYÜK */
.hero-v4 .hero-big{
  height:460px;
  border-radius:16px;
}

/* ORTA – 2 KÜÇÜK */
.hero-v4 .hero-middle{
  display:grid;
  grid-template-rows: repeat(2, 1fr);
  gap:20px;
}

.hero-v4 .hero-middle .hero-small{
  height: calc((460px - 20px) / 2);
  border-radius:16px;
}

/* SAĞ – 4 HABER LİSTE */
.hero-v4 .hero-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Liste item */
.hero-v4 .hero-list-item{
  padding:8px;
  border-radius:12px;
  background:#fff;
  transition: background .25s ease, transform .25s ease;
  position:relative;
}

.hero-v4 .hero-list-item a{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
}

.hero-v4 .hero-list-item img{
  width:90px;
  height:90px;
  flex-shrink:0;
  object-fit:cover;
  border-radius:12px;
}

.hero-v4 .hero-list-text{
  display:flex;
  flex-direction:column;
}

.hero-v4 .hero-list-text h4{
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  margin:0 0 4px;
  color:#111;
}

.hero-v4 .hero-list-meta{
  display:flex;
  gap:6px;
  font-size:12px;
  color:#999;
  align-items:center;
}

.hero-v4 .hero-list-cat{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  color:#c40000;
}

/* Hover */
@media (hover:hover){
  .hero-v4 .hero-list-item:hover{
    background:rgba(0,0,0,.045);
    transform: translateX(4px);
  }
  .hero-v4 .hero-list-item:hover h4{
    color:#c40000;
  }
}

/* Divider */
.hero-v4 .hero-list-item::after{
  content:"";
  position:absolute;
  left:104px; /* thumbnail sonrası */
  right:12px;
  bottom:-7px;
  height:1px;
  background:rgba(0,0,0,0.12);
}
.hero-v4 .hero-list-item:last-child::after{ display:none; }

/* Mobile */
@media (max-width:992px){
  .hero-grid-v4{
    grid-template-columns:1fr;
  }

  .hero-v4 .hero-big,
  .hero-v4 .hero-middle .hero-small{
    height:240px;
  }

  /* Mobil sıralama */
  .hero-v4 .hero-big{ order:1; }
  .hero-v4 .hero-middle{ order:2; }
  .hero-v4 .hero-right{ order:3; }

  /* Divider mobile’da gereksiz kalabalık */
  .hero-v4 .hero-list-item::after{ display:none; }
}
/* ======================================================
   HERO V4 – ONLY UP HOVER
   (büyük + 2 orta kart sadece yukarı kalkar)
====================================================== */

.home-hero.hero-v4 .hero-item.hero-big,
.home-hero.hero-v4 .hero-middle .hero-item.hero-small{
  transition: transform .28s ease, box-shadow .28s ease;
  will-change: transform;
}

.home-hero.hero-v4 .hero-item.hero-big:hover,
.home-hero.hero-v4 .hero-middle .hero-item.hero-small:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

/* görsel zoom hafif kalsın istersen */
.home-hero.hero-v4 .hero-item.hero-big img,
.home-hero.hero-v4 .hero-middle .hero-item.hero-small img{
  transition: transform .35s ease;
}

.home-hero.hero-v4 .hero-item.hero-big:hover img,
.home-hero.hero-v4 .hero-middle .hero-item.hero-small:hover img{
  transform: scale(1.04);
}

/* mobilde hover efektini kapat */
@media (max-width:1024px){
  .home-hero.hero-v4 .hero-item.hero-big:hover,
  .home-hero.hero-v4 .hero-middle .hero-item.hero-small:hover{
    transform:none;
    box-shadow:none;
  }
  .home-hero.hero-v4 .hero-item.hero-big:hover img,
  .home-hero.hero-v4 .hero-middle .hero-item.hero-small:hover img{
    transform:none;
  }
}
/* ======================================================
   HERO V4 – RIGHT LIST TEXT JITTER FIX (4 küçük kart)
====================================================== */

/* Metin alanı sabit kalsın, hover'da reflow olmasın */
.home-hero.hero-v4 .hero-list-item .hero-list-text,
.home-hero.hero-v4 .hero-list-item .hero-list-text h4,
.home-hero.hero-v4 .hero-list-item .hero-list-meta{
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Hover'da font-weight/padding/border değişimi varsa kilitle */
.home-hero.hero-v4 .hero-list-item a{
  display: grid;               /* metin/görsel oynayıp titremesin */
  grid-template-columns: auto 1fr;
  align-items: center;
}

/* Hover efekti sadece kartın genelinde minik yükselsin (metin sabit) */
.home-hero.hero-v4 .hero-list-item{
  transition: transform .22s ease;
  will-change: transform;
}
.home-hero.hero-v4 .hero-list-item:hover{
  transform: translateY(-3px);
}

/* Eğer listede görsel varsa, zoom sadece görsele gelsin */
.home-hero.hero-v4 .hero-list-item img{
  transition: transform .3s ease;
  will-change: transform;
}
.home-hero.hero-v4 .hero-list-item:hover img{
  transform: scale(1.03);
}

/* Metin tarafına ASLA transform verme (varsa override et) */
.home-hero.hero-v4 .hero-list-item:hover .hero-list-text,
.home-hero.hero-v4 .hero-list-item:hover .hero-list-text h4{
  transform: none !important;
}
/* ======================================================
   HERO V4 – RIGHT LIST PREMIUM HOVER (4 küçük kart)
   - hafif sağa + yukarı
   - yazı jitter fix dahil
====================================================== */

/* Kart temel */
.home-hero.hero-v4 .hero-list-item{
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
}

/* Hover hareket */
.home-hero.hero-v4 .hero-list-item:hover{
  transform: translate3d(4px,-4px,0);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Link sabit blok */
.home-hero.hero-v4 .hero-list-item a{
  display:flex;
  align-items:center;
}

/* Yazı jitter fix */
.home-hero.hero-v4 .hero-list-text,
.home-hero.hero-v4 .hero-list-text h4,
.home-hero.hero-v4 .hero-list-meta{
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

/* Hover'da metne transform gelmesin */
.home-hero.hero-v4 .hero-list-item:hover .hero-list-text,
.home-hero.hero-v4 .hero-list-item:hover h4{
  transform:none !important;
}

/* Görsel varsa minik zoom */
.home-hero.hero-v4 .hero-list-item img{
  transition: transform .3s ease;
}
.home-hero.hero-v4 .hero-list-item:hover img{
  transform: scale(1.03);
}
/* HERO V4 – Badge daha dengeli */

.home-hero.hero-v4 .hero-item .hero-cat{
  background:#b11217;
  color:#fff;

  padding:4px 10px;   /* daha kompakt */
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;

  border-radius:5px;
  text-transform:uppercase;

  top:14px;
  left:14px;
}

.home-hero.hero-v4 .hero-item.hero-big .hero-cat{
  padding:5px 12px;   /* big için hafif büyük ama abartısız */
  font-size:11px;
}
/* HERO V4 – Right list meta divider + stronger category */
.home-hero.hero-v4 .hero-list-meta{
  gap:10px;                 /* biraz nefes */
}

.home-hero.hero-v4 .hero-list-meta time{
  position:relative;
  padding-right:10px;
}

.home-hero.hero-v4 .hero-list-meta time::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:12px;
  background:rgba(0,0,0,.22);
}

.home-hero.hero-v4 .hero-list-cat{
  font-weight:900;          /* daha kalın */
  letter-spacing:.3px;
}