/**
 * Axtea — ETKİNLİKLER
 * (etkinlik-takvimi · haberler · fuarlar · musteri-ziyaretleri · etkinlik-detay)
 * main.css'e DOKUNULMUYOR.
 */

body:has(.etkinlik-liste),
body:has(.etkinlik-takvim),
body:has(.etkinlik-detay) {
  background-color: #eceefa;
}

/* --- Filtre çubuğu ---------------------------------------------------------
 * Şartname: "Etkinlikler sayfasında bu bölümler filtrelenebilir olmalı."
 * Sunucu tarafı filtre: her bölüm kendi adresi, aktif olan işaretli. */
.etkinlik-filtre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 44px;
}

.etkinlik-filtre-etiket {
  font-size: 15px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
}

.etkinlik-filtre ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etkinlik-filtre ul li a {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 30px;
  background-color: #ffffff;
  font-size: 15px;
  font-weight: var(--tj-fw-medium);
  line-height: 1.2;
  color: var(--tj-color-heading-primary);
  transition: all 0.3s;
}

.etkinlik-filtre ul li a:hover {
  background-color: #cdd1f3;
  color: var(--tj-color-heading-primary);
}

.etkinlik-filtre ul li a.aktif {
  background-color: var(--tj-color-theme-primary);
  color: #ffffff;
}

/* --- Kart ızgarası ---------------------------------------------------------
 * ⚠️ Kaynak görsellerin oranı çok farklı (870×450 · 420×498 · 798×435).
 * Sabit oran + `object-fit: cover` olmadan kartlar farklı boyda çıkıyordu. */
.etkinlik-liste .blog-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.etkinlik-liste .blog-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.etkinlik-liste .blog-thumb > a,
.etkinlik-liste .blog-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.etkinlik-liste .blog-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 26px 26px 28px;
}

/* Özet esnesin ki "Devamını Oku" bağlantıları aynı hizada dursun */
.etkinlik-ozet {
  flex: 1 1 auto;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
}

.etkinlik-liste .blog-content .title {
  margin-bottom: 12px;
  font-size: 20px;
  line-height: 1.4;
}

/* --- Etkinlik Takvimi (satır düzeni) --------------------------------------- */
.etkinlik-takvim .blog-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ⚠️ Satır yüksekliğini GÖRSEL belirlememeli: kaynaklar arasında dikey olanlar
 * var (örn. 630×677) ve 320px sütunda 344px yükseklik dayatıp satırı şişiriyordu
 * (ölçüm: 374px). Görsel mutlak konumlanınca yükseklik hesabından çıkıyor,
 * satırı METİN + `min-height` belirliyor. */
.takvim-satir {
  display: flex;
  gap: 30px;
  align-items: stretch;
  min-height: 240px;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.takvim-satir .blog-thumb {
  position: relative;
  flex: 0 0 320px;
  max-width: 320px;
  overflow: hidden;
}

.takvim-satir .blog-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.takvim-satir .blog-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 30px 30px 30px 0;
}

.takvim-satir .title-area {
  flex: 1 1 auto;
}

.takvim-satir .title {
  margin: 10px 0 12px;
  font-size: 24px;
  line-height: 1.35;
}

.takvim-tarih {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-theme-primary);
}

.takvim-rozet {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 20px;
  background-color: #eceefa;
  font-size: 13px;
  color: var(--tj-color-heading-primary);
}

/* Tarihi geçmiş etkinlik geri planda kalsın ama okunur olsun */
.takvim-satir.gecmis .blog-thumb img {
  filter: grayscale(1);
  opacity: 0.75;
}

.takvim-baglantilar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 18px;
}

@media only screen and (max-width: 991px) {
  .takvim-satir.blog-item {
    flex-direction: column;
    gap: 0;
    padding: 15px;
  }
  .takvim-satir.blog-item .blog-thumb {
    flex: 0 0 auto;
    width: auto;
    align-self: stretch;
    max-width: 100%;
    aspect-ratio: 16 / 9;   /* mutlak konumlu görselin kabı yükseklik kazansın */
  }
  .takvim-satir.blog-item .blog-content {
    width: 100%;
    padding: 26px;
  }
}

/* --- Detay sayfası --------------------------------------------------------- */
.etkinlik-detay .blog-images img {
  width: 100%;
  aspect-ratio: 16 / 8;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}

/* Tema "Tags:" satırını da bu kapta tutuyordu; etiket kaldırıldı, paylaş kaldı */
.etkinlik-paylas {
  justify-content: flex-end;
}

/* PDF indirme kartı */
.etkinlik-pdf {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 0;
  padding: 18px 22px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #d2d6ee;
  transition: all 0.3s;
}

.etkinlik-pdf:hover {
  border-color: var(--tj-color-theme-primary);
}

.etkinlik-pdf-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--tj-color-theme-primary);
  color: #ffffff;
  font-size: 18px;
}

