:root{
--saffron:#ff7f00;
--saffron-2:#ffb84d;
--maroon:#7a1f1f;
--cream:#fff7e6;
--paper:#fff;
--line:#edd7b6;
--shadow:0 10px 30px rgba(0,0,0,.08);
--glow:0 0 15px rgba(255,127,0,.25)
}

/* BODY */
body{
font-family:Inter,sans-serif;
background:linear-gradient(135deg,#fff7e6,#fffdf8);
color:#1f1f1f;
text-align:justify
}

/* TOP STRIP */
.top-strip{
background:linear-gradient(90deg,var(--saffron),var(--saffron-2));
color:#fff;
font-size:.9rem;
box-shadow:0 2px 10px rgba(0,0,0,.1)
}

/* LOGO */
.logo{
width:50px;height:50px;border-radius:50%;
background:radial-gradient(circle at 30% 30%,#ffd08a,#ff9a1a);
display:flex;align-items:center;justify-content:center;
font-weight:700;color:#612d00;font-size:1.5rem;
box-shadow:inset 0 3px 6px rgba(0,0,0,.2),var(--glow);
transition:.3s
}
.logo:hover{transform:rotate(8deg) scale(1.05)}

/* BRAND */
.brand-title{
font-family:"Noto Serif",serif;
font-weight:700;
color:var(--maroon);
font-size:1.5rem
}

/* NAV */
.nav-link{
border-radius:50rem;
background:#fff3e0;
color:#5a280b!important;
margin:2px;
font-weight:600;
font-size:.95rem;
border:1px solid var(--line);
padding:6px 14px!important;
transition:.3s;
position:relative
}
.nav-link::after{
content:"";
position:absolute;left:0;bottom:0;
width:0;height:2px;
background:var(--saffron);
transition:.3s
}
.nav-link:hover::after{width:100%}
.nav-link:hover{
background:#ffe0b3;
color:var(--maroon)!important;
transform:translateY(-2px)
}

/* CONTENT CARD */
.content-card{
background:var(--paper);
border:1px solid var(--line);
border-radius:16px;
padding:12px;
box-shadow:var(--shadow);
margin-bottom:20px;
overflow:hidden;
transition:.3s;
position:relative
}
.content-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,.12)
}
.content-card::before{
content:"";
position:absolute;
top:0;left:-100%;
width:100%;height:3px;
background:linear-gradient(90deg,var(--saffron),transparent);
transition:.5s
}
.content-card:hover::before{left:100%}

/* IMAGE */
.content-card img{
width:100%;
height:auto;
border-radius:10px;
border:1px solid #eee;
box-shadow:0 4px 12px rgba(0,0,0,.08);
transition:.3s
}
.content-card img:hover{
transform:scale(1.02);
box-shadow:0 6px 18px rgba(0,0,0,.12)
}

/* TITLES */
.content-card h1,
.content-card h5{
font-family:"Noto Serif",serif;
color:#5b220e;
margin-bottom:12px
}

