: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; 
    }
}


/* ÚJ: Autentikáció és Értékelés stílusok */
.auth-link {
    color: var(--neon-pink) !important;
    border: 1px solid var(--neon-pink);
    border-radius: 20px;
}

.review-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    margin-top: 40px;
    color: var(--text-main);
}

.review-container h2 {
    color: var(--neon-blue);
    margin-bottom: 20px;
}

.review-form { display: flex; flex-direction: column; gap: 15px; }
.review-form textarea {
    background: rgba(0,0,0,0.5); border: 1px solid var(--glass-border);
    color: #fff; padding: 15px; border-radius: 10px; resize: vertical; min-height: 100px;
}

/* 5 Csillagos értékelő rendszer */
.rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 5px; }
.rating input { display: none; }
.rating label { font-size: 30px; color: #555; cursor: pointer; transition: 0.2s; }
.rating input:checked ~ label, .rating label:hover, .rating label:hover ~ label { color: #ffd700; text-shadow: 0 0 10px #ffd700; }

.submit-btn {
    background: var(--neon-blue); color: #000; font-weight: bold; padding: 10px 20px;
    border: none; border-radius: 10px; cursor: pointer; transition: 0.3s;
    align-self: flex-start;
}
.submit-btn:hover { background: #fff; box-shadow: 0 0 15px var(--neon-blue); }

.login-prompt { color: #aaa; background: rgba(255,0,234,0.1); padding: 15px; border-radius: 10px; border-left: 3px solid var(--neon-pink);}
.login-prompt a { color: var(--neon-pink); text-decoration: none; font-weight: bold; }

.reviews-list { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.review-item { background: rgba(0,0,0,0.3); padding: 20px; border-radius: 10px; border-left: 3px solid var(--neon-blue); }
.review-header { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.review-header strong { color: #fff; font-size: 1.1rem; }
.stars { color: #ffd700; letter-spacing: 2px; }
.review-header small { color: #777; margin-left: auto; }

/* Form (Login/Register) konténer az új oldalakhoz */
.auth-container { max-width: 400px; margin: 100px auto; background: var(--glass-bg); padding: 40px; border-radius: 20px; border: 1px solid var(--glass-border); text-align: center;}
.auth-container input { width: 100%; padding: 12px; margin-bottom: 20px; background: rgba(0,0,0,0.5); border: 1px solid #333; color: #fff; border-radius: 8px;}
.auth-container button { width: 100%; padding: 12px; background: var(--neon-pink); color: #fff; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;}


/* --- ÚJ CSS A "NEW" CÍMKÉHEZ --- */
.badge-new { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background-color: var(--neon-blue); 
    color: #050508; 
    padding: 5px 12px; 
    font-size: 14px; 
    font-weight: 900; 
    border-radius: 5px; 
    z-index: 10; 
    box-shadow: 0 0 15px var(--neon-blue); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* Kisebb kijelzőkre optimalizálás */
@media (max-width: 768px) {
    .badge-new { 
        top: 10px; 
        right: 10px; 
        padding: 4px 8px; 
        font-size: 11px; 
    }
}


/* ÚJ: Rendszerkompatibilitási figyelmeztetés (piros kiemelés) */
.system-warning {
    background-color: rgba(255, 0, 0, 0.15);
    border: 2px solid #ff0000;
    color: #ffe6e6;
    padding: 15px 25px;
    margin-bottom: 30px;
    border-radius: 10px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}
.system-warning strong {
    color: #ff4d4d;
    font-weight: 700;
}

/* Mobil optimalizáció a figyelmeztetéshez */
@media (max-width: 768px) {
    .system-warning {
        font-size: 0.9rem;
        padding: 12px 15px;
        margin-bottom: 20px;
    }
}