body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:#04110a;
color:white;
overflow-x:hidden;
scroll-behavior:smooth;
}

/* HEADER */

.header-wrapper{
position:sticky;
top:0;
z-index:1000;
background:#04110a;
}

.site-header{
text-align:left;
padding:20px 20px;
border-bottom:1px solid #00ff88;
}

.site-header h1{
margin:0;
font-size:34px;
}

.main-menu{
display:flex;
overflow-x:auto;
gap:20px;
padding:12px 20px;
border-bottom:1px solid #00ff88;
}

.main-menu a{
color:white;
text-decoration:none;
white-space:nowrap;
font-size:15px;
position:relative;
transition:0.3s;
}

.main-menu a::after{
content:'';
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:#00ff88;
transition:0.3s;
}

.main-menu a:hover::after{
width:100%;
}

/* SECTION TITLE */

.section-title{
max-width:1200px;
margin:30px auto 10px auto;
padding:0 20px;
}

.section-title h2,
.content h2{
color:#00ff88;
font-size:30px;
font-weight:600;
letter-spacing:0.5px;
margin-bottom:20px;
}

/* HERO SLIDER */

.hero-slider{
position:relative;
overflow:hidden;
}

.slide{
position:absolute;
top:0;
left:0;
width:100%;
opacity:0;
transition:opacity 1s ease-in-out;
z-index:0;
}

.slide.active{
opacity:1;
z-index:1;
position:relative;
}

.slide img{
width:100%;
height:auto;
aspect-ratio:3/2;
object-fit:cover;
display:block;
}

@media(max-width:768px){

.slide img{
aspect-ratio:3/2;
}

}

.overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0.2));
}

.hero-text{
position:absolute;
bottom:12%;
left:5%;
max-width:500px;
}

.hero-text h2{
font-size:24px;
line-height:1.3;
color:white;
margin:0;
}

/* DOTS */

.dots{
position:absolute;
bottom:2px;
left:50%;
transform:translateX(-50%);
z-index:10;
}

.dot{
height:10px;
width:10px;
margin:5px;
display:inline-block;
background:#777;
border-radius:50%;
cursor:pointer;
transition:0.3s;
}

.dot.active{
background:#00ff88;
transform:scale(1.2);
}

/* ARTICLES */

.content{
max-width:1200px;
margin:60px auto;
padding:0 20px;
}

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.card{
display:block;
text-decoration:none;
color:white;
}

.card img{
width:100%;
border-radius:10px;
display:block;
}

.card h3{
margin-top:10px;
font-size:18px;
color:white;
}

.card img{
height:220px;
object-fit:cover;
}

@media(max-width:768px){
.card img{
height:180px;
}
}

/* LOAD MORE */

.load-more{
text-align:center;
margin-top:40px;
}

.load-btn{
background:transparent;
border:1px solid #00ff88;
color:#00ff88;
font-size:16px;
padding:12px 25px;
cursor:pointer;
}

/* FOOTER */

footer{
text-align:center;
padding:35px;
border-top:1px solid #00ff88;
}

.footer-links a{
margin:0 10px;
color:white;
text-decoration:none;
}

/* MOBILE */

@media(max-width:768px){

.site-header h1{
font-size:28px;
}

.hero-text h2{
font-size:20px;
}

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

}

/* ARTICLE PAGE */

.article-container{
max-width:800px;
margin:60px auto;
padding:0 20px;
}

.article-title{
font-size:38px;
line-height:1.4;
margin-bottom:15px;
font-weight:600;
}

.article-meta{
color:#00ff88;
font-size:13px;
margin-bottom:25px;
letter-spacing:0.5px;
}

.article-image img{
width:100%;
max-width:800px;
height:auto;
aspect-ratio:3/2;
object-fit:cover;
border-radius:12px;
margin:25px auto 30px auto;
display:block;
}

.article-content p{
font-size:19px;
line-height:1.9;
margin-bottom:22px;
color:#e6e6e6;
}

