@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;900&display=swap');

:root {
    --bg-color: #0b0f19;
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.05);
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
    --accent: #8b5cf6;
    --accent-hover: #a78bfa;
    --accent-glow: rgba(139, 92, 246, 0.5);
    --danger: #ef4444;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #0b0c12;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.05), transparent 40%);
    background-attachment: fixed;
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Starry Background */
body::before, body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 2px; height: 2px;
    border-radius: 50%;
    z-index: -2;
    pointer-events: none;
    box-shadow: 
        15vw 15vh 1px rgba(255,255,255,0.8),
        25vw 75vh 2px rgba(255,255,255,0.5),
        35vw 35vh 1px rgba(255,255,255,0.9),
        45vw 85vh 2px rgba(255,255,255,0.4),
        55vw 25vh 1px rgba(255,255,255,0.8),
        65vw 65vh 2px rgba(255,255,255,0.3),
        75vw 5vh 1px rgba(255,255,255,0.7),
        85vw 95vh 2px rgba(255,255,255,0.5),
        95vw 45vh 1px rgba(255,255,255,0.9),
        10vw 10vh 2px rgba(255,255,255,0.4),
        20vw 55vh 1px rgba(255,255,255,0.7),
        30vw 90vh 1px rgba(255,255,255,0.5),
        40vw 40vh 2px rgba(255,255,255,0.8),
        50vw 80vh 1px rgba(255,255,255,0.9),
        60vw 20vh 2px rgba(255,255,255,0.4),
        70vw 60vh 1px rgba(255,255,255,0.7),
        80vw 30vh 2px rgba(255,255,255,0.8),
        90vw 70vh 1px rgba(255,255,255,0.5),
        105vw 50vh 2px rgba(255,255,255,0.6);
    animation: starryDrift1 30s alternate ease-in-out infinite;
}

body::after {
    width: 1px; height: 1px;
    box-shadow: 
        12vw 85vh 1px rgba(255,255,255,0.7),
        22vw 25vh 2px rgba(255,255,255,0.4),
        32vw 65vh 1px rgba(255,255,255,0.8),
        42vw 15vh 2px rgba(255,255,255,0.5),
        52vw 95vh 1px rgba(255,255,255,0.9),
        62vw 35vh 2px rgba(255,255,255,0.3),
        72vw 75vh 1px rgba(255,255,255,0.6),
        82vw 5vh 2px rgba(255,255,255,0.8),
        92vw 55vh 1px rgba(255,255,255,0.4),
        5vw 45vh 2px rgba(255,255,255,0.7),
        25vw 80vh 1px rgba(255,255,255,0.5),
        45vw 60vh 2px rgba(255,255,255,0.9),
        65vw 90vh 1px rgba(255,255,255,0.6),
        85vw 20vh 2px rgba(255,255,255,0.4);
    animation: starryDrift2 40s alternate ease-in-out infinite;
}

@keyframes starryDrift1 {
    0% { opacity: 0.1; transform: translateY(0) translateX(0); }
    50% { opacity: 1; }
    100% { opacity: 0.1; transform: translateY(15vh) translateX(5vw); }
}

