/* =====================================================
THEME CSS - JEJAK KRIMINAL
===================================================== */
/*
Theme Name: Jejak Kriminal News
Theme URI: https://jejak-kriminal.com
Author: PT Entertainment Jejak Kriminal
Author URI: https://jejak-kriminal.com
Description: Tema portal berita kriminal dan hukum Indonesia untuk situs Jejak Kriminal. Dibuat dengan struktur SEO, schema NewsArticle, dan performa tinggi untuk portal berita online.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jejak-kriminal
Tags: news, blog, newspaper, seo, schema, responsive
*/

/* =========================
Copyright (C) 2026
PT Entertainment Jejak Kriminal

Website: https://jejak-kriminal.com
Alamat: Jl. Pangaritan No.38, Bandung
Kontak: 088223687910
========================= */

/* NAVBAR */

.navbar{
background:#0b0b0c;
border-bottom:2px solid #c1121f;
}

.nav-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:65px;
}

.logo img{
height:40px;
}


/* BREAKING NEWS FIX */

.breaking-bar{
background:#190000;
border-top:1px solid #330000;
border-bottom:1px solid #330000;
}

.breaking-inner{
display:flex;
align-items:center;
overflow:hidden;
}

.breaking-label{
background:#c1121f;
padding:10px 15px;
font-weight:bold;
flex-shrink:0;
}

.breaking-news{
flex:1;
overflow:hidden;
white-space:nowrap;
}

.breaking-news span{
display:inline-block;
padding-left:100%;
animation:ticker 40s linear infinite;
}

.breaking-news a{
margin-right:40px;
color:#fff;
text-decoration:none;
}

@keyframes ticker{
0%{transform:translateX(0)}
100%{transform:translateX(-100%)}
}



/* BANNER */

.company-banner{
background:transparent;
padding:40px 20px;
text-align:center;
border-bottom:1px solid #222;
}

.company-banner img{
max-width:100%;
border-radius:10px;
margin-bottom:15px;
}

.company-banner p{
max-width:800px;
margin:auto;
color:#cfcfcf;
}

/* SLIDER */

.slider{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin:40px 0;
}

.slide{
position:relative;
overflow:hidden;
border-radius:10px;
}

.slide img{
width:100%;
height:260px;
object-fit:cover;
}

.slide h2{
position:absolute;
bottom:0;
background:rgba(0,0,0,.7);
width:100%;
padding:15px;
font-size:18px;
}

/* GRID */

.news-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.news-card{
background:#1a1a1c;
border-radius:10px;
padding:10px;
text-decoration:none;
color:#fff;
}

.news-card img{
width:100%;
height:160px;
object-fit:cover;
border-radius:8px;
}

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

/* TRENDING */

.trending{
margin-top:50px;
}

.trending a{
display:block;
padding:10px;
border-bottom:1px solid #333;
color:#fff;
text-decoration:none;
}

/* STATS */

.stats{
margin-top:60px;
background:#1a1a1c;
padding:20px;
border-radius:10px;
text-align:center;
}

/* MAP */

.office-map{
margin-top:60px;
text-align:center;
}

.office-map iframe{
width:100%;
height:350px;
border:0;
border-radius:10px;
margin-top:20px;
}
/* ===============================
   COLOR CONTROL Thema jejak-kriminal
================================ */
:root{

--bg:#0f0f10;
--card:#1a1a1c;

--accent:#c1121f;
--accent2:#e63946;

--text:#f1f1f1;
--muted:#9a9a9a;

--border:#2b2b2b;

/* tambahan kontrol warna */
--link:#ff3b3b;
--link-hover:#ff6666;
--shadow-red:rgba(255,0,0,0.6);
--shadow-red-soft:rgba(255,0,0,0.4);

}

/* TRAFFIC */

/* ===== Statistik Pengunjung ===== */

.traffic-box{
background:#ffffff;
border:1px solid #e5e5e5;
border-radius:8px;
padding:15px;
margin:20px 0;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.traffic-box h3{
font-size:18px;
margin-bottom:12px;
border-bottom:1px solid #eee;
padding-bottom:6px;
color:#222;
}

.traffic-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 0;
border-bottom:1px dashed #eee;
font-size:14px;
}

.traffic-item:last-child{
border-bottom:none;
}

.traffic-item span{
color:#555;
}

.traffic-item b{
font-size:18px;
color:#d90000;
}

/* Responsive */

@media(max-width:768px){

.traffic-box{
padding:12px;
}

.traffic-item{
font-size:13px;
}

.traffic-item b{
font-size:16px;
}

}

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

/* ===============================
BODY
================================ */
body{
font-family:Arial,Helvetica,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.8;
}

/* ===============================
WRAPPER
================================ */
.wrapper{
max-width:1100px;
margin:auto;
padding:0 20px;
}