.related{
max-width:1200px;
margin:60px auto;
padding:0 20px;
}

.related h2{
color:#00ff88;
margin-bottom:20px;
}

.related-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
margin-top:20px;
}

.related-card img{
width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
}

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

/* CONTACT PAGE */

.contact-container{
max-width:800px;
margin:auto;
padding:40px 20px;
}

.contact-container h2{
color:#00ff88;
margin-bottom:10px;
}

.contact-email{
margin-bottom:30px;
font-size:16px;
}

.contact-email a{
color:#00ff88;
text-decoration:none;
}

.contact-form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
padding:10px;
border:none;
border-radius:5px;
font-size:14px;
}

.contact-form textarea{
height:150px;
resize:none;
}

.contact-form button{
background:#00ff88;
border:none;
padding:12px;
border-radius:5px;
font-weight:bold;
cursor:pointer;
}

/* CARD HOVER EFFECT */

.card{
transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 10px 25px rgba(0,255,136,0.15);
}

.card img{
transition:transform 0.4s ease;
}

.card:hover img{
transform:scale(1.05);
}

@media(max-width:768px){

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

.article-content p{
font-size:17px;
}

}

@media(max-width:768px){

.article-image img{
height:220px;
}

/* 🔥 ADD THIS */
.related-grid{
grid-template-columns:1fr;
}

/* existing */
.related-card img{
height:200px;
}

}

.related-card{
text-decoration:none;
color:white;
}

.related-card h3{
color:white;
}

.related-card:visited{
color:white;
}

.related-card:hover h3{
color:#00ff88;
}

.card{
text-decoration:none;
color:white;
}

.card h3{
color:white;
transition:0.3s ease;
}

/* 🔥 Hover effect (desktop) */
.card:hover h3{
color:#00ff88;
}

/* 🔥 Click/tap effect */
.card:active h3{
color:#00ff88;
}

.main-menu a.active{
color:#00ff88;
border-bottom:2px solid #00ff88;
}

.footer-links a.active{
color:#00ff88;
}

/* HEADER FLEX */
.site-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
border-bottom:1px solid #00ff88;
}

/* TOGGLE SWITCH */
.theme-switch{
position:relative;
width:50px;
height:24px;
}

.theme-switch input{
opacity:0;
width:0;
height:0;
}

.slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:#777;
border-radius:34px;
transition:0.3s;
}

.slider:before{
position:absolute;
content:"";
height:18px;
width:18px;
left:3px;
bottom:3px;
background:white;
border-radius:50%;
transition:0.3s;
}

input:checked + .slider{
background:#00ff88;
}

input:checked + .slider:before{
transform:translateX(26px);
}

/* LIGHT THEME - FINAL CLEAN (NO CONFUSION VERSION) */

body.light{
background:#f3f5f7;
color:#111;
transition:0.3s ease;
}

/* HEADER */
body.light .site-header{
background:#ffffff;
border-bottom:1px solid #e5e5e5;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

/* MENU */
body.light .main-menu{
background:#ffffff;
border-bottom:1px solid #e5e5e5;
}

body.light .main-menu a{
color:#333;
}

/* SECTION TITLES */
body.light h2,
body.light .section-title h2,
body.light .content h2{
color:#111;
font-weight:600;
}

/* TEXT FIX (IMPORTANT) */
body.light p{
color:#222;
}

body.light .article-content p{
color:#222;
}

body.light .article-meta{
color:#666;
}

/* LINKS */
body.light a{
color:#111;
text-decoration:none;
}

body.light a:hover{
color:#00aa55;
}

/* CATEGORY META LINKS */
body.light .article-meta a{
color:#555;
}

body.light .article-meta a:hover{
color:#00aa55;
}

/* SECTION SPACING */
body.light .section-title{
margin:40px auto 15px auto;
}

body.light .content{
padding:50px 20px;
}

/* CARDS */
body.light .card{
background:#ffffff;
padding:12px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.06);
transition:0.3s;
}

