/* ============================================================================
   paywall_kartlari.css — 4 SEVİYE KART (v5 — yumuşak ışık + senkron)
   ----------------------------------------------------------------------------
   v5 değişiklikleri:
     • mix-blend-mode: plus-lighter KALDIRILDI (aşırı parlaklık + kasma sebebi)
     • animation-play-state toggle KALDIRILDI (ışınlanma sebebi)
       → Animation hep çalışır, viewport dışı browser zaten paint etmez
     • Tüm kartlar AYNI duration (5s) — senkron sweep
     • Gradient stops yumuşatıldı (transparent 0→25→color@50→75→transparent)
     • Renk alpha'ları .65→.4 (yarı yarıya)
     • Border 2px → 1.5px (daha zarif)
     • backdrop-filter zaten kaldırılmıştı (v4)
   ============================================================================ */

/* ── ORTAK ─────────────────────────────────────────────────────────────────── */
.pw-boost, .pw-acil, .pw-sponsor, .pw-elite {
  position: relative;
  isolation: isolate;
  contain: paint;
}

/* Tek senkron sweep — tüm kartlar aynı kadansta */
.pw-boost::before,
.pw-acil::after,
.pw-sponsor::before,
.pw-elite::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: 200% 100%;
  background-position: -50% 0;
  animation: pwSheen 5s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes pwSheen {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

.pw-boost > *, .pw-acil > *, .pw-sponsor > *, .pw-elite > * {
  position: relative; z-index: 1;
}

/* ── ROZET ────────────────────────────────────────────────────────────────── */
.pw-rozet {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; color: #fff;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.pw-rozet svg { width: 12px; height: 12px; }

.pw-canli-sayac {
  position: absolute; bottom: 12px; right: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  background: rgba(0,0,0,.78); color: #ddd;
}
.pw-canli-sayac svg { width: 11px; height: 11px; opacity: .85; }

/* ════════════════════════════════════════════════════════════════════════════
   1) BOOST — Mavi (100p)
   ──────────────────────────────────────────────────────────────────────────── */
.pw-boost { border: 1.5px solid rgba(52,152,219,.5); }
.pw-boost::before {
  background-image: linear-gradient(115deg,
    transparent 0%, transparent 25%,
    rgba(91,160,232,.4) 50%,
    transparent 75%, transparent 100%);
}
.pw-boost > .pw-rozet {
  background: linear-gradient(120deg, #3498db, #5dade2);
  box-shadow: 0 4px 14px rgba(52,152,219,.45);
}

/* ════════════════════════════════════════════════════════════════════════════
   2) ACİL FON — Ultra Turuncusu (200p)
   ──────────────────────────────────────────────────────────────────────────── */
.pw-acil { border: 1.5px solid rgba(255,107,0,.55); }
.pw-acil::after {
  background-image: linear-gradient(115deg,
    transparent 0%, transparent 25%,
    rgba(255,138,61,.42) 50%,
    transparent 75%, transparent 100%);
}
.pw-acil > .pw-rozet {
  background: linear-gradient(120deg, #ff6b00, #ff8a3d);
  box-shadow: 0 4px 14px rgba(255,107,0,.5);
}

/* İlk yüklemede tek atım shake */
.pw-acil { animation: pwAcilShake .55s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes pwAcilShake {
  10%, 90% { transform: translate3d(-1px,0,0); }
  20%, 80% { transform: translate3d(2px,0,0); }
  30%, 50%, 70% { transform: translate3d(-3px,0,0); }
  40%, 60% { transform: translate3d(3px,0,0); }
}

.pw-acil .pw-garanti {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  font-size: 10px; font-weight: 700;
  padding: 5px 9px; border-radius: 8px;
  background: rgba(0,0,0,.8); color: #ffb074;
  letter-spacing: .3px;
}

/* ════════════════════════════════════════════════════════════════════════════
   3) SPONSORLU — Altın (500p)
   ──────────────────────────────────────────────────────────────────────────── */
.pw-sponsor { border: 1.5px solid rgba(241,196,15,.55); }
.pw-sponsor::before {
  background-image: linear-gradient(115deg,
    transparent 0%, transparent 25%,
    rgba(247,220,111,.45) 48%,
    rgba(255,250,200,.55) 50%,
    rgba(247,220,111,.45) 52%,
    transparent 75%, transparent 100%);
}
.pw-sponsor > .pw-rozet {
  background: linear-gradient(120deg, #f39c12, #f1c40f);
  color: #2c1810;
  box-shadow: 0 4px 16px rgba(241,196,15,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

/* Üst köşede STATİK ışıltı (paint = 1 kez) */
.pw-sponsor::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at top right,
    rgba(241,196,15,.12), transparent 55%);
  pointer-events: none; z-index: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   4) ELİTE — Mor (1000p)
   ──────────────────────────────────────────────────────────────────────────── */
.pw-elite {
  background: linear-gradient(155deg, #0a0a14 0%, #14132a 50%, #0a0a14 100%) !important;
  color: #fff !important;
  border: 1.5px solid rgba(155,89,255,.55) !important;
  overflow: hidden;
}
.pw-elite *:not(.pw-rozet):not(.pw-meteor):not(.pw-canli-sayac):not(.pw-rozet *) {
  color: inherit;
}
.pw-elite::before {
  background-image: linear-gradient(115deg,
    transparent 0%, transparent 25%,
    rgba(195,155,255,.45) 50%,
    transparent 75%, transparent 100%);
}
.pw-elite > .pw-rozet {
  background: linear-gradient(120deg, #9b59ff, #c39bff);
  box-shadow: 0 6px 20px rgba(155,89,255,.55);
}

/* Meteor şeritleri — sadece transform animate */
.pw-elite .pw-meteor {
  position: absolute; top: -10%; right: 10%;
  width: 1px; height: 60px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,.85), transparent);
  box-shadow: 0 0 6px rgba(155,89,255,.5);
  transform: rotate(215deg) translate3d(0,-10%,0);
  transform-origin: top;
  animation: pwMeteor 7s linear infinite;
  opacity: 0;
}
.pw-elite .pw-meteor:nth-child(2) { right: 35%; animation-delay: 2.5s; animation-duration: 8s; }
@keyframes pwMeteor {
  0%   { transform: rotate(215deg) translate3d(0,-10%,0);  opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: rotate(215deg) translate3d(0, 220%,0); opacity: 0; }
}

.pw-elite .pw-dogrulama {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  display: flex; gap: 6px;
}
.pw-elite .pw-dogrulama span {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(155,89,255,.18); border: 1px solid rgba(155,89,255,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #c39bff;
}

/* ════════════════════════════════════════════════════════════════════════════
   ERİŞİLEBİLİRLİK + MOBİL
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pw-boost::before, .pw-acil::after, .pw-acil,
  .pw-sponsor::before, .pw-elite::before, .pw-elite .pw-meteor {
    animation: none !important;
  }
}

@media (prefers-reduced-data: reduce) {
  .pw-elite .pw-meteor { display: none !important; }
}

@media (max-width: 600px) {
  /* Mobilde sweep tamamen kapat — statik gradient kart ortasını ikiye bölüyordu */
  .pw-boost::before, .pw-acil::after, .pw-sponsor::before, .pw-elite::before {
    display: none !important;
  }
  .pw-elite .pw-meteor { display: none !important; }
  .pw-acil { animation: none !important; }

  /* Rozet — mobilde küçült, başlık üstüne taşmasın */
  .pw-rozet {
    top: 8px; left: 8px;
    padding: 3px 7px;
    font-size: 9px;
    gap: 4px;
    letter-spacing: .5px;
  }
  .pw-rozet svg { width: 9px; height: 9px; }

  .pw-canli-sayac {
    font-size: 9px;
    padding: 3px 6px;
    bottom: 8px; right: 8px;
  }
  .pw-canli-sayac svg { width: 9px; height: 9px; }

  .pw-acil .pw-garanti {
    top: 8px; right: 8px;
    font-size: 8.5px;
    padding: 3px 6px;
  }

  .pw-elite .pw-dogrulama { top: 8px; right: 8px; }
  .pw-elite .pw-dogrulama span { width: 18px; height: 18px; font-size: 9px; }

  .pw-elite, .pw-sponsor, .pw-acil, .pw-boost {
    content-visibility: auto;
    contain-intrinsic-size: 1px 200px;
  }
}