/* RazerPin - Paket Kartı Eklenti Stilleri
 * - Fiyat + bonus yan yana (kompakt)
 * - Bonus artık pill kutusu değil düz metin
 * - Amount (coin-count) daha büyük
 * - Tablet 4 sütun (768px+ da 4x2 grid)
 * - Yeni etiketler: En Çok Satan / En Avantajlı
 */

/* Etiketler artık kutusuz - kartın en üstünde renkli metin (başlığın ÜSTÜNDE) */
.pkg-tag{
  display:block;
  text-align:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.4px;
  margin:0 auto 4px;
  padding:0;
  background:none;
  border:none;
  text-transform:uppercase;
}
.pkg-tag--sold{
  color:#ef4444;
  text-shadow:0 1px 2px rgba(239,68,68,.2);
}
.pkg-tag--value{
  color:#10b981;
  text-shadow:0 1px 2px rgba(16,185,129,.2);
}
.pkg-tag--pop{
  color:#f59e0b;
  text-shadow:0 1px 2px rgba(245,158,11,.2);
}

/* Eski absolute .popular-badge - artık kullanılmıyor ama gizle */
.package .popular-badge{display:none !important}

/* TÜKENDİ - dim edilmiş kartlar + büyük diagonal overlay */
.pkg-soldout{
  position:relative;
}
.pkg-soldout .package{
  filter:grayscale(.85) opacity(.6);
  transition:filter .3s;
}
.pkg-soldout .package::before{opacity:.2 !important}
.pkg-soldout:hover .package{filter:grayscale(.6) opacity(.75)}
.pkg-soldout .package-title{
  color:#94a3b8 !important;
  background:none !important;
  -webkit-text-fill-color:#94a3b8 !important;
}
/* Kart üstünde diagonal TÜKENDİ kaşesi - kartı taşmayacak, ince */
.pkg-soldout::after{
  content:"TÜKENDİ";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-16deg);
  font-size:clamp(15px,3.2vw,22px);
  font-weight:800;
  letter-spacing:2px;
  color:#dc2626;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  pointer-events:none;
  z-index:5;
  white-space:nowrap;
  padding:4px 14px;
  border:2px solid #dc2626;
  border-radius:4px;
  background-color:rgba(255,255,255,.4);
  backdrop-filter:blur(1px);
  max-width:80%;
}
@media (max-width:640px){
  .pkg-soldout::after{
    font-size:clamp(13px,4vw,18px);
    padding:3px 10px;
    border-width:1.5px;
    letter-spacing:1.5px;
  }
}
.soldout-btn{
  background:linear-gradient(90deg,#6b7280,#9ca3af) !important;
  cursor:not-allowed !important;
  opacity:.85;
  box-shadow:none !important;
}
.soldout-btn:hover{transform:none !important;box-shadow:none !important}

/* Grid override — tablet 4 sütun */
.packages{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:20px;
}
@media (max-width:640px){
  .packages{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px;
  }
}
@media (max-width:360px){
  .packages{
    grid-template-columns:1fr !important;
  }
}

/* Amount (jeton sayısı) - belirgin altın renk + inline coin ikonu */
.package .coin-count{
  font-size:1.75rem !important;
  font-weight:900 !important;
  line-height:1.1;
  margin:6px 0 4px !important;
  color:#0f172a !important;
  background:none !important;
  -webkit-text-fill-color:#0f172a !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.package .coin-count::before{
  content:'';
  display:inline-block;
  width:1em;
  height:1em;
  background:url('/images/tiktok-coin.png') no-repeat center/contain;
  flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(251,191,36,.35));
}
.package-wrapper{text-align:center}
/* Mobil: küçük ama okunur + belirgin renk (px sabit değer, rem'e bağımlı değil) */
@media (max-width:900px){
  .package .coin-count{font-size:24px !important; color:#0f172a !important; -webkit-text-fill-color:#0f172a !important;}
}
@media (max-width:640px){
  .package .coin-count{font-size:22px !important; color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; font-weight:900 !important;}
  .package .coin-count::before{width:24px; height:24px;}
}
@media (max-width:480px){
  .package .coin-count{font-size:20px !important; gap:5px;}
  .package .coin-count::before{width:22px; height:22px;}
}

/* Fiyat + Bonus yan yana */
.price-bonus-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}
.price-bonus-row .price{
  margin:0;
}
/* Bonus artık PILL DEĞİL - düz metin */
.price-bonus-row .bonus{
  margin:0;
  background:none !important;
  border:none !important;
  padding:0 !important;
  border-radius:0 !important;
  color:#f59e0b;
  font-weight:700;
}
@media (max-width:640px){
  .price-bonus-row{gap:8px}
  .price-bonus-row .bonus{font-size:.8rem}
}

/* Ödemeye Geç butonu highlight (kullanıcı TikTok'tan döndüğünde) */
@keyframes jcPulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55),0 8px 20px rgba(6,182,212,.35)}
  50%{box-shadow:0 0 0 12px rgba(16,185,129,0),0 8px 20px rgba(6,182,212,.35)}
}
.pulse-glow{
  animation:jcPulseGlow 1.6s ease-in-out infinite;
  outline:2px solid #10b981;
  outline-offset:2px;
  transform:scale(1.02);
  transition:transform .3s;
}