/* ==========================================
   1. GLOBAL STYLES & THEME (The Base Canvas)
   ========================================== */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #0d1117; /* Slate Dark Background */
    color: #c9d1d9; /* Crisp Off-White Text */
}

/* ==========================================
   2. HEADER & NAVIGATION BAR
   ========================================== */
header {
    background-color: #161b22;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #30363d;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
}

nav a {
    color: #8b949e;
    text-decoration: none;
    margin-left: 20px;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.2s ease;
}

nav a:hover, nav a.active {
    color: #58a6ff; /* Electric Blue Accent */
    border-bottom: 2px solid #58a6ff;
    padding-bottom: 5px;
}

/* ==========================================
   3. LAYOUT STRUCTURE (Two-Column Grid)
   ========================================== */
main {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2 Parts Content, 1 Part Hot Search Sidebar */
    gap: 30px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    main {
        grid-template-columns: 1fr; /* Stacks column on small phone screens */
    }
    header {
        flex-direction: column;
        gap: 15px;
    }
}

.feed-title {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 20px;
    grid-column: 1 / -1; /* Spans across full width */
}

/* ==========================================
   4. ARTICLE CARDS & CONTENT ELEMENTS
   ========================================== */
.card {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
}

.card h3 {
    margin-top: 10px;
    color: #ffffff;
    font-size: 20px;
}

.news-date{
    font-size:12px;
    color:#8b949e;
    margin-bottom:8px;
}
/* Country & Status Badges */
.badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    color: #ffffff;
    text-transform: uppercase;
}

