.elementor-95746 .elementor-element.elementor-element-85f7c2a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:-80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-zozo_hf_pagetitle .zhf-title-part > *{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-zozo_hf_pagetitle .zhf-breadcrumb-part{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-zozo_hf_pagetitle ul.zhf-breadcrumb > li > i{color:var( --e-global-color-text );}.elementor-95746 .elementor-element.elementor-element-6cc837f .zhf-page-title-inner .zhf-title-part{text-align:center;}.elementor-95746 .elementor-element.elementor-element-6cc837f ul.zhf-breadcrumb > li > i{font-size:12px;height:20px;width:20px;}.elementor-95746 .elementor-element.elementor-element-6cc837f ul.zhf-breadcrumb > li > i:before{line-height:20px;}.elementor-95746 .elementor-element.elementor-element-3111609{--spacer-size:50px;}.elementor-95746 .elementor-element.elementor-element-7f12019{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}@media(max-width:1024px){.elementor-95746 .elementor-element.elementor-element-7f12019{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-95746 .elementor-element.elementor-element-7f12019{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-de0a904 *//* ══════════════════════════════════════
   HOVER KART EFEKTİ - Elementor Free
   ══════════════════════════════════════ */

.hover-card {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
}

.hover-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* Logo (Ön Yüz) */
.hover-card__logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #ffffff;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hover-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Bilgi Kartı (Arka Yüz) */
.hover-card__info {
  overflow-y:auto;
  justify-content:flex-start; 
  /* ortalama kaldır */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #ffffff;
  z-index: 999;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hover Durumu */
.hover-card:hover .hover-card__logo {
  opacity: 0;
  transform: scale(0.9);
}

.hover-card:hover .hover-card__info {
  opacity: 1;
  transform: translateY(0);
}

/* Bilgi Kartı İçerik Stilleri */
.hover-card__info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
}

.hover-card__cat {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.7;
  margin: 0 0 10px 0;
  line-height: 1em;
}

.hover-card__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0 0 12px 0;
}

.hover-card__info a {
  color: #74b9ff;
  text-decoration: none;
  font-size: 0.90rem;
  font-weight: 600;
  transition: color 0.2s;
  z-index: 9999;
}

.hover-card__info a:hover {
  color: #ffffff;
}

/* ═══ RENK VARYASYONLARI ═══
   Her karta farklı renk vermek için
   HTML'de class ekle: hover-card hover-card--red */

.hover-card--red .hover-card__info {
  background: linear-gradient(135deg, #D62828 0%, #F4A261 100%);
    color:white;
}
.hover-card--purple .hover-card__info {
  background: linear-gradient(135deg, #5B2EFF 0%, #FF4FD8 100%);
color:white;
}
.hover-card--teal .hover-card__info {
  background: linear-gradient(135deg, #1C7ED6 0%, #12B886 100%);
color:white;

}
.hover-card--dark .hover-card__info {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color:white;
}
.hover-card--teal-2 .hover-card__info {
  background: linear-gradient(135deg, #205685, #3fc0ef);
  color:white;
}

/* Mobil Uyumluluk */
@media (max-width: 767px) {
  .hover-card {
    height: 180px;
  }
  .hover-card__info {
    padding: 16px;
  }
  .hover-card__info h3 {
    font-size: 1.05rem;
    color: white;
  }
}

/* Mobil dokunma desteği */
.hover-card.is-flipped .hover-card__logo {
  opacity: 0;
  transform: scale(0.9);
}
.hover-card.is-flipped .hover-card__info {
  opacity: 1;
  transform: translateY(0);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-de0a904 *//* ══════════════════════════════════════
   HOVER KART EFEKTİ - Elementor Free
   ══════════════════════════════════════ */

.hover-card {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
}

.hover-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* Logo (Ön Yüz) */
.hover-card__logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #ffffff;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hover-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Bilgi Kartı (Arka Yüz) */
.hover-card__info {
  overflow-y:auto;
  justify-content:flex-start; 
  /* ortalama kaldır */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #ffffff;
  z-index: 999;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hover Durumu */
.hover-card:hover .hover-card__logo {
  opacity: 0;
  transform: scale(0.9);
}

.hover-card:hover .hover-card__info {
  opacity: 1;
  transform: translateY(0);
}

/* Bilgi Kartı İçerik Stilleri */
.hover-card__info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
}

.hover-card__cat {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.7;
  margin: 0 0 10px 0;
  line-height: 1em;
}

.hover-card__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0 0 12px 0;
}

.hover-card__info a {
  color: #74b9ff;
  text-decoration: none;
  font-size: 0.90rem;
  font-weight: 600;
  transition: color 0.2s;
  z-index: 9999;
}

.hover-card__info a:hover {
  color: #ffffff;
}

/* ═══ RENK VARYASYONLARI ═══
   Her karta farklı renk vermek için
   HTML'de class ekle: hover-card hover-card--red */

.hover-card--red .hover-card__info {
  background: linear-gradient(135deg, #D62828 0%, #F4A261 100%);
    color:white;
}
.hover-card--purple .hover-card__info {
  background: linear-gradient(135deg, #5B2EFF 0%, #FF4FD8 100%);
color:white;
}
.hover-card--teal .hover-card__info {
  background: linear-gradient(135deg, #1C7ED6 0%, #12B886 100%);
color:white;

}
.hover-card--dark .hover-card__info {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color:white;
}
.hover-card--teal-2 .hover-card__info {
  background: linear-gradient(135deg, #205685, #3fc0ef);
  color:white;
}

/* Mobil Uyumluluk */
@media (max-width: 767px) {
  .hover-card {
    height: 180px;
  }
  .hover-card__info {
    padding: 16px;
  }
  .hover-card__info h3 {
    font-size: 1.05rem;
    color: white;
  }
}

/* Mobil dokunma desteği */
.hover-card.is-flipped .hover-card__logo {
  opacity: 0;
  transform: scale(0.9);
}
.hover-card.is-flipped .hover-card__info {
  opacity: 1;
  transform: translateY(0);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-de0a904 *//* ══════════════════════════════════════
   HOVER KART EFEKTİ - Elementor Free
   ══════════════════════════════════════ */

.hover-card {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
}

.hover-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* Logo (Ön Yüz) */
.hover-card__logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #ffffff;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hover-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Bilgi Kartı (Arka Yüz) */
.hover-card__info {
  overflow-y:auto;
  justify-content:flex-start; 
  /* ortalama kaldır */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #ffffff;
  z-index: 999;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hover Durumu */
.hover-card:hover .hover-card__logo {
  opacity: 0;
  transform: scale(0.9);
}

.hover-card:hover .hover-card__info {
  opacity: 1;
  transform: translateY(0);
}

/* Bilgi Kartı İçerik Stilleri */
.hover-card__info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
}

.hover-card__cat {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.7;
  margin: 0 0 10px 0;
  line-height: 1em;
}

.hover-card__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0 0 12px 0;
}

.hover-card__info a {
  color: #74b9ff;
  text-decoration: none;
  font-size: 0.90rem;
  font-weight: 600;
  transition: color 0.2s;
  z-index: 9999;
}

.hover-card__info a:hover {
  color: #ffffff;
}

/* ═══ RENK VARYASYONLARI ═══
   Her karta farklı renk vermek için
   HTML'de class ekle: hover-card hover-card--red */

.hover-card--red .hover-card__info {
  background: linear-gradient(135deg, #D62828 0%, #F4A261 100%);
    color:white;
}
.hover-card--purple .hover-card__info {
  background: linear-gradient(135deg, #5B2EFF 0%, #FF4FD8 100%);
color:white;
}
.hover-card--teal .hover-card__info {
  background: linear-gradient(135deg, #1C7ED6 0%, #12B886 100%);
color:white;

}
.hover-card--dark .hover-card__info {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color:white;
}
.hover-card--teal-2 .hover-card__info {
  background: linear-gradient(135deg, #205685, #3fc0ef);
  color:white;
}

/* Mobil Uyumluluk */
@media (max-width: 767px) {
  .hover-card {
    height: 180px;
  }
  .hover-card__info {
    padding: 16px;
  }
  .hover-card__info h3 {
    font-size: 1.05rem;
    color: white;
  }
}

/* Mobil dokunma desteği */
.hover-card.is-flipped .hover-card__logo {
  opacity: 0;
  transform: scale(0.9);
}
.hover-card.is-flipped .hover-card__info {
  opacity: 1;
  transform: translateY(0);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-de0a904 *//* ══════════════════════════════════════
   HOVER KART EFEKTİ - Elementor Free
   ══════════════════════════════════════ */

.hover-card {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
}

.hover-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* Logo (Ön Yüz) */
.hover-card__logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #ffffff;
  z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hover-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Bilgi Kartı (Arka Yüz) */
.hover-card__info {
  overflow-y:auto;
  justify-content:flex-start; 
  /* ortalama kaldır */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #ffffff;
  z-index: 999;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hover Durumu */
.hover-card:hover .hover-card__logo {
  opacity: 0;
  transform: scale(0.9);
}

.hover-card:hover .hover-card__info {
  opacity: 1;
  transform: translateY(0);
}

/* Bilgi Kartı İçerik Stilleri */
.hover-card__info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: white;
}

.hover-card__cat {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.7;
  margin: 0 0 10px 0;
  line-height: 1em;
}

.hover-card__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0 0 12px 0;
}

.hover-card__info a {
  color: #74b9ff;
  text-decoration: none;
  font-size: 0.90rem;
  font-weight: 600;
  transition: color 0.2s;
  z-index: 9999;
}

.hover-card__info a:hover {
  color: #ffffff;
}

/* ═══ RENK VARYASYONLARI ═══
   Her karta farklı renk vermek için
   HTML'de class ekle: hover-card hover-card--red */

.hover-card--red .hover-card__info {
  background: linear-gradient(135deg, #D62828 0%, #F4A261 100%);
    color:white;
}
.hover-card--purple .hover-card__info {
  background: linear-gradient(135deg, #5B2EFF 0%, #FF4FD8 100%);
color:white;
}
.hover-card--teal .hover-card__info {
  background: linear-gradient(135deg, #1C7ED6 0%, #12B886 100%);
color:white;

}
.hover-card--dark .hover-card__info {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color:white;
}
.hover-card--teal-2 .hover-card__info {
  background: linear-gradient(135deg, #205685, #3fc0ef);
  color:white;
}

/* Mobil Uyumluluk */
@media (max-width: 767px) {
  .hover-card {
    height: 180px;
  }
  .hover-card__info {
    padding: 16px;
  }
  .hover-card__info h3 {
    font-size: 1.05rem;
    color: white;
  }
}

/* Mobil dokunma desteği */
.hover-card.is-flipped .hover-card__logo {
  opacity: 0;
  transform: scale(0.9);
}
.hover-card.is-flipped .hover-card__info {
  opacity: 1;
  transform: translateY(0);
}/* End custom CSS */