/* Film listeleri: televizyon filmleri, sinema filmleri, kısa filmler.
   Kavisli alt kenarlı görsel, arama + sıralama, afiş ızgarası, sayfalama. */

/* ---------- Üst görsel: kavisli alt kenar ---------- */

.hero{
  position:relative;
  width:100%;
  height:340px;
  overflow:hidden;
  background:linear-gradient(150deg, #4a4a4a 0%, #232323 45%, #0e0e0e 100%);
}

.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.50) 100%);
}

.hero-text{
  position:absolute;
  left:0; right:0;
  top:44%;
  transform:translateY(-50%);
  z-index:2;
  padding:0 24px;
  text-align:center;
}

.hero-title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(40px, 5.4vw, 76px);
  line-height:1.02;
  letter-spacing:-0.01em;
  color:#ffffff;
  text-shadow:0 2px 6px rgba(0,0,0,0.25), 0 10px 36px rgba(0,0,0,0.45);
}

.hero-curve{
  position:absolute;
  left:0; right:0;
  bottom:-2px;
  width:100%;
  height:120px;
  z-index:3;
  display:block;
}

/* ---------- Arama + sıralama ---------- */

.films-section{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 56px 100px;
}

.filters-bar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 20px;
  flex-wrap:wrap;
  margin:-6px 0 30px;
}

.search-box{
  position:relative;
  flex:0 1 360px;
}

.search-box svg{
  position:absolute;
  left:14px;
  top:50%;
  width:17px;
  height:17px;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
}

.search-box input{
  width:100%;
  height:44px;
  padding:0 14px 0 40px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:var(--field);
  font-size:15px;
  color:var(--ink);
  outline:none;
  transition:border-color .15s ease, background-color .15s ease;
}

.search-box input::placeholder{ color:#7a7a76; }

.search-box input:focus{
  border-color:var(--ink);
  background:#ffffff;
}

.filters-right{
  display:flex;
  align-items:center;
  gap:18px;
}

.film-count{
  font-size:15px;
  color:var(--muted);
  white-space:nowrap;
}

.sort-select{
  height:44px;
  padding:0 40px 0 14px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background-color:var(--field);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23141414' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:10px 6px;
  -webkit-appearance:none;
  appearance:none;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  outline:none;
  transition:border-color .15s ease;
}

.sort-select:focus-visible{ border-color:var(--ink); }

.no-results{
  grid-column:1 / -1;
  padding:64px 20px;
  text-align:center;
  font-size:16px;
  color:var(--muted);
}

/* ---------- Afiş ızgarası ---------- */

.grid{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:34px 26px;
}

.poster{
  display:block;
  cursor:pointer;
}

.poster:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:6px;
  border-radius:var(--radius);
}

.poster-art{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1.414;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 22px 38px -20px rgba(0,0,0,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}

.poster-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s cubic-bezier(.16,.8,.24,1);
}

.poster:hover .poster-art,
.poster:focus-visible .poster-art{
  transform:translateY(-6px);
  box-shadow:0 30px 46px -20px rgba(0,0,0,0.4);
}

.poster:hover .poster-photo,
.poster:focus-visible .poster-photo{ transform:scale(1.04); }

/* Afişi henüz olmayan filmlerde: film makarası izi */
.poster-glyph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:30%;
}

.poster-glyph::before{
  content:"";
  width:24px;
  height:24px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.45);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,0.10);
}

/* Hafif vinyet: dört köşeye doğru yumuşak bulanıklık ve beyazlama */
.poster-vinyet{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255,255,255,0) 56%, rgba(255,255,255,.2) 78%, rgba(255,255,255,.5) 100%);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  -webkit-mask-image:radial-gradient(ellipse farthest-corner at 50% 50%, transparent 62%, #000 100%);
  mask-image:radial-gradient(ellipse farthest-corner at 50% 50%, transparent 62%, #000 100%);
}

/* Film adı afişin altında; alttan yükselen koyu perde yazıyı görüntüden ayırır */
.poster-title{
  position:absolute;
  left:0; right:0;
  bottom:0;
  z-index:2;
  margin:0;
  padding:72px 18px 30px;
  background:linear-gradient(0deg, rgba(14,11,8,.78) 0%, rgba(14,11,8,.5) 38%, rgba(14,11,8,0) 100%);
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.1px;
  color:#fbf6ec;
  text-align:left;
  text-wrap:balance;
  pointer-events:none;
  text-shadow:0 1px 1px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
}

/* ---------- Sayfalama ---------- */

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:64px;
}

.page-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 6px;
  border:1px solid transparent;
  border-radius:50%;
  background:transparent;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

.page-btn:hover{ background:var(--field); }

.page-btn.active{ border-color:var(--ink); }

.page-btn:disabled{
  opacity:0.25;
  cursor:default;
  background:transparent;
}

.page-btn.arrow{ font-size:18px; }

.page-ellipsis{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:38px;
  font-size:15px;
  color:var(--muted);
}

/* ---------- Dar ekranlar ---------- */

@media (max-width:1100px){
  .grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

@media (max-width:960px){
  .films-section{ padding:0 28px 80px; }
  .hero{ height:300px; }
  .hero-curve{ height:100px; }
  .grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px 20px; }
  .poster-title{ font-size:18px; padding:56px 12px 16px; }
}

@media (max-width:600px){
  .hero{ height:240px; }
  .hero-curve{ height:70px; }
  .filters-bar{ margin-top:0; }
  .search-box{ flex:1 1 100%; }
  .filters-right{ width:100%; justify-content:space-between; }
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 14px; }
  .poster-title{ font-size:16px; padding:48px 10px 12px; }
  .pagination{ gap:4px; margin-top:44px; }
  .page-btn{ min-width:34px; height:34px; font-size:14px; }
}

@media (prefers-reduced-motion:reduce){
  .poster-photo,
  .poster-art{ transition:none; }
  .poster:hover .poster-photo{ transform:none; }
  .poster:hover .poster-art{ transform:none; }
}