/* ============================================================================
 * netflix.css — SMURF WATCH görsel dili
 *
 * Netflix'in YERLEŞİM ve ETKİLEŞİM dili: koyu zemin, kırmızı vurgu, tam
 * genişlik hero afişi, yatay kayan sıralar, üzerine gelince büyüyen kartlar,
 * kayarken görünür hâle gelen üst çubuk, oynatıcıda alta yerleşen kontroller.
 *
 * Marka SMURF'tür — Netflix'in logosu, kelime markası ya da görselleri
 * KULLANILMAZ. Alınan şey bir görsel dil, bir kimlik değil.
 *
 * Bu dosya index.html'in kendi stilinin ÜSTÜNE biner; değişkenleri ezip
 * bileşenleri yeniden biçimlendirir. Oynatıcı mantığına dokunmaz.
 * ========================================================================== */

:root{
  --bg:#141414; --bg2:#181818; --card:#181818; --card2:#232323;
  --line:#2b2b2b; --text:#ffffff; --muted:#b3b3b3; --dim:#808080;
  --accent:#e50914; --accent2:#f6121d;
  --grad:linear-gradient(120deg,#e50914,#b20710);
  --nf-shadow:0 8px 26px rgba(0,0,0,.85);
}

html,body{ background:#141414 !important; }
body{ font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; }

/* ------------------------------------------------------------- üst çubuk */
.topbar{
  position:fixed !important; top:0; left:0; right:0; z-index:800;
  height:68px; padding:0 4% !important;
  display:flex; align-items:center; gap:26px;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 10%,transparent) !important;
  border-bottom:0 !important; backdrop-filter:none !important;
  transition:background-color .4s ease;
}
body.nf-scrolled .topbar{ background:#141414 !important; box-shadow:0 2px 14px rgba(0,0,0,.6); }

.brand .word{
  font-weight:900 !important; letter-spacing:-.02em; font-size:26px !important;
  color:var(--accent) !important; background:none !important;
  -webkit-text-fill-color:var(--accent) !important;
  text-shadow:0 2px 10px rgba(229,9,20,.45);
}
.brand .tag{ color:var(--muted) !important; font-weight:700; letter-spacing:.22em; font-size:9.5px !important; }

/* İçeriği sabit çubuğun altından başlat. `#home` kendi padding'ini
   taşıdığı için !important gerekiyor — yoksa araç çubuğu başlığın altına
   giriyor. */
.view{ padding-top:96px !important; }
.view#login{ padding-top:0 !important; }
.view#browse{ padding-top:68px !important; }

/* --------------------------------------------------------------- hero */
.hero{
  position:relative; min-height:min(78vh,660px) !important;
  margin:0 0 8px !important; border-radius:0 !important; overflow:hidden;
  display:flex; align-items:center;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover !important;
  background-position:center 18% !important; transform:scale(1.02); filter:none !important;
}
/* Netflix'in iki katmanlı perdesi: soldan metin okunurluğu, alttan sıralara geçiş */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(77deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.42) 42%,transparent 76%),
    linear-gradient(180deg,transparent 52%,rgba(20,20,20,.72) 82%,#141414 100%);
}
.hero-inner{
  position:relative; z-index:2; width:min(38rem,88%); padding:0 0 0 4% !important;
  text-align:left !important;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px !important;
  font-size:11px !important; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:#fff !important; background:none !important; border:0 !important; padding:0 !important;
}
.hero .eyebrow::before{ content:''; width:4px; height:19px; border-radius:2px; background:var(--accent); }
.hero #heroTitle{
  font-size:clamp(30px,4.4vw,62px) !important; font-weight:900 !important;
  line-height:1.02 !important; letter-spacing:-.025em; margin:0 0 16px !important;
  color:#fff !important; text-shadow:2px 2px 6px rgba(0,0,0,.55);
}
.hero .grp{
  font-size:15px !important; color:#dcdcdc !important; margin-bottom:22px !important;
  max-width:34rem; line-height:1.5; text-shadow:1px 1px 4px rgba(0,0,0,.6);
}
.hero .play-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 26px !important; border-radius:4px !important; border:0 !important;
  background:#fff !important; color:#000 !important;
  font-size:16px !important; font-weight:800 !important; cursor:pointer;
  transition:background-color .18s;
}
.hero .play-btn:hover{ background:rgba(255,255,255,.78) !important; }

/* --------------------------------------------------------------- sıralar */
.row{ margin:0 0 3vw !important; padding:0 !important; }
.row-head{ padding:0 4% !important; margin-bottom:9px !important; }
.row-head h3{
  font-size:clamp(15px,1.32vw,23px) !important; font-weight:800 !important;
  color:#e5e5e5 !important; letter-spacing:-.01em; margin:0 !important;
}
.row-head .cnt{ color:var(--dim) !important; font-size:11.5px !important; font-weight:600; }

.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:6px; padding:0 4% !important; overflow-x:auto;
  scroll-behavior:smooth; scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }

/* Netflix'in kenar okları: tam yükseklik, sadece sıraya gelince görünür */
.rail-arrow{
  position:absolute; top:0; bottom:0; width:4%; z-index:6;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55) !important; border:0 !important; border-radius:0 !important;
  color:#fff !important; font-size:30px !important; cursor:pointer;
  opacity:0; transition:opacity .2s, background-color .2s;
}
.rail-wrap:hover .rail-arrow{ opacity:1; }
.rail-arrow:hover{ background:rgba(0,0,0,.78) !important; font-size:36px !important; }
.rail-arrow.l{ left:0; } .rail-arrow.r{ right:0; }

/* --------------------------------------------------------------- kartlar */
.tile{
  flex:0 0 auto; width:clamp(150px,15.6vw,268px) !important;
  border-radius:4px !important; background:none !important; border:0 !important;
  padding:0 !important; cursor:pointer; position:relative;
  transition:transform .28s cubic-bezier(.22,1,.36,1); transform-origin:center;
}
.tile-art{
  position:relative; aspect-ratio:16/9; border-radius:4px; overflow:hidden;
  background:#232323; box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.tile-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.mono-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:26px; letter-spacing:.06em; color:#4a4a4a; background:#232323;
}
.tile-name{
  margin-top:7px !important; font-size:12.5px !important; font-weight:600 !important;
  color:#d2d2d2 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tile-grp{ font-size:11px !important; color:var(--dim) !important; }

/* Üzerine gelince öne çık — Netflix'in imza hareketi */
@media (hover:hover) and (min-width:900px){
  .rail:hover .tile{ transform:translateX(-14%); }
  .rail .tile:hover ~ .tile{ transform:translateX(14%); }
  .rail .tile:hover{
    transform:scale(1.42) !important; z-index:20;
  }
  .rail .tile:hover .tile-art{
    box-shadow:0 18px 40px rgba(0,0,0,.9); border-radius:5px;
  }
  .rail .tile:hover .tile-name{ font-size:11px !important; color:#fff !important; }
}
.rating-badge{
  position:absolute; top:7px; left:7px; z-index:3;
  background:rgba(0,0,0,.72); color:#f5c518; font-size:10.5px; font-weight:800;
  padding:2px 6px; border-radius:3px; backdrop-filter:blur(3px);
}

/* ------------------------------------------------- kategori giriş kartları
   ⚠️ Önce `aspect-ratio:16/9` + `padding:0` vermiştim; özgün kart
   `padding:28px; min-height:210px` ile dikey yerleşim kullanıyor, ikisi
   çakışıp kartları iç içe geçirdi. Artık YALNIZCA yüzey diline dokunuyoruz,
   ölçüye karışmıyoruz. */
.cat-card{
  border-radius:6px !important;
  border:0 !important;
  box-shadow:0 8px 26px rgba(0,0,0,.6) !important;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s !important;
}
.cat-card:hover{ transform:scale(1.035) !important;
  box-shadow:0 22px 52px rgba(0,0,0,.88) !important; }
.cat-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.72));
}
.cat-title,.cat-sub,.cat-icon{ position:relative; z-index:2; }
.cat-title{ font-weight:900 !important; letter-spacing:-.02em; }
.cat-sub{ color:rgba(255,255,255,.72) !important; }
.cat-icon{ filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)); }

/* --------------------------------------------------------------- düğmeler */
.tool-btn,.back-btn,.icon-btn{
  border-radius:4px !important; border:1px solid rgba(255,255,255,.22) !important;
  background:rgba(42,42,42,.62) !important; color:#e5e5e5 !important;
  font-weight:600 !important; transition:.18s;
}
.tool-btn:hover,.back-btn:hover,.icon-btn:hover{
  background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.45) !important;
}
#btnBuy,.buy-login{
  background:var(--accent) !important; color:#fff !important; border:0 !important;
  border-radius:4px !important; font-weight:800 !important;
  box-shadow:0 6px 18px -6px rgba(229,9,20,.8);
}
#btnBuy:hover,.buy-login:hover{ background:#f6121d !important; }

/* --------------------------------------------------------------- oynatıcı */
.player-wrap,#playerView{ background:#000 !important; }
video{ background:#000 !important; }
.p-bar,.player-bar,.controls{
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88)) !important;
  border:0 !important;
}
input[type=range]{ accent-color:var(--accent); }

/* --------------------------------------------------------------- formlar */
.field{
  background:#333 !important; border:0 !important; border-radius:4px !important;
  color:#fff !important; padding:14px 16px !important; font-size:15px !important;
}
.field:focus{ outline:2px solid rgba(255,255,255,.5); }
.go{
  background:var(--accent) !important; color:#fff !important; border:0 !important;
  border-radius:4px !important; font-weight:800 !important; padding:13px 20px !important;
  transition:background-color .18s;
}
.go:hover{ background:#f6121d !important; }
.tab.active{ border-color:var(--accent) !important; color:#fff !important; }

/* Giriş ekranı — Netflix'in kart üstü koyu panel dili */
#login .card{
  background:rgba(0,0,0,.72) !important; border:0 !important; border-radius:5px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.8) !important; backdrop-filter:blur(2px);
}

/* --------------------------------------------------------------- modaller */
.modal,.sheet{ background:rgba(0,0,0,.72) !important; }
.modal > div,.sheet > div{
  background:#181818 !important; border:1px solid #333 !important; border-radius:6px !important;
  box-shadow:0 24px 70px rgba(0,0,0,.9) !important;
}

/* Ödeme duvarını da aynı dile getir */
.pw__box{
  background:#181818 !important;
  border:1px solid rgba(255,255,255,.12) !important; border-radius:6px !important;
  box-shadow:0 40px 110px rgba(0,0,0,.95) !important;
}
.pw__kicker{ color:var(--accent) !important; background:rgba(229,9,20,.12) !important;
  border-color:rgba(229,9,20,.4) !important; }
.pw-plan--best{ border-color:rgba(229,9,20,.6) !important;
  background:linear-gradient(165deg,rgba(229,9,20,.14),rgba(255,255,255,.02)) !important; }
.pw-plan__tag{ background:var(--accent) !important; color:#fff !important;
  box-shadow:0 6px 16px -6px rgba(229,9,20,.9) !important; }