.badge-india { background-color: #ff9933; }
.badge-china { background-color: #de2910; }
.badge-korea { background-color: #0047a0; }
.badge-viral { background-color: #ff4500; }

/* ==========================================
   5. VIRAL CARD VIDEO & SOCIAL PLATFORMS
   ========================================== */
.video-placeholder {
    background-color: #0d1117;
    width: 100%;
    height: 300px;
    border-radius: 6px;
    margin: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #30363d;
    color: #8b949e;
}

.social-handles {
    background-color: #21262d;
    padding: 12px;
    border-radius: 6px;
    display: flex;
    gap: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 15px;
}

.handle { color: #58a6ff; }

/* Where to Watch Element */
.watch-box {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #30363d;
    font-size: 13px;
    color: #8b949e;
}

.platform {
    background-color: #21262d;
    color: #58a6ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
}

/* ==========================================
   6. WEIBO HOT SEARCH SIDEBAR WIDGET
   ========================================== */
.sidebar {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
}

.sidebar h3 {
    color: #ffffff;
    margin-top: 0;
    border-bottom: 1px solid #30363d;
    padding-bottom: 10px;
}

.trend-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #21262d;
    font-size: 14px;
}

.trend-rank {
    font-weight: 800;
    width: 30px;
    color: #8b949e;
}

/* Make top 3 ranks pop out red */
.trend-item:nth-child(-n+4) .trend-rank {
    color: #f85149;
}

.trend-text {
    flex-grow: 1;
    color: #c9d1d9;
}

.trend-status {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    margin-left: 5px;
}

.status-boom { background-color: #da3633; color: white; }
.status-new { background-color: #238636; color: white; }


/* ==========================================
HERO SECTION
========================================== */

.hero {
background: linear-gradient(
135deg,
#161b22,
#0d1117
);
padding: 80px 20px;
text-align: center;
border-bottom: 1px solid #30363d;
}

.hero h1 {
font-size: 48px;
color: #ffffff;
margin-bottom: 10px;
}

.tagline {
font-size: 20px;
color: #f97316;
font-weight: bold;
margin-bottom: 20px;
}

.hero-description {
max-width: 700px;
margin: auto;
color: #8b949e;
line-height: 1.8;
}

.hero-btn {
display: inline-block;
margin-top: 30px;
padding: 12px 25px;
background: #f97316;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
}

.hero-btn:hover {
background: #ea580c;
}

/* ==========================================
BREAKING NEWS CARD
========================================== */

.breaking-card {
background: linear-gradient(
135deg,
#7f1d1d,
#991b1b
);
border-radius: 12px;
padding: 25px;
color: white;
margin-bottom: 30px;
}

.breaking-label {
font-size: 12px;
font-weight: bold;
background: white;
color: #991b1b;
padding: 4px 8px;
border-radius: 5px;
}

.breaking-card h2 {
margin-top: 15px;
font-size: 30px;
}

.read-time {
display: inline-block;
margin-top: 10px;
font-size: 13px;
opacity: 0.9;
}


.trending-section{
    margin-bottom:30px;
}

.trend-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:15px;
}

.trend-box{
    background:#161b22;
    border:1px solid #30363d;
    padding:20px;
    border-radius:10px;
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.trend-box:hover{
    border-color:#f97316;
    transform:translateY(-4px);
}


footer{
    text-align:center;
    padding:30px;
    margin-top:40px;
    border-top:1px solid #30363d;
    color:#8b949e;
}

nav{
    display: flex;
    flex-wrap: wrap;
    justify-content:center ;
    gap:12px ;
    padding-top:10px ;
}

nav a{
    margin-left:0 ;
    font-size:16px;
}


.logo-tagline{
    font-size:11px;
    color:#f97316;
    font-weight:500;
    letter-spacing:1px;
    margin-top:2px;
}

.poster{
    width:100%;
    max-width:450px;
    border-radius:15px;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

.hero-container{
    display:flex;
    gap:40px;
    align-items:center;
    max-width:1200px;
    margin:auto;
    padding:50px;
}

.poster-side{
    flex:1;
}

.details-side{
    flex:1;
}

@media(max-width:768px){

.hero-container{
    flex-direction:column;
}

}

.info-box{
    max-width:1200px;
    margin:20px auto;
    background:#161b22;
    padding:25px;
    border-radius:12px;
}


.drama-facts{
background:#161b22;
padding:20px;
border-radius:12px;
margin-top:20px;
border:1px solid #30363d;
}

.drama-facts p{
margin:10px 0;
font-size:16px;
}


.drama-facts{
    background:#161b22;
    padding:20px;
    border-radius:12px;
    margin-top:20px;
    border:1px solid #30363d;
}

.drama-facts p{
    margin:10px 0;
    font-size:16px;
}

.watch-btn{
    display:inline-block;
    background:#f85149;
    color:white;
    text-decoration:none;
    padding:12px 24px;
    border-radius:8px;
    font-weight:bold;
    margin-top:10px;
}

.watch-btn:hover{
    opacity:0.9;
}

.hero-container{
display:flex;
gap:30px;
max-width:1400px;
margin:auto;
padding:30px;
align-items:flex-start;
}

.poster-side{
flex:0 0 45%;
}

.details-side{
flex:0 0 55%;
}

.poster{
width:100%;
height:auto;
max-height:1000px;
object-fit:contain;
border-radius:12px;
box-shadow:0 0 25px rgba(0,0,0,0.4);
}

.drama-title{
font-size:42px;
margin-top:10px;
color:#fff;
}

.genre{
font-size:18px;
color:#8b949e;
margin-bottom:20px;
}

@media(max-width:768px){

.hero-container{
flex-direction:column;
}

.poster-side,
.details-side{
width:100%;
}

}


.cast-container{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
}

.cast-card{
    background:#161b22;
    border:1px solid #30363d;
    border-radius:12px;
    padding:20px;
    width:280px;
    text-align:center;
}

.cast-photo{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:15px;
}

footer{
text-align:center;
padding:40px;
margin-top:50px;
border-top:1px solid #30363d;
color:#8b949e;
}



.sidebar-box{
background:#161b22;
border:1px solid #30363d;
border-radius:12px;
padding:20px;
margin-top:20px;
}

.sidebar-box h3{
margin-top:0;
color:white;
}




.poster-side{
flex:0 0 40%;
position:sticky;
top:100px;
height:fit-content;
}

iframe{
    width:100%;
    border-radius:12px;
    border:none;
}

.video-box{
    background:#161b22;
    padding:20px;
    border-radius:12px;
    border:1px solid #30363d;
}

.drama-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin:20px auto;
max-width:1400px;
padding:0 20px;
}

.drama-card{
background:#161b22;
border:1px solid #30363d;
border-radius:12px;
padding:20px;
text-align:center;
transition:0.3s;
}

.drama-card:hover{
transform:translateY(-5px);
border-color:#58a6ff;
}

.drama-poster{
width:100%;
height:380px;
object-fit:cover;
border-radius:10px;
margin-bottom:15px;
}

.drama-card h3{
color:white;
margin-bottom:10px;
}

.drama-card p{
color:#8b949e;
margin-bottom:15px;
}


.featured-poster{
width:250px;
border-radius:12px;
margin:15px 0;
}

.category-container{
display:flex;
flex-wrap:wrap;
gap:15px;
justify-content:center;
}

.category-box{
background:#161b22;
border:1px solid #30363d;
padding:15px 25px;
border-radius:10px;
font-weight:bold;
transition:0.3s;
}

.category-box:hover{
border-color:#58a6ff;
transform:translateY(-3px);
}

.search-bar{
width:100%;
padding:12px;
border-radius:8px;
border:1px solid #30363d;
background:#0d1117;
color:white;
font-size:16px;
}


.news-card{
background:#161b22;
border:1px solid #30363d;
border-radius:12px;
padding:20px;
margin:20px auto;
max-width:1200px;
}

.news-card h3{
margin-top:0;
color:white;
}

.news-card p{
color:#c9d1d9;
line-height:1.8;
}

.badge-global{
background:#2563eb;
}

.badge-esports{
background:#7c3aed;
}

.badge-india{
background:#ff9933;
}

.badge-drama{
background:#ec4899;
}


@media(max-width:768px){

.hero h1{
font-size:38px;
}

.tagline{
font-size:18px;
}

nav{
justify-content:center;
}

nav a{
font-size:15px;
padding:5px;
}

.news-card{
padding:20px;
}

.news-card h3{
font-size:22px;
}

.news-card p{
font-size:16px;
line-height:1.8;
}

}


.news-image{

width:100%;

border-radius:10px;

margin-bottom:15px;

max-height:350px;

object-fit:cover;

}

.read-more{

display:inline-block;

margin-top:15px;

background:#c62828;

color:white;

padding:10px 20px;

border-radius:5px;

text-decoration:none;

font-weight:bold;

}

.read-more:hover{

background:#8e0000;

}



.news-thumb{

width:100%;

height:260px;

object-fit:cover;

border-radius:8px;

margin-bottom:15px;

}

.read-btn{

display:inline-block;

margin-top:15px;

padding:10px 20px;

background:#d62828;

color:white;

text-decoration:none;

border-radius:5px;

font-weight:bold;

}

.read-btn:hover{

background:#a60000;

}




.article-body {
    background: #f7f8fa;
    color: #18202b;
    border-radius: 18px;
    padding: 40px;
}

.article-body p {
    color: #303846;
    line-height: 1.85;
}

.article-body h2,
.article-body h3 {
    color: #101722;
}