/* =========================================================
   BABYLONIA — COURSE CARDS
   gridboxcategory
   ========================================================= */


/* KART */
.view-category .gridboxcategory,
.view-id-category .gridboxcategory,
.gridboxcategory {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  height: 100% !important;

  background: #ffffff !important;

  border: 1px solid #e6e9ef !important;
  border-radius: 18px !important;

  overflow: hidden !important;

  box-shadow:
    0 5px 20px rgba(15, 23, 42, 0.07) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}


.view-category .gridboxcategory:hover,
.view-id-category .gridboxcategory:hover,
.gridboxcategory:hover {
  transform: translateY(-5px) !important;

  border-color: #d8dde7 !important;

  box-shadow:
    0 16px 35px rgba(15, 23, 42, 0.12) !important;
}


/* =========================================================
   FOTOĞRAF
   ========================================================= */

.gridboxcategory #imageteaserl {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #f7f7f8 !important;
}


.gridboxcategory #imageteaserl a {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


.gridboxcategory #imageteaserl img {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  aspect-ratio: 1 / 1 !important;

  object-fit: cover !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  transition: transform 0.4s ease !important;
}


.gridboxcategory:hover #imageteaserl img {
  transform: scale(1.025) !important;
}


/* =========================================================
   METİN ALANI
   ========================================================= */

.gridboxcategory .metinlerl {
  display: flex !important;
  flex-direction: column !important;

  flex: 1 1 auto !important;

  width: 100% !important;

  padding: 19px 20px 12px !important;

  margin: 0 !important;

  text-align: left !important;
}


/* =========================================================
   DİL / KATEGORİ
   ========================================================= */

.gridboxcategory #kanal {
  display: block !important;

  margin: 0 0 9px 0 !important;
  padding: 0 !important;

  text-align: left !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}


.gridboxcategory #kanal a {
  color: #e8429d !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  text-decoration: none !important;
}


/* =========================================================
   BAŞLIK
   ========================================================= */

.gridboxcategory #basliklar {
  display: block !important;

  margin: 0 0 13px 0 !important;
  padding: 0 !important;

  text-align: left !important;
}


.gridboxcategory #basliklar a {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #172033 !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;

  text-decoration: none !important;

  transition: color 0.2s ease !important;
}


.gridboxcategory #basliklar a:hover {
  color: #233b75 !important;
}


/* =========================================================
   AÇIKLAMA
   ========================================================= */

.gridboxcategory #headline {
  display: block !important;

  flex: 1 1 auto !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;

  color: #586273 !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}


.gridboxcategory #headline p {
  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}


/* =========================================================
   ΕΓΓΡΑΦΗ
   ========================================================= */

.gridboxcategory #readmoree {
  display: block !important;

  width: 100% !important;

  margin-top: auto !important;

  padding: 10px 20px 20px !important;

  text-align: left !important;
}


/* Drupal view-node link */
.gridboxcategory #readmoree a {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;

  padding: 0 20px !important;

  background: #233b75 !important;

  border: 1px solid #233b75 !important;
  border-radius: 10px !important;

  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1 !important;

  text-decoration: none !important;

  box-shadow:
    0 4px 12px rgba(35, 59, 117, 0.18) !important;

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}


.gridboxcategory #readmoree a:hover {
  background: #182b59 !important;
  border-color: #182b59 !important;

  color: #ffffff !important;

  transform: translateY(-1px) !important;

  box-shadow:
    0 7px 17px rgba(35, 59, 117, 0.24) !important;

  text-decoration: none !important;
}


/* =========================================================
   GRID ARALIKLARI
   ========================================================= */

.view-category .views-view-grid td,
.view-id-category .views-view-grid td {
  padding: 10px !important;
  vertical-align: stretch !important;
}


/* responsive grid kullanan display'ler */
.view-category .views-view-responsive-grid,
.view-id-category .views-view-responsive-grid {
  --views-responsive-grid--layout-gap: 22px !important;
}


/* =========================================================
   LOAD MORE
   ========================================================= */

.view-category .pager,
.view-id-category .pager {
  margin: 30px 0 0 !important;
  padding: 0 !important;

  text-align: center !important;
}


.view-category .pager a,
.view-id-category .pager a {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;

  padding: 0 24px !important;

  background: #ffffff !important;

  border: 1px solid #d8dde7 !important;
  border-radius: 12px !important;

  color: #233b75 !important;

  font-size: 14px !important;
  font-weight: 650 !important;

  text-decoration: none !important;

  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06) !important;
}


.view-category .pager a:hover,
.view-id-category .pager a:hover {
  background: #233b75 !important;

  border-color: #233b75 !important;

  color: #ffffff !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .gridboxcategory .metinlerl {
    padding: 17px 17px 10px !important;
  }

  .gridboxcategory #basliklar a {
    font-size: 17px !important;
  }

  .gridboxcategory #headline {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  .gridboxcategory #readmoree {
    padding: 10px 17px 18px !important;
  }

}