/* ===============================
NAVBAR
================================ */
.navbar{
background:#0b0b0c;
border-bottom:2px solid var(--accent);
position:sticky;
top:0;
z-index:1000;
}

.nav-inner{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
height:65px;
}

/* ===============================
MENU LEFT
================================ */
.nav-left{
position:relative;
}

.nav-left a{
color:var(--accent2);
text-decoration:none;
font-weight:600;
cursor:pointer;
}

/* ===============================
DROPDOWN
================================ */
.menu{
display:none;
position:absolute;
top:45px;
left:0;
background:var(--card);
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
min-width:200px;
box-shadow:0 10px 25px rgba(0,0,0,0.5);
}

.menu a{
display:block;
padding:12px 20px;
color:var(--text);
text-decoration:none;
transition:0.3s;
}

.menu a:hover{
background:var(--accent);
}

/* ===============================
LIGHTBOX
================================ */
.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
z-index:9999;
}

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:10px;
}

.lightbox span{
position:absolute;
top:20px;
right:40px;
font-size:40px;
color:#fff;
cursor:pointer;
}

.lightbox-caption{

margin-top:15px;

color:#ddd;

font-size:14px;

text-align:center;

max-width:80%;

line-height:1.6;

}

/* ===============================
LOGO
================================ */
.nav-center{
text-align:center;
}

.nav-center img{
height:40px;
width:auto;
}

/* ===============================
NAV RIGHT
================================ */
.nav-right a{
color:var(--muted);
text-decoration:none;
font-size:14px;
}

.nav-right a:hover{
color:var(--accent2);
}

/* ===============================
CONTAINER
================================ */
.container{
max-width:900px;
margin:auto;
padding:50px 20px;
}

/* ===============================
BREADCRUMB
================================ */
.breadcrumb{
font-size:14px;
color:var(--muted);
margin-bottom:20px;
}

.breadcrumb a{
color:var(--accent2);
text-decoration:none;
}

/* ===============================
TITLE
================================ */
h1{
font-size:36px;
margin-bottom:15px;
line-height:1.3;
letter-spacing:0.5px;

color:#ffffff;

text-shadow:
0 0 5px var(--accent),
0 0 10px var(--accent),
0 0 20px var(--accent),
0 0 40px var(--accent);

animation:glowred 3s ease-in-out infinite;
}

h2{
margin-top:40px;
font-size:26px;
color:var(--accent2);
}

/* ===============================
ANIMATION
================================ */
@keyframes glowred{

0%{
text-shadow:
0 0 4px var(--accent),
0 0 8px var(--accent),
0 0 16px var(--accent),
0 0 30px var(--accent);
}

50%{
text-shadow:
0 0 8px var(--accent),
0 0 16px var(--accent),
0 0 32px var(--accent2),
0 0 60px var(--accent);
}

100%{
text-shadow:
0 0 4px var(--accent),
0 0 8px var(--accent),
0 0 16px var(--accent),
0 0 30px var(--accent);
}

}

/* ===============================
META
================================ */
.meta{
color:var(--muted);
font-size:14px;
margin-bottom:25px;
}

/* ===============================
IMAGE
================================ */

/* gambar utama artikel */

article img{

width:100%;
height:auto;

max-width:100%;

object-fit:cover;

display:block;

border-radius:12px;

margin:25px 0;

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

}

/* featured image */

.featured-image img{

width:100%;

height:auto;

object-fit:cover;

border-radius:14px;

margin:25px 0;

}

/* wordpress block image */

.wp-block-image img{

width:100%;

height:auto;

object-fit:cover;

}

/* caption gambar */

.img-caption{

font-size:13px;

color:#9a9a9a;

margin-top:-15px;

margin-bottom:25px;

text-align:center;

line-height:1.5;

}

.img-caption span{

color:#777;

font-style:italic;

}

/* supaya gambar tidak keluar container */

.article figure{

margin:0;

}

/* responsive mobile */

@media(max-width:768px){

article img{

border-radius:10px;

margin:20px 0;

}

.featured-image img{

border-radius:12px;

}

}

/* responsive layar kecil */

@media(max-width:480px){

article img{

border-radius:8px;

}

}

/* lightbox image */

.lightbox img{

max-width:95%;

max-height:90%;

object-fit:contain;

border-radius:10px;

}

/* ===============================
ARTICLE TYPOGRAPHY
================================ */

.article{

font-size:17px;
line-height:1.85;

}

/* paragraf */

.article p{

margin-bottom:22px;
font-size:17px;
color:#e6e6e6;

}

.article br{
display:block;
content:"";
margin:18px 0;
}

/* huruf pertama besar */

.article p:first-letter{

font-size:28px;
font-weight:bold;
color:var(--accent2);

}

/* strong */

.article strong{

color:#ffffff;
font-weight:700;

}

/* italic */

