/* Fora Player – TV arayüzü. Tasarım 1280x720 üzerinde yapılır ve ekrana göre ölçeklenir.
   Performans için: gölge, bulanıklık ve filtre yok; yalnızca transform/opacity değişimi. */
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#070a10;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#e9ecf3;cursor:none;-webkit-font-smoothing:antialiased}
html.ptr,html.ptr body{cursor:default}
html.ptr [data-f],html.ptr .row,html.ptr .chrow,html.ptr .card,html.ptr .btn,html.ptr .key,html.ptr .k,html.ptr .tab,html.ptr .sn,html.ptr .epc,html.ptr .opt,html.ptr .fld,html.ptr .prow,html.ptr .sbox,html.ptr .tk{cursor:pointer}
.tk{display:inline-block;padding:4px 2px;border-radius:6px}
html.ptr .tk:hover{color:#fff;background:#1d2335}
#ptrBack{display:none;position:absolute;right:18px;bottom:18px;width:64px;height:64px;line-height:58px;text-align:center;font-size:34px;border-radius:50%;background:rgba(27,34,52,.92);border:3px solid #3a4568;color:#fff;z-index:40;cursor:pointer}
html.ptr #ptrBack{display:block}
#ptrBack:hover{border-color:#fff;background:#2f56c7}
#pinP{margin-top:16px}
#pinP b{display:inline-block;width:34px;height:40px;line-height:40px;margin:0 2px;border-radius:6px;background:#1d2335;font-weight:normal;font-size:18px;cursor:pointer}
#pinP b:hover{background:#2f56c7}
#root{position:absolute;left:0;top:0;width:1280px;height:720px;overflow:hidden;background:#0a0d14;-webkit-transform-origin:0 0;transform-origin:0 0}
.hidden{display:none !important}
.mut{color:#8a93ab}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr{position:absolute;left:0;top:0;width:1280px;height:720px;overflow:hidden;z-index:2}
#screens{position:absolute;left:0;top:0;width:1280px;height:720px}
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}

/* ---------- üst çubuk ---------- */
.hdr{position:absolute;left:0;top:0;right:0;height:84px;padding:0 44px}
.brand{position:absolute;left:44px;top:24px;font-size:26px;font-weight:bold;letter-spacing:-.5px}
.brand i{font-style:normal;color:#8fb0ff}
.brand svg.ic{font-size:30px;color:#7fa2ff;margin-right:10px;vertical-align:-6px}
.clock{position:absolute;left:330px;top:26px;font-size:28px}
.clock span{font-size:18px;color:#8a93ab;margin-left:14px}
.hbtn{position:absolute;top:18px;height:48px;line-height:44px;border:2px solid transparent;border-radius:24px;padding:0 18px;font-size:19px;color:#c9cfdd}
.hbtn svg.ic{font-size:22px}
.hbtn.sq{width:48px;padding:0;text-align:center}
.f.hbtn,.hbtn.f{border-color:#fff;background:#2f56c7;color:#fff}

/* ---------- ana sayfa ---------- */
.tile{position:absolute;border-radius:16px;overflow:hidden;border:3px solid transparent;-webkit-transition:-webkit-transform .12s;transition:transform .12s}
.tile.f{border-color:#fff;-webkit-transform:scale(1.03);transform:scale(1.03)}
.tile .ti{position:absolute;left:0;right:0;text-align:center;font-weight:bold}
.tile .tic{font-size:76px}
.tile .tl{font-size:34px;letter-spacing:.5px;margin-top:6px}
.tile .tu{position:absolute;left:0;right:0;bottom:0;height:40px;line-height:40px;padding:0 20px;font-size:15px;background:rgba(0,0,0,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.small{background:#18203a;border-color:#232c48}
.tile.small.f{border-color:#fff;background:#2f56c7}
.tile.small .srow{position:absolute;left:22px;right:12px;top:0;bottom:0;line-height:108px;font-size:21px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.small svg.ic{font-size:28px;margin-right:12px;vertical-align:-6px}
.hfoot{position:absolute;left:44px;right:44px;bottom:26px;font-size:19px;color:#aab2c6}
.hfoot b{color:#fff}
.hfoot .r{position:absolute;right:0;top:0}
#upd{position:absolute;right:44px;top:92px;font-size:15px;color:#ffcf6b}

/* ---------- paneller ---------- */
.side{position:absolute;left:0;top:0;bottom:0;width:300px;background:#0e121c;border-right:1px solid #1a2132}
.side .sh{height:72px;line-height:72px;padding:0 22px;font-size:21px;font-weight:bold;color:#9fb6f0}
.side .sh svg.ic{margin-right:10px}
.sbox{margin:0 16px 8px;height:44px;line-height:40px;padding:0 14px;border:2px solid #232b40;border-radius:8px;font-size:16px;color:#6e7792;background:#121827}
.sbox.f{border-color:#fff;background:#2f56c7;color:#fff}
.sbox svg.ic{margin-right:8px}
.vl{position:absolute;left:0;right:0;overflow:hidden}
.row{position:absolute;left:0;right:0;height:50px;line-height:50px;padding:0 16px 0 22px;font-size:18px;color:#c9cfdd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:4px solid transparent}
.row .cnt{position:absolute;right:16px;top:0;font-size:15px;color:#6e7792}
.row.sel{background:#182038;border-left-color:#3d4f7a;color:#fff}
.row.f{background:#2f56c7;border-left-color:#c8d8ff;color:#fff}
.row.f .cnt{color:#dbe5ff}
.row .lock{color:#ffcf6b;margin-left:8px;font-size:14px}
.main{position:absolute;left:300px;top:0;right:0;bottom:0}
.mh{position:absolute;left:0;right:0;top:0;height:72px;line-height:72px;padding:0 30px;font-size:24px;font-weight:bold}
.mh .sub{font-size:16px;font-weight:normal;color:#6e7792;margin-left:10px}
.mh .tools{position:absolute;right:24px;top:0;font-size:15px;font-weight:normal;color:#6e7792}
.mh .tools i{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 5px 0 12px;vertical-align:-1px}
.empty{position:absolute;left:0;right:0;top:220px;text-align:center;font-size:20px;color:#6e7792;line-height:1.6}

/* ---------- poster ızgarası ---------- */
.card{position:absolute;border-radius:10px;overflow:hidden;background:#151b2a;border:3px solid transparent;-webkit-transition:-webkit-transform .1s;transition:transform .1s}
.card.f{border-color:#fff;-webkit-transform:scale(1.07);transform:scale(1.07);z-index:2}
.card img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.card .ph{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:40px;color:#2b3550}
.card .ct{position:absolute;left:0;right:0;bottom:0;padding:22px 9px 7px;font-size:14px;line-height:1.25;background:-webkit-linear-gradient(top,rgba(8,10,16,0),rgba(8,10,16,.92) 55%);background:linear-gradient(rgba(8,10,16,0),rgba(8,10,16,.92) 55%);max-height:64px;overflow:hidden}
.card .rt{position:absolute;left:7px;top:7px;padding:2px 7px;border-radius:5px;background:#2f6fd8;font-size:13px;font-weight:bold}
.card .fv{position:absolute;right:7px;top:5px;color:#ffc93c;font-size:18px}
.card .pr{position:absolute;left:0;bottom:0;height:4px;background:#ff5a5a}

/* ---------- canlı liste ---------- */
.chrow{position:absolute;left:0;right:0;height:56px;line-height:56px;padding:0 14px 0 14px;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:4px solid transparent;color:#c9cfdd}
.chrow .no{display:inline-block;width:52px;color:#5a6380;font-size:14px}
.chrow .lg{display:inline-block;width:52px;height:36px;margin-right:12px;vertical-align:middle;position:relative;background:#151b2a;border-radius:4px;overflow:hidden}
.chrow .lg img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}
.chrow .st{color:#ffc93c;margin-left:6px}
.chrow.play .no{color:#5fe08a}
.chrow.sel{background:#182038;border-left-color:#3d4f7a;color:#fff}
.chrow.f{background:#2f56c7;border-left-color:#c8d8ff;color:#fff}
.chrow .ep{position:absolute;left:142px;right:14px;top:30px;height:20px;line-height:20px;font-size:13px;color:#8a93ab;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chrow.two{line-height:36px}
.chrow.f .ep{color:#dbe5ff}
.chrow.f .no{color:#dbe5ff}

/* ---------- video ---------- */
#vbox{position:absolute;left:0;top:0;width:1280px;height:720px;background:#000;overflow:hidden;z-index:1}
/* önizleme: TV tarayıcılarında donanım video katmanı yuvarlak köşe ve kırpmayla bozulabildiği için düz kutu */
#vbox.pv{left:892px;top:84px;width:364px;height:205px;z-index:5;overflow:visible}
.pvoff{position:absolute;left:892px;top:84px;width:364px;height:205px;border:2px dashed #2a3350;border-radius:8px;text-align:center;padding-top:72px;font-size:18px;color:#8a93ab;line-height:1.4}
.pvoff small{font-size:14px;color:#5f6884}
#vbox.off{display:none}
#video{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;object-fit:contain}
#video.cover{object-fit:cover}
#video.fill{object-fit:fill}
#vspin{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:5px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;-webkit-animation:sp 1s linear infinite;animation:sp 1s linear infinite}
#vbox.pv #vspin{width:34px;height:34px;margin:-17px 0 0 -17px;border-width:4px}
@-webkit-keyframes sp{to{-webkit-transform:rotate(360deg)}}
@keyframes sp{to{transform:rotate(360deg)}}
#vmsg{position:absolute;left:6%;right:6%;top:40%;text-align:center;font-size:21px;color:#ff9a9a;line-height:1.5}
#vmsg small{display:block;font-size:15px;color:#aab2c6}
#vbox.pv #vmsg{font-size:14px;top:34%}
#vbox.pv #vmsg small{font-size:12px}

/* tam ekran canlı bilgi bandı */
#losd{position:absolute;left:40px;right:40px;bottom:34px;padding:18px 26px;background:rgba(8,10,16,.9);border-radius:12px}
#losd .t{font-size:28px}
#losd .t span{color:#8a93ab;margin-right:14px}
#losd .t em{font-style:normal;color:#ffc93c}
#num{position:absolute;right:50px;top:34px;font-size:64px;font-weight:bold}

/* film/dizi oynatıcı arayüzü */
#vosd{position:absolute;left:0;right:0;top:0;bottom:0}
#vosd .top{position:absolute;left:0;right:0;top:0;height:120px;padding:34px 48px;background:-webkit-linear-gradient(top,rgba(0,0,0,.85),rgba(0,0,0,0));background:linear-gradient(rgba(0,0,0,.85),rgba(0,0,0,0));font-size:28px}
#vosd .top small{display:block;font-size:17px;color:#aab2c6;margin-top:6px}
#vosd .bot{position:absolute;left:0;right:0;bottom:0;height:150px;padding:56px 48px 0;background:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.88));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.88))}
#vosd .bar{position:relative;height:8px;border-radius:4px;background:rgba(255,255,255,.22)}
#vosd .bar .bf{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:rgba(255,255,255,.35)}
#vosd .bar .pg{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#4f7dff}
#vosd .bar .kn{position:absolute;top:-6px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fff}
#vosd .tm{margin-top:16px;font-size:19px;color:#dfe5f3}
#vosd .tm .r{float:right}
#vosd .hint{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:15px;color:#9aa3b8}
#vosd .bigst{position:absolute;left:50%;top:50%;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:rgba(0,0,0,.55);text-align:center;line-height:116px;font-size:54px}
#seekbox{position:absolute;left:50%;top:44%;width:240px;margin-left:-120px;text-align:center;font-size:30px;font-weight:bold;padding:12px;background:rgba(0,0,0,.6);border-radius:12px}
#nextbox{position:absolute;right:48px;bottom:170px;width:420px;padding:18px 22px;background:rgba(14,18,28,.95);border:2px solid #2a3350;border-radius:12px}
#nextbox .l{font-size:15px;color:#8a93ab}
#nextbox .n{font-size:21px;margin:6px 0 14px}

/* ---------- detay sayfası ---------- */
.bd{position:absolute;left:0;top:0;width:1280px;height:720px;background-size:cover;background-position:center top}
.bd:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:-webkit-linear-gradient(left,#0a0d14 30%,rgba(10,13,20,.82) 60%,rgba(10,13,20,.45));background:linear-gradient(90deg,#0a0d14 30%,rgba(10,13,20,.82) 60%,rgba(10,13,20,.45))}
.dt{position:absolute;left:60px;top:60px;width:760px}
.dt .poster{position:absolute;left:0;top:0;width:220px;height:330px;border-radius:12px;overflow:hidden;background:#151b2a}
.dt .poster img{width:100%;height:100%;object-fit:cover}
.dt .inf{position:absolute;left:250px;top:0;width:560px}
.dt h1{font-size:34px;line-height:1.15;margin-bottom:12px}
.dt .meta{font-size:17px;color:#aab2c6;margin-bottom:14px}
.dt .meta span{margin-right:16px}
.dt .meta .star{color:#ffc93c}
.dt .plot{font-size:17px;line-height:1.5;color:#d6dbe7;max-height:128px;overflow:hidden}
.dt .crew{font-size:15px;color:#8a93ab;margin-top:12px;line-height:1.5;max-height:68px;overflow:hidden}
.dt .crew b{color:#c9cfdd;font-weight:normal}
.btns{position:absolute;left:60px;top:420px}
.btn{display:inline-block;margin-right:14px;height:54px;line-height:48px;padding:0 26px;font-size:20px;border:3px solid #283149;border-radius:10px;background:#18203a;color:#e9ecf3}
.btn.pri{background:#2b4fb8;border-color:#2b4fb8}
.btn.f{border-color:#fff;background:#3a68e8;color:#fff}
.btn svg.ic{margin-right:8px}
/* dizi sezon/bölüm */
.seas{position:absolute;left:60px;top:500px;right:60px;height:46px;white-space:nowrap;overflow:hidden}
.seas .sn{display:inline-block;margin-right:10px;height:42px;line-height:38px;padding:0 18px;font-size:17px;border:2px solid #283149;border-radius:21px;color:#c9cfdd}
.seas .sn.sel{border-color:#4f7dff;color:#fff}
.seas .sn.f{border-color:#fff;background:#3a68e8;color:#fff}
.eps{position:absolute;left:60px;right:60px;top:556px;height:150px;overflow:hidden}
.epc{position:absolute;top:4px;width:262px;height:142px;border-radius:10px;overflow:hidden;background:#151b2a;border:3px solid transparent}
.epc.f{border-color:#fff}
.epc img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.epc .en{position:absolute;left:12px;top:10px;font-size:14px;color:#aab2c6}
.epc .et{position:absolute;left:12px;right:12px;bottom:12px;font-size:16px;line-height:1.25;max-height:42px;overflow:hidden}
.epc .pr{position:absolute;left:0;bottom:0;height:4px;background:#ff5a5a}

/* ---------- arama ---------- */
.skb{position:absolute;left:30px;top:96px;width:470px}
.sq{height:56px;line-height:52px;padding:0 16px;font-size:24px;background:#121827;border:2px solid #232b40;border-radius:10px;white-space:nowrap;overflow:hidden;margin-bottom:14px}
.sq .cur{display:inline-block;width:2px;height:26px;background:#9fbcff;vertical-align:-4px;margin-left:2px}
.sq .phd{color:#4f5873}
.k{display:inline-block;width:60px;height:50px;line-height:46px;margin:0 6px 6px 0;text-align:center;font-size:20px;border:2px solid #232b40;border-radius:8px;background:#151b2a;vertical-align:top}
.k.f{border-color:#fff;background:#2f56c7}
.srh{position:absolute;left:520px;top:96px;right:30px;height:50px}
.tab{display:inline-block;margin-right:10px;height:46px;line-height:42px;padding:0 22px;font-size:18px;border:2px solid #232b40;border-radius:23px;color:#c9cfdd}
.tab.sel{border-color:#4f7dff;color:#fff}
.tab.f{border-color:#fff;background:#3a68e8;color:#fff}
.srr{position:absolute;left:520px;top:160px;right:20px;bottom:10px}
.rec{position:absolute;left:30px;top:570px;width:470px;font-size:15px;color:#6e7792}

/* ---------- ayarlar ---------- */
.opt{position:absolute;left:0;right:0;height:64px;padding:0 26px;border:2px solid transparent;border-radius:10px;background:#121827}
.opt .ol{position:absolute;left:26px;top:11px;font-size:19px}
.opt .od{position:absolute;left:26px;top:37px;font-size:13px;color:#6e7792}
.opt .ov{position:absolute;right:26px;top:0;line-height:60px;font-size:18px;color:#9fbcff}
.opt.f{border-color:#fff;background:#2f56c7}
.opt.f .od,.opt.f .ov{color:#e4ebff}
.info{position:absolute;left:0;right:0;height:52px;line-height:52px;padding:0 26px;border-bottom:1px solid #1a2132;font-size:18px}
.info .iv{position:absolute;right:26px;top:0;color:#fff}
.info .il{color:#8a93ab}

/* ---------- etkinleştirme ---------- */
#act{background:radial-gradient(circle at 82% 22%,#1d2b5c 0,rgba(29,43,92,0) 55%),#0a0d14;padding:64px 90px}
#act h1{font-size:38px;margin-bottom:12px}
#actL{font-size:19px;color:#9aa3b8;width:640px;line-height:1.45;margin-bottom:26px}
#actS{font-size:19px;color:#c9cfdd;line-height:1.5;width:650px;padding-left:26px}
#actS li{margin-bottom:10px}
#actC{margin-top:26px}
#actC .c{display:inline-block;margin-right:44px}
#actC .l{font-size:14px;color:#7f8aa6;letter-spacing:1.5px}
#actC .v{font-size:40px;font-weight:bold;letter-spacing:2px;margin-top:4px}
#qr{position:absolute;right:90px;top:96px;width:330px;height:330px;background:#fff;border-radius:16px;padding:14px}
#qr img{width:100%;height:100%;image-rendering:pixelated}
#qrUrl{position:absolute;right:90px;top:444px;width:330px;text-align:center;font-size:18px;color:#9fbcff}
#actB{position:absolute;left:90px;bottom:56px}
#actN{position:absolute;left:90px;bottom:24px;font-size:16px;color:#ffcf6b}

/* ---------- TV'de liste girişi ---------- */
#setup{padding:44px 140px;background:#0a0d14}
#setup h1{font-size:32px;color:#9fbcff;margin-bottom:6px}
#setup .sub{font-size:16px;color:#7f8aa6;margin-bottom:20px;line-height:1.45}
.fld{margin-bottom:12px;padding:10px 16px;border:3px solid #232a3c;border-radius:8px;background:#121725}
.fld .l{font-size:14px;color:#7f8aa6}
.fld .v{font-size:22px;margin-top:3px;min-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld .v.ph{color:#4a536d}
.fld.f{border-color:#fff;background:#2f56c7}
.fld.f .l{color:#d6e2ff}
#sStatus{margin-top:12px;font-size:18px;color:#ffcf6b;min-height:24px}
#legal{position:absolute;left:140px;right:140px;bottom:24px;font-size:13px;color:#4f5873}

/* ---------- pencereler ---------- */
#shade,.dlg,#load{z-index:30}
#shade{position:absolute;left:0;top:0;width:1280px;height:720px;background:rgba(0,0,0,.72)}
.dlg{position:absolute;left:50%;top:50%;background:#141a28;border:2px solid #2a3350;border-radius:14px;padding:26px 30px}
#kb{width:900px;margin-left:-450px;height:500px;margin-top:-250px}
#kbl{font-size:16px;color:#7f8aa6}
#kbv{margin:8px 0 18px;padding:10px 14px;font-size:26px;background:#0a0d14;border-radius:8px;min-height:52px;white-space:nowrap;overflow:hidden}
#kbv:after{content:"";display:inline-block;width:2px;height:28px;background:#9fbcff;vertical-align:-4px;margin-left:2px}
.krow{height:52px;margin-bottom:6px;white-space:nowrap}
.key{display:inline-block;width:76px;height:52px;line-height:46px;margin-right:6px;text-align:center;font-size:22px;border:3px solid #232a3c;border-radius:6px;background:#1b2234;vertical-align:top}
.key.f{border-color:#fff;background:#2f56c7}
#ask{width:620px;margin-left:-310px;margin-top:-130px;text-align:center;padding-bottom:30px}
#askT{font-size:24px;margin:10px 0 28px;line-height:1.35}
#pick{width:620px;margin-left:-310px;top:90px}
#pickT{font-size:24px;margin-bottom:14px}
#pickL{position:relative;height:0;overflow:hidden}
.prow{position:absolute;left:0;right:0;height:52px;line-height:46px;padding:0 16px;font-size:19px;border:3px solid transparent;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow.f{border-color:#fff;background:#2f56c7}
.prow .ck{position:absolute;right:16px;color:#5fe08a}
#pin{width:520px;margin-left:-260px;height:300px;margin-top:-150px;text-align:center}
#pinT{font-size:22px;margin-bottom:22px}
#pinD span{display:inline-block;width:56px;height:64px;line-height:60px;margin:0 6px;font-size:34px;border:3px solid #283149;border-radius:10px}
#pinD span.f{border-color:#fff}
#pinN{margin-top:18px;font-size:15px;color:#8a93ab}
#load{position:absolute;left:0;top:0;width:1280px;height:720px;background:rgba(7,9,13,.94)}
#loadS{position:absolute;left:50%;top:310px;width:56px;height:56px;margin-left:-28px;border:5px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;-webkit-animation:sp 1s linear infinite;animation:sp 1s linear infinite}
#loadT{position:absolute;left:0;right:0;top:390px;text-align:center;font-size:20px;color:#9aa3b8}
#toast{position:absolute;left:50%;top:26px;width:620px;margin-left:-310px;text-align:center;padding:13px;font-size:18px;background:#1b2234;border:1px solid #2a3350;border-radius:10px;z-index:50}
