/* PixelAs Company Slider PRO - v1.5 */

/* Swiper basic spacing */
.pcs-slider { padding: 10px 0 30px; }

/* Card */
.pcs-card{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:14px 14px 16px;
}

.pcs-img-wrap{
  position:relative;
  border-radius:14px;
  overflow:hidden;
}

.pcs-img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.pcs-badge{
  position:absolute;
  left:12px;
  top:12px;
  background:rgba(17,24,39,.92);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
}

.pcs-title{
  font-size:16px;
  line-height:1.25;
  margin:12px 0 8px;
  font-weight:700;
  color:#111827;
}

.pcs-rating{
  display:flex;
  gap:4px;
  margin-bottom:10px;
}
.pcs-rating .dashicons{
  font-size:18px;
  width:18px; height:18px;
}

.pcs-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}
.pcs-tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:#f3f4f6;
  color:#111827;
  border:1px solid #e5e7eb;
}

/* === Action FAB (Tek buton -> açılan aksiyonlar) === */
.pcs-actions{
  position: relative;
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.pcs-action-main{
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#111827;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,.16);
  position: relative;           /* CTA için gerekli */
  isolation: isolate;           /* CTA için gerekli */
}

.pcs-action-main:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.pcs-action-pop{
  position:absolute;
  bottom:58px;
  left:50%;
  transform: translateX(-50%) translateY(8px);
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.97);
  border:1px solid #e5e7eb;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(6px);
}

/* Desktop: hover ile aç */
@media (hover:hover) and (pointer:fine){
  .pcs-actions:hover .pcs-action-pop{
    opacity:1;
    pointer-events:auto;
    transform: translateX(-50%) translateY(0);
  }
  .pcs-actions:hover .pcs-action-main{
    transform: translateY(-2px) rotate(45deg);
  }
}

/* Mobil: JS toggle ile aç */
.pcs-actions.is-open .pcs-action-pop{
  opacity:1;
  pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}
.pcs-actions.is-open .pcs-action-main{
  transform: translateY(-2px) rotate(45deg);
}

.pcs-action{
  width:auto;
  min-width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}

.pcs-action:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.pcs-action .dashicons{
  font-size:20px;
  width:20px;
  height:20px;
}

.pcs-action-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
}

/* renk vurguları */
.pcs-wa{ color:#16a34a; border-color:rgba(22,163,74,.35); }
.pcs-tel{ color:#111827; }
.pcs-view{ color:#2563eb; border-color:rgba(37,99,235,.35); }

.pcs-action-note{
  position:absolute;
  top:56px;
  font-size:12px;
  color:#6b7280;
}

/* === CTA: + butonu için "Klick" animasyonu === */

/* dış halo (nabız) */
.pcs-action-main::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: rgba(17,24,39,.10);
  z-index:-1;
  animation: pcsPulse 1.8s ease-out infinite;
}

/* küçük ping noktası */
.pcs-action-main::after{
  content:"";
  position:absolute;
  right:3px;
  top:3px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation: pcsPing 1.6s ease-out infinite;
}

/* ✅ "Klick" etiketi – butonun SAĞINDA */
.pcs-click-hint{
  position:absolute;
  left:56px;                 /* + butonunun sağı */
  top:50%;
  transform:translateY(-50%);
  background: rgba(17,24,39,.92);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 10px 25px rgba(0,0,0,.14);
  opacity:.95;
  animation: pcsNudge 1.4s ease-in-out infinite;
  pointer-events:none;
}

/* açılınca animasyonu sustur (rahatsız etmesin) */
.pcs-actions.is-open .pcs-action-main::before,
.pcs-actions.is-open .pcs-action-main::after,
.pcs-actions.is-open .pcs-click-hint{
  animation: none !important;
  opacity: 0 !important;
}

/* kullanıcı bir kere tıklayınca artık gösterme */
.pcs-actions.pcs-cta-done .pcs-action-main::before,
.pcs-actions.pcs-cta-done .pcs-action-main::after,
.pcs-actions.pcs-cta-done .pcs-click-hint{
  animation:none !important;
  opacity:0 !important;
}

/* animasyonlar */
@keyframes pcsPulse{
  0%{ transform:scale(.85); opacity:.0; }
  25%{ opacity:.55; }
  100%{ transform:scale(1.25); opacity:0; }
}
@keyframes pcsPing{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 10px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* ✅ sağa doğru "dürtme" animasyonu */
@keyframes pcsNudge{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(4px); }
}
