/* =========================================================
   BN YÖNETİM - CUSTOM.CSS (FINAL)
   Referans Kartları + Modal (Lightbox) + WhatsApp Butonu
   ========================================================= */

/* -------------------------
   Referans Kartları (Grid)
   ------------------------- */
.ref-card{
  display:flex;
  flex-direction: column;
  height: 220px;                 /* kart yüksekliği (240 yapabilirsin) */
  background:#fff;
  border:2px solid #111;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ref-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

/* Üst alan: kalan tüm yüksekliği alsın */
.ref-card-img{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
  background:#fff;
}

/* Fotoğraf/logolar alanı otomatik sığsın */
.ref-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* FOTOĞRAF için dolu görünüm. Logo ise contain yapabilirsin */
  display:block;
  border-radius:10px;
}

/* Yazı alt banda insin ve kesin görünsün */
.ref-card-title{
  margin-top: auto;
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-height: 44px;
  padding: 10px 12px;
  text-align:center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  color:#111 !important;
  background:#f2f2f2 !important;
  border-top: 1px solid rgba(0,0,0,.12);
  visibility: visible !important;
  opacity: 1 !important;
}

/* Tema çakışmalarına karşı ekstra güçlendirme */
a.ref-card .ref-card-title{ color:#111 !important; }

/* -------------------------
   Modal (Lightbox)
   ------------------------- */
.ref-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}
.ref-modal.is-open{ display:block; }

.ref-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.78);
}

/* içerik */
.ref-modal-content{
  position: relative;
  max-width: min(1000px, 92vw);
  max-height: 86vh;
  margin: 6vh auto 0;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* büyük görsel */
.ref-modal-content img{
  max-width: 92vw;
  max-height: 86vh;
  background: #0b0b0b;
  border: 10px solid #0b0b0b;    /* siyaha yakın çerçeve */
  border-radius: 14px;
  box-shadow: 0 25px 70px rgba(0,0,0,.6);
}

/* X butonu sağ üst */
.ref-modal-close{
  position: absolute;
  top: -18px;
  right: -18px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 30px;
  line-height: 46px;
  cursor: pointer;
}
.ref-modal-close:hover{ background: rgba(0,0,0,.85); }

/* -------------------------
   WhatsApp Floating Button
   ------------------------- */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  z-index: 9999;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.wa-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
}

.wa-float svg{
  width: 30px;
  height: 30px;
  fill: #fff;
}

@media (max-width: 480px){
  .wa-float{ width:56px; height:56px; }
  .wa-float svg{ width:28px; height:28px; }
}

/* FIX: Başlık yazısı görünmüyor sorunu (tema çakışması) */
.ref-card-title{
  display:block !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 44px !important;     /* bandın ortasında dursun */
  text-align: center !important;

  color: #111 !important;
  -webkit-text-fill-color: #111 !important; /* kritik: bazı temalarda metni görünmez yapan şey */
  opacity: 1 !important;
  visibility: visible !important;

  background: #f2f2f2 !important;
  border-top: 1px solid rgba(0,0,0,.12) !important;

  position: relative !important;
  z-index: 5 !important;
}

/* === KARTI 2 PARÇA YAP: ÜST FOTO ÇERÇEVE + ALT BAŞLIK ÇERÇEVESİ === */

.ref-card{
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

/* ÜST: Foto çerçevesi */
.ref-card-img{
  flex: none !important;
  height: 180px;                 /* ister 170-220 arası oynat */
  padding: 12px;
  background: #fff;
  border: 2px solid #111;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Fotoğraf çerçeve içinde kalsın */
.ref-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;             /* foto için ideal, logo ise contain */
  border-radius: 12px;
  display:block;
}

/* ALT: Başlık çerçevesi (ayrı kutu) */
.ref-card-title{
  margin-top: 10px !important;
  min-height: 44px;
  padding: 10px 12px;
  background: #f2f2f2 !important;
  border: 2px solid #111 !important;
  border-radius: 14px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Hover'da ikisini birlikte hafif kaldır */
.ref-card:hover .ref-card-img,
.ref-card:hover .ref-card-title{
  transform: translateY(-2px);
  transition: transform .15s ease, box-shadow .15s ease;
}