body.light .card:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

body.light .card h3{
color:#111;
}

/* ARTICLE CONTAINER (BIG FIX) */
body.light .article-container{
background:#ffffff;
padding:25px;
border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

/* RELATED POSTS */
body.light .related-card h3{
color:#111;
}

/* SLIDER TEXT */
body.light .hero-text h2{
color:#ffffff;
}

/* SLIDER DOTS */
body.light .dot{
background:#bbb;
}

body.light .dot.active{
background:#00cc66;
}

/* BUTTON */
body.light .load-btn{
border:1px solid #111;
color:#111;
background:#ffffff;
}

/* FOOTER */
body.light footer{
background:#ffffff;
color:#111;
border-top:1px solid #e5e5e5;
}

body.light .footer-links a{
color:#111;
}

/* PREMIUM ARTICLE READING (MINIMAL STYLE) */

.article-container{
max-width:750px;
margin:50px auto;
padding:0 20px;
}

/* Title */
.article-title{
font-size:32px;
line-height:1.4;
font-weight:600;
margin-bottom:15px;
}

/* Meta (date + category) */
.article-meta{
font-size:14px;
color:#777;
margin-bottom:25px;
}

/* Content text */
.article-content p{
font-size:18px;
line-height:1.8;
margin-bottom:22px;
color:#222;
}

/* Image spacing */
.article-image img{
margin-bottom:25px;
border-radius:12px;
}

/* CLEAN GRID SPACING */

.grid{
gap:25px;
}

.card h3{
font-size:17px;
line-height:1.4;
}

/* SUBTLE HOVER EFFECT */

.card{
transition:0.25s ease;
}

.card:hover{
transform:translateY(-3px);
}

.section-title h2,
.content h2{
font-size:26px;
font-weight:600;
letter-spacing:0.3px;
}

/* FINAL TEXT REFINEMENT */

body{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.article-content p{
letter-spacing:0.2px;
}

.card:active{
transform:scale(0.98);
}

*{
transition:color 0.2s ease, background 0.2s ease;
}

.card img{
border-radius:12px;
}

footer{
font-size:14px;
line-height:1.6;
}

/* FOOTER MOBILE CUSTOM ORDER */

@media(max-width:768px){

.footer-links{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
text-align:left;
padding:0 20px;
}

/* Position items manually */

.footer-links a:nth-child(1){
grid-column:1;
}

.footer-links a:nth-child(2){
grid-column:2;
}

.footer-links a:nth-child(3){
grid-column:1;
}

.footer-links a:nth-child(4){
grid-column:2;
}

.footer-links a:nth-child(5){
grid-column:1 / span 2; /* full width */
text-align:left;
}

}

/* DARK THEME TEXT FIX (IMPORTANT) */

body{
color:#ffffff;
}

.article-content p{
color:#e5e5e5;
}

.article-meta{
color:#00ff88;
}

.card h3{
color:#ffffff;
}

.footer-links a{
color:#ffffff;
}

.article-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.meta-left{
font-size:14px;
color:#00ff88;
}

.share-btn-top{
background:#00ff88;
color:#04110a;
border:none;
padding:6px 14px;
border-radius:20px;
cursor:pointer;
font-size:13px;
font-weight:600;
}

.share-btn-top:hover{
transform:scale(1.05);
}

body.light .meta-left{
color:#000 !important;
}

/* ARTICLE LINKS */

/* DARK MODE LINKS */
body:not(.light) .article-content a{
color:#00ff88 !important;
text-decoration:none;
font-weight:500;
}

/* DARK MODE HOVER */
body:not(.light) .article-content a:hover{
text-decoration:underline;
opacity:0.85;
}

/* LIGHT MODE LINKS */
body.light .article-content a{
color:#0066cc !important;
text-decoration:none;
font-weight:500;
}

/* LIGHT MODE HOVER */
body.light .article-content a:hover{
text-decoration:underline;
}