.article em{

color:#cfcfcf;
font-style:italic;

}

/* ===============================
LINK
================================ */

.article p a,
.article li a{

color:var(--link);

text-decoration:none;

font-weight:600;

border-bottom:1px solid rgba(255,0,0,0.4);

transition:all .3s ease;

}

.article p a:hover,
.article li a:hover{

color:var(--link-hover);

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

}

/* ===============================
LIST
================================ */

.article ul,
.article ol{

margin:20px 0 25px 25px;

}

.article li{

margin-bottom:10px;

line-height:1.7;

color:#e5e5e5;

}

/* warna bullet */

.article ul li::marker{

color:var(--accent2);

}

/* nomor list */

.article ol li::marker{

color:var(--accent2);
font-weight:bold;

}

/* ===============================
BLOCKQUOTE
================================ */

.article blockquote{

background:#1a1a1c;

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

padding:18px 22px;

margin:25px 0;

border-radius:6px;

font-style:italic;

color:#dcdcdc;

}

/* ===============================
HEADINGS
================================ */

.article h2{

font-size:26px;

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

color:var(--accent2);

}

.article h3{

font-size:22px;

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

color:#ffffff;

}

.article h4{

font-size:19px;

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

color:#dddddd;

}

/* ===============================
HR
================================ */

.article hr{

border:none;

height:1px;

background:#333;

margin:35px 0;

}

/* ===============================
TABLE
================================ */

.article table{

width:100%;

border-collapse:collapse;

margin:25px 0;

background:#1a1a1c;

}

.article th,
.article td{

border:1px solid #2b2b2b;

padding:10px;

text-align:left;

}

.article th{

background:#141414;

color:#fff;

}

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

@media(max-width:768px){

.article{

font-size:16px;

}

.article p{

font-size:16px;

}

.article h2{

font-size:22px;

}

.article h3{

font-size:20px;

}

}

/* ===============================
TOC
================================ */
.toc{
background:var(--card);
padding:22px;
border-radius:12px;
margin:35px 0;
border-left:4px solid var(--accent);
}

.toc strong{
color:var(--accent2);
display:block;
margin-bottom:12px;
font-size:16px;
}

.toc ul{
padding-left:18px;
}

.toc li{
margin-bottom:8px;
}

.toc a{
color:var(--accent2);
text-decoration:none;
}

.toc a:hover{
text-decoration:underline;
}

/* ===============================
BUTTON
================================ */
.btn{

display:inline-block;
margin-top:30px;
padding:14px 28px;

background:linear-gradient(45deg,var(--accent),var(--accent2));

color:#fff;

border-radius:40px;
text-decoration:none;
font-weight:bold;

transition:0.3s;

}

.btn:hover{

transform:translateY(-2px);

box-shadow:0 8px 25px rgba(0,0,0,0.6);

}

/* ===============================
NEWS BUTTON
================================ */
.btn-news{

display:inline-block;
margin-top:35px;

padding:14px 28px;

font-size:16px;
font-weight:bold;

color:#fff;

text-decoration:none;

border-radius:40px;

background:linear-gradient(45deg,var(--accent),var(--accent2));

box-shadow:
0 0 10px var(--shadow-red),
0 0 20px var(--shadow-red-soft);

transition:all 0.3s ease;

}

.btn-news:hover{

transform:translateY(-3px);

box-shadow:
0 0 15px var(--shadow-red),
0 0 35px var(--shadow-red-soft);

background:linear-gradient(45deg,var(--accent2),var(--link));

}

/* ===============================
FOOTER PREMIUM
================================ */

.footer{

margin-top:90px;

background:linear-gradient(180deg,#0c0c0d,#070707);

border-top:3px solid var(--accent);

padding:60px 20px 40px;

position:relative;

}

/* garis glow atas */

.footer::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:3px;

background:linear-gradient(90deg,
transparent,
var(--accent),
var(--accent2),
transparent);

opacity:.8;

}

/* container */

.footer-container{

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:1.2fr 1fr 1.1fr;

gap:45px;

}

/* ===============================
ABOUT
================================ */

.footer-about h3{

font-size:22px;

margin-bottom:12px;

color:#fff;

letter-spacing:.5px;

}

.footer-about p{

color:#b8b8b8;

font-size:14px;

line-height:1.7;

}

/* ===============================
LINKS
================================ */

.footer-links h4,
.footer-latest h4{

color:#fff;

margin-bottom:15px;

font-size:16px;

position:relative;

padding-bottom:8px;

}

/* garis judul */

.footer-links h4::after,
.footer-latest h4::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:35px;
height:2px;

background:var(--accent);

}

/* list */

.footer ul{

list-style:none;

padding:0;

}

.footer li{

margin-bottom:10px;

}

/* link */

.footer a{

color:#cfcfcf;

text-decoration:none;

font-size:14px;

transition:all .3s ease;

}

