:root{
  --bg:#000; --ink:#fff; --dim:rgba(255,255,255,.62); --dim2:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.12); --glass:rgba(18,20,26,.72);
  --acc:#3ddc84; --like:#ff2d55; --warn:#ffb547; --bad:#ff5c6c; --info:#4ea1ff;
  --rail:64px; --top:calc(56px + env(safe-area-inset-top));
  --safe-b:env(safe-area-inset-bottom);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--ink)}
body{font:15px/1.45 ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,system-ui,sans-serif; -webkit-font-smoothing:antialiased}
button,input{font:inherit; color:inherit}

/* ---------------- top bar ---------------- */
#topbar{
  position:fixed; inset:0 0 auto 0; height:var(--top); z-index:30;
  display:flex; align-items:center; gap:14px;
  padding:env(safe-area-inset-top) 14px 0;
  background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,0));
  pointer-events:none;
}
#topbar>*{pointer-events:auto}
.logo{font-weight:700; letter-spacing:-.4px; font-size:16.5px; white-space:nowrap}
.tabs{display:flex; gap:2px; margin:0 auto; background:rgba(255,255,255,.08); border-radius:999px;
  padding:3px; backdrop-filter:blur(12px); overflow-x:auto; scrollbar-width:none; max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent; border:0; padding:6px 15px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--dim); cursor:pointer; transition:.16s}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--ink); color:#000}
.top-right{display:flex; gap:7px; align-items:center}
.iconbtn{
  position:relative; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.08); backdrop-filter:blur(12px); cursor:pointer;
  display:grid; place-items:center; font-size:15px; transition:.16s;
}
.iconbtn:hover{background:rgba(255,255,255,.18)}
.iconbtn .count{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--like); color:#fff; font-size:10.5px; font-weight:700;
  display:grid; place-items:center;
}

/* ---------------- feed ---------------- */
#feed{
  height:100dvh; overflow-y:scroll; scroll-snap-type:y mandatory;
  scrollbar-width:none; outline:none;
}
#feed::-webkit-scrollbar{display:none}
.slide{
  position:relative; height:100dvh; scroll-snap-align:start; scroll-snap-stop:always;
  display:grid; place-items:center; overflow:hidden;
}
/* bulanik arka plan - dikey ekranda yatay videonun bosluklarini doldurur */
.slide .bg{
  position:absolute; inset:-6%; background-size:cover; background-position:center;
  filter:blur(42px) brightness(.62) saturate(1.4); transform:scale(1.18);
}
.slide .bg::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(0,0,0,.15),rgba(0,0,0,.55))}
.stage{position:relative; width:100%; height:100%; display:grid; place-items:center}
.slide video{
  position:relative; max-width:100%; max-height:100dvh; width:auto; height:auto;
  display:block; background:#000;
}
.tap{position:absolute; inset:0; background:transparent; border:0; cursor:pointer}

/* durum katmanlari */
.center-badge{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:4;
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px); font-size:28px;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.center-badge.show{opacity:1}
.spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--acc);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.slide .loading{position:absolute; z-index:3; display:grid; place-items:center}
.slide .loading[hidden]{display:none}
.errbox{
  position:absolute; z-index:5; max-width:74%; text-align:center; padding:16px 18px;
  background:rgba(20,10,12,.9); border:1px solid rgba(255,92,108,.4); border-radius:14px;
  font-size:13.5px; color:#ffd9de;
}

/* sesi ac ipucu */
.unmute{
  position:absolute; top:calc(var(--top) + 12px); left:50%; translate:-50% 0; z-index:6;
  display:flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.94); color:#000; font-size:13px; font-weight:650;
  border:0; cursor:pointer; box-shadow:0 6px 22px rgba(0,0,0,.5);
}
.unmute[hidden]{display:none}

