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

/* BODY */

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
background:#f3f3f3;
color:#111;

display:flex;
flex-direction:column;
min-height:100vh;

padding-bottom:60px; 
}

main{
flex:1;
}

a {
    color: #f81919;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline; 
}


/* CONTAINER */

.container{
max-width:1250px;
margin:auto;
padding:0 20px;
}

/* TOPBAR */

.topbar{
background:#111;
color:#ccc;
font-size:13px;
}

.topbar-inner{
display:flex;
justify-content:space-between;
padding:6px 0;
}

/* HEADER */

header{
background:#fff;
border-bottom:1px solid #ddd;
position:sticky;
top:0;
z-index:10;
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 0;
}

.logo{
font-size:24px;
font-weight:900;
}

.nav{
display:flex;
gap:24px;
}

.nav a{
text-decoration:none;
color:#333;
}

/* MAIN GRID */

.main-grid{
display:grid;
grid-template-columns:3fr 1fr;
gap:30px;
margin-top:25px;
}

/* =========================
HERO HEADLINE
========================= */

.hero-headline{
margin-top:25px;
margin-bottom:35px;
}

.hero-link{
display:block;
text-decoration:none;
color:#111;
position:relative;
}

.hero-link img{
width:100%;
height:480px;
object-fit:cover;
border-radius:4px;
}

/* overlay text */

.hero-link h1{
font-size:36px;
font-weight:800;
line-height:1.2;

margin-top:18px;
max-width:900px;
}

.hero-excerpt{
font-size:17px;
line-height:1.6;
color:#444;
margin-top:10px;
max-width:850px;
}


/* =========================
NEWS GRID 3
========================= */

.news-grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-bottom:40px;
}

/* CARD */

.news-card{
background:#fff;
border-radius:4px;
overflow:hidden;
border:1px solid #e5e5e5;

transition:all .2s ease;
}

