; border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px; display: flex; align-items: center; width: 300px; transition: var(--transition); } .search-bar:focus-within { border-color: var(--accent); width: 350px; } .search-bar input { background: transparent; border: none; color: white; margin-left: 8px; width: 100%; } .nav-links a { text-decoration: none; color: var(--muted); font-weight: 600; margin-left: 20px; transition: var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--accent); } main { max-width: 1100px; margin: auto; padding: 40px 20px; } .btn { padding: 18px 40px; background: var(--accent); color: #000; font-weight: 800; border-radius: 16px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: var(--transition); box-shadow: 0 10px 30px rgba(255, 204, 0, 0.2); } .btn:hover { transform: scale(1.05); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 25px; } .manga-card { position: relative; transition: var(--transition); text-decoration: none; color: inherit; } .manga-card:hover { transform: translateY(-10px); } .image-container { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 10px 20px rgba(0,0,0,0.3); } .manga-card img { width: 100%; height: 100%; object-fit: cover; } .badge { position: absolute; top: 10px; left: 10px; background: var(--accent); color: black; font-weight: 800; font-size: 0.7rem; padding: 4px 8px; border-radius: 6px; z-index: 2; } .manga-info { margin-top: 12px; } .manga-info h4 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .manga-info span { color: var(--muted); font-size: 0.85rem; } @media (max-width: 768px) { .search-bar { display: none; } .grid { grid-template-columns: repeat(2, 1fr); } }

MangaSekai