@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg: #06060a;
  --bg2: #0e0e16;
  --bg3: #161625;
  --card: rgba(22, 22, 37, 0.6);
  --accent: #e50914;
  --accent-light: #ff1f2a;
  --text: #ffffff;
  --text2: #b3b3b3;
  --text3: #757575;
  --border: rgba(255, 255, 255, 0.08);
  --glass: rgba(10, 10, 15, 0.75);
  --radius: 12px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;}
a{text-decoration:none;color:inherit;transition:0.3s;}
.container{max-width:1400px;margin:0 auto;padding:0 20px;}

/* HEADER */
header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:0.3s;}
header.scrolled{background:rgba(6,6,10,0.95);padding:5px 0;}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;}
.site-logo{font-size:1.6rem;font-weight:900;color:var(--accent);letter-spacing:-1px;}
.main-nav{display:flex;gap:20px;margin-left:30px;}
.main-nav a{font-weight:600;color:var(--text2);font-size:0.95rem;}
.main-nav a:hover{color:var(--accent);}

/* ALPHABETICAL FILTER */
.alpha-filter-section{padding:40px 0;background:var(--bg2);border-radius:15px;margin-bottom:30px;border:1px solid var(--border);}
.alpha-filter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:0 20px;}
.alpha-filter-header h2{font-size:1.2rem;font-weight:800;}
.alpha-type-toggle{display:flex;gap:8px;}
.alpha-type-btn{padding:8px 18px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;color:var(--text2);font-size:0.85rem;font-weight:700;cursor:pointer;transition:0.3s;}
.alpha-type-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.alpha-bar{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px;}
.alpha-btn{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border);border-radius:8px;font-weight:700;font-size:0.9rem;cursor:pointer;transition:0.2s;}
.alpha-btn:hover{border-color:var(--accent);color:var(--accent);}
.alpha-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 5px 15px rgba(229,9,20,0.3);}
.alpha-btn.all-btn{padding:0 15px;width:auto;}

/* FILTER BAR (ARCHIVES) */
.filter-bar{display:flex;align-items:center;gap:12px;padding:15px 20px;background:var(--bg2);border-radius:12px;border:1px solid var(--border);margin-bottom:30px;flex-wrap:wrap;}
.filter-bar select{padding:10px 15px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:0.85rem;font-weight:600;outline:none;cursor:pointer;min-width:120px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;}
.filter-bar button{padding:10px 25px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:0.3s;}
.filter-bar button:hover{background:var(--accent-light);transform:translateY(-2px);}

/* MOVIE CARD */
.movies-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:15px;}
@media(min-width:768px){.movies-grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:20px;}}

.movie-card{position:relative;transition:0.3s;}
.movie-card:hover{transform:translateY(-8px);}
.card-poster-wrap{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--bg3);display:block;}
.card-poster-img{width:100%;height:100%;object-fit:cover;transition:0.6s;}
.movie-card:hover .card-poster-img{transform:scale(1.1);}

.rating-circle{
  position:absolute;top:10px;left:10px;width:38px;height:38px;
  background:rgba(0,0,0,0.8);backdrop-filter:blur(4px);
  border:2px solid var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:800;color:#fff;z-index:5;
}
.card-lang-badge{position:absolute;top:10px;right:10px;padding:3px 8px;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border-radius:5px;font-size:0.65rem;font-weight:700;z-index:5;}
.card-quality-badge{position:absolute;bottom:10px;left:10px;padding:3px 8px;background:var(--accent);border-radius:5px;font-size:0.65rem;font-weight:800;z-index:5;}

.card-play-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:0.3s;z-index:4;}
.movie-card:hover .card-play-overlay{opacity:1;}
.card-play-icon{width:48px;height:48px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;box-shadow:0 8px 20px rgba(229,9,20,0.4);}

.card-below-info{padding:12px 0 5px;}
.card-title-text{font-size:0.95rem;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.card-below-meta{font-size:0.8rem;color:var(--text3);display:flex;gap:10px;}

/* HERO SLIDER */
.hero-slider{position:relative;height:85vh;overflow:hidden;margin-bottom:30px;}
.hero-slide{position:relative;height:100%;display:flex;align-items:center;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top;}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,var(--bg) 10%,transparent 60%),linear-gradient(to top,var(--bg) 5%,transparent 50%);}
.hero-info{position:relative;z-index:10;max-width:750px;padding:0 20px;}
.hero-title{font-size:clamp(2rem,5vw,4rem);font-weight:900;margin-bottom:15px;line-height:1.1;}

/* FLOATING NAV */
.floating-nav{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:rgba(15,15,25,0.85);backdrop-filter:blur(20px);
  border:1px solid var(--border);border-radius:35px;
  display:none;gap:28px;padding:12px 35px;z-index:1000;
}
.f-nav-item{color:var(--text3);display:flex;flex-direction:column;align-items:center;font-size:0.65rem;gap:5px;}
.f-nav-item i{font-size:1.3rem;}
.f-nav-item.active{color:var(--accent);}

/* SKELETON */
.skeleton{background:linear-gradient(90deg,var(--bg3) 25%,#2a2a3a 50%,var(--bg3) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:8px;}
@keyframes skeleton-loading{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skeleton-card{width:100%;aspect-ratio:2/3;margin-bottom:10px;}

@media(max-width:768px){
  .floating-nav{display:flex;}
  .main-nav{display:none;}
  .hero-slider{height:60vh;}
}