.news-card:hover{
transform:translateY(-4px);
box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* LINK */

.news-card a{
display:block;
text-decoration:none;
color:#111;
}

/* IMAGE */

.news-card img{
width:100%;
height:200px;
object-fit:cover;
}

/* TITLE */

.news-card h3{
font-size:19px;
line-height:1.35;
font-weight:800;

padding:14px 16px 6px 16px;
}

/* EXCERPT */

.news-card .excerpt{
font-size:15px;
line-height:1.6;
color:#555;

padding:0 16px 16px 16px;

display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.excerpt{
  font-size:14px;
  color:#555;
  line-height:1.4rem;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3; /* maksimal 3 baris */
  overflow:hidden;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1024px){

.news-grid-3{
grid-template-columns:repeat(2,1fr);
}

.hero-link img{
height:380px;
}

.hero-link h1{
font-size:30px;
}

}

@media(max-width:640px){

.news-grid-3{
grid-template-columns:1fr;
}

.hero-link img{
height:240px;
}

.hero-link h1{
font-size:24px;
}

.hero-excerpt{
font-size:15px;
}

}
/* =========================
SIDEBAR
========================= */

.sidebar{
background:#fff;
padding:22px;
border-radius:6px;
border:1px solid #e5e5e5;
}

/* TITLE */

.sidebar h3{
font-size:18px;
font-weight:800;
margin-bottom:16px;
border-bottom:2px solid #111;
padding-bottom:8px;
}

/* TRENDING LIST */

.trending{
list-style:none;
counter-reset:trend;
}

/* ITEM */

.trending li{
border-bottom:1px solid #eee;
padding:14px 0;
position:relative;
padding-left:34px;
}

/* NUMBER */

.trending li::before{
counter-increment:trend;
content:counter(trend);
position:absolute;
left:0;
top:14px;

font-weight:800;
font-size:18px;
color:#ccc;
}

/* LINK */

.trending a{
text-decoration:none;
color:#111;
font-size:15px;
line-height:1.4;
display:block;
}

/* HOVER */

.trending a:hover{
color:#d0021b; /* merah media olahraga */
}

/* FOOTER UTAMA */

.footer-main{
background:#e5e5e5;
padding:20px 0;
margin-top:40px;
position:relative;
z-index:1;
}

.footer-menu{
display:flex;
justify-content:center;
gap:30px;
font-size:14px;
}

.footer-menu a{
color:#222;
text-decoration:none;
}

.footer-menu a:hover{
text-decoration:underline;
}

/* FOOTER STICKY */

.footer-sticky{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#111;
z-index:999;
height:60px;
}

.sticky-menu{
display:flex;
justify-content:space-around;
align-items:center;
height:100%;
}

.sticky-menu a{
color:#fff;
font-size:15px;
text-decoration:none;
font-weight:600;
}

/* RESPONSIVE */

@media(max-width:1024px){

.main-grid{
grid-template-columns:1fr;
}

.hero{
grid-template-columns:1fr;
}

.news-grid{
grid-template-columns:repeat(2,1fr);
}

.sport-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:640px){

.container{
padding-left:18px;
padding-right:18px;
}

.nav{
display:none;
}

.news-grid{
grid-template-columns:1fr;
}

.sport-grid{
grid-template-columns:1fr;
}

.hero-main img{
height:230px;
}

}
/* STICKY MENU */

.sticky-menu{
display:flex;
justify-content:space-around;
align-items:center;
height:100%;
}

.sticky-menu a{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
color:#fff;
text-decoration:none;
font-size:12px;
font-weight:500;
}

/* ICON */

.icon{
width:20px;
height:20px;
fill:white;
opacity:.9;
}

.sticky-menu a:hover .icon{
opacity:1;
}

/* ARTICLE PAGE */

.article-container{
max-width:800px;
margin-top:30px;
}

/* BREADCRUMB */

.breadcrumb{
font-size:13px;
color:#666;
margin-bottom:10px;
}

.breadcrumb a{
color:#666;
text-decoration:none;
}

/* TITLE */

.article-title{
font-size:34px;
line-height:1.2;
margin-bottom:10px;
}

/* META */

.article-meta{
font-size:14px;
color:#777;
margin-bottom:20px;
display:flex;
gap:10px;
}

/* FEATURE IMAGE */

.featured-image{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
margin-bottom:25px;
border-radius:4px;
}

/* ARTICLE CONTENT */

.article-content{
font-size:18px;
line-height:1.7;
color:#222;
}

.article-content p{
margin-bottom:20px;
}

/* BACA JUGA */

.readmore-box{
background:#eef2f7;
border-left:4px solid #111;
padding:16px;
margin:30px 0;
font-size:16px;
}

.readmore-box a{
color:#111;
text-decoration:none;
font-weight:600;
}

/* AUTHOR BOX */

.author-box{
display:flex;
gap:16px;
align-items:center;
background:#f5f5f5;
padding:16px;
margin-top:40px;
border-radius:6px;
}

.author-box img{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
}

/* FAQ */

.faq-box{
margin-top:40px;
background:#f8f8f8;
padding:20px;
border-radius:6px;
}

.faq-box h2{
margin-bottom:15px;
}

.faq-item{
margin-bottom:14px;
}

.faq-item h3{
font-size:16px;
margin-bottom:6px;
}

/* RELATED */

.related{
margin-top:45px;
}

.related-title{
margin-bottom:20px;
}

.related-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.related-card img{
width:100%;
height:160px;
object-fit:cover;
}

.related-card h3{
font-size:16px;
margin-top:8px;
}

/* MOBILE */

@media(max-width:640px){

.article-title{
font-size:26px;
}

.related-grid{
grid-template-columns:1fr;
}

}

/* FAQ */

/* FAQ */

.faq-box{
margin-top:40px;
background:#f7f7f7;
padding:20px;
border-radius:6px;
}

.faq-item{
border-bottom:1px solid #e5e5e5;
}

.faq-question{
width:100%;
text-align:left;
background:#fff;
border:none;
padding:16px;
font-size:15px;
font-weight:600;
cursor:pointer;
position:relative;
line-height:1.5; /* agar pertanyaan tidak mepet */
}

/* PANAH */

.faq-question::after{
content:"▼";
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
font-size:12px;
transition:transform .25s ease;
}

.faq-item.active .faq-question::after{
transform:translateY(-50%) rotate(180deg);
}

/* JAWABAN */

.faq-answer{
display:none;
padding:16px;
background:#fff;
font-size:15px;
line-height:1.7; /* line spacing jawaban */
}

.faq-answer p{
margin-bottom:10px;
}

.faq-item.active .faq-answer{
display:block;
}

/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
gap:4px;
background:none;
border:none;
cursor:pointer;
}

.hamburger span{
width:24px;
height:3px;
background:#111;
display:block;
}

/* MOBILE MENU */

@media(max-width:768px){

.hamburger{
display:flex;
}

.nav{
position:absolute;
top:60px;
left:0;
width:100%;
background:#fff;
border-bottom:1px solid #ddd;

flex-direction:column;
gap:0;

display:none;
}

.nav a{
padding:14px 20px;
border-top:1px solid #eee;
}

/* aktif */

.nav.active{
display:flex;
}

}

.author-link{
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.author-link:hover{
  text-decoration: underline;
}

/* SCHEDULE PAGE */

.schedule-page h1{
margin:30px 0;
}


/* ACCORDION */

.accordion{
border-bottom:1px solid #ddd;
margin-bottom:10px;
}

.accordion-btn{
width:100%;
background:#f5f5f5;
border:none;
padding:15px;
font-size:18px;
font-weight:700;
display:flex;
justify-content:space-between;
cursor:pointer;
}

.accordion-content{
display:none;
padding:10px 0;
}

.accordion-content.active{
display:block;
}


/* MATCH LIST */

.match{

padding:16px 0 18px 18px;  /* kiri lebih masuk */

border-bottom:1px solid #eee;

margin-bottom:12px;

}


/* tanggal + turnamen */

.match-meta{

font-size:14px;

color:#777;

margin-bottom:6px;

padding-left:4px;

}


/* nama tim */

.match-teams{

font-size:18px;

font-weight:700;

padding-left:4px;

}


/* rata kiri */

.match,

.match-meta,

.match-teams{

text-align:left;

}


/* ARTICLE */

.schedule-article{
margin-top:40px;
background:#fafafa;
padding:25px;
border-radius:6px;
}

.schedule-article p{
line-height:2rem;
margin-bottom:15px;
}

/* ABOUT PAGE */

.about-page{
max-width:900px;   
margin:40px auto;
}

.editor-box{
display:flex;
gap:28px;
align-items:flex-start;
margin-top:20px;
}

.editor-box p{
line-height:1.7;
}

.editor-box img{
width:220px;
aspect-ratio:1/1;
object-fit:cover;
border-radius:6px;
}

.editor-info h2{
font-size:22px;
margin-bottom:4px;
}

.editor-role{
font-size:14px;
color:#777;
margin-bottom:10px;
}

.author-link{
text-decoration:none;
color:#111;
font-weight:700;
}

.author-link:hover{
text-decoration:underline;
}


/* REPORTER */

.reporter-section{
margin-top:40px;
}

.reporter-section h2{
margin-bottom:14px;
}

.reporter-list{
list-style:none;
}

.reporter-list li{
margin-bottom:8px;
}

.reporter-list a{
text-decoration:none;
color:#111;
}

.reporter-list a:hover{
text-decoration:underline;
}


/* MOBILE */

@media(max-width:640px){

.editor-box{
flex-direction:column;
}

.editor-box img{
width:100%;   /* foto full width */
height:auto;
border-radius:6px;
}

}

.about-description{
margin-top:40px;
line-height:1.7;
font-size:16px;
color:#333;
}

.about-description p{
margin-bottom:18px;
}

/* LEGAL PAGE */

.legal-page{
max-width:900px;
margin:40px auto;
line-height:1.7;
font-size:16px;
}

.legal-page h1{
font-size:32px;
margin-bottom:20px;
}

.legal-page h2{
font-size:20px;
margin-top:28px;
margin-bottom:10px;
}

.legal-page p{
margin-bottom:14px;
color:#333;
}

.legal-page a{
color:#111;
font-weight:600;
text-decoration:none;
}

.legal-page a:hover{
text-decoration:underline;
}

/* AUTHOR PAGE */

.author-page{
max-width:900px;
margin:40px auto;
}

/* HEADER AUTHOR */

.author-header{
display:flex;
gap:28px;
align-items:flex-start;
margin-bottom:40px;
}

.author-header img{
width:160px;
aspect-ratio:1/1;
object-fit:cover;
border-radius:6px;
}

.author-info h1{
font-size:28px;
margin-bottom:6px;
}

.author-role{
color:#777;
font-size:14px;
margin-bottom:10px;
}

.author-bio{
line-height:1.7;
color:#333;
}

.author-meta{
margin-top:12px;
display:flex;
gap:20px;
font-size:14px;
color:#555;
}

/* GRID ARTIKEL */

.author-articles h2{
margin-bottom:20px;
}

.author-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

/* MOBILE */

@media(max-width:640px){

.author-header{
flex-direction:column;
}

.author-header img{
width:100%;
}

.author-grid{
grid-template-columns:1fr;
}

}

.related-link {
  text-decoration: none; /* Hilangkan underline */
  color: inherit;        /* Gunakan warna teks normal */
}

/* Opsional: tambah hover efek ringan */
.related-link:hover h3 {
  color: #1a1a1a; /* Bisa diganti sesuai tema */
}
/* STANDINGS PAGE */

.standings-page{
max-width:900px;
margin:40px auto;
}

.standings-page h1{
font-size:32px;
margin-bottom:14px;
}

.standings-intro{
font-size:16px;
line-height:1.7;
color:#333;
margin-bottom:28px;
}

.standings-widget{
max-width:768px;
}

.widget-credit{
font-size:12px;
font-family:Arial, sans-serif;
margin-top:6px;
}