/*
Theme Name: Jejak Kriminal PRO WAR EDITION
Author: Jejak Kriminal
Version: 3.0
*/

/* VARIABLES */

:root{

--bg:#070707;
--card:#131316;

--accent:#ff1e1e;
--accent2:#ff4040;

--text:#f5f5f5;
--muted:#a1a1a1;

--border:#242424;

--link:#ff5b5b;
--link-hover:#ff8a8a;

--shadow-red:0 0 14px rgba(255,0,0,0.5);

}

/* RESET */

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

/* BODY */

body{

font-family:Inter,Arial,Helvetica,sans-serif;

background:
radial-gradient(circle at top,#1a0000 0%,#070707 60%);

color:var(--text);

line-height:1.7;

}

/* WRAPPER */

.wrapper{

max-width:1200px;
margin:auto;
padding:25px;

}

/* NAVBAR */

.navbar{

background:linear-gradient(90deg,#000,#200000);

border-bottom:2px solid var(--accent);

position:sticky;
top:0;
z-index:1000;

box-shadow:var(--shadow-red);

}

.site-title{

font-size:24px;
font-weight:700;

}

.site-title a{

color:white;
text-decoration:none;

}

/* MENU */

.menu ul{

display:flex;
gap:20px;
list-style:none;

}

.menu a{

color:white;
text-decoration:none;
font-weight:600;
padding:6px 10px;
border-radius:4px;
transition:.3s;

}

.menu a:hover{

background:var(--accent);
box-shadow:var(--shadow-red);

}

/* BREAKING NEWS */

.breaking{

background:linear-gradient(90deg,#600000,#ff0000);

padding:10px 15px;

font-weight:700;

margin-bottom:20px;

border-left:5px solid #fff;

animation:blink 1.4s infinite;

}

@keyframes blink{

0%{opacity:1;}
50%{opacity:.7;}
100%{opacity:1;}

}

/* ARTICLE TITLE */

.jk-title{

font-size:42px;

margin-bottom:15px;

text-shadow:
0 0 10px red,
0 0 25px red,
0 0 45px rgba(255,0,0,.6);

animation:pulseTitle 2s infinite;

}

@keyframes pulseTitle{

0%{text-shadow:0 0 10px red;}
50%{text-shadow:0 0 35px red;}
100%{text-shadow:0 0 10px red;}

}

/* META */

.jk-meta{

color:var(--muted);

font-size:14px;

margin-bottom:20px;

}

/* FEATURED IMAGE */

.featured-image{

margin-bottom:25px;

}

.featured-image img{

width:100%;

border-radius:10px;

box-shadow:0 10px 30px rgba(0,0,0,.6);

}

/* CONTENT LAYOUT */

.content-layout{

display:grid;

grid-template-columns:3fr 1fr;

gap:40px;

}

/* ARTICLE */

.jk-article{

font-size:18px;

}

.jk-article p{

margin-bottom:18px;

}

.jk-article h2{

margin-top:35px;
margin-bottom:15px;

font-size:26px;

border-left:4px solid var(--accent);

padding-left:10px;

}

.jk-article h3{

margin-top:30px;
margin-bottom:10px;

font-size:22px;

}

.jk-article img{

max-width:100%;

border-radius:6px;

cursor:pointer;

transition:.3s;

}

.jk-article img:hover{

transform:scale(1.03);

box-shadow:
0 0 25px rgba(255,0,0,.6),
0 10px 30px rgba(0,0,0,.6);

}

/* TOC */

.jk-toc{

background:#101014;

padding:20px;

border-radius:10px;

margin-bottom:30px;

border-left:4px solid var(--accent);

}

.jk-toc ul{

padding-left:15px;

}

.jk-toc li{

margin-bottom:8px;

}

.jk-toc a{

color:var(--link);

text-decoration:none;

}

.jk-toc a:hover{

color:var(--link-hover);

}

/* SHARE */

.jk-share{

margin-top:30px;

}

.jk-share a{

display:inline-block;

padding:10px 18px;

margin-right:8px;

background:linear-gradient(45deg,#a00000,#ff0000);

color:white;

border-radius:5px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.jk-share a:hover{

transform:translateY(-2px);

box-shadow:var(--shadow-red);

}

/* AUTHOR BOX */

.author-box{

margin-top:40px;

background:#0f0f12;

padding:20px;

border-radius:10px;

display:flex;

gap:15px;

border:1px solid var(--border);

}

.author-box img{

border-radius:50%;

}

/* SIDEBAR */

.sidebar{

background:#0f0f12;

padding:20px;

border-radius:10px;

border:1px solid var(--border);

height:fit-content;

}

.sidebar h3{

margin-bottom:15px;

font-size:18px;

border-bottom:2px solid var(--accent);

padding-bottom:6px;

}

.sidebar ul{

list-style:none;

}

.sidebar li{

margin-bottom:12px;

}

.sidebar a{

color:var(--link);

text-decoration:none;

}

.sidebar a:hover{

color:var(--link-hover);

}

/* RELATED */

.related-posts{

margin-top:40px;

}

.related-posts h3{

margin-bottom:15px;

}

.related-posts ul{

padding-left:18px;

}

.related-posts li{

margin-bottom:10px;

}

/* POPUP IMAGE */

#imgPopup{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.95);

justify-content:center;
align-items:center;

z-index:9999;

}

#imgPopup img{

max-width:90%;
max-height:90%;

}

/* PROGRESS BAR */

#reading-progress{

position:fixed;

top:0;
left:0;

height:4px;

background:linear-gradient(90deg,#ff0000,#ff5b5b);

width:0%;

z-index:9999;

}

/* WAR TAG */

.war-tag{

background:var(--accent);

display:inline-block;

padding:4px 8px;

font-size:11px;

border-radius:4px;

margin-bottom:10px;

text-transform:uppercase;

}

/* HERO ARTICLE AREA */

.jk-wrapper{

background:#0f0f12;

margin-top:30px;

padding:40px;

border-radius:10px;

box-shadow:0 10px 40px rgba(0,0,0,.6);

}

/* TITLE */

.jk-title{

font-size:40px;

line-height:1.3;

margin-bottom:15px;

color:white;

}

/* META */

.jk-meta{

color:#9a9a9a;

font-size:14px;

margin-bottom:25px;

}

/* FEATURED IMAGE */

.featured-image{

margin-bottom:25px;

}

.featured-image img{

width:100%;

border-radius:8px;

}

/* FIX BODY BACKGROUND */

body{

background:#070707;

}

/* FIX SPACE HEADER */

.navbar{

margin-bottom:30px;

}

/* BREAKING BAR */

.breaking{

background:linear-gradient(90deg,#8b0000,#ff0000);

padding:10px 15px;

font-weight:bold;

margin-bottom:20px;

border-radius:4px;

color:white;

}

/* ARTICLE TEXT */

.jk-article{

font-size:18px;

line-height:1.8;

}

/* ARTICLE PARAGRAPH */

.jk-article p{

margin-bottom:20px;

}

/* ARTICLE HEADING */

.jk-article h2{

margin-top:30px;

margin-bottom:10px;

font-size:26px;

border-left:4px solid red;

padding-left:10px;

}

/* FOOTER */

.footer{

margin-top:60px;

padding:25px;

border-top:1px solid var(--border);

text-align:center;

color:var(--muted);

background:#050505;

}

/* LINKS */

a{

color:var(--link);

}

a:hover{

color:var(--link-hover);

}

/* MOBILE */

@media(max-width:900px){

.content-layout{

grid-template-columns:1fr;

}

.sidebar{

margin-top:30px;

}

.jk-title{

font-size:30px;

}

}