/* ======================================================
   HERO V1 – LAYOUT + PREMIUM HOVER (SAFE)
====================================================== */

.home-hero.hero-v1 { padding: 16px 0; }

.home-hero.hero-v1 .hero-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* Büyük kart */
.home-hero.hero-v1 .hero-big{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* 4 küçük alan */
.home-hero.hero-v1 .hero-small-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.home-hero.hero-v1 .hero-small{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 150px;
}

/* Link + görsel */
.home-hero.hero-v1 .hero-big > a,
.home-hero.hero-v1 .hero-small > a{
  display:block;
  height: 100%;
}

.home-hero.hero-v1 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Kategori etiketi */
.home-hero.hero-v1 .hero-cat{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Overlay */
.home-hero.hero-v1 .hero-overlay{
  position:absolute;
  inset: 0;
  z-index: 2;
  display:flex;
  align-items:flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 60%);
}

.home-hero.hero-v1 .hero-overlay h2,
.home-hero.hero-v1 .hero-overlay h3{
  margin: 0;
  color:#fff;
  line-height: 1.15;
}

/* ======================================================
   PREMIUM HOVER (V4 hissi)
====================================================== */
.home-hero.hero-v1 .hero-big,
.home-hero.hero-v1 .hero-small{
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
}

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

.home-hero.hero-v1 .hero-big img,
.home-hero.hero-v1 .hero-small img{
  transition: transform .35s ease;
  will-change: transform;
}

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

/* Yazı titremesin */
.home-hero.hero-v1 .hero-overlay h2,
.home-hero.hero-v1 .hero-overlay h3{
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Mobil */
@media (max-width: 1024px){
  .home-hero.hero-v1 .hero-grid{
    grid-template-columns: 1fr;
  }
  .home-hero.hero-v1 .hero-small-wrap{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px){
  .home-hero.hero-v1 .hero-small-wrap{
    grid-template-columns: 1fr;
  }
  .home-hero.hero-v1 .hero-small{ min-height: 180px; }
}
/* ======================================================
   HERO V1 – BEYAZ PANEL (V1 hissi)
====================================================== */

/* Beyaz zemin panel */
.home-hero.hero-v1 .hero-grid{
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Panel içinde boşluklar daha derli toplu */
.home-hero.hero-v1 .hero-grid{
  gap: 16px;
}

/* Küçük kartların grid gap’i */
.home-hero.hero-v1 .hero-small-wrap{
  gap: 16px;
}

/* Panel beyaz olunca, kartlar panelin içinde daha premium dursun */
.home-hero.hero-v1 .hero-big,
.home-hero.hero-v1 .hero-small{
  border-radius: 14px; /* panel radius’dan biraz küçük */
}


/* ======================================================
   HERO V1 – BIG DARALSIN, KÜÇÜKLER GENİŞLESİN
====================================================== */

/* Sağ tarafı büyüt (küçükler), sol tarafı küçült (büyük) */
.home-hero.hero-v1 .hero-grid{
  grid-template-columns: 0.95fr 1.05fr; /* BIG daha dar, SMALL alanı daha geniş */
}

/* Büyük kartın “çok yayılma” hissini azalt */
.home-hero.hero-v1 .hero-big{
  min-height: 360px; /* istersen 340 yap */
}

/* Küçük kartlar geniş alanı daha iyi kullansın */
.home-hero.hero-v1 .hero-small{
  min-height: 230px;
}

/* Ultra geniş ekranlarda daha da dengeli */
@media (min-width: 1400px){
  .home-hero.hero-v1 .hero-grid{
    grid-template-columns: 1fr 1fr;
  }
  .home-hero.hero-v1 .hero-big{ min-height: 380px; }
  .home-hero.hero-v1 .hero-small{ min-height: 245px; }
}
/* ======================================================
   HERO V1 – ALT 8 HABER GRID
====================================================== */
.home-hero.hero-v1 .hero-v1-bottom-wrap{
  grid-column:1 / -1;
  margin-top:2px;
  padding-top:14px;
  border-top:1px solid rgba(15,23,42,.08);
}
.home-hero.hero-v1 .hero-v1-bottom-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.home-hero.hero-v1 .hero-v1-bottom-card{
  min-width:0;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 6px 16px rgba(15,23,42,.05);
  transition:transform .22s ease, box-shadow .22s ease;
}
.home-hero.hero-v1 .hero-v1-bottom-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 24px rgba(15,23,42,.10);
}
.home-hero.hero-v1 .hero-v1-bottom-card a{display:block;height:100%;color:inherit;text-decoration:none;}
.home-hero.hero-v1 .hero-v1-bottom-media{position:relative;aspect-ratio:16/10;background:#e9ebef;overflow:hidden;}
.home-hero.hero-v1 .hero-v1-bottom-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.home-hero.hero-v1 .hero-v1-bottom-card:hover .hero-v1-bottom-media img{transform:scale(1.04);}
.home-hero.hero-v1 .hero-v1-bottom-badge{
  position:absolute;left:10px;top:10px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:24px;padding:0 10px;border-radius:999px;
  background:#111;color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
}
.home-hero.hero-v1 .hero-v1-bottom-body{padding:12px 12px 13px;}
.home-hero.hero-v1 .hero-v1-bottom-meta{margin-bottom:7px;}
.home-hero.hero-v1 .hero-v1-bottom-cat{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#c40000;}
.home-hero.hero-v1 .hero-v1-bottom-body h4{margin:0 0 7px;font-size:15px;line-height:1.35;color:#111;transition:color .2s ease;}
.home-hero.hero-v1 .hero-v1-bottom-card:hover .hero-v1-bottom-body h4{color:#c40000;}
.home-hero.hero-v1 .hero-v1-bottom-body p{margin:0;font-size:13px;line-height:1.5;color:#666;}
@media (max-width: 1100px){
  .home-hero.hero-v1 .hero-v1-bottom-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 600px){
  .home-hero.hero-v1 .hero-v1-bottom-grid{grid-template-columns:1fr;}
}