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

:root {
    --primary: #0f0524;
    --secondary: #1a0b2e;
    --accent: #FFD700;
    --accent-hover: #e6c200;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --card-bg: #1a0b2e;
    --text-muted: rgba(255, 255, 255, 0.6);
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--primary);
    color: white;
    overflow-x: hidden;
}

/* Glassmorphism Refined */
.modern-glass {
    background: var(--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
}

.modern-card {
    background: var(--secondary);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modern-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.2; transform: scale(1.1); }
    50% { opacity: 0.3; transform: scale(1.15); }
}

.animate-pulse-slow {
    animation: pulse-slow 10s ease-in-out infinite;
}

@keyframes peaceful-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.peaceful-gradient {
    background: linear-gradient(-45deg, #0f0524, #1a0b2e, #2d1b4d, #1a0b2e);
    background-size: 400% 400%;
    animation: peaceful-gradient 15s ease infinite;
}

/* Typography */
.display-large {
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.9;
}

.label-micro {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
}

/* Buttons */
.btn-modern {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-modern::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: transform 0.6s ease;
}

.btn-modern:active::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Player Specific */
#vuMeter {
    mask-image: linear-gradient(to top, black, transparent);
}

.player-bar {
    background: rgba(15, 5, 36, 0.8);
    backdrop-filter: blur(30px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--primary);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* News Image Hover */
.news-img-container {
    position: relative;
    overflow: hidden;
}

.news-img-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--primary), transparent);
    opacity: 0.6;
}

/* Ranking Table */
.ranking-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}

.ranking-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Schedule Specific Styles */
.schedule-day-pill {
    @apply px-6 py-3 rounded-full font-bold transition-all text-sm uppercase tracking-widest;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

.schedule-day-pill.active {
    background: var(--accent);
    color: var(--primary);
    border-color: var(--accent);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
}

.schedule-day-pill:not(.active):hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.schedule-card {
    @apply p-6 rounded-[32px] flex flex-col md:flex-row items-center justify-between gap-6 transition-all duration-300;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.schedule-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateX(10px);
}

.schedule-time-box {
    @apply w-20 h-20 rounded-2xl flex flex-col items-center justify-center border transition-all duration-300;
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.1);
    color: var(--accent);
}

.schedule-card:hover .schedule-time-box {
    background: var(--accent);
    color: var(--primary);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
}