.etkinlik-pdf-metin {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.etkinlik-pdf-metin strong {
  font-size: 17px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
}

.etkinlik-pdf-metin small {
  font-size: 14px;
}

.etkinlik-pdf-ok {
  color: var(--tj-color-theme-primary);
}

/* ⚠️ `--tj-color-theme-dark` açık gri; tema ok ikonlarını onunla boyuyor →
 * beyaz daire içinde görünmez kalıyordu (hizmet sayfalarındaki ile aynı tuzak). */
.tj-post__navigation .tj-nav-post__nav a span i,
.tj-nav-post__grid a i {
  color: var(--tj-color-heading-primary);
}

/* Uçlarda karşı taraf boş; `space-between` hizası bozulmasın */
.etkinlik-nav-bos {
  flex: 0 0 auto;
}

/* --- Kenar çubuğu ----------------------------------------------------------
 * Tema widget zemini #d8e5e5 (yeşile çalan gri), sayfa zemini ise lavanta —
 * yan yana yeşil kaçıyor. Bölümler paneli lavanta, ilgili içerikler beyaz kart:
 * hem palet tutuyor hem iki widget birbirinden ayrışıyor. */
.etkinlik-detay .tj-sidebar-widget.widget-categories {
  background-color: #cdd1f3;
}

.etkinlik-detay .tj-sidebar-widget.tj-recent-posts {
  background-color: #ffffff;
}

.etkinlik-detay .tj-recent-posts .post-thumb img {
  width: 100px;
  height: 80px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}

/* --- Boş durum ------------------------------------------------------------- */
.etkinlik-bos {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  font-size: 18px;
}

.etkinlik-bos-baglantilar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 34px;
  padding-bottom: 30px;
}

/* ===========================================================================
 * FUARLAR — "vitrin" düzeni (tema `blog-item style-3`)
 * ---------------------------------------------------------------------------
 * Tema style-3 zaten METNİ GÖRSELİN ÜSTÜNE koyup koyu degrade uyguluyor;
 * burada yalnız 2'li ızgaraya ve Axtea tipografisine uyarlanıyor.
 * Haberler'in beyaz kartlarından bilerek farklı bir ritim.
 * =========================================================================== */
.vitrin-kart {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}

.vitrin-kart .blog-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
}

.vitrin-kart .blog-thumb > a,
.vitrin-kart .blog-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

.vitrin-kart:hover .blog-thumb img {
  transform: scale(1.04);
}

/* Metin okunsun diye alttan koyu degrade (tema ::before'una ek güvence) */
.vitrin-kart .blog-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 30, 33, 0.92) 0%, rgba(12, 30, 33, 0.55) 38%, rgba(12, 30, 33, 0) 72%);
  z-index: 2;
}

.vitrin-kart .blog-content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: 30px 32px 28px;
}

.vitrin-kart .blog-content .title {
  margin: 10px 0 16px;
  font-size: 26px;
  line-height: 1.32;
}

.vitrin-kart .blog-content .title a {
  color: #ffffff;
}

.vitrin-kart .blog-content .title a:hover {
  color: var(--tj-color-theme-primary);
}

.vitrin-tarih {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 14px;
  line-height: 1.3;
  color: #ffffff;
}

/* ⚠️ Tema `.blog-item.style-3 .text-btn`i (0,3,0) mutlak konumlayıp
 * `visibility:hidden` yapıyor ve yalnız hover'da yukarı kaydırıyor — dokunmatik
 * cihazda HİÇ görünmez. Bu koreografiyle boğuşmak yerine buton şablondan
 * çıkarıldı: kartın TAMAMI tıklanabilir (başlık bağlantısı gerdirildi) ve köşeye
 * kalıcı bir ok kondu. */
.vitrin-kart .blog-content .title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
}

.vitrin-ok {
  position: absolute;
  inset-inline-end: 32px;
  bottom: 30px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 17px;
  transition: all 0.3s ease;
}

.vitrin-kart:hover .vitrin-ok {
  background-color: var(--tj-color-theme-primary);
  border-color: var(--tj-color-theme-primary);
}

@media only screen and (max-width: 575px) {
  .vitrin-ok {
    inset-inline-end: 20px;
    bottom: 20px;
    width: 38px;
    height: 38px;
  }
}

@media only screen and (max-width: 575px) {
  .vitrin-kart .blog-content {
    padding: 22px;
  }
  .vitrin-kart .blog-content .title {
    font-size: 20px;
  }
}

/* ===========================================================================
 * MÜŞTERİ ZİYARETLERİ — zaman tüneli
 * ---------------------------------------------------------------------------
 * "Takvim gibi olsun ama daha güzel": satır düzeni korunur, sola dikey bir
 * omurga + yuvarlak tarih işareti eklenir, yıl başlıkları grupları ayırır.
 * =========================================================================== */
.zaman-tuneli {
  position: relative;
  padding-inline-start: 128px;
}

/* Omurga */
.zaman-tuneli::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 47px;
  width: 2px;
  background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, #c9cee8 100%);
}

.tunel-yil {
  position: relative;
  margin: 0 0 26px;
}

.tunel-yil:not(:first-child) {
  margin-top: 46px;
}