/* ---------------- sag eylem rayi ---------------- */
.rail{
  position:absolute; right:10px; bottom:calc(110px + var(--safe-b)); z-index:8;
  display:flex; flex-direction:column; gap:16px; align-items:center;
}
.act{
  width:50px; display:flex; flex-direction:column; align-items:center; gap:5px;
  background:transparent; border:0; cursor:pointer; color:var(--ink); text-decoration:none;
}
.act .ico{
  width:47px; height:47px; border-radius:50%; display:grid; place-items:center; font-size:20px;
  background:rgba(255,255,255,.12); border:1px solid var(--line); backdrop-filter:blur(12px);
  transition:transform .16s, background .16s;
}
.act:hover .ico{background:rgba(255,255,255,.24)}
.act:active .ico{transform:scale(.9)}
.act .lbl{font-size:10.5px; font-weight:650; color:var(--dim); letter-spacing:.1px; text-align:center; line-height:1.25}
.act.liked .ico{background:var(--like); border-color:var(--like); animation:pop .32s}
.act.liked .lbl{color:#fff}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.act.busy .ico{background:rgba(78,161,255,.35); border-color:var(--info)}
.act.done .ico{background:rgba(61,220,132,.32); border-color:var(--acc)}
.act.failed .ico{background:rgba(255,92,108,.32); border-color:var(--bad)}

/* ---------------- alt bilgi ---------------- */
.caption{
  position:absolute; left:0; right:calc(var(--rail) + 12px); bottom:0; z-index:7;
  padding:20px 18px calc(26px + var(--safe-b));
  background:linear-gradient(0deg,rgba(0,0,0,.86) 12%,rgba(0,0,0,.5) 55%,transparent);
}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.chip{
  font-size:10.5px; font-weight:750; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 8px; border-radius:5px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px);
}
.chip.goal{background:var(--acc); color:#06120b}
.chip.card{background:var(--bad); color:#fff}
.chip.stadium{background:var(--warn); color:#1d1408}
.chip.highlights{background:var(--info); color:#04121e}
.chip.tribun{background:#ff8a3d; color:#1d1006}
.chip.wtf{background:#c77dff; color:#1a0a26}
.chip.save{background:#4ecdc4; color:#04201e}
.chip.magazin{background:#e9e2d0; color:#1a1608}
.chip.fire{background:linear-gradient(90deg,#ff8a3d,#ff2d55); color:#fff}
.chip.trend{background:linear-gradient(90deg,#ff4d00,#ff2d55); color:#fff; text-transform:none;
  letter-spacing:0; font-weight:800}
.chip.star{background:rgba(255,255,255,.92); color:#0a0d12; text-transform:none; letter-spacing:0; font-weight:700}
.chip.risk{background:rgba(255,92,108,.9); color:#fff}
.chip.safe{background:rgba(61,220,132,.28); color:#8ff0bd}
.sel{background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:10px 12px; font-size:13.5px; width:100%; appearance:none}
.sel:focus{outline:none; border-color:var(--acc)}
.chip.hot{background:var(--like); color:#fff}
.caption h2{margin:0 0 5px; font-size:16.5px; font-weight:650; line-height:1.32; letter-spacing:-.2px}
.caption .sub{font-size:12.5px; color:var(--dim); display:flex; gap:8px; flex-wrap:wrap}
.caption .sub b{color:var(--dim2); font-weight:500}

.progress{position:absolute; left:0; right:0; bottom:var(--safe-b); height:3px; background:rgba(255,255,255,.14); z-index:9}
.progress i{display:block; height:100%; width:0; background:var(--acc); transition:width .18s linear}

/* ---------------- çekmeceler ---------------- */
#scrim{position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); z-index:40}
#scrim[hidden]{display:none}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(400px,92vw); z-index:41;
  background:#0c0f14; border-left:1px solid var(--line);
  display:flex; flex-direction:column; animation:slidein .22s ease;
}
.wide-drawer{width:min(500px,96vw)}
.drawer[hidden]{display:none}
@keyframes slidein{from{transform:translateX(24px); opacity:.4}to{transform:none; opacity:1}}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0; font-size:15px; font-weight:650}
.drawer-body{padding:16px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:16px}
.row{display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--dim); font-weight:600}
/* --- filtre paneli --- */
.drawer-head .sub2{margin:3px 0 0; font-size:11.5px; color:var(--dim2); font-weight:500}
.fset{display:flex; flex-direction:column; gap:9px}
.grp{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--dim2)}
.grp i{font-style:normal; font-size:11px; font-weight:700; letter-spacing:0;
  text-transform:none; color:var(--acc)}
.hint2{margin:0; font-size:11px; color:var(--dim2); font-weight:400; line-height:1.5}
.inp{background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:10px 12px; font-size:13.5px; width:100%}
.inp:focus{outline:none; border-color:var(--acc)}
.fbar{display:flex; gap:8px; margin-top:6px; position:sticky; bottom:0;
  padding:12px 0 4px; background:linear-gradient(180deg,transparent,#0c0f14 30%)}
.fbar .btn{flex:1}
.signout{display:block; text-align:center; font-size:12px; color:var(--dim2);
  text-decoration:none; padding:10px 0 2px}
.signout:hover{color:var(--bad)}
#btn-filter .count{background:var(--acc); color:#06120b}
.seg{display:flex; gap:3px; background:rgba(255,255,255,.06); padding:3px; border-radius:9px}
.seg button{flex:1; background:transparent; border:0; padding:7px 4px; border-radius:7px; font-size:12.5px; color:var(--dim); cursor:pointer; font-weight:600}
.seg button.on{background:rgba(255,255,255,.94); color:#000}
.row input{background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:13.5px}
.row input:focus{outline:none; border-color:var(--acc)}
.btn{background:rgba(255,255,255,.1); border:1px solid var(--line); border-radius:9px; padding:9px 14px; font-size:13px; cursor:pointer; font-weight:600}
.btn:hover{background:rgba(255,255,255,.2)}
.btn.wide{width:100%}
.btn.go{background:var(--acc); color:#06120b; border-color:transparent}
.btn.sm{padding:5px 10px; font-size:12px}

/* youtube kutusu */
.ytbox{padding:14px 16px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--dim); display:flex; flex-direction:column; gap:9px}
.ytbox .line{display:flex; align-items:center; gap:8px; justify-content:space-between}
.dot{width:8px; height:8px; border-radius:50%; background:var(--bad); flex:none}
.dot.ok{background:var(--acc)} .dot.warn{background:var(--warn)}

/* beğeni listesi */
.like-item{display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.03)}
.like-item img{width:78px; height:44px; object-fit:cover; border-radius:6px; flex:none; background:#161a22}
.like-item .t{font-size:12.5px; font-weight:600; line-height:1.35; margin:0 0 4px}
.titleedit{width:100%; background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:7px;
  padding:7px 9px; font-size:12.5px; font-weight:600; margin-bottom:5px}
.titleedit:focus{outline:none; border-color:var(--acc); background:rgba(255,255,255,.12)}
.pill.converting{background:rgba(199,125,255,.25); color:#e2c6ff}
.preview{margin:7px 0 0; padding:8px 9px; border-radius:8px; background:rgba(61,220,132,.07); border:1px solid rgba(61,220,132,.2)}
.preview:empty{display:none}
.pv-title{font-size:12px; font-weight:650; line-height:1.35; margin-bottom:4px}
.pv-tags{font-size:10.5px; color:#8ff0bd; line-height:1.5; word-break:break-word}
.pv-fmt{font-size:10.5px; color:var(--dim2); margin-top:4px}
.like-item .s{font-size:11px; color:var(--dim2); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.like-item .acts{display:flex; gap:5px; margin-top:6px}
.pill{font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px}
.pill.queued{background:rgba(255,255,255,.14); color:var(--dim)}
.pill.downloading,.pill.uploading{background:rgba(78,161,255,.25); color:#a9d2ff}
.pill.done{background:rgba(61,220,132,.25); color:#8ff0bd}
.pill.error{background:rgba(255,92,108,.25); color:#ffb3bc}
a{color:var(--acc)}

/* durum listesi */
.srow{display:flex; align-items:center; gap:9px; font-size:12.5px; padding:9px 0; border-bottom:1px solid var(--line)}
.srow b{font-weight:650} .srow .n{margin-left:auto; color:var(--dim2); font-variant-numeric:tabular-nums}
.note{font-size:11.5px; color:var(--dim2); padding:2px 0 0 17px; line-height:1.5}

/* ipucu + toast */
.hint{position:fixed; left:14px; bottom:calc(12px + var(--safe-b)); z-index:25; font-size:11.5px; color:var(--dim2); background:rgba(0,0,0,.5); padding:6px 11px; border-radius:20px; backdrop-filter:blur(10px); transition:opacity .4s}
.hint.gone{opacity:0; pointer-events:none}
#toast{position:fixed; left:50%; bottom:calc(70px + var(--safe-b)); translate:-50% 0; z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{background:rgba(255,255,255,.96); color:#000; padding:9px 17px; border-radius:999px; font-size:13px; font-weight:600; box-shadow:0 8px 26px rgba(0,0,0,.5); animation:tin .25s}
.toast.err{background:#ff5c6c; color:#fff}
@keyframes tin{from{transform:translateY(10px); opacity:0}to{transform:none; opacity:1}}

.empty{position:fixed; inset:0; display:grid; place-items:center; text-align:center; color:var(--dim); font-size:14px; padding:30px}
.empty .spinner{margin:0 auto}

@media (max-width:720px){
  .caption h2{font-size:15.5px}
  .caption{right:calc(var(--rail) + 4px); padding-left:14px}
  .rail{right:6px; bottom:calc(96px + var(--safe-b)); gap:18px}
  .act .ico{width:52px; height:52px; font-size:22px}   /* parmak icin daha buyuk hedef */
  .tab{padding:7px 11px; font-size:12.5px}
  /* Dar ekranda sekme seridi kendi satirinda ve kaydirilabilir */
  #topbar{flex-wrap:wrap; height:auto; padding-bottom:6px}
  .tabs{order:3; width:100%; margin:4px 0 0; border-radius:12px; justify-content:flex-start}
  .logo{margin-right:auto}
  :root{--top:calc(96px + env(safe-area-inset-top))}
  .logo{font-size:15px}
  .top-right{gap:5px}
  .iconbtn{width:38px; height:38px}
  .unmute{padding:10px 18px; font-size:13.5px}
}
/* dokunmatikte hover efektlerini kapat */
@media (hover:none){
  .act:hover .ico{background:rgba(255,255,255,.12)}
  .iconbtn:hover{background:rgba(255,255,255,.08)}
}


/* ---------------- yayın öncesi düzenleme penceresi ---------------- */
.modal2{position:fixed; inset:0; z-index:60; background:rgba(4,6,10,.82); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:16px}
.modal2[hidden]{display:none}
.m2{width:min(620px,100%); max-height:92dvh; display:flex; flex-direction:column;
  background:#0e1219; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 28px 80px rgba(0,0,0,.7)}
.m2-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--line)}
.m2-head h2{margin:0; font-size:16px; font-weight:700}
.m2-head p{margin:4px 0 0; font-size:12px; color:var(--dim2)}
.m2-body{padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:15px}
.m2-preview{display:flex; gap:12px; align-items:flex-start}
.m2-preview img{width:132px; aspect-ratio:16/9; object-fit:cover; border-radius:9px;
  background:#161a22; flex:none}
.m2-meta{display:flex; flex-direction:column; gap:5px; padding-top:2px}
.m2-note{font-size:11.5px; color:var(--dim); line-height:1.5}
.fld{display:flex; flex-direction:column; gap:7px}
.fld>span{display:flex; justify-content:space-between; align-items:baseline;
  font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--dim2)}
.fld>span i{font-style:normal; font-size:11px; font-weight:700; letter-spacing:0;
  text-transform:none; color:var(--dim2); font-variant-numeric:tabular-nums}
.fld>span i.warn{color:var(--warn)}
.fld textarea,.fld input{background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:var(--ink); border-radius:10px; padding:11px 13px; font:inherit; font-size:13.5px;
  line-height:1.55; resize:vertical; width:100%}
.fld textarea:focus,.fld input:focus{outline:none; border-color:var(--acc); background:rgba(255,255,255,.09)}
.tagview{display:flex; flex-wrap:wrap; gap:5px}
.tagview span{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px;
  background:rgba(61,220,132,.16); color:#8ff0bd}
.m2-foot{display:flex; gap:8px; align-items:center; padding:13px 18px;
  border-top:1px solid var(--line); background:#0b0e14}
#pm-status .state{margin-top:0}
@media (max-width:640px){
  .m2{max-height:96dvh; border-radius:14px}
  .m2-preview img{width:104px}
  .m2-foot{flex-wrap:wrap}
  .m2-foot .btn{flex:1}
}