/* ============================================================================
 * gate.css — ücretsiz kapı + ödeme duvarı görünümü
 * Cam yüzey, derin gölge, yumuşak parıltı. Oynatıcının kendi stiline
 * dokunmaz; her seçici `gate-`, `pw-` ya da `is-guest` ile başlar.
 * ========================================================================== */

/* ----------------------------------------------------------- kota şeridi */
.gate-bar{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:900; display:flex; align-items:center; gap:12px;
  padding:9px 15px 9px 17px; border-radius:99px;
  background:rgba(14,17,30,.72); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09);
  font:600 12px/1 'Archivo',system-ui,sans-serif; color:#cfd6ee;
  transition:opacity .3s, transform .3s;
}
body.is-member .gate-bar{ display:none !important; }
body.pw-open .gate-bar{ opacity:0; pointer-events:none; }

.gate-bar__lbl{ letter-spacing:.06em; text-transform:uppercase; font-size:10px; opacity:.62 }
.gate-bar__track{ width:132px; height:5px; border-radius:99px; background:rgba(255,255,255,.11); overflow:hidden }
.gate-bar__fill{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#6ee7b7,#38bdf8); transition:width .6s linear }
.gate-bar__time{ font-variant-numeric:tabular-nums; font-weight:800; color:#fff; min-width:38px; text-align:right }
.gate-bar__cta{ margin-left:4px; padding:5px 12px; border-radius:99px; text-decoration:none;
  font-weight:800; font-size:11px; color:#08111e;
  background:linear-gradient(120deg,#fbbf24,#f59e0b);
  box-shadow:0 6px 18px -6px rgba(245,158,11,.8); transition:.2s }
.gate-bar__cta:hover{ transform:translateY(-1px); filter:brightness(1.08) }

.gate-bar--low .gate-bar__fill{ background:linear-gradient(90deg,#fbbf24,#f97316) }
.gate-bar--low{ animation:gateNudge 2.6s ease-in-out infinite }
.gate-bar--out .gate-bar__fill{ background:#ef4444 }
@keyframes gateNudge{ 0%,100%{transform:translateX(-50%)} 50%{transform:translateX(-50%) translateY(-3px)} }
@media (prefers-reduced-motion:reduce){ .gate-bar--low{animation:none} }

/* ------------------------------------------------------- kilitli içerik */
.gate-lock{ position:absolute; inset:0; z-index:4; display:flex;
  align-items:center; justify-content:center; border-radius:inherit;
  background:linear-gradient(180deg,rgba(6,9,18,.35),rgba(6,9,18,.82));
  backdrop-filter:blur(1.5px); opacity:0; transition:opacity .22s }
.card:hover .gate-lock, .gate-locked .gate-lock{ opacity:1 }
.gate-lock__i{ width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(251,191,36,.16); border:1px solid rgba(251,191,36,.5); color:#fbbf24; font-size:14px;
  box-shadow:0 8px 22px -8px rgba(251,191,36,.7) }

/* --------------------------------------------------------- ödeme duvarı */
.pw{ position:fixed; inset:0; z-index:1200; display:none;
  align-items:center; justify-content:center; padding:28px 18px; overflow:auto;
  background:radial-gradient(120% 90% at 50% 0%,rgba(30,20,60,.86),rgba(4,6,14,.96));
  backdrop-filter:blur(10px) }
.pw.open{ display:flex }

.pw__box{ width:min(940px,100%); border-radius:26px; position:relative; overflow:hidden;
  background:linear-gradient(160deg,rgba(26,30,52,.96),rgba(12,15,28,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.95),
             inset 0 1px 0 rgba(255,255,255,.10),
             0 0 90px -40px rgba(139,92,246,.7);
  animation:pwIn .42s cubic-bezier(.22,1,.36,1) }
@keyframes pwIn{ from{opacity:0;transform:translateY(26px) scale(.97)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .pw__box{animation:none} }

/* üstten geçen ışık — "premium" hissi */
.pw__box::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.055) 50%,transparent 58%);
  background-size:250% 100%; animation:pwShine 6s linear infinite }
@keyframes pwShine{ 0%{background-position:170% 0} 100%{background-position:-70% 0} }

.pw__head{ padding:34px 34px 22px; text-align:center; position:relative }
.pw__kicker{ display:inline-flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#fbbf24;
  padding:6px 13px; border-radius:99px; background:rgba(251,191,36,.11);
  border:1px solid rgba(251,191,36,.34); margin-bottom:14px }
.pw__title{ margin:0 0 10px; font-size:clamp(23px,3.4vw,32px); font-weight:800; line-height:1.15; color:#fff;
  letter-spacing:-.02em; text-shadow:0 3px 22px rgba(0,0,0,.6) }
.pw__desc{ margin:0 auto; max-width:560px; font-size:14px; line-height:1.62; color:rgba(214,222,248,.72) }

.pw__plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:11px; padding:6px 26px 20px }
.pw-plan{ position:relative; display:flex; flex-direction:column; gap:3px; text-decoration:none;
  padding:17px 15px 15px; border-radius:16px; isolation:isolate;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .24s cubic-bezier(.22,1,.36,1), border-color .24s, box-shadow .24s }
.pw-plan:hover{ transform:translateY(-5px);
  border-color:rgba(139,92,246,.6);
  box-shadow:0 26px 52px -18px rgba(0,0,0,.9), 0 0 44px -20px rgba(139,92,246,.85) }
.pw-plan--best{ border-color:rgba(251,191,36,.55);
  background:linear-gradient(165deg,rgba(251,191,36,.13),rgba(255,255,255,.02)) }
.pw-plan__tag{ position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:8.5px; font-weight:900; letter-spacing:.1em; padding:3px 9px; border-radius:99px;
  background:linear-gradient(120deg,#fbbf24,#f59e0b); color:#0b0e18; white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(245,158,11,.9) }
.pw-plan__grp{ font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(214,222,248,.5) }
.pw-plan__ay{ font-size:16px; font-weight:800; color:#fff }
.pw-plan__fiyat{ margin-top:5px; font-size:25px; font-weight:900; color:#fff; line-height:1;
  letter-spacing:-.02em }
.pw-plan__aylik{ font-size:11px; color:rgba(214,222,248,.55) }
.pw-plan__cta{ margin-top:11px; font-size:11.5px; font-weight:800; color:#c4b5fd }
.pw-plan--best .pw-plan__cta{ color:#fbbf24 }
.pw-fallback{ grid-column:1/-1; text-align:center; padding:16px; color:#c4b5fd; font-weight:700; text-decoration:none }

.pw__foot{ padding:18px 30px 26px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px }
.pw__devices{ display:flex; align-items:center; gap:14px; font-size:11.5px; color:rgba(214,222,248,.55) }
.pw__devices b{ color:rgba(214,222,248,.85); font-weight:700 }
.pw__dev{ display:inline-flex; align-items:center; gap:5px }
.pw__acts{ display:flex; align-items:center; gap:9px }
.pw__btn{ padding:10px 17px; border-radius:11px; border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05); color:#dbe3ff; font-size:12.5px; font-weight:700;
  cursor:pointer; transition:.18s }
.pw__btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28) }
.pw__btn--ghost{ background:transparent; border-color:transparent; color:rgba(214,222,248,.5) }

/* ------------------------------------------------- misafir rozeti (giriş) */
.gate-guest-note{ margin-top:6px; font-size:11.5px; color:rgba(214,222,248,.5); line-height:1.5 }
.gate-guest-note b{ color:#fbbf24; font-weight:700 }

/* --------------------------------------- üye girişliyken satış düğmeleri yok
   Giriş yapmış birine "Premium login" ve "Get Premium" göstermek anlamsız.
   `is-member` / `is-guest` sınıflarını gate.js zaten body'ye yazıyor, o yüzden
   tek kaynak burası — JS'te ayrıca göster/gizle yapmak iki yerden yönetmek
   olurdu. `!important` ŞART: düğmelerin satır içi `style` özniteliği var.
   ⚠️ Çıkışta damga misafire dönmezse bu kural giriş düğmesini de gizli
   bırakır — index.html'deki logoutBtn bu yüzden tierTazele()'yi çağırıyor. */
body.is-member #navLogin,
body.is-member #navBuy{ display:none !important }

/* Logout `.ico` sınıfındaydı: 34×34 ikon karesine "Logout" YAZISI sığmıyor,
   taşıyordu. Satış düğmeleri kalkınca sırada tek başına kaldığı için göze
   battı — giriş düğmesiyle aynı ölçüye getirildi. `enterHome()` görünürlüğü
   `display:grid` ile açtığı için hizalama grid üzerinden veriliyor. */
#logoutBtn{ width:auto !important; height:auto !important; place-items:center;
  padding:8px 14px !important; border-radius:6px; white-space:nowrap;
  font-size:13px; font-weight:600; letter-spacing:0 }

/* ------------------------------------------------- ekrana yansıtma düğmesi
   Yalnızca gerçekten yansıtılabilecekken görünür (bkz. index.html
   "EKRANA YANSITMA"); ölü düğme göstermiyoruz. */
.cast-btn{ margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:6px; cursor:pointer; white-space:nowrap;
  font-size:13px; font-weight:600; color:#e8ebf1;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  transition:background .16s, border-color .16s, transform .16s }
.cast-btn:hover{ background:rgba(255,255,255,.16); border-color:#fff; color:#fff;
  transform:translateY(-1px) }
.cast-btn.is-on{ background:#e50914; border-color:#e50914; color:#fff }
@media (max-width:640px){ .cast-btn__t{ display:none } .cast-btn{ padding:8px 10px } }

@media (max-width:640px){
  .gate-bar{ bottom:14px; padding:8px 12px; gap:9px }
  .gate-bar__track{ width:82px }
  .gate-bar__lbl{ display:none }
  .pw__head{ padding:26px 20px 16px }
  .pw__plans{ padding:6px 16px 16px }
  .pw__foot{ padding:16px 18px 20px }
}