/*
Theme Name: animeid
Theme URI: https://fanmoviehd.com/
Author: ที่รัก
Description: ธีมโชว์อนิเมะจากโพสต์ WordPress
Version: 1.0
Tags: anime, dashboard
Text Domain: animeid
*/
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Prompt',sans-serif;
  background:radial-gradient(circle at 20% 20%,#0b0f1a 0%,#000 100%);
  color:#e2e8f0;text-align:center;
  min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
}
.topbar{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:15px 40px;background:rgba(10,20,40,0.8);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,255,255,0.1);
  box-shadow:0 0 20px rgba(0,255,255,0.05);
  position:sticky;top:0;z-index:1000;
}
.logo{
  font-size:30px;font-weight:700;color:#00e5ff;text-transform:uppercase;
  letter-spacing:1px;text-shadow:0 0 12px #00e5ff80,0 0 25px #00e5ff40;
  position:relative;overflow:hidden;
}
.logo span{color:#14f1c8;text-shadow:0 0 10px #14f1c870;}
.logo::after{
  content:"";position:absolute;top:0;left:-150%;
  width:100%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(0,255,255,0.4),transparent);
  animation:shine 4s infinite linear;
}
@keyframes shine{0%{left:-150%}50%{left:150%}100%{left:150%}}
.nav-links{display:flex;gap:30px}
.nav-links a{
  color:#e2e8f0;text-decoration:none;font-weight:500;font-size:16px;position:relative;
  transition:color .25s;
}
.nav-links a:hover{color:#00e5ff;text-shadow:0 0 10px #00e5ff60;}
main{padding:60px 20px 60px;}
h1{
  color:#00e5ff;text-shadow:0 0 15px #00e5ff80;
  margin-bottom:30px;font-size:32px;
}
form.search-bar{
  margin-bottom:25px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
}
input[type="text"]{
  padding:10px 15px;border-radius:8px;
  border:1px solid rgba(0,255,255,0.3);
  background:#0b1325;color:#e2e8f0;width:260px;font-size:15px;
}
button{
  background:linear-gradient(90deg,#00e5ff,#14f1c8);
  color:#000;border:none;padding:10px 20px;border-radius:8px;
  font-weight:600;cursor:pointer;font-size:15px;letter-spacing:.5px;
  transition:all .25s;
}
button:hover{background:linear-gradient(90deg,#14f1c8,#00e5ff);
  box-shadow:0 0 15px #00e5ff80;}
.anime-grid{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:center;
}
.anime-card{
  width:180px;background:rgba(15,25,45,0.8);
  border:1px solid rgba(0,255,255,0.1);
  border-radius:12px;overflow:hidden;
  box-shadow:0 0 15px rgba(0,255,255,0.08);
  transition:transform .2s,box-shadow .2s;position:relative;
}
.anime-card:hover{transform:translateY(-5px);
  box-shadow:0 0 25px rgba(0,255,255,0.3);}
.anime-card img{width:100%;height:240px;object-fit:cover;}
.anime-info{padding:10px;text-align:left;}
.anime-info h3{font-size:15px;color:#00e5ff;margin-bottom:4px;}
.anime-info p{font-size:13px;color:#cbd5e1;}
.anime-status{
  position:absolute;top:10px;right:10px;
  background:linear-gradient(90deg,#00e5ff,#14f1c8);
  color:#000;font-weight:600;font-size:12px;
  padding:3px 8px;border-radius:6px;
  box-shadow:0 0 10px #00e5ff60;
}
.pagination {
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:6px; margin:40px auto; padding:10px 15px;
}
.pagination a, .pagination span {
  padding:8px 13px; border-radius:6px;
  text-decoration:none; font-size:15px; transition:all .25s;
  color:#00e5ff; border:1px solid rgba(0,255,255,0.2);
  background:rgba(15,25,45,0.6);
}
.pagination a:hover {
  background:linear-gradient(90deg,#00e5ff,#14f1c8); color:#000;
  box-shadow:0 0 10px #00e5ff80;
}
.pagination .active {
  background:linear-gradient(90deg,#00e5ff,#14f1c8);
  color:#000; font-weight:600;
  box-shadow:0 0 12px #00e5ff60;
}
footer{
  text-align:center;color:#64748b;font-size:14px;
  padding:20px 0;border-top:1px solid rgba(255,255,255,0.05);
  box-shadow:0 -2px 10px rgba(0,255,255,0.1);
}
footer span{color:#00e5ff;text-shadow:0 0 5px #00e5ff70;}



.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  color: #e2e8f0;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: color .25s;
}

.nav-links li a:hover {
  color: #00e5ff;
  text-shadow: 0 0 10px #00e5ff60;
}