/* ⚠️ Yıl etiketi MUTLAK KONUMLU DEĞİL: öyleyken kabının yüksekliği 0 kalıyor
 * ve altındaki tarih işaretiyle 11px çakışıyordu (ölçüldü). Normal akışta
 * durup negatif kenar boşluğuyla omurgaya çekiliyor — kendi yüksekliğini
 * kendisi ayırıyor, pil boyu değişse de bozulmuyor. */
.tunel-yil span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: -128px;
  width: 96px;
  padding: 7px 0;
  border-radius: 20px;
  background-color: var(--tj-color-theme-primary);
  font-size: 15px;
  font-weight: var(--tj-fw-sbold);
  color: #ffffff;
}

.tunel-satir {
  position: relative;
  margin-bottom: 24px;
}

.tunel-satir:last-child {
  margin-bottom: 0;
}

/* Omurga üzerindeki gün/ay işareti */
.tunel-isaret {
  position: absolute;
  inset-inline-start: -128px;
  top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #cdd1f3;
  z-index: 2;
}

.tunel-gun {
  font-size: 26px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
  color: var(--tj-color-heading-primary);
}

.tunel-ay {
  margin-top: 3px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tj-color-theme-primary);
}

.tunel-satir:hover .tunel-isaret {
  border-color: var(--tj-color-theme-primary);
}

/* Kartın tamamı tıklanabilir */
.tunel-kart {
  display: flex;
  gap: 28px;
  align-items: stretch;
  min-height: 200px;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.tunel-kart:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(23, 40, 45, 0.1);
}

/* ⚠️ Görsel MUTLAK konumlu: kaynak oranları çok farklı (798×435, 630×677);
 * akışta bırakılsa satır yüksekliğini metin değil GÖRSEL belirlerdi. */
.tunel-gorsel {
  position: relative;
  flex: 0 0 260px;
  max-width: 260px;
  overflow: hidden;
}

.tunel-gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.tunel-metin {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 28px 30px 28px 0;
}

.tunel-tarih {
  font-size: 14px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-theme-primary);
}

.tunel-baslik {
  margin: 8px 0 10px;
  font-family: var(--tj-ff-heading);
  font-size: 21px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.35;
  color: var(--tj-color-heading-primary);
}

.tunel-ozet {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.6;
}

.tunel-devam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
}

.tunel-kart:hover .tunel-devam {
  color: var(--tj-color-theme-primary);
}

@media only screen and (max-width: 991px) {
  /* Dar ekranda omurga kalkar, tarih işareti kartın üstüne biner */
  .zaman-tuneli {
    padding-inline-start: 0;
  }
  .zaman-tuneli::before {
    display: none;
  }
  .tunel-yil span {
    position: static;
    inset-inline-start: auto;
  }
  .tunel-isaret {
    position: absolute;
    inset-inline-start: 16px;
    top: 16px;
    width: 68px;
    height: 68px;
    border-color: var(--tj-color-theme-primary);
  }
  .tunel-gun {
    font-size: 20px;
  }
  .tunel-kart {
    flex-direction: column;
    gap: 0;
  }
  .tunel-gorsel {
    flex: 0 0 auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
  .tunel-metin {
    padding: 24px;
  }
}

/* ===========================================================================
 * DETAY DÜZENLERİ — üç bölüm ayrışsın
 * =========================================================================== */

/* FUAR — tam genişlik. Metin satırı çok uzamasın diye içerik sınırlanıyor. */
.etkinlik-detay-genis .blog-text,
.etkinlik-detay-genis .blog-category-two,
.etkinlik-detay-genis .etkinlik-paylas,
.etkinlik-detay-genis .etkinlik-nav,
.etkinlik-detay-genis .post-details-wrapper > .title {
  max-width: 900px;
  margin-inline: auto;
}

.etkinlik-detay-genis .blog-images img {
  aspect-ratio: 21 / 9;
}

/* Fuar galerisi */
.fuar-galeri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 30px 0 10px;
}

.fuar-galeri figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

.fuar-galeri img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (max-width: 575px) {
  .fuar-galeri {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ZİYARET — "rapor": başlık üstte, altında bilgi şeridi, sonra görsel */
.rapor-baslik {
  margin-bottom: 22px;
}

.rapor-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 48px;
  margin-bottom: 30px;
  padding: 20px 26px;
  border-radius: 12px;
  background-color: #cdd1f3;
}

.rapor-oge {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rapor-etiket {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4a4f7a;
}

.rapor-deger {
  font-size: 17px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-heading-primary);
}

a.rapor-deger:hover {
  color: var(--tj-color-theme-primary);
}

/* İlk fuar kartı TAM GENİŞLİK vitrin: 2'li ızgarada tek sayı içerik 2+1
 * kalıp sağda boşluk bırakıyordu; öne çıkan + ikili düzen hem doluyor hem
 * haber ızgarasından daha da ayrışıyor. */
.vitrin-one-cikan .blog-thumb {
  aspect-ratio: 21 / 9;
}

.vitrin-one-cikan .blog-content .title {
  font-size: 34px;
  max-width: 760px;
}

@media only screen and (max-width: 767px) {
  .vitrin-one-cikan .blog-thumb {
    aspect-ratio: 4 / 3;
  }
  .vitrin-one-cikan .blog-content .title {
    font-size: 20px;
  }
}