/* ══════════════════════════════════════════════════════════════════════
   QUICK SEARCH CARD — ORTAK GORUNUM
   ----------------------------------------------------------------------
   TEK KAYNAK. Hem site anasayfasi (templates/site/partials/mainpage.html)
   hem de admin canli onizleme (templates/admin/actions/quick_search_form.html)
   BU dosyayi kullanir.

   NEDEN ORTAK?
     Eskiden ayni .mp-qcard* kurallari iki dosyada AYRI AYRI duruyordu ve
     "biri degisirse digeri de degismeli" diye yorum dusulmustu. Pratikte
     gozden kaciyor, admin onizlemesi YALAN soyluyordu (admin metnin
     sigdigini saniyor, sitede kirpiliyordu). Artik tek dosya var;
     senkron sorunu KOKTEN bitti.
     Ayni desen /static/shared/popup.css ile birebir aynidir.

   OLCU SOZLESMESI (degistirirken QCard.MAX_TEXT_H ile BIRLIKTE degis):
     satir yuksekligi : 16.8px  (12px x 1.4)
     body yuksekligi  : 2 x 16.8 + 15px padding = TAM 2 satir
     kirpma           : qcard-render.js -> fitQCardText()
   ══════════════════════════════════════════════════════════════════════ */

.mp-qcard {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(180, 210, 230, 0.5);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  backdrop-filter: blur(6px);
  position: relative;
  padding: 0;
  outline: none;
  transition: all 0.20s;
}
.mp-qcard:hover {
  background: rgba(255, 255, 255, 0.97);
  border-color: #e8815c;
  box-shadow: 0 6px 22px rgba(240, 85, 50, 0.14);
  transform: translateY(-3px);
}
.mp-qcard:active { transform: scale(0.98); }

.mp-qcard-photo {
  width: 100%;
  height: 101px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.mp-qcard-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.18) 100%);
  z-index: 1;
}
.mp-qcard-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
}
.mp-qcard-photo-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.42s ease;
}
.mp-qcard:hover .mp-qcard-photo-inner { transform: scale(1.07); }

/* ── FOTOGRAFSIZ KART ──
   Yalnizca /deals (SEO) icin yazilmis kartlarda fotograf YOKTUR: /deals
   sablonlari card.photo alanini hic kullanmaz (hub'da pill link, detayda
   h1; og:image bile sabit). Homepage'de gorunmeyen bir karta fotograf
   yuklemek olu veridir. Yine de eski kayitlarda / gecis doneminde
   fotografsiz kart anasayfaya duserse KIRIK GORUNMESIN diye notr bir
   zemin veriyoruz — kart yuksekligi degismez.                          */
.mp-qcard-photo.is-empty {
  background: linear-gradient(135deg, #eef3f8 0%, #dfe7ef 100%);
}

/* Satir izgarasi: 12px x 1.4 = 16.8px.
   CTA fotografin uzerinde (absolute) -> METIN ALANI TAMAMEN SERBEST:
   2 satir, TAM GENISLIK, hicbir float yok. Tasan metne JS "…" basar
   (qcard-render.js -> fitQCardText). Kart yuksekligi HER ZAMAN sabit. */
.mp-qcard-body {
  padding: 6px 14px 9px;
  flex: 0 0 auto;                  /* KRITIK: flex:1 idi -> .mp-qcard bir column
                                      flex container; flex:1 body'yi gererek
                                      height'i EZIYORDU. Artik esnemez. */
  box-sizing: border-box;          /* KRITIK: height content-box'ta 33.6px iken
                                      15px padding USTUNE ekleniyordu => 49px =>
                                      3. satira yer kaliyordu. */
  display: block;
  font-size: 12px;
  line-height: 16.8px;
  height: calc(2 * 16.8px + 15px); /* 2 satir + padding, border-box => tam 2 satir */
  overflow: hidden;                /* 3. satir asla gorunmez */
}
.mp-qcard-icon { font-size: 16px; line-height: 1; }

/* ── CTA FOTOGRAFIN UZERINDE ──────────────────────────────────────────
   ONCEKI YAPI ve NEDEN BIRAKILDI:
     CTA metnin icinde float:right idi ve metin onun etrafindan akmaya
     calisiyordu. Bunun icin 1px'lik gorunmez bir "spacer" float'i +
     clear:right hilesi kullaniliyordu.

     SORUN: bir float, genisligi 1px bile olsa, BULUNDUGU SATIR KUTUSUNU
     daraltir. Spacer 1. satirin sagini isgal ediyor, metin CTA'nin
     USTUNDEKI bosluga giremiyordu -> 1. satir erken kiriliyor, sagda
     kocaman bosluk kaliyordu.

   YENI YAPI:
     CTA fotografin SAG ALT kosesine position:absolute ile BINDIRILIR.
       - metin alani TAMAMEN serbest: 2 satir, TAM GENISLIK, float yok
       - kart YUKSEKLIGI DEGISMEZ (absolute -> akista yer kaplamaz)
       - her ekran genisliginde AYNI davranis                          */
.mp-qcard-cta {
  position: absolute;
  right: 8px;
  bottom: 9px;                     /* .mp-qcard-bar (3px) hemen ustunde kalir */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  color: #fff;                     /* zemin kartin accent rengi -> beyaz yazi */
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  animation: mpCtaPulse 3.6s ease-in-out infinite;
}
.mp-qcard:hover .mp-qcard-cta { animation-play-state: paused; filter: none; }

/* "Gel gel" nabzi: zemin rengi kendi tonunun biraz daha PARLAK haline
   gecip geri doner (filter:brightness -> hangi accent renk secilirse
   secilsin dogru calisir). Yavas frekans (3.6s) + kisa parlama penceresi
   -> goze batmadan fark edilir. */
@keyframes mpCtaPulse {
  0%, 80%, 100% { filter: brightness(1); }
  40%           { filter: brightness(1.35); }
}

/* ── ESKI HATA NOTU (korunuyor: tekrarlanmasin diye) ──
   Eskiden:
       .mp-qcard-text { max-height:33.6px; overflow:hidden; }
   overflow:hidden bir elemana BFC (block formatting context) kazandirir.
   BFC'nin TANIMI geregi float'larin etrafindan DOLANMAZ. Metin CTA
   float'ini hic gormuyor, kendi dar sutununda sikisiyordu.
   Kirpma isi .mp-qcard-body'de yapilir (overflow:hidden + sabit height);
   ORADA float'lar parent'ta yasadigi icin sorun cikmaz.               */
.mp-qcard-text {
  font-size: 12px;
  font-weight: 500;
  color: #2d3f4a;
  line-height: 16.8px;
}

.mp-cta-arrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  top: -1px;                       /* '→' glyph'i kutusunda alta basik durur;
                                      optik merkeze getirmek icin 1px yukari */
  color: inherit;                  /* pill icinde beyaz */
  transition: transform .15s ease;
}
.mp-qcard:hover .mp-cta-arrow { transform: translateX(2px); }

@media (max-width: 700px) {
  .mp-qcard-photo { height: 110px; }
  .mp-cta-arrow { top: -1px; }
}