/* ==========================================================================
   Anasayfa · GÜNCEL — başlık satırı + 1 büyük (fotoğraf üstü yazılı) + 3 küçük (beyaz) haber kartı
   Referans 1440 px: kap 1224 px, kart yüksekliği ≈ 247 px, büyük ≈ 540 px, küçük ≈ 211 px, boşluk 14 px
   ========================================================================== */
.cx-s--guncel { background: #fff; padding: 6px 0 8px; }

.cx-guncel__head { margin-bottom: 12px; gap: 4px 18px; }
.cx-guncel__head h2 { font-size: calc(23px * var(--ax-fz, 1)); }
.cx-guncel__head .cx-sec-h__t { flex: none; }
.cx-guncel__lead { margin: 0; font-size: calc(11px * var(--ax-fz, 1)); font-weight: 500; line-height: 1.4; color: #566b97; }
.cx-guncel__head .cx-more { font-size: calc(10.5px * var(--ax-fz, 1)); color: var(--cx-blue-500); }
.cx-guncel__head .cx-more i { font-size: calc(10px * var(--ax-fz, 1)); }

.cx-guncel__grid {
  display: grid; gap: 14px; height: clamp(232px, 17.2vw, 262px);
  grid-template-columns: minmax(0, 2.55fr) repeat(3, minmax(0, 1fr));
}
.cx-guncel__grid--n1 { grid-template-columns: minmax(0, 1fr); }
.cx-guncel__grid--n2 { grid-template-columns: minmax(0, 2.55fr) minmax(0, 1fr); }
.cx-guncel__grid--n3 { grid-template-columns: minmax(0, 2.55fr) repeat(2, minmax(0, 1fr)); }
.cx-guncel__a { color: inherit; }
.cx-guncel__a::after { content: ""; position: absolute; inset: 0; z-index: 3; }   /* tüm kart bağlantı */
.cx-guncel__a:focus-visible { outline: 0; }

/* ── Büyük kart ───────────────────────────────────────────────────────── */
.cx-guncel__big {
  position: relative; min-width: 0; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: calc(16px * var(--ax-rs, 1)); background: var(--cx-blue-900); box-shadow: var(--cx-shadow-sm);
  padding: 0 64px 10px 21px;
}
.cx-guncel__bimg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cx-guncel__big:hover .cx-guncel__bimg { transform: scale(1.04); }
.cx-guncel__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2, 14, 38, 0) 28%, rgba(2, 14, 38, .45) 58%, rgba(2, 14, 38, .92) 100%); }
.cx-guncel__big:has(.cx-guncel__a:focus-visible), .cx-guncel__card:has(.cx-guncel__a:focus-visible) { outline: 3px solid #2f98d6; outline-offset: 2px; }
.cx-guncel__bbody { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.cx-guncel__bdate {
  grid-row: 2 / 4; grid-column: 1; width: 58px; padding: 10px 4px 9px; border-radius: calc(10px * var(--ax-rs, 1)); background: #fff; color: var(--cx-blue-900);
  text-align: center; line-height: 1; box-shadow: 0 10px 20px -12px rgba(0, 10, 40, .6); margin-top: 2px;
}
.cx-guncel__bdate b { display: block; font-size: calc(23px * var(--ax-fz, 1)); font-weight: 800; letter-spacing: -.02em; }
.cx-guncel__bdate small { display: block; margin-top: 4px; font-size: calc(11.5px * var(--ax-fz, 1)); font-weight: 600; }
.cx-guncel__btag { grid-column: 2; grid-row: 1; justify-self: start; margin-bottom: 8px; }
.cx-guncel__bttl {
  grid-column: 2; grid-row: 2; margin: 0; font-size: calc(18px * var(--ax-fz, 1)); line-height: 1.26; font-weight: 700; color: #fff; letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 10px rgba(0, 10, 30, .35);
}
.cx-guncel__bsum {
  grid-column: 2; grid-row: 3; margin: 6px 0 0; font-size: calc(11px * var(--ax-fz, 1)); line-height: 1.45; color: rgba(255, 255, 255, .9);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cx-guncel__go {
  position: absolute; right: 15px; bottom: 11px; z-index: 4; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--cx-blue);
  display: inline-flex; align-items: center; justify-content: center; font-size: calc(11px * var(--ax-fz, 1)); box-shadow: 0 8px 18px -8px rgba(0, 10, 40, .6);
  transition: transform .2s; pointer-events: none;
}
.cx-guncel__big:hover .cx-guncel__go { transform: translateX(2px); }

/* ── Küçük kartlar ────────────────────────────────────────────────────── */
.cx-guncel__card {
  position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #e8eef8; border-radius: calc(14px * var(--ax-rs, 1)); box-shadow: 0 10px 26px -18px rgba(8, 45, 110, .45);
  transition: transform .22s ease, box-shadow .22s ease;
}
.cx-guncel__card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -18px rgba(8, 45, 110, .55); }
.cx-guncel__img { position: relative; flex: 0 0 46%; min-height: 0; overflow: hidden; background: var(--cx-soft); }
.cx-guncel__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cx-guncel__card:hover .cx-guncel__img img { transform: scale(1.05); }
.cx-guncel__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 13px 11px; }
.cx-guncel__tag { margin-bottom: 8px; font-size: calc(9px * var(--ax-fz, 1)); padding: 4px 10px; }
.cx-guncel__ttl {
  margin: 0; font-size: calc(14px * var(--ax-fz, 1)); line-height: 1.3; font-weight: 700; color: var(--cx-ink); letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cx-guncel__sum {
  margin: 6px 0 0; padding-right: 26px; font-size: calc(11px * var(--ax-fz, 1)); line-height: 1.45; color: var(--cx-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cx-guncel__arr { position: absolute; right: 20px; bottom: 24px; z-index: 4; font-size: calc(11px * var(--ax-fz, 1)); line-height: 1; color: var(--cx-blue); transition: transform .2s; pointer-events: none; }
.cx-guncel__card:hover .cx-guncel__arr { transform: translateX(3px); }

/* ── Tablet: 2 sütun ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cx-guncel__grid, .cx-guncel__grid--n2, .cx-guncel__grid--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: 14px; }
  .cx-guncel__grid--n1 { grid-template-columns: minmax(0, 1fr); }
  .cx-guncel__big { grid-column: 1 / -1; height: clamp(250px, 40vw, 330px); }
  .cx-guncel__card { height: 272px; }
  .cx-guncel__img { flex-basis: 140px; }
  /* tek kalan son kart: iki sütun genişliğinde, yatay */
  .cx-guncel__grid--n2 > .cx-guncel__card, .cx-guncel__grid--n4 > .cx-guncel__card:last-child { grid-column: 1 / -1; flex-direction: row; height: 170px; }
  .cx-guncel__grid--n2 > .cx-guncel__card .cx-guncel__img, .cx-guncel__grid--n4 > .cx-guncel__card:last-child .cx-guncel__img { flex: 0 0 42%; }
  .cx-guncel__grid--n2 > .cx-guncel__card .cx-guncel__body, .cx-guncel__grid--n4 > .cx-guncel__card:last-child .cx-guncel__body { justify-content: center; padding-right: 40px; }
}
/* ── Mobil: tek sütun ─────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .cx-s--guncel { padding-top: 14px; }
  .cx-guncel__head { margin-bottom: 12px; }
  .cx-guncel__grid, .cx-guncel__grid--n2, .cx-guncel__grid--n3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cx-guncel__big { height: 270px; padding: 0 58px 13px 16px; }
  .cx-guncel__bdate { width: 52px; padding: 9px 3px 8px; }
  .cx-guncel__bdate b { font-size: calc(21px * var(--ax-fz, 1)); }
  .cx-guncel__bttl { font-size: calc(17px * var(--ax-fz, 1)); }
  .cx-guncel__card, .cx-guncel__grid--n2 > .cx-guncel__card, .cx-guncel__grid--n4 > .cx-guncel__card:last-child {
    grid-column: auto; flex-direction: column; height: auto;
  }
  .cx-guncel__img, .cx-guncel__grid--n2 > .cx-guncel__card .cx-guncel__img, .cx-guncel__grid--n4 > .cx-guncel__card:last-child .cx-guncel__img { flex: none; height: 168px; }
  .cx-guncel__body, .cx-guncel__grid--n2 > .cx-guncel__card .cx-guncel__body, .cx-guncel__grid--n4 > .cx-guncel__card:last-child .cx-guncel__body { padding: 12px 14px 14px; justify-content: flex-start; }
  .cx-guncel__ttl { font-size: calc(15px * var(--ax-fz, 1)); }
  .cx-guncel__sum { font-size: calc(12px * var(--ax-fz, 1)); }
  .cx-guncel__arr { right: 14px; bottom: 14px; }
}
@media (hover: none) { .cx-guncel__card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cx-guncel__big:hover .cx-guncel__bimg, .cx-guncel__card:hover .cx-guncel__img img { transform: none; }
}