@keyframes starryDrift2 {
    0% { opacity: 0.1; transform: translateY(0) translateX(0); }
    50% { opacity: 0.8; }
    100% { opacity: 0.1; transform: translateY(-15vh) translateX(-10vw); }
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Navbar Glassmorphism */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(to right, #8b5cf6, #d946ef, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-weight: 500;
    color: var(--text-muted);
}

.nav-links a:hover {
    color: var(--text-main);
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.search-box form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.4rem 1rem;
    transition: all 0.3s ease;
}

.search-box form:focus-within {
    border-color: #d946ef;
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

.search-box input {
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 0.2rem 0.5rem;
    outline: none;
    width: 140px; /* Lebar default untuk mobile */
    font-family: inherit;
    font-size: 0.95rem;
    transition: width 0.3s ease;
}

@media (min-width: 768px) {
    .search-box input {
        width: 200px;
    }
    .search-box form:focus-within input {
        width: 300px;
    }
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.search-box button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
}

.search-box button:hover {
    color: #d946ef;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Headings */
h1, h2, h3 {
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.section-title::before {
    content: '';
    display: block;
    width: 4px;
    height: 24px;
    background: var(--accent);
    border-radius: 4px;
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Anime Grid */
.anime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.5rem;
}

.anime-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.anime-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 0 15px var(--accent-glow);
    border-color: rgba(139, 92, 246, 0.3);
}

.anime-poster {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-bottom: 1px solid var(--card-border);
}

.anime-info {
    padding: 0.8rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.anime-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    color: var(--text-main);
}

.anime-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Premium Bilibili-Style Detail Page */
.bilibili-box {
    background: #181a25;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,255,255,0.03);
}

.meta-box {
    display: flex;
    gap: 2.5rem;
}

.meta-poster img {
    width: 220px;
    height: 310px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(217, 70, 239, 0.3); /* Purple/Pink Glow */
}

.meta-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.meta-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.meta-badges {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.badge-rating, .badge-status, .badge-type {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.badge-rating {
    color: #ec4899;
}
.badge-status {
    background: rgba(255,255,255,0.1);
    color: #cbd5e1;
}
.badge-type {
    background: rgba(217, 70, 239, 0.15);
    color: #d946ef;
}

.meta-details {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    color: #94a3b8;
    font-size: 0.95rem;
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.meta-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: auto;
}

.genre-pill {
    background: #000000;
    color: #f8fafc;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Synopsis Box */
.synopsis-box {
    padding: 2rem;
}

.synopsis-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.2rem;
    padding-left: 0.8rem;
    border-left: 4px solid #d946ef;
}

.synopsis-content p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 0;
}

.read-more {
    color: #d946ef;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: color 0.2s;
}
.read-more:hover {
    color: #a78bfa;
}

/* Tabs Container */
.tabs-container {
    position: sticky;
    top: 70px;
    z-index: 90;
    display: flex;
    justify-content: space-between;
    gap: 0.2rem;
    margin-bottom: 2rem;
    background: rgba(24, 26, 37, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.3rem;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.05);
    width: 100%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.tab-link {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    padding: 0.6rem 0.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .tabs-container {
        justify-content: center;
        gap: 1rem;
        margin-bottom: 3rem;
        padding: 0.6rem;
        width: fit-content;
        max-width: none;
    }
    .tab-link {
        flex: none;
        font-size: 1.1rem;
        padding: 0.8rem 2.5rem;
    }
}

.tab-link:hover {
    color: #f8fafc;
    background: rgba(255,255,255,0.05);
}

.tab-link.active {
    color: #fff;
    background: #d946ef;
    box-shadow: 0 5px 20px rgba(217, 70, 239, 0.4);
}

/* Backdrop Blur Element */
.backdrop-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(60px) brightness(0.2);
    opacity: 0.8;
    pointer-events: none;
}

/* Episode List */
.episode-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.episode-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
}

.episode-card:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--accent);
}

.play-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px var(--accent-glow);
    transition: transform 0.2s;
}

.episode-card:hover .play-icon {
    transform: scale(1.1);
}

.play-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
    margin-left: 3px;
}

.episode-title {
    font-weight: 600;
    font-size: 0.9rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Video Player */
.player-container {
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    margin-bottom: 2rem;
    border: 1px solid var(--glass-border);
    aspect-ratio: 16 / 9;
    position: relative;
}

video {
    width: 100%;
    height: 100%;
    outline: none;
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Responsive */
/* Mobile Bottom Bar */
.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    padding: 0.8rem 0;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.4rem;
    transition: all 0.3s;
}

.bottom-nav-item svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
}

.bottom-nav-item:hover, .bottom-nav-item.active {
    color: #d946ef;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    nav {
        padding: 0.8rem 1rem;
        gap: 0.5rem;
    }
    
    .nav-brand {
        font-size: 1.2rem;
    }
    
    .nav-left {
        gap: 1rem;
    }

    .nav-links {
        display: none;
    }
    
    .mobile-bottom-bar {
        display: flex;
    }
    
    body {
        padding-bottom: 70px;
    }
    
    .container {
        padding: 1rem;
    }

    .anime-grid {
        grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
        gap: 0.6rem;
    }
    
    .anime-info {
        padding: 0.5rem;
    }

    .anime-title {
        font-size: 0.75rem;
    }
    
    .anime-meta {
        font-size: 0.65rem;
    }
    
    .badge {
        font-size: 0.55rem;
        padding: 0.15rem 0.35rem;
    }
    
    .tabs-container {
        top: 60px; /* Sesuaikan dengan nav mobile yang lebih kecil */
    }

    .meta-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }
    
    .meta-poster img {
        width: 160px;
        height: 220px;
    }

    .meta-title {
        font-size: 1.6rem;
    }

    .meta-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .meta-details {
        align-items: flex-start;
        text-align: left;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    
    .bilibili-box {
        padding: 1.5rem 1rem;
    }
    
    .nav-links {
        display: none;
    }
}