header {

position: fixed;
top: 0;
left: 0;
right: 0;
background: none;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
transition: top 0.3s ease;
z-index: 99999;
transition: linear .3s;
font-size: 19px;
}

.headeractive {
background-color: #252831;
backdrop-filter: blur(2px);
transition: linear .3s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* .logo {
font-size: 24px;
font-weight: bold;
} */

nav a {
color: white;
text-decoration: none;
margin-left: 20px;
}

nav a:hover {
text-decoration: underline;
}

/* Reset */
* {
margin: 0;
padding: 0;
color: rgb(0, 0, 0);


}

body {
background-color: #f7f8f9;
color: #eee;
font-family: 'Poppins', sans-serif;
line-height: 1.4;
min-height: 100vh;
display: flex;
flex-direction: column;
}

a {
color: #ff6600;
text-decoration: none;
cursor: pointer;
}

a:hover {
text-decoration: underline;
}

/* .logo {
color: rgb(255, 255, 255);
font-size: 24px;
font-weight: bold;
align-items: center;
} */

header nav a {
display: flex;
justify-content: center;
align-items: center;
color: white;
margin-left: 20px;
text-decoration: none;
font-family: system-ui;
}

header nav a ion-icon {
color: white;
margin-left: 5px;
font-size: 30px;
text-decoration: none;
font-weight: bold;
}

header nav a:hover,
header nav a.active {
color: rgb(255, 255, 255);
}

/*

@media
screen and (max-width: 600px) {
#navHome,
#navCategories {
display: none;
}
} */

/* Бул маанилуу: контентти менюга кирип калбаш үчүн ылдый жылдырыңыз */
/* body { */
/* padding-top: 80px; */
/* } */

/* .logo {
font-weight: 900;
font-size: 1.8rem;
color: #ff6600;
user-select: none;
} */

nav {
display: flex;
gap: 20px;
font-weight: 600;
border-bottom: 1px solid hsla(0, 0%, 100%, .2);
margin-right: 127px;
}

nav a {
padding: 8px 12px;
border-radius: 5px;
transition: background-color 0.3s ease;
}

nav a {
color: white;
/* баштапкы түс */
text-decoration: none;
transition: color 0.3s ease;
/* түс акырын алмашат */
}

nav a:hover {
color: #f29824 !important;
/* hover болгондо сары болот */
text-decoration: none !important;
/* underline чыкпайт */
}


main {
flex: 1;
padding: 70px;
/* max-width: 1200px; */
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
}

.search-bar {
margin-bottom: 20px;
display: flex;
justify-content: center;
}

.search-bar input {
width: 100%;
max-width: 450px;
padding: 10px 15px;
border-radius: 30px;
border: none;
outline: none;
font-size: 1rem;
background-color: #222;
color: #eee;
transition: box-shadow 0.3s ease;
}

.search-bar input:focus {
box-shadow: 0 0 12px #ff6600;
}

/* Аниме карточкаларынын сеткасы */
.anime-grid {
width: 95%;
max-width: 1200px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: auto;
}

.anime-card {
background-color: #1f1f1f;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
user-select: none;
width: 24%;
overflow: hidden;
margin-bottom: 20px;
background-color: rgba(0, 0, 0, .3);

}

.anime-card:hover {
transform: scale(1.05);
/* box-shadow: 0 0 20px #ff6600; */
}

.anime-card img {
width: 100%;
height: 350px;
user-select: none;
border-radius: 12px 12px 0 0;
object-fit: cover;

}

.anime-card .title {
padding: 12px 15px;
font-weight: 700;
font-size: 1rem;
flex-grow: 1;
width: 100%;
height: 35%;
color: #ffffff;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
background: rgba(0, 0, 0, 0.566);
transition: linear .3s;
padding: 15px 20px;
font-family: system-ui;
/* display: flex;
flex-direction: column;
justify-content: flex-end; */
}

.anime-card:hover .title {
background: rgb(255, 255, 255);
transition: linear .3s;
color: black;
}



@media
screen and (max-width: 1100px) {
.anime-card {
width: 32%;
}
}



@media
screen and (max-width: 850px) {
.anime-card {
width: 48%;
}

}

/*

@media
screen and (max-width: 650px) { */
/* .anime-card {
width: 100%;
} */
/* } */



@media
screen and (max-width: 500px) {
.anime-card img {
height: 180px;
}
}

/* Эпизоддор тизмеси */
.episode-list {
background-color: #1f1f1f;
border-radius: 12px;
box-shadow: 0 0 12px rgba(255, 102, 0, 0.4);
margin-top: 30px;
padding: 15px 20px;
max-width: 650px;
width: 100%;
overflow-y: auto;
max-height: 400px;
}

.episode-list h2 {
font-weight: 800;
margin-bottom: 15px;
color: #ff6600;
user-select: none;
}

.episode-list ul {
list-style: none;
}

.episode-list li {
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 10px;
background-color: #222;
cursor: pointer;
transition: background-color 0.2s ease;
user-select: none;
}

.episode-list li:hover {
background-color: #ff6600;
color: #121212;
}

/* Видео плеер */
.video-player-container {
margin-top: 30px;
max-width: 720px;
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 20px #ff6600;
user-select: none;
}

video {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
background-color: #000;
}

/* Категориялар меню */
.categories {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
user-select: none;
margin-left: 90px;
}



@media
screen and (max-width: 600px) {
.categories {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
user-select: none;
margin-left: 10px;
}

}

.category {
background: #ffffff;
border: 1px solid #f29824;
border-radius: 6px;
color: #f29824;
display: inline-block;
font-size: 14px;
font-weight: 500;
padding: 8px 15px;
font-family: system-ui;
}

.category:hover,
.category.active {
background: #f29824;
border: 1px solid transparent;
color: #fff;
}

/* Мобил */


@media
(max-width: 600px) {
.anime-card img {
height: 250px;
background-color: rgba(0, 0, 0, .3);
}

.episode-list {
max-height: 300px;
}

main {
padding: 15px 10px;
}

nav {
gap: 12px;
}
}


.logo {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 2rem;
color: #ff6600;
user-select: none;
cursor: default;
margin-top: -15px;
}


.empty-message {
margin-top: 40px;
font-size: 1.2rem;
color: #bbb;
text-align: center;
user-select: none;
}

html,
body {
overflow-x: hidden;
}

.position_div {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;

background: rgba(0, 0, 0, 0.444);
backdrop-filter: blur(5px);
z-index: 999999;
padding-bottom: 200px;
visibility: hidden;
opacity: 0;
transition: linear 0.3s;

}

.form_active .position_div {
visibility: visible;
opacity: 1;
transition: linear 0.3s;
padding-bottom: 0px;
}

.burger {
display: none;
}


.header_menu {
display: flex;
width: 60%;
justify-content: space-between;
align-items: center;
padding-right: 15px;
z-index: 999;
}

.header_menu a {
color: white;
font-size: 22px;
cursor: pointer;
transition: linear .3s;
}

.header_menu a:hover {
opacity: .4;
}

/* header_menu_header */
.header_menu_header {
display: none;
width: 100%;
height: 80px;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid white;
margin-bottom: 30px;
margin-top: 0px;
}

.header_menu_header_text {
font-size: 30px;
font-weight: bold;
color: orange;
text-transform: uppercase;
}

.header_menu_header_close {
font-size: 40px;
width: 40px;
height: 40px;
/* background: red; */
color: white;
border-radius: 50%;
cursor: pointer;
}

.header_menu_header_close ion-icon {
color: white;
}

.red {
position: absolute;
top: 10px;
right: 10px;
}

.red ion-icon {
color: red !important;
}

.header_menu {
display: none;
}

.bline {
display: none;
}



@media
screen and (max-width: 800px) {
.header_menu {
display: flex;
}

.header nav {
display: none;
}

.header_menu_header {
display: flex;
}

.header_menu {
top: 0px;
left: 0;
width: 100%;
height: 100vh;
justify-content: flex-start;
align-items: flex-start;
padding: 20px;
position: absolute;
flex-direction: column;
background: #111111a3;
backdrop-filter: blur(3px);
transition: linear .5s;
margin-right: 15px;

/* opacity: 0;
visibility: hidden; */
transform: translateX(-900px);
padding-top: 0;
}

.burger_active .header_menu {
transition: linear .5s;
/* visibility: visible;
opacity: 1; */
transform: translateX(0px);
}

.header_menu a {
margin-bottom: 15px;
}

.burger {
position: relative;
display: flex;
color: white;
width: 40px;
height: 40px;
margin-right: 15px;
transform: translateX(0px);
transition: linear .5s;

margin-left: 20px;

/* background: green; */

}

.bline {
display: flex;
justify-content: center;
align-items: center;

}


.usericon {
display: flex;
width: auto;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
cursor: pointer;
font-size: 30px;
color: white;
margin-right: -45px;
position: relative;
top: -15px;
}



.usericon ion-icon {
color: white;
margin-top: 5px;
}

.burger div {
position: absolute;
font-size: 40px;
top: 0;
left: 0;
color: white;
z-index: 1;
margin-left: 25px;
margin-top: -15px;
}

.burger div ion-icon {
color: white;
}

.close {
visibility: hidden;
opacity: 0;
transition: linear .3s;
}

/* .burger_active .burger {
transition: linear .5s;
transform: translateX(300px);

} */

/* .burger_active .close {
visibility: visible;
opacity

index.html

@@ -1,308 +1,423 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
+
+<!-- head -->
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CSS Prefix Wizard</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <style>
-        /* Login form styles */
-        .login_container {
-            position: relative;
-            background: white;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-            width: 400px;
-        }
-
-        .login_password-container {
-            position: relative;
-        }
-
-        .login_toggle-password {
-            position: absolute;
-            right: 10px;
-            top: 12px;
-            cursor: pointer;
-        }
-
-        .login_button {
-            background-color: orange;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
-            margin: auto;
-            margin-top: 20px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .login_link {
-            display: block;
-            text-align: center;
-            margin-top: 10px;
-            font-size: 0.9em;
-            color: #ffffff;
-        }
-
-        /* Google sign-in styles */
-        .google_sign-in {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            padding: 10px;
-            margin-top: 15px;
-            background-color: white;
-            border: 1px solid #dadce0;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 16px;
-            font-family: 'Roboto', sans-serif;
-            font-weight: 500;
-            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-            width: 100%;
-        }
-
-        .google_sign-in:hover {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-        }
-
-        .google_icon {
-            width: 20px;
-            height: 20px;
-        }
-
-        /* News section styles */
-        .news_container {
-            padding: 60px 20px;
-            background-image: url('https://amediatv.uz/_nuxt/img/trailer.0be2b47.jpg');
-            font-family: 'Segoe UI', sans-serif;
-        }
-
-        .news_wrapper {
-            display: flex;
-            flex-wrap: wrap;
-            max-width: 1200px;
-            margin: 0 auto;
-            gap: 40px;
-            align-items: center;
-        }
-
-        .news_left {
-            flex: 1 1 500px;
-        }
-
-        .news_tag {
-            display: inline-block;
-            background-color: #f47521;
-            color: #fff;
-            font-size: 13px;
-            font-weight: 600;
-            padding: 6px 14px;
-            border-radius: 20px;
-            margin-bottom: 12px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        .news_title {
-            font-size: 30px;
-            font-weight: 700;
-            color: #2f3542;
-            margin-bottom: 15px;
-        }
-
-        .news_text {
-            font-size: 16px;
-            line-height: 1.6;
-            color: #fffdfd;
-        }
-
-        .news_right {
-            flex: 1 1 500px;
-        }
-
-        .news_video iframe {
-            width: 100%;
-            height: 280px;
-            border-radius: 12px;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-        }
-
-        /* Search styles */
-        .search_wrapper {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-        }
-
-        .search_icon {
-            font-size: 22px;
-            cursor: pointer;
-            margin-left: 10px;
-            color: white;
-        }
-
-        .search_input {
-            width: 0;
-            opacity: 0;
-            padding: 6px 10px;
-            margin-left: 5px;
-            border: 1px solid #ccc;
-            border-radius: 20px;
-            outline: none;
-            background: white;
-            color: black;
-            font-size: 14px;
-            transition: width 0.4s ease, opacity 0.4s ease;
-        }
-
-        /* Original prefix styles will remain here */
-        .prefix-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        
-        .prefix-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-        }
-        
-        .prefix-title {
-            font-size: 2rem;
-            font-weight: 700;
-            color: var(--primary);
-        }
-        
-        .prefix-toolbar {
-            display: flex;
-            gap: 1rem;
-        }
-        
-        .prefix-card {
-            background: white;
-            border-radius: 0.5rem;
-            padding: 1.5rem;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            margin-bottom: 2rem;
-        }
-        
-        .prefix-codeblock {
-            background: #f8fafc;
-            border-radius: 0.25rem;
-            padding: 1rem;
-            font-family: monospace;
-            overflow-x: auto;
-        }
-        
-        .prefix-btn {
-            padding: 0.5rem 1rem;
-            border-radius: 0.25rem;
-            background: var(--primary);
-            color: white;
-            border: none;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        
-        .prefix-btn:hover {
-            opacity: 0.9;
-        }
-        
-        .prefix-input {
-            padding: 0.5rem;
-            border: 1px solid #e2e8f0;
-            border-radius: 0.25rem;
-            width: 100%;
-        }
-        
-        .prefix-toggle {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            margin: 1rem 0;
-        }
-</style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="google-site-verification" content="o6_4-L6HJxJfaZTC2daID_07xicaKGoQZ3lQaH0-tVk" />
+    <title>Animeditv - Смотреть аниме онлайн</title>
+    <meta name="description" content="Смотрите самые новые и популярные аниме онлайн на Animeditv  Коллекция фильмов и сериалов в русской озвучке и дубляже.">
+    <meta name="keywords" content="аниме, аниме онлайн, смотреть аниме, аниме русская озвучка, аниме дубляж, Animeditv, Доктор Стоун, Наруто">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="style4.css">
+  <link rel="icon" type="image/webp" href="public img/Animedia.webp" />
+  <script src="https://accounts.google.com/gsi/client" async defer></script>
 </head>
-<body class="bg-gray-50">
-    <div class="prefix-container">
-        <header class="prefix-header">
-            <h1 class="prefix-title">CSS Prefix Wizard Pro</h1>
-            <div class="prefix-toolbar">
-                <button class="prefix-btn">
-                    <i data-feather="upload"></i> Import CSS
-                </button>
-                <button class="prefix-btn bg-green-600">
-                    <i data-feather="download"></i> Export
-                </button>
-            </div>
-        </header>
-        
-        <main>
-            <section class="prefix-card">
-                <h2 class="text-xl font-bold mb-4">Original CSS</h2>
-                <div class="prefix-codeblock">
-                    <pre>.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-}</pre>
-                </div>
-            </section>
-            
-            <section class="prefix-card">
-                <h2 class="text-xl font-bold mb-4">Prefixed CSS</h2>
-                <div class="prefix-codeblock">
-                    <pre>.prefix-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-}</pre>
-                </div>
-            </section>
-            
-            <section class="prefix-card">
-                <h2 class="text-xl font-bold mb-4">Settings</h2>
-                <div class="mb-4">
-                    <label class="block mb-2">Prefix</label>
-                    <input type="text" class="prefix-input" placeholder="Enter your prefix (e.g. login_)" value="prefix_">
-                </div>
-                
-                <div class="prefix-toggle">
-                    <input type="checkbox" id="js-compat" checked>
-                    <label for="js-compat">Maintain JavaScript compatibility</label>
-                </div>
-                
-                <button class="prefix-btn bg-blue-600 mt-4 w-full">
-                    <i data-feather="refresh-cw"></i> Regenerate CSS
-                </button>
-            </section>
-        </main>
+<!-- /head -->
+
+<body id="my_id">
+
+
+  <!-- modal form -->
+  <div class="position_div">
+      
+    <form class="container" id="login-form" method="post"  action="/signin.php"
+    type="sumbit">
+      <div class="header_menu_header_close red" onclick="OpenForm()">
+        <ion-icon name="close-outline"></ion-icon>
+      </div>
+
+      <h2>Вход</h2>
+      <input name="email" type="email" id="login-email" placeholder="Введите email..." required>
+      <input name="password" type="password" id="login-password" placeholder="Введите пароль..." required>
+      <button type="submit">Войти</button>
+          <div id="g_id_onload"
+         data-client_id="465132351438-k34552q02geis7bn5lprt0jtb02f0bes.apps.googleusercontent.com"
+         data-context="signin"
+         data-ux_mode="popup"
+         data-callback="handleCredentialResponse"
+         data-auto_prompt="false">
+    </div>
+
+    <div class="g_id_signin"
+         data-type="standard"
+         data-shape="rectangular"
+         data-theme="outline"
+         data-text="sign_in_with"
+         data-size="large"
+         data-logo_alignment="left">
+    </div>
+      <div class="link" onclick="showRegister()">Регистрация</div>
+    </form>
+
+    <form class="container" id="register-form" style="display: none;"
+    action="/signup.php" method="post">
+      <h2>Регистрация</h2>
+      <input type="text" id="register-username" placeholder="Имя пользователя"
+      required name="name">
+      <input type="email" id="register-email" placeholder="Email"
+      required name="email">
+      <input type="password" id="register-password" placeholder="Пароль"
+      required name="password">
+      <button onclick="register()">Зарегистрироваться</button>
+
+      <div id="g_id_onload" data-client_id="465132351438-k34552q02geis7bn5lprt0jtb02f0bes.apps.googleusercontent.com"
+        data-context="signin" data-ux_mode="popup" data-callback="handleCredentialResponse" data-auto_prompt="false">
+      </div>
+
+      <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline"
+        data-text="sign_in_with" data-size="large" data-logo_alignment="left">
+      </div>
+
+
+      <div class="link" onclick="showLogin()">Назад</div>
+    </form>
+
+
+  </div>
+  <!-- /modal form -->
+
+
+  <!-- header -->
+<header class="site-header anime-bg">
+  <div class="header-container">
+    <div class="header-logo">
+      <img src="public/img/Logo-animedia.webp" alt="AnimediaTV" class="logo-img hover-grow">
     </div>
     
-    <script>
-        feather.replace();
-        
-        document.addEventListener('DOMContentLoaded', function() {
-            // Animation for better UX
-            anime({
-                targets: '.prefix-card',
-                translateY: [20, 0],
-                opacity: [0, 1],
-                duration: 800,
-                delay: anime.stagger(100)
-            });
-        });
-    </script>
+    <nav class="header-nav">
+      <a href="index.html" class="nav-link active">
+        <span>Главная</span>
+      </a>
+      <a href="#categories" class="nav-link">
+        <span>Категории</span>
+      </a>
+      
+      <div class="lang-selector">
+        <a href="https://animediatv.kg" class="lang-link" data-lang="uz">UZ</a>
+        <span class="lang-divider">|</span>
+        <a href="https://animediatv.kg/ru/" class="lang-link active" data-lang="ru">RU</a>
+      </div>
+
+      <button class="auth-btn btn-effect" onclick="OpenForm()">
+        <span>Войти</span>
+        <ion-icon name="log-in-outline"></ion-icon>
+      </button>
+    </nav>
+
+    <button class="mobile-menu-btn" onclick="toggleMobileMenu()">
+      <ion-icon name="menu-outline" class="menu-icon"></ion-icon>
+      <ion-icon name="close-outline" class="close-icon"></ion-icon>
+    </button>
+  </div>
+</header>
+<div class="logo"><img src="public img/Logo animedia -Photoroom.webp" alt="AnimediTV Logo"></div>
+    <nav>
+      <a href="index.html" class="active" id="navHome">Главная</a>
+      <a href="" id="navCategories">Категории</a>
+
+      <!-- <div class="search-wrapper">
+        <ion-icon name="search-outline" class="search-icon" onclick="toggleSearch()"></ion-icon>
+        <input type="text" id="searchInput" placeholder="Поиск..." />
+      </div> -->
+
+      <!-- Тил тандагыч -->
+      <div class="lang-inline">
+        <a href="https://animediatv.kg" class="lang" data-lang="uz">UZ</a>
+        <span class="divider">|</span>
+        <a href="https://animediatv.kg/ru/" class="lang active" data-lang="ru">RU</a>
+      </div>
+
+
+      <span id="auth-area">
+        <a onclick="OpenForm()" id="login-btn">
+          Войти
+          <ion-icon name="log-in-outline"></ion-icon>
+        </a>
+      </span>
+    </nav>
+
+
+    <div class="header_menu">
+
+      <div class="header_menu_header">
+        <div class="header_menu_header_text">
+          Меню
+        </div>
+
+        <div class="header_menu_header_close" onclick="burger_menu()">
+          <ion-icon name="close-outline"></ion-icon>
+        </div>
+      </div>
+
+      <a href="index.html">
+        Главная
+      </a>
+
+      <a href="#scroll_search" id="navCategories">Категории</a>
+    </div>
+
+    <div class="bline">
+      <div class="usericon" onclick="OpenForm()">
+        <ion-icon name="log-in-outline"></ion-icon>
+      </div>
+
+      <div class="burger" id="burger" onclick="burger_menu()">
+        <div class="open">
+          <ion-icon name="menu-outline"></ion-icon>
+        </div>
+        <div class="close">
+          <ion-icon name="close-outline"></ion-icon>
+        </div>
+      </div>
+    </div>
+
+
+  </header>
+  <!-- /header -->
+<!-- Hero Slider Section -->
+<section class="hero-slider fade-in">
+  <div class="slider-container">
+    <div class="slider-track">
+      <!-- Slide 1 -->
+      <div class="slider-slide active" style="background-image: url('https://cdn.animediatv.kg/public/temp/4f7ca464a8a5a3deaebcb2b2b.webp')">
+        <div class="slide-overlay"></div>
+        <div class="slide-content">
+          <span class="anime-badge">Новинка</span>
+          <h1 class="slide-title">Доктор Стоун 5: Научное будущее [15+]</h1>
+          <p class="slide-desc">Тайное событие привело к тому, что человечество превратилось в камень, и спустя тысячи лет оно снова пытается воскреснуть.</p>
+          <div class="slide-meta">
+            <span class="year">2024</span>
+            <span class="age-rating">15+</span>
+          </div>
+          <a href="doktor-Stoun5.html" class="btn-watch pulse">
+            Смотреть
+            <ion-icon name="play-circle-outline"></ion-icon>
+          </a>
+        </div>
+        <img src="https://cdn.animediatv.kg/public/temp/fe4bfaDoktor%20stoun6ee4ed8aa3f003.webp" 
+             class="slide-poster hover-grow" 
+             alt="Доктор Стоун 5">
+      </div>
+      
+      <!-- Additional slides would go here -->
+    </div>
+    
+    <button class="slider-nav prev">
+      <ion-icon name="chevron-back-outline"></ion-icon>
+    </button>
+    <button class="slider-nav next">
+      <ion-icon name="chevron-forward-outline"></ion-icon>
+    </button>
+  </div>
+</section>
+<div class="slides">
+
+      <div class="chyntemir_btn chyntemir_btns_left" onclick="chyntemir_left()">
+        <ion-icon name="chevron-back-sharp"></ion-icon>
+      </div>
+
+      <div class="chyntemir_btn chyntemir_btns_right" onclick="chyntemir_right()">
+        <ion-icon name="chevron-forward-sharp"></ion-icon>
+      </div>
+
+      <div class="slide active" style="background-image: url('https://cdn.animediatv.kg/public/temp/4f7ca464a8a5a3deaebcb2b2b.webp')">
+        <div class="opacity-banner"></div> <!-- Мына ушул кошулат -->
+        <div class="slide-content">
+          <h1>Доктор Стоун 5: Научное будущее [15+]</h1>
+          <p>Тайное событие привело к тому, что человечество превратилось в камень, и спустя тысячи лет оно снова
+            пытается воскреснуть.
+          </p>
+          <div class="slide-meta">
+            <span>2024</span>
+            <a href="doktor Stoun5.html"><button class="watch-btn">Смотреть</button></a>
+            <link rel="stylesheet" href="style5.css">
+          </div>
+        </div>
+        <img src="https://cdn.animediatv.kg/public/temp/fe4bfaDoktor%20stoun6ee4ed8aa3f003.webp" class="poster-img" alt="Poster 1">
+      </div>
+
+      <div class="slide" style="background-image: url('https://cdn.animediatv.kg/public/temp/62c58bf564e5b5sirlarhukumdori.webp')">
+        <div class="opacity-banner"></div>
+        <div class="slide-content">
+          <h1>Повелитель тайн: Клоун [17+]</h1>
+          <p>В туманном мире скрыты тайны и страшные шутки...</p>
+          <div class="slide-meta">
+            <span>2024</span>
+            <a href="./sirlarhurmdori.html"><button class="watch-btn">Смотреть</button></a>
+            <link rel="stylesheet" href="style5.css">
+          </div>
+        </div>
+        <img src="https://cdn.animediatv.kg/public/temp/fcd6b34b0e32cfadcd037b150bd77a80.jpg" class="poster-img" alt="Poster 2">
+      </div>
+
+      <!-- Экинчи слайд -->
+      <div class="slide" style="background-image: url('https://cdn.animediatv.kg/public/temp/8023745154dfNaruto.webp')">
+        <div class="opacity-banner"></div> <!-- Мына ушул кошулат -->
+        <div class="slide-content">
+          <h1>Наруто: Ураганные хроники [15+]</h1>
+          <p>Наруто и его друзья сталкиваются с новыми приключениями.</p>
+          <div class="slide-meta">
+            <span>2007</span>
+            <a href="naruto.html"><button class="watch-btn">Смотреть</button></a>
+            <link rel="stylesheet" href="style5.css">
+          </div>
+        </div>
+        <img src="https://cdn.animediatv.kg/public/temp/Naruto1.webp" class="poster-img" alt="Poster 3">
+      </div>
+
+      <!--  Үчүнчү слайд -->
+      <div class="slide" style="background-image: url('https://cdn.animediatv.kg/public/temp/Seven%20sinsback.webp')">
+        <div class="opacity-banner"></div> <!-- Мына ушул кошулат -->
+        <div class="slide-content">
+          <h1>Семь смертных грехов: Узники небес [17+]</h1>
+          <p>"Элизабета, установив порядок в королевстве, устраивает великий пир в честь своего дня рождения..."
+          </p>
+          <div class="slide-meta">
+            <span>2018</span>
+            <a href="sevendeadlysins.html"><button class="watch-btn">Смотреть</button></a>
+            <link rel="stylesheet" href="style5.css">
+          </div>
+        </div>
+        <img src="https://cdn.animediatv.kg/public/temp/%D0%B6%D0%B5%D1%82%D0%B8%20%D0%BE%D0%BB%D1%83%D0%BC%20(1).webp" class="poster-img" alt="Poster 4">
+      </div>
+
+
+      <div class="slides_btns" id="slides_btns"></div>
+
+    </div>
+  </section>
+  <!-- Слайдер end -->
+
+  <!-- main -->
+  <main>
+    <div id="scroll_search" class="search-bar">
+      <input type="text" placeholder="Anime Имя..." id="searchInput" autocomplete="off" />
+    </div>
+
+    <div id="categoriesContainer" class="categories"></div>
+
+    <div id="animeGrid" class="anime-grid"></div>
+
+    <div id="episodeSection" style="display:none;">
+      <div class="episode-list">
+        <h2 id="animeTitle">Anime Имя</h2>
+        <ul id="episodeList"></ul>
+      </div>
+      <div class="video-player-container" style="margin-top:20px;">
+        <video id="videoPlayer" controls></video>
+      </div>
+    </div>
+
+    <div style="text-align:center; margin: 20px 0;">
+      <button id="load-more-btn " onclick="loadmorebtn()">
+        Показать еще
+      </button>
+    </div>
+
+    <div id="emptyMessage" class="empty-message" style="display:none;">информация не найдены!!!</div>
+  </main>
+  <!-- /main -->
+<!-- Anime News Section -->
+<section class="anime-news slide-up">
+  <div class="news-container">
+    <div class="news-content">
+      <span class="news-tag">Новости</span>
+      <h2 class="news-title">
+        <a href="#">ОБЩАЯ ИНФОРМАЦИЯ О ВЫХОДЕ АНИМЕ ОСЕНЬЮ 2023 ГОДА</a>
+      </h2>
+      <p class="news-text">
+        Все аниме, показанные в этом видео, вы можете смотреть в приложениях!
+      </p>
+      <div class="news-meta">
+        <span>2 дня назад</span>
+        <span>•</span>
+        <span>1.2K просмотров</span>
+      </div>
+    </div>
+    
+    <div class="news-video">
+      <div class="video-wrapper">
+        <iframe src="https://mover.uz/video/embed/ISGbOKD" 
+                frameborder="0" 
+                allowfullscreen
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                title="Black Clover Trailer">
+        </iframe>
+      </div>
+    </div>
+  </div>
+</section>
+<div class="amedi-news-wrapper">
+      <div class="amedi-news-left">
+        <div class="amedi-news-tag">Новости</div>
+        <h2><a href="#">ОБЩАЯ ИНФОРМАЦИЯ О ВЫХОДЕ АНИМЕ ОСЕНЬЮ 2023 ГОДА (H.U.M.)</a></h2>
+        <p class="amedi-news-text">
+          Все аниме, показанные в этом видео, вы можете смотреть в приложениях!
+        </p>
+      </div>
+      <div class="amedi-news-right">
+        <div class="amedi-news-video">
+          <iframe src="https://mover.uz/video/embed/ISGbOKD" frameborder="0" allowfullscreen
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            title="Black Clover Trailer">
+          </iframe>
+        </div>
+      </div>
+    </div>
+  </section>
+<!-- Comments Section -->
+<section class="comments-section fade-in">
+  <div class="section-header">
+    <h2 class="section-title">Оставить комментарий</h2>
+    <p class="section-subtitle">Ваше мнение важно для нас!</p>
+  </div>
+  
+  <form class="comment-form">
+    <div class="form-group">
+      <input type="text" id="name" required placeholder="Ваше имя">
+    </div>
+    <div class="form-group">
+      <input type="email" id="email" required placeholder="Ваш email">
+    </div>
+    <div class="form-group">
+      <textarea id="message" rows="5" required placeholder="Ваш комментарий..."></textarea>
+    </div>
+    <button type="submit" class="btn-submit btn-effect">
+      Отправить
+      <ion-icon name="send-outline"></ion-icon>
+    </button>
+  </form>
+</section>
+<h6>Diqqat !!! Izohinghiz saytda joylashishi uchun iltimos fikringizni so'kinishsiz anime haqida to'liq bayon eting.
+      Aks holda saytga yuklanmaydi</h6>
+    <form id="contactForm">
+      <input type="text" id="name" required placeholder="Имя">
+      <input type="email" id="email" required placeholder="Введите свой адрес электронной почты">
+      <textarea id="message" rows="5" required placeholder="Оставьте свое сообщение"></textarea>
+      <button type="submit">отправить</button>
+    </form>
+  </section>
+  <!-- Комментарий формасы -->
+
+  <script>
+    function handleCredentialResponse(response) {
+      const jwt = response.credential;
+      const payload = JSON.parse(atob(jwt.split('.')[1]));
+      alert(`Добро пожаловать, ${payload.name}!`);
+      window.location.href = "index.html";
+    }
+    function handleCredentialResponse(response) {
+    console.log("Google JWT credential:", response.credential);
+    fetch("google_login.php", { method:"POST", body: response.credential })
+}
+  </script>
+
+  <script src="./js.js"></script>
+  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
 </body>
-</html>
+
+</html>