.pw-plan__cta{ color:#e5e5e5 !important; }
.pw-plan--best .pw-plan__cta{ color:#ff5a63 !important; }
.pw-plan:hover{ border-color:rgba(229,9,20,.65) !important;
  box-shadow:0 26px 52px -18px rgba(0,0,0,.9),0 0 40px -18px rgba(229,9,20,.7) !important; }
.gate-bar__cta{ background:var(--accent) !important; color:#fff !important;
  box-shadow:0 6px 18px -6px rgba(229,9,20,.85) !important; }
.gate-bar__fill{ background:linear-gradient(90deg,#e50914,#ff5a63) !important; }

@media (max-width:760px){
  .topbar{ height:56px; padding:0 4% !important; gap:14px; }
  .view{ padding-top:56px; }
  .hero{ min-height:56vh !important; }
  .hero-inner{ width:92%; }
  .tile{ width:42vw !important; }
}

/* ==================== ülke & dil seçimi ==================== */
.rg-open{ margin-left:6px; font-size:12px !important; padding:7px 12px !important }
@media(max-width:760px){ .rg-open__t{ display:none } }

.rg{ position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center;
  padding:26px 16px; overflow:auto; background:rgba(0,0,0,.82); backdrop-filter:blur(8px) }
.rg.open{ display:flex }
.rg__box{ width:min(860px,100%); background:#181818; border:1px solid rgba(255,255,255,.12);
  border-radius:8px; box-shadow:0 44px 110px rgba(0,0,0,.95);
  animation:rgIn .38s cubic-bezier(.22,1,.36,1) }
@keyframes rgIn{ from{opacity:0;transform:translateY(22px) scale(.98)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .rg__box{animation:none} }

.rg__head{ padding:28px 30px 18px; border-bottom:1px solid rgba(255,255,255,.08) }
.rg__kicker{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:#e50914; background:rgba(229,9,20,.12);
  border:1px solid rgba(229,9,20,.36); border-radius:99px; padding:5px 12px; margin-bottom:13px }
.rg__title{ margin:0 0 9px; font-size:clamp(21px,2.7vw,29px); font-weight:900; color:#fff; letter-spacing:-.02em }
.rg__desc{ margin:0 0 14px; font-size:14px; line-height:1.6; color:#b3b3b3; max-width:58ch }
.rg__note{ font-size:12.5px; line-height:1.65; color:#9d9d9d; padding:12px 14px; border-radius:5px;
  background:rgba(255,255,255,.045); border-left:3px solid #e50914 }
.rg__note b{ color:#e5e5e5 }

.rg__sec{ padding:18px 30px 6px }
.rg__sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px;
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#b3b3b3 }
.rg__tools button{ background:none; border:0; color:#8ab4ff; font-size:11.5px; font-weight:700;
  cursor:pointer; padding:3px 6px }
.rg__tools button:hover{ text-decoration:underline }
.rg__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:7px;
  max-height:36vh; overflow-y:auto; padding-right:4px }
.rg-load{ grid-column:1/-1; padding:26px; text-align:center; color:#808080; font-size:13px }
.rg-chip{ display:flex; align-items:center; gap:8px; padding:9px 11px; cursor:pointer; text-align:left;
  border-radius:5px; background:rgba(255,255,255,.05); border:1px solid transparent;
  color:#d2d2d2; font-size:12.5px; font-weight:600; transition:.15s }
.rg-chip:hover{ background:rgba(255,255,255,.1) }
.rg-chip.is-on{ background:rgba(229,9,20,.16); border-color:#e50914; color:#fff }
.rg-chip__f{ font-size:16px; line-height:1 }
.rg-chip__n{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rg-chip__c{ font-size:10.5px; color:#808080; font-variant-numeric:tabular-nums }
.rg-chip.is-on .rg-chip__c{ color:rgba(255,255,255,.7) }
.rg__count{ margin-top:10px; font-size:11.5px; color:#808080 }

.rg__row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  padding:16px 30px; border-top:1px solid rgba(255,255,255,.08); margin-top:14px }
.rg__check{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:#d2d2d2; cursor:pointer; max-width:60ch }
.rg__check input{ margin-top:2px; accent-color:#e50914; width:16px; height:16px }
.rg__check i{ color:#808080; font-style:normal; font-size:12px }
.rg__lang{ display:flex; align-items:center; gap:8px; font-size:12px; color:#b3b3b3 }
.rg__lang select{ background:#333; border:0; color:#fff; border-radius:4px; padding:8px 11px; font-size:13px }

.rg__foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 30px 24px }
.rg__btn{ padding:11px 22px; border-radius:4px; border:0; font-size:14px; font-weight:800; cursor:pointer; transition:.18s }
.rg__btn--ghost{ background:rgba(255,255,255,.08); color:#d2d2d2 }
.rg__btn--ghost:hover{ background:rgba(255,255,255,.16) }
.rg__btn--go{ background:#e50914; color:#fff }
.rg__btn--go:hover{ background:#f6121d }
.rg__btn--go:disabled{ opacity:.4; cursor:default }

/* Hero metin bloğunun kendi zemini vardı — Netflix'te metin doğrudan
   afişin üstünde durur, arkasında kutu olmaz. Perdeyi .hero::after veriyor. */
.hero-inner{ background:none !important; box-shadow:none !important; border:0 !important; }

/* Seçili ülke AÇIKÇA belli olsun — %16 kırmızı tint koyu zeminde
   ayırt edilmiyordu, kullanıcı neyi seçtiğini göremiyordu. */
.rg-chip{ position:relative; padding-left:32px !important; }
.rg-chip::before{
  content:''; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; border-radius:4px;
  border:2px solid rgba(255,255,255,.28); background:transparent; transition:.15s;
}
.rg-chip.is-on{
  background:rgba(229,9,20,.30) !important;
  border-color:#e50914 !important;
  color:#fff !important;
  box-shadow:0 0 0 1px rgba(229,9,20,.5), 0 4px 14px -6px rgba(229,9,20,.8);
}
.rg-chip.is-on::before{
  background:#e50914; border-color:#e50914;
  box-shadow:inset 0 0 0 2px #181818;
}
.rg-chip.is-on .rg-chip__n{ font-weight:800; }

/* ==================== misafir girişi ==================== */
.gst{ margin:4px 0 14px }
.gst__go{ display:flex; align-items:center; gap:13px; width:100%; cursor:pointer;
  padding:14px 16px; border-radius:5px; text-align:left;
  background:linear-gradient(120deg,rgba(229,9,20,.18),rgba(229,9,20,.06));
  border:1px solid rgba(229,9,20,.45); color:#fff; transition:.2s }
.gst__go:hover{ background:linear-gradient(120deg,rgba(229,9,20,.3),rgba(229,9,20,.12));
  border-color:#e50914; transform:translateY(-1px);
  box-shadow:0 10px 26px -10px rgba(229,9,20,.7) }
.gst__go:disabled{ opacity:.6; cursor:default; transform:none }
.gst__ico{ width:36px; height:36px; flex:0 0 auto; border-radius:50%; background:#e50914;
  display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff }
.gst__txt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.gst__txt b{ font-size:15px; font-weight:800 }
.gst__txt i{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.6); line-height:1.4 }
.gst__or{ position:relative; text-align:center; margin:14px 0 2px }
.gst__or::before{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,255,255,.12) }
.gst__or span{ position:relative; background:#181818; padding:0 12px; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#808080 }

/* ==================== üzerine gelince açılan bilgi kartı ====================
   Kapak BÜYÜMEZ; kart bir bütün olarak yükselir ve altından panel açılır.
   Eski `scale()` yaklaşımı yazıyı da büyütüp kırpıyordu. */
.rail .tile:hover{ transform:none !important; z-index:auto !important; }
.rail:hover .tile, .rail .tile:hover ~ .tile{ transform:none !important; }

.nfx{
  position:absolute; z-index:700; opacity:0; pointer-events:none;
  transform:scale(.9) translateY(14px); transform-origin:center bottom;
  border-radius:6px; overflow:hidden; background:#181818;
  box-shadow:0 26px 60px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  /* "Pat" diye açılmasın: uzun süre + yumuşak eğri. Gölge ve içerik de
     birlikte gelsin ki kart tek parça hâlinde büyüyormuş gibi dursun. */
  transition:opacity .34s cubic-bezier(.4,0,.2,1),
             transform .52s cubic-bezier(.16,.84,.24,1),
             box-shadow .52s cubic-bezier(.16,.84,.24,1);
}
.nfx.open{ opacity:1; pointer-events:auto; transform:scale(1) translateY(0); }
/* Panel içeriği kapaktan hemen sonra süzülsün — katmanlı bir açılış hissi. */
.nfx__body{ opacity:0; transform:translateY(6px);
  transition:opacity .3s ease .16s, transform .38s cubic-bezier(.16,.84,.24,1) .16s; }
.nfx.open .nfx__body{ opacity:1; transform:none; }

.nfx__art{ position:relative; aspect-ratio:16/9; background:#232323; }
.nfx__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.nfx__ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:34px; color:#4a4a4a; letter-spacing:.06em; }
.nfx__fade{ position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(180deg,transparent,#181818); }
.nfx__lock{ position:absolute; top:9px; right:9px; font-size:10.5px; font-weight:800;
  padding:4px 9px; border-radius:4px; background:rgba(0,0,0,.78); color:#fbbf24;
  border:1px solid rgba(251,191,36,.5); }

.nfx__body{ padding:12px 14px 15px; }
.nfx__acts{ display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.nfx__b{
  width:34px; height:34px; border-radius:50%; cursor:pointer; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:rgba(42,42,42,.85); border:2px solid rgba(255,255,255,.45); color:#fff;
  transition:.16s;
}
.nfx__b:hover{ border-color:#fff; background:rgba(255,255,255,.16); }
.nfx__b--play{ background:#fff; border-color:#fff; color:#000; font-size:12px; }
.nfx__b--play:hover{ background:rgba(255,255,255,.75); }
.nfx__b--more{ margin-left:auto; }

.nfx__meta{ display:flex; align-items:center; gap:9px; font-size:11.5px; margin-bottom:7px; }
.nfx__match{ color:#46d369; font-weight:800; }
.nfx__age{ padding:0 5px; border:1px solid rgba(255,255,255,.42); color:#d2d2d2;
  font-size:10.5px; border-radius:2px; }
.nfx__hd{ padding:0 4px; border:1px solid rgba(255,255,255,.28); color:#a0a0a0;
  font-size:9.5px; border-radius:2px; letter-spacing:.04em; }

.nfx__title{ font-size:14px; font-weight:800; color:#fff; margin-bottom:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nfx__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:11.5px; color:#b3b3b3; }
.nfx__tags i{ color:#5a5a5a; font-style:normal; font-size:8px; }

@media (prefers-reduced-motion:reduce){ .nfx{ transition:opacity .12s } }

/* Öne çıkanlar geçişi + göstergeler */
.hero.nf-hero-fade .hero-bg{ opacity:.15; transition:opacity .25s }
.hero-bg{ transition:opacity .45s, background-image .1s }
.hero.nf-hero-fade #heroTitle,.hero.nf-hero-fade .grp{ opacity:0; transition:opacity .2s }
#heroTitle,.hero .grp{ transition:opacity .4s }
.nf-dots{ display:flex; gap:7px; margin-top:20px }
.nf-dots i{ width:26px; height:3px; border-radius:99px; background:rgba(255,255,255,.28);
  cursor:pointer; transition:.22s }
.nf-dots i:hover{ background:rgba(255,255,255,.55) }
.nf-dots i.on{ background:#e50914; width:34px }

/* #player kimliğe bağlı `display:flex` taşıdığı için aktif olmadığı hâlde
   ekranda kalıyordu: ana sayfa kartlarının üstüne boş bir oynatıcı biniyordu.
   Görünürlük tek kurala bağlanır — .active yoksa görünmez. */
.view:not(.active){ display:none !important; }

/* ============================ ANA SAYFA ============================
   Eski hâl üç düz kutuydu. Artık: sinematik karşılama + canlı rakamlar +
   üç büyük giriş kapısı + cihaz şeridi. */
#home{ padding:0 !important; }
.hm{ min-height:100vh; }

.hm__hero{ position:relative; overflow:hidden; padding:118px 6% 54px; }
.hm__glow{ position:absolute; inset:-30% -10% auto -10%; height:120%; pointer-events:none;
  background:
    radial-gradient(58% 52% at 22% 8%, rgba(229,9,20,.30), transparent 62%),
    radial-gradient(46% 44% at 82% 4%, rgba(120,60,255,.20), transparent 62%),
    radial-gradient(70% 60% at 50% 100%, rgba(0,0,0,.6), transparent 70%);
  filter:blur(6px); }
.hm__in{ position:relative; z-index:2; max-width:none; }

.hm__kick{ display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#fff; }
.hm__kick i{ width:5px; height:20px; border-radius:3px; background:#e50914;
  box-shadow:0 0 18px rgba(229,9,20,.9); }

.hm__t{ margin:0 0 16px; font-size:clamp(34px,5.4vw,72px); font-weight:900; line-height:1.02;
  letter-spacing:-.035em; color:#fff; text-shadow:0 6px 40px rgba(0,0,0,.7); }
.hm__t em{ font-style:normal;
  background:linear-gradient(100deg,#e50914 10%,#ff6a6f 55%,#ffb199 95%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hm__s{ margin:0 0 26px; max-width:52ch; font-size:16px; line-height:1.62; color:#b3b3b3; }

.hm__stats{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:28px;
  font-size:13.5px; color:#9a9a9a; }
.hm__stats b{ color:#fff; font-size:22px; font-weight:900; letter-spacing:-.02em;
  margin-right:6px; font-variant-numeric:tabular-nums; }
.hm__stats i{ width:4px; height:4px; border-radius:50%; background:#4a4a4a; }

.hm__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.hm__btn{ padding:11px 18px; border-radius:6px; cursor:pointer; font-size:13.5px; font-weight:700;
  color:#e5e5e5; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px); transition:.2s; }
.hm__btn:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4);
  transform:translateY(-1px); }
.hm__btn--go{ background:rgba(229,9,20,.16); border-color:rgba(229,9,20,.6); color:#fff; }
.hm__btn--go:hover{ background:rgba(229,9,20,.3); }
.hm__btn--buy{ background:#e50914; border-color:#e50914; color:#fff;
  box-shadow:0 10px 26px -10px rgba(229,9,20,.9); }
.hm__btn--buy:hover{ background:#f6121d; }
.hm__meta{ font-size:11.5px; color:#6f6f6f; }

/* --- üç giriş kapısı --- */
.cats{ display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;
  gap:18px !important; padding:0 6% 46px !important; }
.cat-card{
  position:relative; overflow:hidden; cursor:pointer; text-align:left;
  min-height:230px !important; padding:26px !important; border:0 !important;
  border-radius:10px !important; display:flex !important; flex-direction:column !important;
  justify-content:space-between !important; color:#fff;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.9) !important;
  transition:transform .42s cubic-bezier(.16,.84,.24,1), box-shadow .42s !important;
}
.cat-card__bg{ position:absolute; inset:0; z-index:0; transition:transform .6s cubic-bezier(.16,.84,.24,1); }
.cat-card.live    .cat-card__bg{ background:linear-gradient(140deg,#0b3f66,#0a2540 60%,#071827); }
.cat-card.movies  .cat-card__bg{ background:linear-gradient(140deg,#7a1220,#3d0b14 60%,#1a060a); }
.cat-card.series  .cat-card__bg{ background:linear-gradient(140deg,#3b1470,#25104a 60%,#120826); }
.cat-card::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 8% 0%,rgba(255,255,255,.14),transparent 55%); }
.cat-card:hover{ transform:translateY(-6px) scale(1.012) !important;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.95) !important; }
.cat-card:hover .cat-card__bg{ transform:scale(1.08); }

.cat-icon{ position:relative; z-index:2; font-size:34px !important; line-height:1;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.75)); background:none !important; }
.cat-body{ position:relative; z-index:2; display:flex; flex-direction:column; gap:4px; }
.cat-title{ font-size:27px !important; font-weight:900 !important; letter-spacing:-.025em;
  background:none !important; color:#fff !important; }
.cat-sub{ font-size:13px !important; color:rgba(255,255,255,.72) !important; background:none !important; }
.cat-sub b{ color:#fff; font-weight:800; font-variant-numeric:tabular-nums; }
.cat-go{ position:relative; z-index:2; align-self:flex-start; margin-top:14px;
  font-size:12.5px; font-weight:800; letter-spacing:.02em; color:rgba(255,255,255,.8);
  padding:7px 14px; border-radius:99px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); transition:.22s; }
.cat-card:hover .cat-go{ background:#fff; color:#111; border-color:#fff; }

.hm__devices{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:20px 6% 60px; border-top:1px solid rgba(255,255,255,.07);
  font-size:12.5px; color:#8a8a8a; }
.hm__devices b{ font-weight:700; color:#d2d2d2; padding:6px 11px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.hm__devices i{ font-style:normal; color:#6f6f6f; }

@media(max-width:760px){
  .hm__hero{ padding:92px 5% 34px; }
  .cats{ padding:0 5% 34px !important; }
  .hm__devices{ padding:18px 5% 48px; }
}

/* Özgün CSS başlık/ikon/alt yazıya kendi zeminini veriyordu; yeni kartta
   bu koyu dikdörtgenler olarak görünüyordu. Hepsini şeffaflaştır. */
.cat-title,.cat-sub,.cat-icon,.cat-body,.hm__t,.hm__s,.hm__kick{
  background:none !important; background-color:transparent !important;
  box-shadow:none !important; border:0 !important;
}
.cat-title{ padding:0 !important; }

/* ======================= ÜST NAVİGASYON ======================= */
.brand .word{ font-size:24px !important; letter-spacing:.02em }
.brand .tag{ margin-left:5px; font-size:9px !important; letter-spacing:.28em !important;
  color:#8a8a8a !important }

/* ⚠️ ARALIK. Düğmeler bitişikti (gap:2px + padding:6px), tek bir kelime
   yığını gibi okunuyordu (mağaza sahibi bildirdi). Nefes payı verildi. */
.nav{ display:flex; align-items:center; gap:26px; margin-left:26px }
.nav__a{ padding:8px 13px; border:0; background:none; cursor:pointer; border-radius:5px;
  font-size:13.5px; font-weight:600; color:#cfcfcf; transition:.16s; white-space:nowrap }
.nav__a:hover{ color:#fff; background:none }
.nav__a.on{ color:#fff; font-weight:800 }
.nav__a.on::after{ content:''; display:block; height:2px; margin-top:5px; border-radius:2px;
  background:#e50914 }

.hdr-actions{ display:flex; align-items:center; gap:7px }
.ico{ width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; cursor:pointer; font-size:14px; color:#d2d2d2;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:.16s }
.ico:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); color:#fff }
.lang-sel{ height:34px; background:rgba(255,255,255,.06) !important; color:#d2d2d2 !important;
  border:1px solid rgba(255,255,255,.12) !important; border-radius:6px !important;
  padding:0 8px !important; font-size:12px !important; font-weight:700 }

.nav__login{ padding:8px 14px; border-radius:6px; cursor:pointer; white-space:nowrap;
  font-size:13px; font-weight:700; color:#e5e5e5;
  background:transparent; border:1px solid rgba(255,255,255,.3); transition:.18s }
.nav__login:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff }
.nav__buy{ padding:8px 16px; border-radius:6px; cursor:pointer; white-space:nowrap;
  font-size:13px; font-weight:800; color:#fff; background:#e50914; border:0;
  box-shadow:0 8px 22px -8px rgba(229,9,20,.9); transition:.18s }
.nav__buy:hover{ background:#f6121d; transform:translateY(-1px) }

@media(max-width:1080px){ .nav__a[data-go="home"]{ display:none } .status{ display:none } }
@media(max-width:900px){ .nav{ display:none } }
@media(max-width:640px){ .nav__login{ display:none } .lang-sel{ display:none } }

/* Hero metinlerinin arkasındaki koyu kutular özgün CSS'ten geliyor;
   Netflix'te metin doğrudan afişin üstünde durur. */
#heroTitle,.hero .grp,.hero .eyebrow,.hero-inner > *{
  background:none !important; background-color:transparent !important;
  box-shadow:none !important;
}
.hero .play-btn{ background:#fff !important; }

/* ---- marka: logo + isim ---- */
.brand{ display:flex !important; align-items:center; gap:9px; cursor:pointer }
.brand__i{ width:32px; height:32px; border-radius:7px; display:block; flex:0 0 auto;
  box-shadow:0 4px 14px rgba(0,0,0,.6) }
.brand .word{ font-size:20px !important; font-weight:900 !important; letter-spacing:-.01em }

/* ---- arama + sıralama: ilkel görünümü düzelt ----
   Placeholder kayıyordu çünkü ikon mutlak konumluyken kutuya iç boşluk
   verilmemişti. Artık ikon flex akışında, hizalama kendiliğinden doğru. */
.browse-tools{ display:flex !important; align-items:center; gap:12px !important;
  flex-wrap:wrap; padding:0 4% !important; margin:18px 0 22px !important }
.search{ display:flex !important; align-items:center; gap:10px !important;
  flex:1 1 320px; max-width:460px; position:static !important;
  padding:0 14px !important; height:44px; border-radius:6px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  transition:.18s }
.search:focus-within{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5) }
.search svg{ flex:0 0 auto; position:static !important; opacity:.55; color:#fff }
.search .field, #search{
  flex:1; height:100% !important; padding:0 !important; margin:0 !important;
  background:transparent !important; border:0 !important; outline:none !important;
  color:#fff !important; font-size:14.5px !important;
}
.search .field::placeholder{ color:#8a8a8a }

.sort-wrap{ display:flex !important; align-items:center; gap:9px !important;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#8a8a8a }
#sortSel{ height:44px; padding:0 34px 0 13px !important; width:auto !important;
  border-radius:6px !important; cursor:pointer;
  background:rgba(255,255,255,.07) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important;
  border:1px solid rgba(255,255,255,.16) !important; color:#fff !important;
  font-size:13.5px !important; font-weight:600; appearance:none; -webkit-appearance:none }
#sortSel:hover{ background-color:rgba(255,255,255,.12) !important }

/* ⚠️ "PREMIUM" rozeti KALDIRILDI: bölge/dil seçimi artık üyelere özel değil,
   katalog herkese açık. Rozet hem yanlış bilgi veriyordu hem de düğmenin
   üstüne taşıp hizayı bozuyordu. */
.needs-premium{ position:relative }

/* Kapaklar çerçevesiz — Netflix'te kartın kenarlığı yoktur, yalnızca
   yumuşak bir gölge vardır. Özgün CSS kalın kenarlık koyuyordu. */
.tile,.tile-art,.tile-art img{
  border:0 !important; outline:0 !important;
}
.tile-art{
  box-shadow:0 1px 6px rgba(0,0,0,.45) !important;
  background:#1b1b1b !important;
}
.tile:hover .tile-art{ box-shadow:0 8px 22px rgba(0,0,0,.7) !important; }
.rating-badge{ border:0 !important; }
.nfx,.nfx__art,.nfx__art img{ border:0 !important; }
.nfx{ box-shadow:0 26px 60px rgba(0,0,0,.92) !important; }

/* ==================== NETFLIX BILLBOARD ====================
   Referans: netflix.com/browse. Kenarlardan içeri alınmış, köşeleri
   yuvarlatılmış tam genişlik afiş; sol altta iri başlık + künye + Play /
   More Info; sağ altta rozetler.

   ⚠️ GERÇEK VİDEO ÖNİZLEME YOK — bilerek. Netflix fragman oynatıyor; bizde
   fragman yok, içeriğin kendisini oynatmak hem bant genişliğini (en kıt
   kaynağımız, video sunucudan aktarılıyor) hem misafirin 40 dk kotasını
   yerdi. Yerine yavaş Ken Burns hareketi: aynı "canlı" hissi, sıfır maliyet. */
.hero{ margin:0 4% 12px !important; border-radius:10px !important;
  min-height:min(74vh,620px) !important; }
.hero-bg{ will-change:transform; }
.hero-bg.kb-a{ animation:kbA 14s ease-out forwards; }
.hero-bg.kb-b{ animation:kbB 14s ease-out forwards; }
@keyframes kbA{ from{ transform:scale(1.02) translate3d(0,0,0) }
                to  { transform:scale(1.13) translate3d(-1.5%,-1.5%,0) } }
@keyframes kbB{ from{ transform:scale(1.13) translate3d(1.5%,-1%,0) }
                to  { transform:scale(1.02) translate3d(0,0,0) } }
@media (prefers-reduced-motion:reduce){ .hero-bg.kb-a,.hero-bg.kb-b{ animation:none } }

.hero-inner{ padding:0 0 0 4.5% !important; }
.hero #heroTitle{ font-size:clamp(30px,4.8vw,66px) !important; line-height:.98 !important;
  margin-bottom:18px !important; }

.nf-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:22px;
  font-size:14px; font-weight:600; color:#e5e5e5; text-shadow:0 2px 8px rgba(0,0,0,.7) }
.nf-meta i{ font-style:normal; color:#9a9a9a; font-size:9px }

.hero .play-btn,.nf-info{ display:inline-flex !important; align-items:center; gap:9px;
  padding:11px 26px !important; border-radius:5px !important; border:0 !important;
  font-size:16px !important; font-weight:800 !important; cursor:pointer; transition:.16s }
.nf-info{ margin-left:10px; background:rgba(109,109,110,.7) !important; color:#fff !important }
.nf-info:hover{ background:rgba(109,109,110,.45) !important }
.nf-info span{ font-size:17px; opacity:.9 }

.nf-badges{ position:absolute; right:0; bottom:26px; z-index:3; display:flex; align-items:center; gap:10px }
.nf-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px;
  font-size:12.5px; font-weight:700; color:#fff;
  background:rgba(51,51,51,.62); backdrop-filter:blur(6px);
  border-left:3px solid #dcdcdc }
.nf-badge--new{ border-left-color:#e50914 }
.nf-badge--top b{ display:inline-block; padding:2px 4px; border-radius:2px; line-height:1;
  font-size:7.5px; font-weight:900; text-align:center; background:#e50914; color:#fff }
@media(max-width:820px){ .nf-badges{ display:none } .hero{ margin:0 0 12px !important; border-radius:0 !important } }

/* ---- Netflix'in kelime markası dili ----
   Özgün wordmark tescilli bir yazı tipi; kopyalanmaz. Yaptığımız şey aynı
   GÖRSEL ETKİYİ kurmak: çok kalın, dar, büyük harf, sıkı harf aralığı,
   dikeyde hafif uzatma ve Netflix kırmızısı. Marka SMURFMARKT'tır. */
.brand .word{
  font-family:'Archivo Black','Archivo','Helvetica Neue',Impact,sans-serif !important;
  font-weight:900 !important;
  font-size:22px !important;
  letter-spacing:-.035em !important;
  text-transform:uppercase;
  color:#e50914 !important;
  -webkit-text-fill-color:#e50914 !important;
  transform:scaleY(1.14);
  transform-origin:center left;
  display:inline-block;
  text-shadow:0 2px 10px rgba(229,9,20,.42), 0 0 1px rgba(0,0,0,.4);
}
.brand__i{ width:30px; height:30px }

/* ==================== TOP 10 SIRASI ====================
   Netflix düzeni: kapağın SOLUNDA dev, içi boş numara; numara kartın altına
   girer, ikisi tek bir bütün gibi durur. */
.row--t10{ margin-bottom:3.4vw !important }
.rail--t10{ gap:2px !important; align-items:flex-end }
.t10{ flex:0 0 auto; display:flex; align-items:flex-end; cursor:pointer;
  transition:transform .32s cubic-bezier(.16,.84,.24,1) }
.t10:hover{ transform:scale(1.06) }
.t10__n{
  font-family:'Archivo Black','Archivo',Impact,sans-serif;
  font-size:clamp(84px,10.2vw,168px); line-height:.78; font-weight:900;
  letter-spacing:-.08em; margin-right:-3.2%; position:relative; z-index:1;
  color:#141414;
  /* ⚠️ -webkit-text-fill-color AÇIKÇA yazılmalı: tarayıcının otomatik koyu
     modu bunu #e8e6e3 yapıp `color`'ı eziyor ve içi boş numara dolu
     görünüyordu. `color` tek başına yetmez. */
  -webkit-text-fill-color:#141414;
  -webkit-text-stroke:3px #6c6c6c;
  paint-order:stroke fill;
  user-select:none;
}
.t10__n[data-n="10"]{ font-size:clamp(70px,8.4vw,138px); letter-spacing:-.1em }
.t10:hover .t10__n{ -webkit-text-stroke-color:#dcdcdc }
.t10__art{ position:relative; z-index:2; display:block; overflow:hidden;
  width:clamp(96px,9.4vw,158px); aspect-ratio:2/3; border-radius:4px;
  background:#1b1b1b; box-shadow:0 2px 10px rgba(0,0,0,.6) }
.t10__art img{ width:100%; height:100%; object-fit:cover; display:block }
.t10__ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:20px; color:#4a4a4a }
@media(max-width:640px){ .t10__n{ font-size:74px; margin-right:-5% } .t10__art{ width:88px } }

/* ==================== BROWSE BY LANGUAGES ==================== */
.nav__lang{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px;
  border-radius:6px; cursor:pointer; font-size:13px; font-weight:700; color:#e5e5e5;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); transition:.18s }
.nav__lang:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff }
@media(max-width:1180px){ .nav__lang span{ display:none } }

.bl{ position:fixed; inset:0; z-index:1250; display:none; align-items:center; justify-content:center;
  padding:26px 16px; overflow:auto; background:rgba(0,0,0,.8); backdrop-filter:blur(8px) }
.bl.open{ display:flex }
.bl__box{ width:min(760px,100%); background:#181818; border:1px solid rgba(255,255,255,.12);
  border-radius:8px; box-shadow:0 44px 110px rgba(0,0,0,.95); overflow:hidden;
  animation:blIn .34s cubic-bezier(.16,.84,.24,1) }
@keyframes blIn{ from{opacity:0;transform:translateY(18px) scale(.98)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .bl__box{ animation:none } }

.bl__head{ padding:26px 28px 16px; border-bottom:1px solid rgba(255,255,255,.08) }
.bl__head h2{ margin:0 0 8px; font-size:clamp(20px,2.4vw,26px); font-weight:900; color:#fff;
  letter-spacing:-.02em }
.bl__head p{ margin:0; font-size:13.5px; line-height:1.6; color:#b3b3b3; max-width:58ch }

.bl__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; padding:20px 28px 6px }
.bl__f{ display:flex; flex-direction:column; gap:7px }
.bl__f span{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#8a8a8a }
.bl__f select{ height:44px; padding:0 34px 0 13px; border-radius:6px; cursor:pointer;
  background:rgba(255,255,255,.07) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid rgba(255,255,255,.16); color:#fff; font-size:14px; font-weight:600;
  appearance:none; -webkit-appearance:none }
.bl__f select:hover{ background-color:rgba(255,255,255,.12) }

.bl__note{ margin:14px 28px 0; padding:13px 15px; border-radius:6px; font-size:12.5px;
  line-height:1.65; color:#a8a8a8; background:rgba(229,9,20,.08);
  border-left:3px solid #e50914 }
.bl__note b{ color:#e5e5e5 }

.bl__foot{ display:flex; justify-content:flex-end; gap:10px; padding:20px 28px 24px }
.bl__btn{ padding:11px 22px; border-radius:5px; border:0; cursor:pointer; font-size:14px;
  font-weight:800; background:rgba(255,255,255,.1); color:#d2d2d2; transition:.18s }
.bl__btn:hover{ background:rgba(255,255,255,.2) }
.bl__btn--go{ background:#e50914; color:#fff }
.bl__btn--go:hover{ background:#f6121d }

/* ============ NAVBAR: aktif bölüm + Netflix hover efekti ============ */
.nav__a{ position:relative; background:none; border:0; cursor:pointer;
  color:#e5e5e5; font-size:14px; font-weight:500; padding:6px 0;
  transition:color .28s ease, font-weight .2s }
.nav__a:hover{ color:#b3b3b3 }
/* Netflix'in alt çizgisi: ortadan açılır */
.nav__a::after{ content:''; position:absolute; left:50%; right:50%; bottom:-5px;
  height:2px; background:#e50914; border-radius:2px; opacity:0;
  transition:left .3s cubic-bezier(.2,.8,.2,1), right .3s cubic-bezier(.2,.8,.2,1), opacity .2s }
.nav__a:hover::after{ left:0; right:0; opacity:.55 }
.nav__a.on{ color:#fff; font-weight:800; cursor:default }
.nav__a.on::after{ left:0; right:0; opacity:1 }
.nav__a.on:hover{ color:#fff }

/* Sağdaki düğmelere de aynı his */
.hdr-actions button{ transition:transform .2s cubic-bezier(.2,.8,.2,1),
  background-color .2s, border-color .2s, color .2s, box-shadow .2s }
.hdr-actions button:hover{ transform:translateY(-1px) }
.hdr-actions button:active{ transform:translateY(0) scale(.97) }
.nav__login:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff }
.nav__buy:hover{ background:#f6121d; box-shadow:0 6px 20px rgba(229,9,20,.45) }
@media (prefers-reduced-motion:reduce){
  .nav__a::after,.hdr-actions button{ transition:none }
  .hdr-actions button:hover{ transform:none }
}

/* ==================== GÖMÜLÜ SATIN ALMA (paywall içi) ==================== */
.pw-plan{ cursor:pointer; border:0; font:inherit; text-align:left }

.pwc{ max-width:440px; margin:0 auto; padding:4px 0 }
.pwc__sel{ display:flex; align-items:center; gap:10px; padding:12px 14px; margin-bottom:18px;
  border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12) }
.pwc__sel b{ color:#fff; font-size:15px }
.pwc__sel span{ margin-left:auto; color:#e50914; font-weight:900; font-size:17px }
.pwc__chg{ background:none; border:0; cursor:pointer; color:#9a9a9a; font-size:12px;
  text-decoration:underline; padding:2px 0 }
.pwc__chg:hover{ color:#fff }
.pwc__lbl{ display:block; margin-bottom:8px; font-size:13px; color:#b3b3b3 }
.pwc__inp{ width:100%; height:50px; padding:0 14px; border-radius:5px; font-size:15px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff }
.pwc__inp:focus{ outline:0; border-color:#fff; background:rgba(255,255,255,.13) }
.pwc__err{ min-height:18px; margin:6px 0 0; font-size:12.5px; color:#ff6b6b }
.pwc__go{ width:100%; height:50px; margin-top:8px; border:0; border-radius:5px; cursor:pointer;
  background:#e50914; color:#fff; font-size:16px; font-weight:800; transition:.18s }
.pwc__go:hover:not(:disabled){ background:#f6121d }
.pwc__go:disabled{ opacity:.6; cursor:default }
.pwc__fine{ margin:12px 0 0; font-size:12px; color:#8a8a8a; text-align:center }

.pwp{ display:flex; flex-direction:column; gap:10px }
.pwp__bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px }
.pwp__ord{ padding:4px 10px; border-radius:4px; background:rgba(255,255,255,.08); color:#b3b3b3;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.pwp__wait{ display:inline-flex; align-items:center; gap:8px; color:#e5c07b; font-weight:700 }
.pwp__wait i{ width:9px; height:9px; border-radius:50%; background:#e5c07b;
  animation:pwpPulse 1.3s ease-in-out infinite }
@keyframes pwpPulse{ 0%,100%{opacity:.25;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }
@media (prefers-reduced-motion:reduce){ .pwp__wait i{ animation:none; opacity:1 } }
.pwp__f{ width:100%; height:min(62vh,560px); border:1px solid rgba(255,255,255,.12);
  border-radius:6px; background:#141414 }
.pwp__fine{ margin:0; font-size:12px; color:#8a8a8a; text-align:center }

/* Popüler vitrin sırasının "salt kapak" etiketi */
.row--t10__not{ margin-left:12px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#6f6f6f; vertical-align:middle }

/* ==================== GİRİŞ EKRANI (Netflix oturum açma) ==================== */
.nfl{ min-height:calc(100vh - 68px); display:flex; align-items:flex-start; justify-content:center;
  padding:min(9vh,90px) 16px 60px }
.nfl__box{ width:min(420px,100%); padding:44px 56px 40px; border-radius:6px;
  background:rgba(0,0,0,.72) }
@media(max-width:520px){ .nfl__box{ padding:28px 22px 30px; background:transparent } }

.nfl__h{ margin:0 0 24px; font-size:32px; font-weight:800; color:#fff; letter-spacing:-.01em }
.nfl form{ display:none }
.nfl form.active{ display:block }

.nfl__inp{ display:block; width:100%; height:50px; margin-bottom:16px; padding:0 16px;
  border-radius:4px; font-size:15px; color:#fff;
  background:#333; border:1px solid transparent; transition:.16s }
.nfl__inp::placeholder{ color:#8c8c8c }
.nfl__inp:focus{ outline:0; background:#454545; border-color:rgba(255,255,255,.35) }

.nfl__err{ min-height:0; margin:-8px 0 8px; font-size:13px; color:#e87c03; font-weight:600 }
.nfl__err:empty{ margin:0 }

.nfl__go{ display:block; width:100%; height:48px; margin:8px 0 14px; border:0; border-radius:4px;
  cursor:pointer; background:#e50914; color:#fff; font-size:16px; font-weight:800;
  transition:background .18s, transform .18s }
.nfl__go:hover{ background:#f6121d }
.nfl__go:active{ transform:scale(.985) }

.nfl__rem{ display:flex; align-items:center; gap:8px; font-size:13px; color:#b3b3b3;
  cursor:pointer; margin:0 }
.nfl__rem input{ width:16px; height:16px; accent-color:#737373; cursor:pointer }
.nfl__rem label{ cursor:pointer; margin:0 }

/* Misafir girişi — davetkâr ama ana eylemle yarışmayan */
.nfl__guest{ display:block; width:100%; margin:22px 0 0; padding:13px 16px; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); border-radius:4px; background:rgba(255,255,255,.06);
  color:#e5e5e5; font-size:15px; font-weight:700; text-align:center; transition:.18s }
.nfl__guest:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); color:#fff }
.nfl__guest i{ display:block; margin-top:4px; font-style:normal; font-size:12px;
  font-weight:400; color:#9a9a9a }

.nfl__new{ margin:20px 0 0; font-size:14px; color:#b3b3b3 }
.nfl__new a{ color:#fff; text-decoration:none }
.nfl__new a:hover{ text-decoration:underline }

/* M3U yolu — göze batmayan minik bağlantı (kullanıcının isteği) */
.nfl__alt{ display:inline-block; margin-top:14px; font-size:12px; color:#6f6f6f;
  text-decoration:none; transition:color .18s }
.nfl__alt:hover{ color:#b3b3b3; text-decoration:underline }
.nfl__alt--tiny{ margin-top:18px; font-size:11px; letter-spacing:.02em }
.bl__foot{ align-items:center }
.bl__btn--alt{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  font-weight:700; font-size:13px }
.bl__btn--alt:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.45) }

/* Giriş ekranı — eski sınıfların artıkları eziliyor:
   `.remember` BÜYÜK HARF yapıyordu, `#btnBuy` kırmızı zemin veriyordu,
   `.tab` M3U bağlantısını düğmeye benzetiyordu. */
.nfl__rem,.nfl__rem label{ text-transform:none!important; letter-spacing:normal!important;
  font-size:13px!important; color:#b3b3b3!important }
.nfl__new #btnBuy{ background:none!important; padding:0!important; border:0!important;
  border-radius:0!important; color:#fff!important; font-weight:600 }
.nfl__alt,.nfl .tab{ background:none!important; border:0!important; padding:0!important;
  border-radius:0!important; text-transform:none!important; letter-spacing:normal!important;
  font-weight:400!important; opacity:1!important }
.nfl .tab.active{ background:none!important }

/* ==================== MİSAFİR YÜKLEME EKRANI ==================== */
.gld{ position:fixed; inset:0; z-index:1400; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(10,10,10,.94); backdrop-filter:blur(6px) }
.gld.open{ display:flex }
.gld__box{ width:min(460px,100%); text-align:center }
.gld__spin{ width:52px; height:52px; margin:0 auto 22px; border-radius:50%;
  border:3px solid rgba(255,255,255,.14); border-top-color:#e50914;
  animation:gldSpin .9s linear infinite }
@keyframes gldSpin{ to{ transform:rotate(360deg) } }
.gld__h{ margin:0 0 10px; font-size:clamp(19px,2.4vw,24px); font-weight:800; color:#fff;
  letter-spacing:-.01em }
.gld__t{ margin:0 auto; min-height:42px; max-width:38ch; font-size:14px; line-height:1.6;
  color:#b3b3b3; transition:opacity .26s ease }
.gld__bar{ position:relative; width:210px; height:3px; margin:22px auto 0; overflow:hidden;
  border-radius:3px; background:rgba(255,255,255,.12) }
.gld__bar i{ position:absolute; inset:0 auto 0 0; width:40%; border-radius:3px; background:#e50914;
  animation:gldSlide 1.5s cubic-bezier(.55,.1,.45,.9) infinite }
@keyframes gldSlide{ 0%{ left:-40% } 100%{ left:100% } }
@media (prefers-reduced-motion:reduce){
  .gld__spin{ animation-duration:2.4s } .gld__bar i{ animation:none; width:100% }
}

/* ==================== PENCERE KAPATMA DÜĞMESİ ====================
   Her pencerede aynı yerde, aynı görünümde. Alttaki "Not now" ödeme
   adımında iframe'in altında kalıp görünmüyordu. */
.mdl-x{ position:absolute; top:12px; right:12px; z-index:5;
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); border-radius:50%;
  background:rgba(20,20,20,.72); color:#d2d2d2; font-size:15px; line-height:1;
  backdrop-filter:blur(4px); transition:.18s }
.mdl-x:hover{ background:rgba(229,9,20,.92); border-color:#e50914; color:#fff;
  transform:rotate(90deg) }
.mdl-x:active{ transform:rotate(90deg) scale(.92) }
@media (prefers-reduced-motion:reduce){ .mdl-x:hover,.mdl-x:active{ transform:none } }
/* Pencere gövdeleri konumlandırılmış olmalı ki çarpı köşeye otursun */
.pw__box,.rg__box,.bl__box{ position:relative }
@media(max-width:520px){ .mdl-x{ top:8px; right:8px; width:32px; height:32px } }

.gld__x{ margin-top:26px; padding:9px 20px; cursor:pointer; border-radius:4px;
  border:1px solid rgba(255,255,255,.2); background:transparent; color:#8a8a8a;
  font-size:13px; font-weight:600; transition:.18s }
.gld__x:hover{ border-color:rgba(255,255,255,.5); color:#e5e5e5 }

/* ============ OYNATILAMAYAN KAP UYARISI ============ */
.kpu{ position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(8,8,8,.9); opacity:0; transition:opacity .2s }
.kpu.open{ opacity:1 }
.kpu__box{ position:relative; width:min(520px,100%); padding:32px 34px 28px; border-radius:8px;
  background:#181818; border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px rgba(0,0,0,.9) }
.kpu__box h3{ margin:0 0 12px; font-size:21px; font-weight:800; color:#fff }
.kpu__box p{ margin:0 0 18px; font-size:14px; line-height:1.65; color:#b3b3b3 }
.kpu__box b{ color:#fff }
.kpu__row{ display:flex; flex-wrap:wrap; gap:10px }
.kpu__btn{ padding:11px 20px; border-radius:5px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07); color:#e5e5e5; font-size:14px; font-weight:700;
  cursor:pointer; text-decoration:none; transition:.18s }
.kpu__btn:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); color:#fff }
.kpu__btn--go{ background:#e50914; border-color:#e50914; color:#fff }
.kpu__btn--go:hover{ background:#f6121d; border-color:#f6121d }
.kpu__fine{ margin:16px 0 0!important; font-size:12px!important; color:#7a7a7a!important }

/* Languages paneli: arama kutusu + dört sütun */
.bl__ara{ display:flex; align-items:center; gap:12px; padding:18px 28px 0 }
.bl__ara input{ flex:1; height:42px; padding:0 14px; border-radius:6px; font-size:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff }
.bl__ara input::placeholder{ color:#7a7a7a }
.bl__ara input:focus{ outline:0; border-color:#fff; background:rgba(255,255,255,.12) }
.bl__ara span{ font-size:12px; color:#8a8a8a; white-space:nowrap }
.bl__box{ width:min(880px,100%) }
.bl__grid{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }

/* ==================== CANLI YÜKLEME SAYACI ==================== */
/* Sayı artarken hafif canlanma — "takıldı mı?" izlenimini kırıyor. */
.hm-say--art{ color:#fff; transition:color .2s }
.hm-say--art::after{ content:''; display:inline-block; width:5px; height:5px; margin-left:6px;
  border-radius:50%; background:#e50914; vertical-align:middle;
  animation:hmNabiz 1s ease-in-out infinite }
@keyframes hmNabiz{ 0%,100%{opacity:.25;transform:scale(.7)} 50%{opacity:1;transform:scale(1)} }

/* ⚠️ Şerit MUTLAK KONUMLU bir ::before ile çiziliyordu ve konumlanmış bir
   ata olmadığı için sayfada kayıp alttaki düğmelerin üzerine biniyordu
   (kullanıcı bildirdi). Artık kendi içinde, akışta bir kutu. */
/* Alt boşluk: hemen aşağıdaki düğmenin üstünde mutlak konumlu "PREMIUM"
   etiketi var, dar bırakınca üst üste geliyordu. */
.hm-yukle{ display:flex; align-items:center; gap:11px; margin:16px 0 26px; max-width:520px }
.hm-yukle > i{ position:relative; flex:none; display:block; width:150px; height:4px;
  border-radius:4px; background:rgba(255,255,255,.13); overflow:hidden }
.hm-yukle > i::after{ content:''; position:absolute; inset:0 auto 0 0; width:var(--ilerleme,12%);
  border-radius:4px; background:#e50914; transition:width .4s cubic-bezier(.2,.8,.2,1) }
.hm-yukle span{ font-size:12px; font-weight:600; color:#9a9a9a; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; white-space:nowrap }
@media (prefers-reduced-motion:reduce){
  .hm-say--art::after{ animation:none; opacity:1 } .hm-yukle i{ transition:none }
}

/* ============ PAKET AİLELERİ: PREMIUM vs ULTRA-PREMIUM ============
   İkisi aynı listede duruyor; renk olmadan hangisinin hangisi olduğu
   yalnızca küçük yazıdan anlaşılıyordu. */
.pw-plan--std{ border-color:rgba(229,9,20,.28)!important;
  background:linear-gradient(160deg,rgba(229,9,20,.10),rgba(255,255,255,.03))!important }
.pw-plan--std:hover{ border-color:rgba(229,9,20,.75)!important;
  background:linear-gradient(160deg,rgba(229,9,20,.20),rgba(255,255,255,.05))!important }
.pw-plan--std .pw-plan__grp{ color:#ff6b73!important }
.pw-plan--std .pw-plan__fiyat{ color:#fff!important }
.pw-plan--std .pw-plan__cta{ color:#ff8b91!important }

.pw-plan--ultra{ border-color:rgba(232,180,74,.34)!important;
  background:linear-gradient(160deg,rgba(232,180,74,.13),rgba(255,255,255,.03))!important }
.pw-plan--ultra:hover{ border-color:rgba(232,180,74,.85)!important;
  background:linear-gradient(160deg,rgba(232,180,74,.24),rgba(255,255,255,.06))!important;
  box-shadow:0 10px 30px rgba(232,180,74,.16) }
.pw-plan--ultra .pw-plan__grp{ color:#e8b44a!important; letter-spacing:.1em }
.pw-plan--ultra .pw-plan__fiyat{ color:#ffd88a!important }
.pw-plan--ultra .pw-plan__cta{ color:#e8b44a!important }
/* "BEST VALUE" rozeti ait olduğu ailenin rengini alsın */
.pw-plan--ultra .pw-plan__tag{ background:#e8b44a!important; color:#241a05!important }

/* ============ MARKA: SMURFMARKT TV + minik beta ============ */
.brand{ position:relative }
.brand__tv{ margin-left:.14em; font-weight:900; letter-spacing:.02em; color:#fff;
  -webkit-text-fill-color:#fff }
.brand__beta{ position:absolute; left:44px; bottom:-9px; font-family:'Archivo',sans-serif;
  font-size:9px; font-weight:600; letter-spacing:.22em; text-transform:lowercase;
  color:rgba(255,255,255,.34); -webkit-text-fill-color:rgba(255,255,255,.34);
  pointer-events:none; user-select:none }
@media(max-width:640px){ .brand__beta{ left:38px; bottom:-8px; font-size:8px } }

/* ============ ÖNE ÇIKANLAR: ÇERÇEVESİZ ve BAŞLIĞI EZMEYEN ============
   index.html'de .hero'ya `border-top/bottom` veriliyordu; billboard'un
   etrafında ince bir çizgi çıkıp sırıtıyordu. Ayrıca hero yukarı taşıp
   "← Back / Movies" satırının üzerine biniyordu. */
.hero{
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  margin-top:0 !important;
  z-index:0;                       /* başlık satırının ALTINDA kalsın */
}
/* Gezinme başlığı her zaman görselin ÜSTÜNDE ve tıklanabilir */
.browse-top,.back-btn,#browseTitle{ position:relative; z-index:3 }
.browse-top{ background:var(--bg); padding-bottom:10px }
.back-btn{ background:rgba(22,22,34,.92) !important; backdrop-filter:blur(4px) }

/* ============ +1 SAAT: E-POSTA DOĞRULAMA ============ */
.bns{ max-width:460px; margin:0 auto; padding:4px 0 }
.bns__ust{ margin-bottom:20px }
.bns__rozet{ display:inline-block; margin-bottom:12px; padding:5px 12px; border-radius:999px;
  background:rgba(72,187,120,.16); border:1px solid rgba(72,187,120,.45);
  color:#7ee2a8; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase }
.bns__ust p{ margin:0; font-size:13.5px; line-height:1.65; color:#b3b3b3 }
.bns__ust b{ color:#fff }
.bns__bilgi{ margin:0 0 14px; font-size:13px; color:#b3b3b3 }
.bns__kod{ text-align:center; font-size:22px!important; letter-spacing:.42em;
  font-variant-numeric:tabular-nums }
.bns__geri{ display:block; width:100%; margin-top:12px; padding:8px; cursor:pointer;
  background:none; border:0; color:#8a8a8a; font-size:12.5px; text-decoration:underline }
.bns__geri:hover{ color:#e5e5e5 }

.bns--ok{ text-align:center; padding:10px 0 }
.bns__tik{ width:62px; height:62px; margin:0 auto 18px; display:grid; place-items:center;
  border-radius:50%; background:rgba(72,187,120,.16); border:2px solid #48bb78;
  color:#7ee2a8; font-size:30px; font-weight:800; animation:bnsPop .4s cubic-bezier(.2,1.4,.3,1) }
@keyframes bnsPop{ from{ transform:scale(.5); opacity:0 } to{ transform:scale(1); opacity:1 } }
.bns--ok h3{ margin:0 0 10px; font-size:21px; font-weight:800; color:#fff }
.bns--ok p{ margin:0 0 20px; font-size:14px; line-height:1.6; color:#b3b3b3 }
@media (prefers-reduced-motion:reduce){ .bns__tik{ animation:none } }
/* Bonus akışındaki ana düğme — .pwc__go bazı bağlamlarda düz metin gibi
   görünüyordu, burada açıkça sabitliyoruz. */
.bns .pwc__go{ display:block; width:100%; height:50px; margin-top:8px; border:0!important;
  border-radius:5px; background:#e50914!important; color:#fff!important; font-size:16px;
  font-weight:800; cursor:pointer }
.bns .pwc__go:hover:not(:disabled){ background:#f6121d!important }
.bns .pwc__go:disabled{ opacity:.6; cursor:default }
.srch-not{ grid-column:1/-1; margin-bottom:6px; font-size:12.5px; color:#8a8a8a }

/* ============ ÖNE ÇIKANLAR: GEÇİŞ EFEKTİ ============
   Eskiden yalnızca opaklık kısılıyordu (.15) ve geçiş sert duruyordu.
   Netflix'in hissi: arka plan yumuşak sönüp gelirken yazılar hafifçe
   aşağıdan yükseliyor ve gecikmeli sıralanıyor. */
.hero.nf-hero-fade .hero-bg{
  opacity:0 !important;
  transform:scale(1.04);
  transition:opacity .38s ease, transform .38s ease !important;
}
.hero-bg{ transition:opacity .75s ease, transform .75s ease }

/* Yazı bloğu: sırayla (kaşe → başlık → künye → düğmeler) gelsin */
.hero.nf-hero-fade #heroTitle,
.hero.nf-hero-fade .grp,
.hero.nf-hero-fade .eyebrow,
.hero.nf-hero-fade #nfMeta,
.hero.nf-hero-fade #heroPlay,
.hero.nf-hero-fade #nfInfo,
.hero.nf-hero-fade #nfBadges{
  opacity:0 !important;
  transform:translateY(14px);
  transition:opacity .2s ease, transform .2s ease !important;
}
.hero .eyebrow,.hero #heroTitle,.hero .grp,.hero #nfMeta,
.hero #heroPlay,.hero #nfInfo,.hero #nfBadges{
  transition:opacity .52s cubic-bezier(.2,.8,.2,1), transform .52s cubic-bezier(.2,.8,.2,1);
}
.hero .eyebrow{ transition-delay:.02s }
.hero #heroTitle{ transition-delay:.08s }
.hero #nfMeta{ transition-delay:.16s }
.hero #heroPlay{ transition-delay:.22s }
.hero #nfInfo{ transition-delay:.26s }
.hero #nfBadges{ transition-delay:.30s }

@media (prefers-reduced-motion:reduce){
  .hero-bg,.hero .eyebrow,.hero #heroTitle,.hero #nfMeta,.hero #heroPlay,
  .hero #nfInfo,.hero #nfBadges{ transition:opacity .2s ease !important; transform:none !important }
  .hero.nf-hero-fade .hero-bg{ transform:none !important }
}

/* ============ ÖNE ÇIKANLAR: KONU METNİ (More Info) ============ */
.nf-ozet{ max-height:0; overflow:hidden; opacity:0; margin-top:0;
  transition:max-height .42s cubic-bezier(.2,.8,.2,1), opacity .3s ease, margin-top .3s ease }
.nf-ozet.open{ max-height:220px; opacity:1; margin-top:16px }
.nf-ozet p{ margin:0; max-width:60ch; font-size:14.5px; line-height:1.7;
  color:#dcdcdc; text-shadow:0 1px 14px rgba(0,0,0,.9) }
.nf-ozet__bekle{ font-size:13px; color:#9a9a9a }
@media(max-width:640px){ .nf-ozet.open{ max-height:180px } .nf-ozet p{ font-size:13.5px } }
@media (prefers-reduced-motion:reduce){ .nf-ozet{ transition:opacity .2s ease } }

/* Kategori kartlarında yükleme işareti */
.cat-yuk{ display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:1px 7px;
  border-radius:999px; background:rgba(255,255,255,.12); color:#e5e5e5;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:lowercase;
  vertical-align:middle; font-variant-numeric:tabular-nums }
.cat-yuk::before{ content:''; width:5px; height:5px; border-radius:50%; background:#e50914;
  animation:hmNabiz 1s ease-in-out infinite }
@media (prefers-reduced-motion:reduce){ .cat-yuk::before{ animation:none; opacity:1 } }

/* Üstteki sayaç şeridi — sade metin */
.hm-yukle span{ font-weight:600 }

/* ============ CİHAZ LİSTESİ: BROWSER ÖNDE VE SEÇİLİ ============ */
.hm__devices b.is-here{ position:relative; background:rgba(229,9,20,.14)!important;
  border-color:rgba(229,9,20,.55)!important; color:#fff!important }
.hm__devices b.is-here em{ margin-left:7px; font-style:normal; font-size:9.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#ff8b91 }
.pw__dev--here{ background:rgba(229,9,20,.16)!important; border:1px solid rgba(229,9,20,.5)!important;
  border-radius:6px; padding:3px 9px!important; color:#fff!important; font-weight:800 }

/* ============ OYNATICI: EKRANA TAM OTUR ============
   Sorun: #player `min-height:calc(100vh - 60px)` taşıyordu; üstündeki site
   barı (~68px) ve başlık satırı eklenince toplam yükseklik ekranı aşıyor,
   videonun ALTINDA kocaman ölü alan kalıyor ve sayfa boşa kayıyordu.
   Çözüm: yüksekliği gerçek görünür alana sabitle (dvh — mobil tarayıcı
   çubuğu da hesaba katılır) ve iç kutuların büyümesini serbest bırak. */
#player.active{
  height:calc(100dvh - 68px) !important;
  min-height:0 !important;
  overflow:hidden;
}
#player.active .player-body{ min-height:0; flex:1 1 auto }
#player.active .stage{ min-height:0 }
#player.active #video{
  width:100%; height:100%; max-height:100%;
  object-fit:contain; display:block; background:#000;
}
/* Oynatıcı açıkken sayfa kaymasın — altta boşluk hissi kalmasın. */
body:has(#player.active){ overflow:hidden }
@supports not selector(:has(*)){
  /* :has desteklenmiyorsa en azından taşma gizli kalsın */
  #player.active{ height:calc(100vh - 68px) !important }
}
@media(max-width:640px){ #player.active{ height:calc(100dvh - 56px) !important } }

/* ============ OTOMATİK VPN DENEMESİ BİLDİRİMİ ============ */
.vpnbar{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:1200;
  display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border-radius:999px;
  background:rgba(18,18,18,.96); border:1px solid rgba(255,255,255,.16); color:#e5e5e5;
  font-size:13.5px; font-weight:600; box-shadow:0 12px 34px rgba(0,0,0,.7);
  animation:vpnIn .28s cubic-bezier(.2,.9,.3,1) }
.vpnbar i{ width:9px; height:9px; border-radius:50%; background:#e5c07b;
  animation:hmNabiz 1s ease-in-out infinite }
@keyframes vpnIn{ from{opacity:0;transform:translate(-50%,10px)} to{opacity:1;transform:translate(-50%,0)} }
@media (prefers-reduced-motion:reduce){ .vpnbar,.vpnbar i{ animation:none } }
.gld__uyari{ width:56px; height:56px; margin:0 auto 18px; display:grid; place-items:center;
  border-radius:50%; background:rgba(229,9,20,.14); border:2px solid #e50914;
  color:#ff7b81; font-size:28px; font-weight:900 }


/* ============ "CONTINUE AS GUEST" GÖRÜNÜR OLSUN ============
   İnsanlar bu düğmeyi görmüyordu (mağaza sahibi bildirdi). Ücretsiz girişin
   ana eylem olduğu bir sayfada en görünür şey bu olmalı. */
.nfl__guest{
  background:linear-gradient(135deg,#e50914,#b0060f) !important;
  border:0 !important; color:#fff !important;
  font-size:16px !important; padding:15px 16px !important;
  box-shadow:0 8px 26px rgba(229,9,20,.42);
  position:relative; overflow:hidden;
  animation:gstNabiz 2.6s ease-in-out infinite;
}
.nfl__guest i{ color:rgba(255,255,255,.86) !important; font-size:12.5px }
.nfl__guest:hover{ background:linear-gradient(135deg,#f6121d,#c9070f) !important;
  box-shadow:0 12px 34px rgba(229,9,20,.55); transform:translateY(-1px) }
/* Üzerinden geçen parıltı */
.nfl__guest::after{
  content:''; position:absolute; top:0; bottom:0; width:38%;
  left:-45%; transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:gstParilti 3.4s ease-in-out infinite;
}
@keyframes gstParilti{ 0%{left:-45%} 55%{left:120%} 100%{left:120%} }
@keyframes gstNabiz{
  0%,100%{ box-shadow:0 8px 26px rgba(229,9,20,.42) }
  50%{ box-shadow:0 10px 34px rgba(229,9,20,.72) }
}
/* Ana eylem bu olduğu için "Sign In" biraz geri çekilsin */
.nfl__go{ background:rgba(255,255,255,.14) !important; color:#fff !important }
.nfl__go:hover{ background:rgba(255,255,255,.24) !important }
@media (prefers-reduced-motion:reduce){
  .nfl__guest{ animation:none } .nfl__guest::after{ animation:none; display:none }
}

/* Tarayıcıda oynamayan kap işareti */
.tile-nb{ position:absolute; left:6px; bottom:6px; z-index:3; padding:2px 6px; border-radius:3px;
  background:rgba(0,0,0,.82); border:1px solid rgba(255,255,255,.22); color:#d0d0d0;
  font-size:8.5px; font-weight:800; letter-spacing:.06em }
.tile--nb .tile-art{ opacity:.72 }
.tile--nb:hover .tile-art{ opacity:1 }

/* ==================== KEŞİF FİLTRELERİ — AÇILIR MENÜLER ====================
   ⚠️ Çip yığını iki satır taşıyordu ve amatör duruyordu (mağaza sahibi
   bildirdi). Menüler derli toplu, sayıları koruyor ve mobilde de sığıyor. */
.browse-tools .search--kat{ max-width:340px }

.bfilt{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; padding:14px 40px 6px }
.bsel{ display:inline-flex; align-items:center; gap:8px }
.bsel > span{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#6f6f6f; white-space:nowrap }
.bsel select{ height:38px; min-width:168px; max-width:230px; padding:0 32px 0 12px; cursor:pointer;
  border-radius:7px; font-size:13px; font-weight:600; color:#e8e8e8;
  background:rgba(255,255,255,.06) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1px solid rgba(255,255,255,.14); appearance:none; -webkit-appearance:none;
  text-overflow:ellipsis; transition:.16s }
.bsel select:hover{ background-color:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32) }
.bsel select:focus{ outline:0; border-color:#e50914 }
/* Seçim yapılmışsa menü vurgulanır — hangi filtrenin açık olduğu belli olsun */
.bsel select:not([data-bos="1"]){ }
.bfilt__sifirla{ height:38px; padding:0 14px; border-radius:7px; cursor:pointer; font-size:12.5px;
  font-weight:700; border:1px solid rgba(255,255,255,.2); background:transparent; color:#9a9a9a }
.bfilt__sifirla:hover{ color:#fff; border-color:#fff }
.bfilt__say{ margin-left:auto; font-size:12px; color:#8a8a8a; font-variant-numeric:tabular-nums }

@media(max-width:900px){
  .bfilt{ padding:10px 16px 6px; gap:8px }
  .bsel{ flex:1 1 46%; min-width:0 }
  .bsel select{ min-width:0; width:100%; max-width:none }
  .bfilt__say{ flex:1 1 100%; margin-left:0 }
}


/* ============ "HER IPTV UYGULAMASINDA ÇALIŞIR" ŞERİDİ ============
   ⚠️ Önce kutu olarak yapılmıştı ve sayfanın ortasında havada duruyordu
   (mağaza sahibi bildirdi). Artık kategori kartlarının altında ince bir
   şerit — bilgiyi veriyor, dikkat çalmıyor. */
.hm__apps{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px;
  margin:22px 0 6px; padding:13px 0 0; border-top:1px solid rgba(255,255,255,.09) }
.hm__apps__b{ font-size:12.5px; font-weight:700; color:#b9b9b9; margin-right:4px }
.hm__apps__d{ padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); color:#a8a8a8 }
.hm__apps__l{ margin-left:auto; font-size:12.5px; font-weight:700; color:#e5e5e5;
  text-decoration:none; padding:6px 13px; border-radius:6px;
  border:1px solid rgba(255,255,255,.2); transition:.16s }
.hm__apps__l:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff }
@media(max-width:640px){ .hm__apps__l{ margin-left:0; flex:1 1 100%; text-align:center } }


/* "Get a plan" bir <a>; global bağlantı stili altını çiziyordu. */
.hm__acts a.hm__btn,.hm__acts a.hm__btn:hover{ text-decoration:none !important }
.hm__acts a.hm__btn--go{ background:#e50914 !important; border:1px solid #e50914 !important;
  color:#fff !important; font-weight:800 }
.hm__acts a.hm__btn--go:hover{ background:#f6121d !important; border-color:#f6121d !important }


/* ═══ KATEGORİ IZGARASI ════════════════════════════════════════════════════
 * ⚠️ BU STİLLER HİÇ YAZILMAMIŞTI. `.katbtn` bir <button> olduğu için
 * tarayıcının varsayılan AÇIK GRİ zeminini alıyor, yazı rengi ise genel
 * `color: inherit` kuralıyla BEYAZ kalıyordu → beyaz üstüne beyaz, okunmuyor.
 * (Mağaza sahibi "renkten görünmüyor" diye bildirdi.)
 * Ayrıca ızgara kapalıyken iki sıra ile sınırlı; 116 kategori sayfayı
 * boğmasın diye. */
.katgrid { margin: 46px 0 8px; padding: 0 4vw; }
.katgrid__head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.katgrid__head h3 { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: .01em; }
.katgrid__say { font-size: .78rem; color: #8c8c8c; letter-spacing: .04em; text-transform: uppercase; }
.katgrid__ac {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: #b9b9b9; font: inherit; font-size: .82rem; padding: 4px 2px;
  border-bottom: 1px solid transparent;
}
.katgrid__ac:hover { color: #fff; border-bottom-color: #e50914; }

.katgrid__list {
  display: flex; flex-wrap: wrap; gap: 7px;
  max-height: none; overflow: hidden;
}
/* Kapalıyken ~2 sıra. */
.katgrid--kapali .katgrid__list {
  max-height: 78px;
  mask-image: linear-gradient(#000 44px, transparent);
  -webkit-mask-image: linear-gradient(#000 44px, transparent);
}

.katbtn {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 340px; padding: 7px 12px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 999px;
  color: #cfcfcf; font: inherit; font-size: .8rem; line-height: 1.1;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.katbtn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #fff; }
.katbtn__ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.katbtn__n { color: #7d7d7d; font-size: .72rem; font-variant-numeric: tabular-nums; flex: none; }
.katbtn:hover .katbtn__n { color: #a9a9a9; }

@media (max-width: 640px) {
  .katgrid { margin-top: 32px; }
  .katbtn { max-width: 100%; font-size: .76rem; padding: 6px 10px; }
  .katgrid--kapali .katgrid__list { max-height: 70px; }
}

/* Altyazı ipucu — kuru bir uyarı satırı yerine sıcak, küçük bir not. */
.ipucu {
  display: flex; align-items: center; gap: 9px;
  margin: -2px 4vw 20px;
  font-size: .82rem; color: #a5a5a5; line-height: 1.45;
}
.ipucu__k {
  flex: none; padding: 2px 8px; border-radius: 999px;
  background: rgba(229, 9, 20, .14); border: 1px solid rgba(229, 9, 20, .32);
  color: #ff5f68; font-size: .64rem; font-weight: 700; letter-spacing: .12em;
}
@media (max-width: 640px) { .ipucu { font-size: .78rem; margin-bottom: 16px; } }

/* "● CATALOGUE" göstergesi kaldırıldı: navigasyonun yanında gereksiz gürültü
   yapıyordu ve müşteriye hiçbir şey anlatmıyordu (mağaza sahibinin isteği).
   Öğe DOM'da kalıyor — setStatus() hâlâ ona yazıyor, sadece görünmüyor. */
.status { display: none !important; }

@media (max-width: 1080px) { .nav { gap: 18px; margin-left: 18px } }

/* ============================================================================
 * OYNATICI KONTROL ÇUBUĞU  (#npBar — netflix.js "OYNATICI KONTROLLERİ")
 *
 * ⚠️ BU BÖLÜM ÇUBUĞUN CANLI HATASININ DÜZELTMESİ. Çubuğun markup'ı
 * netflix.js'te vardı ama karşılığı olan CSS HİÇ YAZILMAMIŞTI: `.np`,
 * `.np__b`, `.np__hat` seçicilerinin hiçbiri bu dosyada yoktu. Ham
 * `<button>`lar `.stage`in `place-items:center` düzeniyle ekranın tam
 * ORTASINDA minicik bir öbek hâline geliyordu — şikâyet edilen "tıkış tıkış"
 * görüntü buydu. Markup'ı değiştirirken bu bölümü de güncelle.
 * ========================================================================== */
.np{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  padding:84px 3.2% 14px;
  /* ⚠️ Gradyan ilerleme hattının ARKASINA kadar koyulaşmalı. İlk sürümde
     %40'ta hâlâ neredeyse saydamdı ve hat aydınlık sahnelerde (pembe gökyüzü)
     görünmüyordu — ekranda ölçüldü. */
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 34%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.92) 100%);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.np.on{ opacity:1; transform:none; pointer-events:auto }
/* Çubuk gizliyken imleç de kaybolsun — sinema hissi. */
.stage:not(.np-acik) video{ cursor:none }

/* ---------------------------------------------------------- ilerleme hattı */
.np__hat{ position:relative; height:18px; display:flex; align-items:center;
  cursor:pointer; touch-action:none }
.np__hat::before{ content:""; position:absolute; left:0; right:0; height:4px;
  border-radius:2px; background:rgba(255,255,255,.38);
  box-shadow:0 1px 3px rgba(0,0,0,.55); transition:height .12s ease }
.np__tampon,.np__dolu{ position:absolute; left:0; height:4px; border-radius:2px;
  transition:height .12s ease; pointer-events:none }
.np__tampon{ background:rgba(255,255,255,.42); width:0 }
.np__dolu{ background:var(--accent); width:0 }
.np__hat:hover::before,.np__hat:hover .np__tampon,.np__hat:hover .np__dolu{ height:7px }
.np__topu{ position:absolute; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 1px rgba(0,0,0,.4);
  transform:translateX(-50%) scale(0); transition:transform .14s ease; pointer-events:none }
.np__hat:hover .np__topu{ transform:translateX(-50%) scale(1) }
.np__ipucu{ position:absolute; bottom:26px; left:0; transform:translateX(-50%);
  background:rgba(0,0,0,.88); border:1px solid rgba(255,255,255,.16);
  padding:3px 8px; border-radius:4px; font-family:'IBM Plex Mono',monospace;
  font-size:12px; color:#fff; white-space:nowrap; opacity:0;
  transition:opacity .12s ease; pointer-events:none }
.np__hat:hover .np__ipucu{ opacity:1 }
/* Canlı yayında sarma anlamsız — hat gizlenir, yerini LIVE alır. */
.np--canli .np__hat{ visibility:hidden }

/* ------------------------------------------------------------- düğme satırı */
.np__alt{ display:flex; align-items:center; gap:6px; margin-top:12px }
.np__grup{ display:flex; align-items:center; gap:6px; min-width:0 }
.np__grup--sag{ margin-left:auto; gap:6px }
.np__b{ width:42px; height:42px; flex:none; display:grid; place-items:center;
  padding:0; border:0; background:transparent; color:#fff; border-radius:50%;
  transition:background .15s ease, transform .12s ease, color .15s ease }
.np__b:hover{ background:rgba(255,255,255,.16) }
.np__b:active{ transform:scale(.92) }
.np__b:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.np__b svg{ width:24px; height:24px; fill:currentColor; display:block }
.np__b--buyuk svg{ width:30px; height:30px }
.np__b.on{ color:var(--accent) }
.np__b--cc.on{ color:var(--accent); background:rgba(229,9,20,.16) }
/* Dock'tan taşınan düğmelerin eski kutu stili çubukta yakışmıyor. */
.np__b.cast-btn{ width:42px; height:42px; padding:0; border:0; background:transparent;
  font-size:19px; line-height:1 }
.np__b.cast-btn .cast-btn__t{ display:none }

.np__seskap{ display:flex; align-items:center }
.np__ses{ width:0; opacity:0; height:4px; margin:0 2px 0 0; cursor:pointer;
  accent-color:var(--accent); transition:width .2s ease, opacity .2s ease }
.np__seskap:hover .np__ses,.np__ses:focus{ width:90px; opacity:1; margin-right:8px }

.np__sure{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:#e5e5e5;
  margin-left:8px; white-space:nowrap; font-variant-numeric:tabular-nums }
.np__canli{ display:inline-flex; align-items:center; gap:6px; margin-left:8px;
  font-size:12px; font-weight:800; letter-spacing:.12em; color:#fff }
.np__motor{ font-size:11px; color:#8c8c8c; letter-spacing:.06em; margin-right:6px;
  white-space:nowrap }
/* Başlık yalnızca tam ekranda — orada üstteki başlık satırı görünmüyor. */
.np__orta{ display:none; flex:1; min-width:0; text-align:center; padding:0 14px;
  font-size:14px; font-weight:700; color:#fff; opacity:.92;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.stage:fullscreen .np__orta{ display:block }
.stage:fullscreen video{ max-height:100vh !important; height:100% }

/* Altyazı yazısı çubuğun altında kalmasın. */
.sub-overlay{ transition:bottom .2s ease }
.stage.np-acik .sub-overlay{ bottom:118px }

/* Altyazı paneli artık sahnenin içinde (tam ekranda da açılabilsin diye). */
.stage > .sheet{ z-index:40; box-shadow:-20px 0 60px rgba(0,0,0,.6) }

@media (max-width:640px){
  .np{ padding:56px 4% 10px }
  .np__b{ width:38px; height:38px }
  .np__b svg{ width:21px; height:21px }
  .np__b--buyuk svg{ width:26px; height:26px }
  .np__seskap{ display:none }
  .np__sure{ font-size:12px; margin-left:4px }
  .np__motor{ display:none }
  .stage > .sheet{ width:100%; right:-100% }
}
@media (prefers-reduced-motion:reduce){
  .np,.np__hat::before,.np__dolu,.np__tampon,.np__topu,.np__ses,.sub-overlay{ transition:none }
}

/* -------------------------------------------- altyazı paneli (çubuğa bağlı)
 * Panel artık `.stage` içinde (tam ekranda da açılabilsin diye). Netflix'te
 * olduğu gibi kontrol çubuğunun ÜSTÜNDE duran serbest bir kart: tam boy bir
 * çekmece olduğunda oynat/tam ekran düğmelerini örtüyordu. */
.stage > .sheet{
  top:auto; bottom:104px; height:min(66%,470px); width:360px; right:-380px;
  border:1px solid rgba(255,255,255,.14) !important; border-radius:10px !important;
  overflow:hidden; backdrop-filter:blur(10px);
  box-shadow:0 24px 70px rgba(0,0,0,.85);
}
.stage > .sheet.open{ right:22px }
.stage > .sheet .sheet-head{ padding:12px 16px }
.stage > .sheet .sheet-body{ padding:14px 16px; gap:10px }
/* Anahtar uyarısı: metin ve düğme yan yana sıkışıyordu, alt alta al. */
.key-notice{ display:flex; flex-direction:column; gap:8px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:8px; padding:10px 12px }
.key-notice .sheet-note{ font-size:12px; line-height:1.45; color:#b3b3b3 }
.key-notice .mini{ width:100%; padding:8px 10px; white-space:nowrap }
@media (max-width:640px){
  .stage > .sheet{ width:auto; left:12px; right:-100%; bottom:92px; height:60% }
  .stage > .sheet.open{ right:12px }
}

/* --------------------------------------- kategori başlığı: bayrak + rozet
 * Sağlayıcı kategori adlarına `⁴ᴷ ³⁸⁴⁰ᴾ ᴰᵒˡᵇʸ ⱽᶦˢᶦᵒⁿ` gibi işaretler
 * gömüyor. Bunlar addan ayrılıp rozete dönüştü (bkz. index.html
 * "KATEGORİ ADI ÇÖZÜMLEME"); başlık artık okunur. */
.kb__bayrak{ margin-right:8px; font-size:1.05em; line-height:1 }
.kb__rozet{
  display:inline-block; margin-left:7px; padding:2px 7px; border-radius:4px;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.16);
  color:#cfcfcf; font-size:.60em; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; vertical-align:middle; white-space:nowrap;
}
.katbtn__ad .kb__rozet{ font-size:.66em; margin-left:5px; padding:1px 5px }