:root{--panel:#141418;--panel-2:#1a1a1f;--text:#f5f7fb;--muted:#8c8ea1;--ring:rgba(255,255,255,.18);--ring-2:rgba(0,163,255,.45);--accent:#19a9ff;--accent-2:#007be5;--chip:#1a1e27;--danger:#ff5577;--ok:#26d07c;--radius:14px;--gap:24px;--sidebars-w:300px}
*{box-sizing:border-box}
.page{display:flex; min-height:100dvh; padding:28px var(--gap)}
.sidebars{width:var(--sidebars-w); flex:0 0 var(--sidebars-w); border-radius:var(--radius); padding:18px; position:sticky; top:24px; height:calc(100dvh - 48px); overflow:auto; order:-1}
.content{flex:1; min-width:0}
.page-title{font-size:30px; font-weight:800; letter-spacing:.2px; margin:4px 0 18px}
.search{position:relative; margin-bottom:10px}
.search input{width:100%; padding:12px 38px; border-radius:12px; background:#0f0f13; border:1px solid #1c1c23; color:var(--text); outline:none; box-shadow:0 0 0 0 transparent; transition:.2s}
.search input:focus{border-color:#283145; box-shadow:0 0 0 3px #27324a66}
.search .ico{position:absolute; left:12px; top:50%; translate:0 -50%; width:18px; height:18px; opacity:.7}
.group{margin:12px 0}
.group-label{font-size:12px; color:var(--muted); opacity:.9; margin:10px 6px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:linear-gradient(180deg,#15151b 0%, #121318 100%); border:1px solid #1c1c23; border-radius:12px; padding:12px 14px; cursor:pointer; box-shadow:0 8px 20px -12px #000a; transition:.15s}
.row + .row{margin-top:10px}
.row:hover{background:var(--panel-2); border-color:#252633}
.row.is-on{outline:2px solid #1a98ff66; border-color:#2b3a57; background:#0f1522}
.row .left{display:flex; align-items:center; gap:10px}
.row .left .ico{width:18px; height:18px; opacity:.9}
.row .right{display:flex; align-items:center; gap:10px; color:#cfd3e0}
.row .value{color:#c5c9d9; font-weight:600}
.caret{width:16px; height:16px; opacity:.6}
.dropdown{display:none; padding:10px 2px 0 2px}
.row.open + .dropdown{display:block}
.menu{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.menu .opt{background:#101217; border:1px solid #1f2230; padding:10px 10px; border-radius:10px; color:#cfd3e0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; user-select:none; transition:.15s}
.menu .opt:hover{transform:translateY(-1px); border-color:#2a2e40}
.menu .opt.active{outline:2px solid #1a98ff66; border-color:#1a98ff66; background:#0e1623}
.switch{--h:22px; --w:42px; --p:3px; inline-size:var(--w); block-size:var(--h); background:#20222c; border:1px solid #2a2d3a; border-radius:999px; position:relative; box-shadow:inset 0 2px 6px #0006; flex:0 0 auto}
.switch i{position:absolute; inset:var(--p) auto var(--p) var(--p); inline-size:calc(var(--h) - var(--p)*2); block-size:calc(var(--h) - var(--p)*2); border-radius:999px; background:#59607b; transition:.2s cubic-bezier(.2,.7,.4,1); box-shadow:0 2px 6px #0007}
.switch.on{background:#0f2130; border-color:#133a58}
.switch.on i{inset:var(--p) var(--p) var(--p) auto; background:#2fbcff}
.btn-reset{width:100%; margin-top:14px; padding:11px 14px; border-radius:12px; border:1px solid #282c38; color:#cdd3e3; background:#0f1219; cursor:pointer; font-weight:600}
.btn-reset:hover{border-color:#333a4e; background:#101625}
.trash{display:flex; justify-content:flex-start}
.trash-btn{width:38px; height:38px; border-radius:10px; border:1px solid #282c38; background:#0f1219; display:grid; place-items:center; margin-top:10px; cursor:pointer}
.trash-btn:hover{border-color:#333a4e; background:#111827}
.trash-btn svg{width:18px; height:18px; opacity:.9}
.active-filters{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px}
.chip{background:#1a1e27; color:#cfd3e0; border:1px solid #222838; padding:7px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:8px}
.chip .x{opacity:.75; cursor:pointer}
.grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px}
@media (max-width:1400px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:1200px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:940px){  .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:680px){  .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cards{background:transparent; border-radius:18px; overflow:hidden; cursor:pointer}
.poster{aspect-ratio:2/3; width:100%; border-radius:14px; object-fit:cover; display:block; background:#0f131a; border:1px solid #202637; box-shadow:0 20px 40px -24px #000a; transition:.18s transform, .18s box-shadow, .18s border-color}
.cards:hover .poster{transform:translateY(-2px); border-color:#2a3349; box-shadow:0 26px 60px -28px #000d, 0 0 0 4px #1a98ff22}
.meta{padding:8px 4px 0}
.toolbar{display:none; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.tool-left{display:flex; align-items:center; gap:8px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:#10131a; border:1px solid #212633; color:#dbe1ef; cursor:pointer; font-weight:600}
.btn:hover{background:#0f141f}
@media (max-width:1024px){
  :root{ --tbh: 0px; }
  .page{padding:16px 14px}
  .toolbar{display:flex}
  .sidebars{
    top: var(--tbh) !important;
    height: calc(100dvh - var(--tbh)) !important;
    padding-top: max(18px, calc(env(safe-area-inset-top) + 12px));
    position:fixed; top:0; bottom:0; left:0; right:auto;
    width:min(88vw,340px); border-radius:0 18px 18px 0; z-index:9999;
    transition:.3s transform; transform:translateX(-105%);
  }
  .sidebars.open{ transform:translateX(0) }
  .overlay{top: var(--tbh); height: calc(100dvh - var(--tbh)); position:fixed; inset:0; background:#0008; display:none; z-index:40}
  .overlay.show{display:block}
    .mobile-bottom-bar{
    position: fixed !important;
    left: 0; right: 0;
    bottom: 0 !important;         /* aradaki boşluğu kapat */
    margin: 0 !important;
    z-index: 60;                   /* header/çekmeceden bağımsız */
    /* çentik güvenli alanı + küçük iç boşluk */
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }
  .mobile-bottom-inner{
    padding-bottom: 6px;           /* butonlar dibe iyice yaklaşsın */
  }
}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 4px 28px}
.pager .page-info{color:#fff;opacity:.85;font-weight:600}
.pager-btn{background:transparent;border:1px solid #fff;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;transition:.15s background-color,.15s border-color,.15s transform}
.pager-btn:hover{background:rgba(255,255,255,.08)}
.pager-btn:active{transform:translateY(1px)}
.pager-btn[disabled]{opacity:.5;cursor:default}
@media (max-width:1024px){
  .sidebars{
    position:fixed; top:0; bottom:0; left:0; right:auto;
    width:min(88vw,340px); border-radius:0 18px 18px 0; z-index:50;
    transition:.3s transform; transform:translateX(-105%);
    background: linear-gradient(180deg,#15151b 0%, #121318 100%);
    border-right:1px solid #1c1c23;
  }
  .sidebars.open{ transform:translateX(0) }
  .overlay{position:fixed; inset:0; background:#0008; display:none; z-index:40}
  .overlay.show{display:block}
}
.app{ padding-bottom: var(--mbh, 0px); }
@media (pointer:coarse){
  .cards:hover .poster{ transform:none; border-color:#202637; box-shadow:0 14px 30px -20px #000c }
}
.pager{ position:sticky; bottom: calc(var(--mbh, 0px) + 8px); z-index:5; }
.cards{ position:relative; -webkit-tap-highlight-color:transparent; }
.cards:focus-visible{ outline:2px solid var(--ring-2); outline-offset:3px; border-radius:14px; }
.cards .rpl{ position:absolute; pointer-events:none; left:0; top:0; width:1px; height:1px; border-radius:9999px; transform:translate(-50%,-50%) scale(0); opacity:.35; background:var(--ring-2, #1a98ff); animation:ripple .48s ease-out forwards; }
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(90); opacity:0; } }
.poster.is-loading{ filter:blur(8px) saturate(.9); transform:scale(1.02); }
.poster.loaded{ filter:none; transform:none; transition:filter .25s, transform .25s; }
@media (max-width:1024px){ .cards:active .poster{ transform:translateY(0) scale(.98); } }