*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:#f3f4f6;
  color:#111;
  overflow-x:hidden; /* SAĞA KAYMA FIX */
}

/* HEADER */
.topbar{background:#fff;border-bottom:1px solid #e5e7eb}
.topbarInner{
  max-width:1200px;margin:0 auto;
  padding:12px 16px;
  display:flex;justify-content:center;align-items:center;
}
.logo{
  height:44px;
  max-width:100%;
  width:auto;
  display:block;
}

/* FILTER */
.filter{max-width:1200px;margin:16px auto 10px;padding:0 16px}
.filterHeader{display:flex;justify-content:flex-start}
.filterToggle{
  display:none; /* desktopte gizli */
  align-items:center;gap:10px;
  background:#fff;border:1px solid #e5e7eb;
  padding:10px 12px;border-radius:12px;
  cursor:pointer;font-weight:600;
}
.pill{
  font-size:12px;
  background:#111;color:#fff;
  padding:4px 8px;border-radius:999px;
}

.filterCard{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.field label{display:block;font-size:12px;color:#374151;margin:0 0 6px}
.field select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  outline:none;
}
.actions{display:flex;align-items:flex-end}
.btnGhost{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
}

/* GRID */
.grid{
  max-width:1200px;margin:12px auto 40px;padding:0 16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.card{
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;
  overflow:hidden;
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:transform .08s ease;
}
.card:hover{transform:translateY(-2px)}
.thumb{aspect-ratio:16/9;background:#111}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.info{padding:12px;flex:1}
.info b{display:block;font-size:14px;line-height:1.25;margin-bottom:6px}
.meta{font-size:12px;color:#6b7280}
.cardFooter{padding:12px;padding-top:0}
.btnPrimary{
  width:100%;
  padding:12px;
  border:none;border-radius:12px;
  background:#f0513e;color:#fff;
  font-weight:700;
  cursor:pointer;
}

/* MODAL */
.modal{position:fixed;inset:0;z-index:9999}
.modal.hidden{display:none}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.modalCard{
  position:relative;
  max-width:1080px;
  width:calc(100vw - 24px);
  margin:32px auto;
  background:#000;
  border-radius:14px;
  overflow:hidden;
}
.modalFrameWrap{aspect-ratio:16/9;background:#000}
#playerFrame{width:100%;height:100%;border:0;display:block}
.modalBtn{
  position:absolute;top:10px;
  width:42px;height:42px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:#fff;font-size:20px;cursor:pointer;
  z-index:2;
}
.modalBtn[data-fs]{right:58px}
.modalBtn[data-close]{right:10px}

/* MOBILE */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .filterCard{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .filterToggle{display:inline-flex}
  .filterCard{
    display:none;
    grid-template-columns:repeat(2,1fr);
  }
  .filterCard.open{display:grid}
}
@media(max-width:420px){
  .grid{grid-template-columns:1fr}
  .filterCard{grid-template-columns:1fr}
  .logo{height:40px}
}

/* --- Home filter: search input should look like selects --- */
.filterCard .field input[type="search"],
.filterCard .field input#qSearch{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  outline: none;
  font: inherit;
}
.filterCard .field input[type="search"]:focus,
.filterCard .field input#qSearch:focus{
  border-color: #d1d5db;
}
/* Mobilde arama kutusu tam genislik */
@media (max-width: 600px){
  /* Filtre kartındaki tum label/input alanlarini tam satir yap */
  #filterCard .field,
  #filterCard label{
    width: 100%;
  }

  /* Arama inputu tam genislik */
  #qSearch{
    display:block;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Arama alanindaki video sayisini gizle */
#resultPill {
  display: none !important;
}
@media (max-width:600px){
  .filterHeader{display:flex}
  .filterToggle{
    display:flex;       /* inline-flex değil */
    width:100%;         /* TAM GENİŞLİK */
    justify-content:space-between;
  }
}