/* ===== ataby+ TV sürümü ===== */
/* Tüm ölçüler ekran genişliğine göre: 1rem = genişliğin 1/96'sı (1920 px'te 20 px) */
html.tvapp{font-size:calc(100vw / 96)}
.tvapp body{overflow:hidden;background:#0b0612}
.tvapp body::before{background:radial-gradient(ellipse at 50% -25%,#2c1544 0%,#150b21 45%,#0b0612 100%)}
.tvapp .toast{bottom:2.4rem;font-size:1.1rem;padding:.8rem 1.6rem}

#app{position:fixed;inset:0}
#stage{position:absolute;inset:0}

/* ---------- Üst menü ---------- */
.t-top{position:absolute;top:0;left:0;right:0;height:5.6rem;display:flex;align-items:center;padding:0 3.4rem;z-index:20;transition:opacity .35s,transform .35s var(--ease)}
.t-browse .t-top{opacity:0;transform:translateY(-100%)}
.t-prof{display:flex;align-items:center;gap:.45rem;padding:.3rem .5rem .3rem .3rem;border-radius:.7rem;outline:none;transition:background .2s}
.t-prof svg{width:1rem;height:1rem;opacity:.7}
.t-prof:focus{background:#fff;color:#0e0816}
.t-av{width:2.4rem;height:2.4rem;border-radius:.5rem;display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;overflow:hidden;background-image:radial-gradient(circle at 30% 25%,rgba(255,255,255,.4),transparent 62%)}
.t-av img{width:100%;height:100%;object-fit:cover}
.t-nav{flex:1;display:flex;justify-content:center;align-items:center;gap:.45rem}
.t-nav-i{height:2.6rem;padding:0 1.15rem;border-radius:999px;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:.5rem;transition:background .2s,color .2s,transform .2s;outline:none}
.t-nav-i.ico{width:2.6rem;padding:0;justify-content:center}
.t-nav-i svg{width:1.3rem;height:1.3rem}
.t-nav-i.on{background:rgba(255,255,255,.13);color:#fff}
.t-nav-i:focus{background:#fff;color:#0e0816;transform:scale(1.05)}
.t-logo{height:2.5rem;width:auto;filter:drop-shadow(0 0 .6rem rgba(255,60,155,.35))}

/* ---------- Arka plan (gezinme modunda) ---------- */
.t-bg{position:absolute;inset:0;background-size:cover;background-position:center 25%;opacity:0;transition:opacity .5s}
.t-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0612 0%,rgba(11,6,18,.9) 28%,rgba(11,6,18,.45) 58%,rgba(11,6,18,.2) 100%),linear-gradient(0deg,#0b0612 0%,rgba(11,6,18,.75) 42%,rgba(11,6,18,0) 72%)}
.t-browse .t-bg{opacity:1}

/* ---------- Büyük afiş kartı ---------- */
.t-hero{position:absolute;top:6rem;left:3.4rem;right:3.4rem;height:37.5rem;border-radius:1.4rem;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 2rem 4rem rgba(0,0,0,.5);background:#1a1026;transition:top .45s var(--ease),height .45s var(--ease),border-color .3s,background .3s,box-shadow .3s,border-radius .3s;z-index:2}
.t-hero-art{position:absolute;inset:0;background-size:cover;background-position:center 20%;transition:opacity .4s}
.t-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,16,.93) 0%,rgba(10,6,16,.7) 30%,rgba(10,6,16,.12) 60%,transparent 78%),linear-gradient(0deg,rgba(10,6,16,.65) 0%,transparent 42%);transition:opacity .4s}
.t-hero-in{position:absolute;left:2.6rem;bottom:2.4rem;max-width:35rem;z-index:1;transition:left .4s,bottom .4s}
.t-label{display:flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:800;letter-spacing:.2rem;color:rgba(255,255,255,.82);margin-bottom:.7rem}
.t-label img{height:1.35rem;width:auto}
.t-tlogo{max-width:26rem;max-height:7.5rem;object-fit:contain;object-position:left bottom;display:block;margin-bottom:1rem}
.t-clogo{max-height:5.5rem;max-width:13rem;object-fit:contain;object-position:left center;display:block;margin-bottom:1rem;filter:drop-shadow(0 .3rem 1rem rgba(0,0,0,.5))}
.t-title{font-size:3.6rem;font-weight:800;line-height:1.02;letter-spacing:-.03em;margin-bottom:.9rem;text-shadow:0 .2rem 1.4rem rgba(0,0,0,.6)}
.t-title.t-sm{font-size:2.5rem}
.t-meta{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;font-size:1.1rem;font-weight:700;margin-bottom:.8rem}
.t-meta i{font-style:normal;opacity:.5}
.t-meta b{border:1px solid rgba(255,255,255,.5);border-radius:.3rem;padding:0 .4rem;font-size:.9rem}
.t-desc{font-size:1.15rem;line-height:1.45;color:rgba(255,255,255,.88);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t-btns{display:flex;gap:.9rem;margin-top:1.5rem;flex-wrap:wrap}
.t-btn{height:3.3rem;padding:0 1.9rem;border-radius:999px;font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.2);color:#fff;transition:background .2s,color .2s,transform .2s,box-shadow .2s;backdrop-filter:blur(.6rem);outline:none;white-space:nowrap}
.t-btn svg{width:1.35rem;height:1.35rem}
.t-btn:focus{background:#fff;color:#0e0816;transform:scale(1.06);box-shadow:0 0 0 .2rem rgba(255,60,155,.6),0 .8rem 2rem rgba(190,78,254,.45)}
.t-badge{position:absolute;right:1.4rem;bottom:1.4rem;background:rgba(10,6,16,.62);backdrop-filter:blur(.6rem);padding:.6rem 1rem;border-radius:.6rem;font-size:1rem;font-weight:700;display:flex;gap:.55rem;align-items:center;border:1px solid rgba(255,255,255,.1);z-index:1}
.t-badge::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--brand2);box-shadow:0 0 .6rem var(--brand2)}

/* Gezinme modu: kart çerçevesi kalkar, bilgi alanı küçülür */
.t-browse .t-hero{top:2.6rem;height:21.5rem;border-color:transparent;background:transparent;box-shadow:none}
.t-browse .t-hero-art,.t-browse .t-hero-shade{opacity:0}
.t-browse .t-hero-in{left:0;bottom:.6rem}
.t-browse .t-badge{display:none}
.t-browse .t-tlogo{max-height:6rem}
.t-browse .t-title{font-size:3rem}

/* ---------- Satırlar ---------- */
.t-rowsvp{position:absolute;left:0;right:0;top:45.4rem;bottom:0;overflow:hidden;transition:top .45s var(--ease);z-index:3}
.t-browse .t-rowsvp{top:25rem}
.t-rows{position:relative;transition:transform .4s var(--ease)}
.t-row{position:relative;padding-bottom:1rem}
.t-row h3{font-size:1.35rem;font-weight:700;color:rgba(255,255,255,.78);padding:0 3.4rem}
.t-track{position:relative;display:flex;gap:1rem;padding:1rem 3.4rem 1.3rem;overflow:hidden}
.t-card{position:relative;flex:0 0 17rem;aspect-ratio:16/9;border-radius:.7rem;overflow:hidden;background:#241733;transition:transform .2s var(--ease),box-shadow .2s;outline:none}
.t-card>img{width:100%;height:100%;object-fit:cover;display:block}
.t-card .ph{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center;font-size:1.2rem;font-weight:800;color:#d8c6e8;background:linear-gradient(135deg,#3a1f52,#170d22)}
.t-card .cap{position:absolute;left:0;right:0;bottom:0;padding:2rem .85rem .6rem;background:linear-gradient(transparent,rgba(0,0,0,.88));font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.t-card .cap small{display:block;font-weight:500;color:#d8c6e8;font-size:.8rem;overflow:hidden;text-overflow:ellipsis}
.t-card.hasp .cap{padding-bottom:1rem}
.t-card .prog{left:.75rem;right:.75rem;bottom:.5rem;height:.25rem}
.t-card:focus{transform:scale(1.08);box-shadow:0 0 0 .22rem #fff,0 0 0 .48rem rgba(255,60,155,.55),0 1rem 2.4rem rgba(190,78,254,.45);z-index:2}
.t-chc{display:grid;place-items:center;background:linear-gradient(135deg,#3a2050,#180d24)}
.t-chc>img{width:auto;height:auto;max-width:58%;max-height:50%;object-fit:contain}
.t-chc .ini{font-size:2.2rem;font-weight:800;color:#c9a3e8}
.t-chc img+.ini{display:none}
.t-chc .lv{position:absolute;top:.6rem;left:.6rem;font-size:.7rem;font-weight:800;letter-spacing:.08rem;display:flex;align-items:center;gap:.3rem;background:rgba(0,0,0,.5);padding:.2rem .5rem;border-radius:.3rem}
.t-chc .lv::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:#ff3c9b}
.t-chc .star{position:absolute;top:.4rem;right:.6rem;color:#ffd54a;font-size:1.1rem}

/* ---------- Detay sayfası ---------- */
.t-dbg{position:absolute;inset:0;background-size:cover;background-position:center 20%}
.t-dbg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0612 0%,rgba(11,6,18,.88) 32%,rgba(11,6,18,.35) 65%,rgba(11,6,18,.15) 100%),linear-gradient(0deg,#0b0612 0%,rgba(11,6,18,.7) 38%,transparent 65%)}
.t-detail{position:absolute;inset:0;overflow:hidden}
.t-dinfo{padding:9rem 3.4rem 1rem;max-width:46rem;position:relative}
.t-dinfo .t-desc{-webkit-line-clamp:4}
.t-dprog{width:18rem;margin-top:1rem}
.t-dprog .prog{position:static;height:.3rem}
.t-dprog small{font-size:.9rem;color:rgba(255,255,255,.7)}
.t-seasons{display:flex;gap:.7rem;padding:0 3.4rem;margin:1.6rem 0 .2rem;position:relative}
.t-chip{height:2.6rem;padding:0 1.25rem;border-radius:999px;background:rgba(255,255,255,.12);font-size:1rem;font-weight:700;color:rgba(255,255,255,.8);flex:none;outline:none;transition:all .2s}
.t-chip.on{background:rgba(190,78,254,.38);color:#fff}
.t-chip:focus{background:#fff;color:#0e0816;transform:scale(1.05)}
.t-drows{position:relative;margin-top:1rem}

/* ---------- Arama ---------- */
.t-search{position:absolute;top:6rem;left:0;right:0;bottom:0;display:grid;grid-template-columns:28rem 1fr}
.t-kb{padding:1rem 1.4rem 0 3.4rem}
.t-q{height:3.4rem;border-radius:.6rem;background:rgba(255,255,255,.08);display:flex;align-items:center;gap:.6rem;padding:0 1rem;font-size:1.35rem;font-weight:600;margin-bottom:1rem;border:1px solid rgba(255,255,255,.14);white-space:nowrap;overflow:hidden}
.t-q svg{width:1.3rem;height:1.3rem;flex:none;opacity:.7}
.t-q .ph{color:rgba(255,255,255,.45);font-weight:500}
.t-q .cur{display:inline-block;width:.12rem;height:1.5rem;background:var(--brand2);animation:tblink 1s steps(1) infinite;margin-left:.1rem}
@keyframes tblink{50%{opacity:0}}
.t-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem}
.t-key{height:2.8rem;border-radius:.45rem;background:rgba(255,255,255,.07);font-size:1.15rem;font-weight:700;outline:none;transition:background .15s,color .15s,transform .15s}
.t-key.w2{grid-column:span 2}.t-key.w3{grid-column:span 3}.t-key.w4{grid-column:span 4}
.t-key:focus{background:#fff;color:#0e0816;transform:scale(1.06)}
.t-key svg{width:1.3rem;height:1.3rem;margin:auto}
.t-res{position:relative;overflow:hidden}
.t-res .t-row h3,.t-res .t-track{padding-left:1.2rem}
.t-hint{padding:1rem 1.2rem;font-size:1.2rem;color:rgba(255,255,255,.6)}
.t-tips{display:flex;flex-wrap:wrap;gap:.6rem;padding:0 1.2rem}

/* ---------- Boş durum / yükleniyor ---------- */
.t-empty{position:absolute;top:44%;left:0;right:0;text-align:center;font-size:1.4rem;color:rgba(255,255,255,.72);line-height:1.6}
.t-empty .t-btn{margin:1.4rem auto 0;display:inline-flex}
.tvapp .spinner{width:4rem;height:4rem;border-width:.3rem;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.tvapp .spinner{animation:tspin .9s linear infinite}
@keyframes tspin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- Giriş ve profiller (TV ölçüleri) ---------- */
.tvapp #login .login-box{max-width:44rem}
.tvapp .login-box .brandmark{font-size:3.6rem}
.tvapp .login-box h1{font-size:2.2rem}
.tvapp .login-box p{font-size:1.2rem}
.tvapp .auth{width:26rem}
.tvapp .authf input{height:3.2rem;font-size:1.2rem}
.tvapp .authf .btn{height:3.2rem;font-size:1.1rem}
.tvapp .authf input:focus{border-color:#fff;box-shadow:0 0 0 .2rem rgba(255,60,155,.5)}
.tvapp .auth-tabs button:focus,.tvapp .auth .link:focus,.tvapp .authf .btn:focus{outline:.18rem solid #fff;outline-offset:.2rem}
.tvapp #profiles h1{font-size:2.6rem;margin-bottom:2.6rem}
.tvapp .plist{gap:2rem;max-width:none}
.tvapp .pf{width:9rem}
.tvapp .pf .nm{font-size:1.15rem}
.tvapp .pbtns{margin-top:2.6rem;gap:1rem}
.tvapp .pbtns .btn{height:2.8rem;font-size:1rem}
.tvapp .pbtns .btn:focus{background:#fff;color:#0e0816;border-color:#fff}
.tvapp .modal .mbox{width:min(34rem,90vw)}
.tvapp .colors button:focus{outline:.18rem solid #fff;outline-offset:.15rem}
.tvapp .mrow button:focus{outline:.18rem solid #fff;outline-offset:.2rem}

/* ---------- QR ile giriş ---------- */
.tvapp #login.has-qr{display:flex;align-items:center;justify-content:center;gap:5rem}
.tvapp #login.has-qr .login-box{max-width:30rem;text-align:center}
.tvapp #login.has-qr .login-box h1{font-size:1.8rem}
.tvapp #login.has-qr .login-box>p,.tvapp #login.has-qr .feat{display:none}
.t-qr{width:25rem;text-align:center;background:rgba(26,16,38,.78);border:1px solid rgba(255,255,255,.12);border-radius:1.4rem;padding:2rem 2rem 1.5rem;backdrop-filter:blur(1rem);box-shadow:0 2rem 4rem rgba(0,0,0,.4)}
.t-qr h2{font-size:1.6rem;margin-bottom:1.2rem}
.t-qr-img{background:#fff;border-radius:1rem;padding:.7rem;width:15rem;height:15rem;margin:0 auto 1.2rem;box-shadow:0 0 0 .3rem rgba(190,78,254,.45),0 0 2.4rem rgba(255,60,155,.35)}
.t-qr-img svg{width:100%;height:100%;display:block}
.t-qr ol{text-align:left;font-size:1.05rem;color:#e6d8f3;line-height:1.65;padding-left:1.4rem;margin:0 0 1rem}
.t-qr-alt{font-size:.9rem;color:#a99bb8;line-height:1.5}
.t-qr-code{display:flex;gap:.45rem;justify-content:center;margin:.8rem 0}
.t-qr-code span{width:2.5rem;height:3.1rem;border-radius:.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;font-size:1.6rem;font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace}
.t-qr-exp{font-size:.85rem;color:#8f7aa5}