.live-indicator {
    @apply flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-[#FF4444] mb-2;
}

.live-indicator .dot {
    @apply w-1.5 h-1.5 rounded-full bg-[#FF4444] animate-pulse;
}

.schedule-end-time {
    @apply text-white/10 font-black text-5xl tracking-tighter transition-all duration-300;
}

.schedule-card:hover .schedule-end-time {
    @apply text-white/20 scale-110;
}

/* News Detail Specific Styles */
.news-category-tag {
    @apply bg-[#FFD700] text-[#0a0a0a] px-3 py-1 rounded-md text-[10px] font-black uppercase tracking-widest mb-6 inline-block;
}

.news-article-title {
    @apply text-4xl md:text-[80px] font-black tracking-[-0.04em] leading-[0.95] text-white mb-8;
}

.news-meta-item {
    @apply flex items-center gap-2 text-white/60 text-[11px] font-bold uppercase tracking-widest;
}

.news-content {
    @apply text-white/80 text-lg leading-[1.8] font-normal;
    font-family: 'Inter', sans-serif;
}

.news-content p:first-of-type {
    @apply text-white text-2xl font-bold leading-relaxed mb-10;
}

.news-content p {
    @apply mb-8;
}

.news-content h2 {
    @apply text-3xl font-black text-white mt-16 mb-8 tracking-tight;
}

.news-content blockquote {
    @apply relative py-12 my-16 border-none;
}

.news-content blockquote::before {
    content: '"';
    @apply absolute -left-4 -top-4 text-white/10 text-[120px] font-serif leading-none;
}

.news-content blockquote p {
    @apply text-[#FFD700] text-[32px] md:text-[40px] font-black italic leading-[1.2] tracking-tight m-0 text-center;
}

.article-player {
    @apply bg-[#1a0b2e] p-6 rounded-2xl flex items-center gap-6 border border-white/5 my-16;
}

.article-player-art {
    @apply w-12 h-12 md:w-16 md:h-16 rounded-lg object-cover shadow-lg flex-shrink-0;
}

.article-player-info h4 {
    @apply text-white font-bold text-sm mb-0.5;
}

.article-player-info p {
    @apply text-white/40 text-[11px] font-bold uppercase tracking-widest;
}

.article-player-controls {
    @apply flex items-center gap-4 text-white/60;
}

.article-player-btn-play {
    @apply w-10 h-10 bg-[#FFD700] text-[#0a0a0a] rounded-full flex items-center justify-center hover:scale-110 transition-all;
}

.article-player-progress {
    @apply flex-1 flex items-center gap-3 text-[10px] font-bold text-white/20 tabular-nums;
}

.article-player-bar-bg {
    @apply flex-1 h-1 bg-white/10 rounded-full relative overflow-hidden;
}

.article-player-bar-fill {
    @apply absolute inset-y-0 left-0 bg-[#FFD700] rounded-full;
}

.news-sidebar-card {
    @apply bg-[#1a0b2e] border border-white/5 rounded-[32px] p-8 transition-all duration-300;
}

.sidebar-title {
    @apply text-[#FFD700] text-[13px] font-black uppercase tracking-[0.2em] mb-8;
}

.related-news-item {
    @apply flex flex-col gap-3 group cursor-pointer mb-8 last:mb-0;
}

.related-news-item img {
    @apply w-full aspect-video rounded-2xl object-cover transition-transform duration-500 group-hover:scale-105;
}

.related-news-tag {
    @apply text-[#FFD700] text-[9px] font-black uppercase tracking-widest;
}

.related-news-title {
    @apply text-white font-bold text-sm group-hover:text-[#FFD700] transition-colors leading-snug;
}

.newsletter-box {
    @apply bg-[#1a0b2e] p-8 rounded-[32px] border border-white/5;
}

.newsletter-box h3 {
    @apply text-white text-2xl font-black mb-2 tracking-tight;
}

.newsletter-box p {
    @apply text-white/40 text-sm mb-8;
}

.share-label {
    @apply text-[#FFD700] text-[10px] font-black uppercase tracking-[0.2em] mb-6;
}

.btn-share {
    @apply flex items-center gap-3 px-6 py-3 bg-white/5 border border-white/10 rounded-full text-white text-[11px] font-black uppercase tracking-widest hover:bg-white/10 transition-all;
}

.comment-textarea {
    @apply w-full bg-black/40 border border-white/10 rounded-[24px] p-8 text-white placeholder:text-white/20 focus:outline-none focus:border-[#FFD700]/30 transition-all font-bold text-lg min-h-[160px] resize-none;
}

.btn-yellow {
    @apply bg-[#FFD700] text-[#0a0a0a] px-8 py-4 rounded-full font-black uppercase tracking-widest text-[11px] hover:scale-105 transition-all shadow-lg shadow-[#FFD700]/10;
}

/* Newsletter — Fique no Loop (glassmorphism card) */
.newsletter-loop-card {
    position: relative;
    padding: 2.5rem;
    border-radius: 2rem;
    background: linear-gradient(145deg, rgba(26, 11, 46, 0.95), rgba(15, 5, 36, 0.85));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 215, 0, 0.08);
    box-shadow:
        0 0 60px rgba(255, 215, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.newsletter-loop-card::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.newsletter-loop-card:hover {
    border-color: rgba(255, 215, 0, 0.15);
    box-shadow:
        0 0 80px rgba(255, 215, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.newsletter-loop-input {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: white;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    outline: none;
    transition: all 0.3s ease;
}

.newsletter-loop-input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    letter-spacing: 0.15em;
}

.newsletter-loop-input:focus {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.05);
}

.newsletter-loop-btn {
    width: 100%;
    padding: 1.1rem 2rem;
    border-radius: 1rem;
    border: none;
    background: #FFD700;
    color: #0a0a0a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

.newsletter-loop-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 14px 40px rgba(255, 215, 0, 0.3);
}

/* Partners Marquee CSS */
.partners-marquee-container {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partners-marquee-content {
    display: flex;
    align-items: center;
    gap: 5rem;
    padding-left: 5rem; 
    animation: scroll-partners 40s linear infinite;
    width: max-content;
}

.partners-marquee-container:hover .partners-marquee-content {
    animation-play-state: paused;
}

@keyframes scroll-partners {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.partner-logo {
    height: 40px;
    width: auto;
    filter: invert(1) brightness(100) opacity(0.4);
    transition: all 0.4s ease;
    object-fit: contain;
}

.partner-logo:hover {
    filter: invert(1) brightness(100) opacity(1);
    transform: scale(1.05);
}