:root { --bg-color:#050508; --glass-bg:rgba(255,255,255,0.03); --glass-border:rgba(255,255,255,0.1); --neon-blue:#00f3ff; --neon-pink:#ff00ea; --text-main:#e0e0e0; }
* { box-sizing:border-box; margin:0; padding:0; font-family:'Segoe UI',sans-serif; color:var(--text-main);}
body { background-color:var(--bg-color); min-height:100vh;}

header { background:rgba(5,5,8,0.9); backdrop-filter:blur(15px); border-bottom:1px solid var(--glass-border); padding:20px 50px; display:flex; justify-content:space-between; align-items:center;}
.logo { font-size:24px; font-weight:900; background:linear-gradient(90deg,var(--neon-blue),var(--neon-pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
nav { display: flex; align-items: center; }
nav a { text-decoration:none; margin-left:20px; font-weight:600; text-transform:uppercase; transition: 0.3s;}
nav a:hover { color:var(--neon-blue);}

.container { max-width:1400px; margin:40px auto; padding:0 20px; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:40px;}
h1 { color:var(--neon-blue); text-transform:uppercase; font-size: 2rem;}

/* Kereső rugalmasra állítva */
.search-box { background:var(--glass-bg); border:1px solid var(--neon-pink); padding:15px 25px; border-radius:30px; width:100%; max-width:350px; outline:none; transition:0.3s;}
.search-box:focus { box-shadow:0 0 25px rgba(255,0,234,0.6);}

.movie-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:30px;}
.movie-card { display:block; text-decoration:none; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:15px; overflow:hidden; transition:0.3s; position:relative;}
.movie-card:hover { transform:translateY(-10px); border-color:var(--neon-blue); box-shadow:0 10px 30px rgba(0,243,255,0.2);}

.cover-img { width:100%; height:400px; object-fit:cover; background:#1a1a24; transition:0.3s;}
.movie-card:hover .cover-img { opacity:0.7;}

.play-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:50px; color:var(--neon-pink); opacity:0; transition:0.3s; text-shadow:0 0 20px var(--neon-pink);}
.movie-card:hover .play-icon { opacity:1;}

.movie-info { padding:20px; text-align:center;}
.movie-title { font-size:1.2rem;}

.seo-text { max-width:1100px; margin:40px auto; padding:20px; background:rgba(255,255,255,0.02); border-left:3px solid var(--neon-blue); border-radius:10px; text-align:left;}
.seo-text p { color:#888; font-size:0.95rem; line-height:1.6; margin:0; letter-spacing:0.5px;}
.seo-text strong { color:var(--neon-blue); font-weight:600;}

.filter-year { margin-bottom:20px; }
.filter-year label { margin-right:10px; font-weight:bold; }

/* =========================================
   MOBIL OPTIMALIZÁCIÓ (Media Queries)
   ========================================= */
@media (max-width: 768px) {
    header { 
        flex-direction: column; 
        padding: 15px; 
        gap: 15px; 
    }
    nav { 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 10px; 
    }
    nav a { 
        margin-left: 0; 
        font-size: 0.9rem; 
    }
    
    .container { 
        margin: 20px auto; 
        padding: 0 15px; 
    }
    
    .page-header { 
        flex-direction: column; 
        gap: 20px; 
        text-align: center; 
        margin-bottom: 25px;
    }
    h1 { 
        font-size: 1.5rem; 
    }
    .search-box { 
        max-width: 100%; 
    }
    
    .seo-text { 
        margin: 20px auto; 
        padding: 15px; 
        font-size: 0.85rem; 
    }
    
    /* Mobilon 2 oszlopos rács, kisebb képekkel */
    .movie-grid { 
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
        gap: 15px; 
    }
    .cover-img { 
        height: 220px; 
    }
    .movie-info { 
        padding: 10px; 
    }
    .movie-title { 
        font-size: 1rem; 
    }
    .play-icon {
        font-size: 40px;
    }
}

/* Extra kicsi telefonokra */
@media (max-width: 360px) {
    .movie-grid { 
        grid-template-columns: 1fr; 
    }
    .cover-img { 
        height: 350px; 
    }
}