/* hover */

.footer a:hover{

color:var(--link);

padding-left:4px;

}

/* ===============================
LATEST ARTICLE
================================ */

.footer-latest ul{

display:flex;

flex-direction:column;

gap:10px;

}

.footer-latest li{

border-bottom:1px solid #1c1c1c;

padding-bottom:8px;

}

.footer-latest li:last-child{

border-bottom:none;

}

/* hover artikel */

.footer-latest a{

display:block;

line-height:1.4;

}

.footer-latest a:hover{

color:var(--link);

}

/* ===============================
BOTTOM
================================ */

.footer-bottom{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
width:100%;
margin-top:30px;
padding:20px 0;
border-top:1px solid rgba(255,255,255,0.1);
font-size:14px;
color:#ccc;
}

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

@media (max-width:900px){

.footer-container{

grid-template-columns:1fr 1fr;

gap:35px;

}

}

@media (max-width:600px){

.footer-container{

grid-template-columns:1fr;

}

.footer{

padding:50px 20px;

}

}


/* ===============================
POPULAR NEWS UPGRADE
================================ */

.popular-news{
margin-top:60px;
padding:25px;
background:linear-gradient(180deg,#1a1a1c,#111);
border-radius:14px;
border:1px solid var(--border);
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.popular-news h3{
font-size:22px;
margin-bottom:20px;
color:var(--link);
display:flex;
align-items:center;
gap:10px;
}

/* garis aksen judul */

.popular-news h3::after{
content:"";
flex:1;
height:2px;
background:linear-gradient(90deg,var(--accent),transparent);
}

/* list */

.popular-list{
display:flex;
flex-direction:column;
gap:14px;
}

/* item */

.popular-item{

position:relative;

display:flex;
gap:14px;
align-items:center;

text-decoration:none;

background:#1a1a1c;

padding:12px;

border-radius:12px;

border:1px solid #252525;

transition:all .35s ease;

overflow:hidden;

}

/* efek glow tipis */

.popular-item::before{

content:"";

position:absolute;

left:0;
top:0;

width:4px;
height:100%;

background:var(--accent);

opacity:.6;

}

/* hover effect */

.popular-item:hover{

background:#222;

transform:translateY(-3px);

border-color:var(--accent);

box-shadow:0 10px 25px rgba(0,0,0,0.6);

}

/* image */

.popular-item img{

width:85px;
height:65px;

object-fit:cover;

border-radius:8px;

transition:.35s;

}

/* zoom image hover */

.popular-item:hover img{

transform:scale(1.05);

}

/* title */

.popular-title{

color:#fff;

font-size:15px;

line-height:1.45;

font-weight:600;

transition:.3s;

}

/* hover title */

.popular-item:hover .popular-title{

color:var(--link);

}


/* SPONSOR */

.sponsor-box{
margin-top:60px;
padding:25px;
background:#1a1a1c;
border-radius:12px;
border:1px solid #2b2b2b;
}

.sponsor-box h3{
margin-bottom:20px;
color:#ff3b3b;
}

.sponsor-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.sponsor-item{
display:block;
background:#111;
padding:12px;
border-radius:10px;
text-decoration:none;
color:#fff;
transition:.3s;
border:1px solid #2b2b2b;
}

.sponsor-item:hover{
transform:translateY(-3px);
border-color:#c1121f;
}

.sponsor-item img{
width:100%;
height:150px;
object-fit:cover;
border-radius:8px;
margin-bottom:10px;
}

.sponsor-item b{
display:block;
margin-bottom:5px;
}

.sponsor-item span{
font-size:13px;
color:#bbb;
}

/* =====================================================
FIX ALIGN NAVBAR - ARTICLE - IMAGE
JEJAK KRIMINAL
===================================================== */

/* samakan lebar semua container */

.wrapper,
.container,
.footer-container{
max-width:900px;
margin:auto;
padding-left:20px;
padding-right:20px;
width:100%;
}

/* navbar grid agar logo benar benar center */

.nav-inner{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
height:65px;
width:100%;
}

/* kiri */

.nav-left{
justify-self:start;
}

/* tengah */

.nav-center{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

/* kanan */

.nav-right{
justify-self:end;
}

/* gambar artikel agar benar-benar sejajar */

.container img,
.article img{
width:100%;
max-width:100%;
display:block;
margin:25px 0;
}

/* featured image wordpress */

.container > img{
width:100%;
border-radius:12px;
}

/* rapikan judul agar tidak keluar garis */

h1{
max-width:100%;
word-break:break-word;
}

/* responsive mobile */

@media(max-width:768px){

.wrapper,
.container,
.footer-container{
max-width:100%;
padding-left:16px;
padding-right:16px;
}

.nav-inner{
grid-template-columns:auto 1fr auto;
}

}