/* BADGE */
.badge-custom{
background:#fff8ea;
border:1px solid var(--line);
color:#5a280b;
font-size:.8rem;
padding:4px 10px;
border-radius:10px;
transition:.3s
}
.badge-custom:hover{background:#ffe0b3}

/* SIDEBAR */
aside .card{
border:1px solid var(--line);
border-radius:14px;
box-shadow:var(--shadow);
transition:.3s
}
aside .card:hover{transform:translateY(-4px)}
aside h3{
font-family:"Noto Serif",serif;
color:var(--maroon)
}
aside ul li{
border-bottom:1px dashed #f0d7b0;
padding-bottom:10px;
transition:.3s
}
aside ul li:hover{padding-left:5px}
aside ul li:last-child{border-bottom:none}
aside ul li a:hover{color:var(--saffron)}

/* 🔥 RELATED SECTION */
.related-box{
background:linear-gradient(135deg,#fff7f0,#fff);
border-radius:14px;
padding:20px;
margin-top:30px;
border:1px solid #ffe0cc;
box-shadow:0 8px 25px rgba(0,0,0,.08);
position:relative;
overflow:hidden;
animation:fadeInUp .5s ease
}
.related-box::before{
content:"";
position:absolute;
top:0;left:-100%;
width:100%;height:3px;
background:linear-gradient(90deg,#ff9800,#ff5722,#ff9800);
animation:glowMove 3s linear infinite
}
.related-box h3{
font-size:20px;
color:#e65100;
margin-bottom:15px;
font-weight:700;
display:flex;
align-items:center;
gap:8px
}
.related-card{
background:#fff;
border-radius:10px;
padding:12px 15px;
margin-bottom:10px;
border:1px solid #eee;
transition:.3s;
cursor:pointer
}
.related-card:hover{
transform:translateY(-3px) scale(1.01);
box-shadow:0 6px 15px rgba(0,0,0,.1);
border-color:#ffcc99;
background:#fffaf5
}
.related-content{
display:flex;
align-items:center
}
.related-icon{
font-size:18px;
margin-right:10px;
color:#ff6600
}
.related-card a{
color:#333;
font-weight:600;
font-size:15px;
text-decoration:none
}
.related-card a:hover{color:#e65100}

/* FOOTER */
footer{margin-top:30px}
.footer-menu{
background:linear-gradient(90deg,var(--saffron),var(--saffron-2));
padding:12px 0
}
.footer-menu .nav-link{
background:rgba(255,255,255,.2);
color:#fff!important;
border-radius:50rem
}
.footer-menu .nav-link:hover{
background:#fff;
color:var(--saffron)!important
}
.footer-meta{
color:#5a280b;
font-size:.95rem;
text-align:center
}

/* SCROLL BUTTON */
.to-top{
position:fixed;
right:16px;
bottom:16px;
padding:10px 12px;
border-radius:50%;
background:linear-gradient(135deg,var(--saffron),var(--saffron-2));
border:none;
box-shadow:var(--shadow);
cursor:pointer;
color:#fff;
transition:.3s
}
.to-top:hover{
background:var(--maroon);
transform:scale(1.1)
}

/* LINKS */
a{text-decoration:none}
a:hover{text-decoration:underline}

/* INTERNAL LINKS */
.internal-link{
color:#d84315;
font-weight:600;
background:linear-gradient(transparent 70%,#ffe0cc 30%);
padding:1px 3px;
border-radius:3px;
transition:.3s
}
.internal-link:hover{
color:#bf360c;
background:linear-gradient(transparent 60%,#ffccbc 40%)
}

/* ANIMATION */
@keyframes glowMove{
0%{left:-100%}
100%{left:100%}
}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:translateY(0)}
}

/* 🔗 Internal Links (Premium Style) */
.internal-link {
    color: #d84315;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(transparent 70%, #ffe0cc 30%);
    padding: 1px 3px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Hover Effect */
.internal-link:hover {
    color: #bf360c;
    background: linear-gradient(transparent 60%, #ffccbc 40%);
    text-decoration: none;
}

/* 🖼 Content Images */
.content-card img {
    width: 100%;
    height: auto;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

/* Image Hover */
.content-card img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* 🔥 Related Articles Box (Premium Card) */
.related-box {
    background: linear-gradient(135deg, #fff7f0, #ffffff);
    border-radius: 14px;
    padding: 20px;
    margin-top: 30px;
    border: 1px solid #ffe0cc;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

/* Glow Border Effect */
.related-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ff9800, #ff5722, #ff9800);
    animation: glowMove 3s linear infinite;
}

/* Animation */
@keyframes glowMove {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Title Styling */
.related-box h3 {
    font-size: 20px;
    color: #e65100;
    margin-bottom: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Smooth Entry Animation */
.related-box {
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Title */
.related-box h3 {
    margin-bottom: 12px;
    font-size: 18px;
    color: #d35400;
    border-left: 4px solid #ff6600;
    padding-left: 10px;
}

/* Each item */
.related-item {
    padding: 8px 5px;
    border-bottom: 1px dashed #ddd;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* Last item no border */
.related-item:last-child {
    border-bottom: none;
}

/* Hover effect */
.related-item:hover {
    background: #fff2e6;
    transform: translateX(5px);
}

/* Icon */
.related-item .icon {
    margin-right: 8px;
    color: #ff6600;
    font-size: 16px;
}

/* Link */
.related-item a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* Hover link */
.related-item a:hover {
    color: #d35400;
}