.elementor-3163 .elementor-element.elementor-element-899b53a{--display:flex;}/* Start custom CSS *//* ==== DARÜLKELAM FILMS – GRID + HOVER'DA LOGO YERİNE İSİM ==== */

/* Kenarlardan içeri alalım */
.showcase-portfolio.expand-grid{
  padding: 32px 16px 0;
}

/* Kartlar arası boşluk */
.showcase-portfolio.expand-grid .clapat-item{
  box-sizing: border-box;
  padding: 0px 0px 0px;
}

/* Büyük ikinci görsel layout'u bozmasın */
.showcase-portfolio.expand-grid .grid__item-img--large{
  display: none !important;
}

/* Video/görsel alanı mask'i doldursun */
.showcase-portfolio.expand-grid .img-mask.pixels-cover{
  overflow: hidden;
  border-radius: 12px;
  position: relative; /* caption'ı bunun içinde konumlayacağız */
}

/* section-image videoyu/kapak görselini mask'in içine oturtsun */
.showcase-portfolio.expand-grid .section-image{
  position: absolute;
  inset: 0;
}

.showcase-portfolio.expand-grid .section-image img,
.showcase-portfolio.expand-grid .section-image video,
.showcase-portfolio.expand-grid .section-image .hero-video-wrapper{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==== İSİM (TITLE) OVERLAY ==== */
/* Eskiden caption'ı kapatıyorduk: artık tamamen kapatma. */
.showcase-portfolio.expand-grid .slide-caption{
  display: block !important;
  position: absolute !important;
  left: -8px !important;
  bottom: 12px !important;
  z-index: 10 !important;

  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: opacity .18s ease, transform .18s ease;

  pointer-events: none !important;
}

/* Hover'da caption görünsün (sadece isim) */
.showcase-portfolio.expand-grid .clapat-item:hover .slide-caption{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Caption içindeki gereksizleri kapat – sadece başlık kalsın */
.showcase-portfolio.expand-grid .slide-caption .slide-subtitle,
.showcase-portfolio.expand-grid .slide-caption .slide-categories,
.showcase-portfolio.expand-grid .slide-caption .slide-counter,
.showcase-portfolio.expand-grid .slide-caption .slide-current{
  display: none !important;
}

/* Başlık stili (premium badge gibi) */
.showcase-portfolio.expand-grid .slide-caption .slide-title span{
  display: inline-block !important;
  color: #fff !important;

  font-size: 14px !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;

  padding: 8px 18px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* FILMS: Hover label içinde SADECE proje adı kalsın */
.showcase-portfolio.expand-grid .slide-caption > *{
  display: none !important;
}

.showcase-portfolio.expand-grid .slide-caption .slide-title{
  display: block !important;
}

.showcase-portfolio.expand-grid .slide-caption .slide-title *{
  display: inline !important;
}

.showcase-portfolio.expand-grid .clapat-item{
  padding: 0px !important;
  margin: 5px !important;
  box-sizing: border-box !important;
}
/* ==== FILMS GRID GAP FIX (2 kolon + aralık, tek kolona düşmez) ==== */

/* Kenar boşlukları (page padding) */
.showcase-portfolio.expand-grid{
  padding: 32px 16px 0 !important;
}

/* Wrapper: gap ile boşluk */
.showcase-portfolio.expand-grid{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;          /* <<< boşluğu buradan ayarla (12px / 16px) */
}

/* Kart: 2 kolon */
.showcase-portfolio.expand-grid .clapat-item{
  float: none !important;        /* temadaki float varsa iptal */
  margin: 0 !important;          /* margin verme */
  padding: 0 !important;         /* padding verme (JS height kilidine takılmasın) */
  box-sizing: border-box !important;

  width: calc(50% - 8px) !important;   /* gap 16px ise 8px çıkar */
}

/* Mobilde tek kolon */
@media (max-width: 768px){
  .showcase-portfolio.expand-grid .clapat-item{
    width: 100% !important;
  }
}

/* (Opsiyonel) sadece başlık kalsın, yıl/kategori gizlensin */
.showcase-portfolio.expand-grid .slide-caption .slide-date,
.showcase-portfolio.expand-grid .slide-caption .slide-cat{
  display: none !important;
}

/* Hover efektini sadece gerçek hover olan cihazlarda çalıştır */
@media (hover: hover) and (pointer: fine){
  .showcase-portfolio.expand-grid .clapat-item:hover .slide-caption{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* Touch cihazlarda hover ile açılmasın (iOS hover stickiness fix) */
@media (hover: none) and (pointer: coarse){
  .showcase-portfolio.expand-grid .slide-caption{
    opacity: 0 !important;
    transform: translateY(6px) !important;
  }

  /* İstersen mobilde hep görünsün dersen, yukarıdaki opacity:0 yerine 1 yaparız.
     Ama "patlama" olmasın diye tek satır kuralı: */
  .showcase-portfolio.expand-grid .slide-caption .slide-title span{
    max-width: calc(100vw - 56px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 12px !important;
    letter-spacing: .12em !important;
    padding: 6px 12px !important;
  }
}

/* =========================================
   FILMS – logo varsa desktop'ta da görünsün
   Sorun: tema .section-thumb'a clip-path basıyor
   ========================================= */

.showcase-portfolio.expand-grid .section-thumb{
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* İçindeki logo image */
.showcase-portfolio.expand-grid .section-thumb img{
  opacity: 1 !important;
  visibility: visible !important;
}

/* Desktop hover'da logo kaybolsun */
@media (hover: hover) and (pointer: fine){
  .showcase-portfolio.expand-grid .clapat-item:hover .section-thumb,
  .showcase-portfolio.expand-grid .clapat-item:hover .section-thumb img{
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Touch cihazlarda hep görünür */
@media (hover: none) and (pointer: coarse){
  .showcase-portfolio.expand-grid .section-thumb,
  .showcase-portfolio.expand-grid .section-thumb img{
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}

/* Logo içindeki png düz dursun */
.showcase-portfolio.expand-grid .section-thumb img{
  transform: none !important;
  rotate: 0deg !important;
  translate: none !important;
  scale: 1 !important;
}
.showcase-portfolio.expand-grid .section-thumb,
.showcase-portfolio.expand-grid .section-thumb img{
  box-shadow: none !important;
  filter: none !important;
}/* End custom CSS */