/* =========================================================
   PORTAL JABATAN — Design Tokens
   ========================================================= */
:root{
	--pj-navy: #0A3D62;       /* primary govt blue */
	--pj-blue: #1E5F8C;       /* secondary blue */
	--pj-blue-light: #E8F1F8;/* tint background */
	--pj-gold: #C9A227;       /* accent (used sparingly) */
	--pj-white: #FFFFFF;
	--pj-bg: #F5F7FA;
	--pj-text: #1C2B36;
	--pj-text-muted: #5B6B76;
	--pj-border: #DDE5EC;
	--pj-radius: 10px;
	--pj-shadow: 0 6px 24px rgba(10,61,98,.08);
	--pj-font-head: 'Poppins', sans-serif;
	--pj-font-body: 'Inter', sans-serif;
	--pj-transition: .35s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
	*{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0; font-family:var(--pj-font-body); color:var(--pj-text);
	background:var(--pj-bg); line-height:1.65; font-size:16px;
}
h1,h2,h3,h4{ font-family:var(--pj-font-head); color:var(--pj-navy); line-height:1.25; margin:0 0 .5em; }
a{ color:var(--pj-blue); text-decoration:none; transition:color var(--pj-transition); }
img{ max-width:100%; display:block; }
.screen-reader-text{ position:absolute; left:-9999px; }
.skip-link:focus{ left:10px; top:10px; position:fixed; background:var(--pj-navy); color:#fff; padding:10px 16px; z-index:9999; border-radius:6px; }

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

/* =========================================================
   TOP UTILITY BAR
   ========================================================= */
.pj-topbar{ background:var(--pj-navy); color:#cfe0ee; font-size:13px; }
.pj-topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding:8px 20px; flex-wrap:wrap; gap:6px; }
.pj-topbar-right{ display:flex; gap:18px; align-items:center; }
.pj-topbar-right a{ color:#cfe0ee; }
.pj-topbar-right a:hover{ color:var(--pj-gold); }
.pj-icon{ margin-right:4px; }
.pj-lang-toggle a.active{ color:var(--pj-gold); font-weight:600; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.pj-header{
	background:var(--pj-white); position:sticky; top:0; z-index:500;
	box-shadow:0 2px 10px rgba(0,0,0,.05);
	transition:box-shadow var(--pj-transition), padding var(--pj-transition);
}
.pj-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.pj-logo-area img{ max-height:60px; width:auto; }
.pj-logo-text{ display:flex; align-items:center; gap:12px; }
.pj-logo-mark{
	width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--pj-navy),var(--pj-blue));
	color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--pj-font-head); font-weight:700;
}
.pj-logo-title strong{ display:block; font-family:var(--pj-font-head); color:var(--pj-navy); font-size:16px; }
.pj-logo-title small{ color:var(--pj-text-muted); font-size:12px; }

.pj-nav-menu{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.pj-nav-menu li{ position:relative; }
.pj-nav-menu > li > a{
	color:var(--pj-text); font-weight:600; font-size:14.5px; padding:8px 0; display:inline-block; position:relative;
}
.pj-nav-menu > li > a::after{
	content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--pj-gold); transition:width var(--pj-transition);
}
.pj-nav-menu > li > a:hover::after, .pj-nav-menu > li.current-menu-item > a::after{ width:100%; }
.pj-nav-menu > li > a:hover{ color:var(--pj-navy); }

/* submenu */
.pj-nav-menu ul{
	list-style:none; margin:0; padding:10px 0; position:absolute; top:100%; left:0; min-width:240px;
	background:#fff; box-shadow:var(--pj-shadow); border-radius:8px; opacity:0; visibility:hidden;
	transform:translateY(8px); transition:all var(--pj-transition); z-index:100;
}
.pj-nav-menu li:hover > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.pj-nav-menu ul li a{ display:block; padding:9px 18px; font-size:14px; color:var(--pj-text); font-weight:500; }
.pj-nav-menu ul li a:hover{ background:var(--pj-blue-light); color:var(--pj-navy); }
.pj-nav-menu ul ul{ top:0; left:100%; }

.pj-menu-toggle{ display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:6px; position:relative; z-index:601; }
.pj-menu-toggle span{ width:26px; height:3px; background:var(--pj-navy); border-radius:2px; transition:var(--pj-transition); }
.pj-menu-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.pj-menu-toggle.is-open span:nth-child(2){ opacity:0; }
.pj-menu-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================
   HERO SLIDER
   ========================================================= */
.pj-hero{ position:relative; overflow:hidden; min-height:480px; }
.pj-hero-slides{ position:relative; height:480px; }
.pj-hero-slide{
	position:absolute; inset:0; background-size:cover; background-position:center;
	display:flex; align-items:center; opacity:0; transform:scale(1.05);
	transition:opacity 1s ease, transform 8s ease; pointer-events:none;
}
.pj-hero-slide.is-active{ opacity:1; transform:scale(1); pointer-events:auto; }
.pj-hero-content{ color:#fff; max-width:640px; }
.pj-hero-eyebrow{
	display:inline-block; background:rgba(255,255,255,.15); padding:5px 14px; border-radius:20px;
	font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; font-weight:600;
	animation:pjFadeUp .8s ease both;
}
.pj-hero-title{ color:#fff; font-size:clamp(28px,4vw,44px); font-weight:800; animation:pjFadeUp .9s .1s ease both; }
.pj-hero-desc{ color:#dce9f4; font-size:16px; margin:14px 0 26px; animation:pjFadeUp 1s .2s ease both; }
.pj-btn{
	display:inline-block; padding:12px 28px; border-radius:30px; font-weight:600; font-size:14.5px;
	transition:all var(--pj-transition); animation:pjFadeUp 1.1s .3s ease both;
}
.pj-btn-accent{ background:var(--pj-gold); color:var(--pj-navy); }
.pj-btn-accent:hover{ background:#e0b93a; transform:translateY(-2px); box-shadow:0 8px 18px rgba(201,162,39,.4); }

.pj-hero-dots{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.pj-hero-dots button{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.5); cursor:pointer; transition:var(--pj-transition); }
.pj-hero-dots button.is-active{ background:var(--pj-gold); width:24px; border-radius:5px; }
.pj-hero-arrow{
	position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); color:#fff;
	border:none; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:16px; z-index:10;
	transition:background var(--pj-transition);
}
.pj-hero-arrow:hover{ background:rgba(255,255,255,.3); }
.pj-hero-prev{ left:20px; } .pj-hero-next{ right:20px; }

@keyframes pjFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* =========================================================
   VIDEO HERO (autoplay + black fade overlay + text slider)
   ========================================================= */
.pj-video-hero{
	position:relative; height:620px; overflow:hidden; background-size:cover; background-position:center;
}

/* Backup force full-width — tambah class ini di Elementor: Section/Container > Advanced > CSS Classes,
   kalau setting "Full Width" Elementor sendiri tak cukup (contoh sebab wrapper induk lain hadkan lebar) */
.pj-full-bleed{
	width:100vw !important; max-width:100vw !important;
	margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
}
.pj-video-hero-bg{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
}
.pj-video-hero-overlay{
	position:absolute; inset:0; z-index:2;
	background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.9) 100%);
}
.pj-video-hero-content{
	position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:center; color:#fff;
}
.pj-video-hero-eyebrow{
	display:inline-block; background:rgba(255,255,255,.15); padding:5px 14px; border-radius:20px;
	font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; font-weight:600;
	width:fit-content; animation:pjFadeUp .8s ease both;
}
.pj-video-hero-title{
	color:#fff; font-size:clamp(28px,4vw,46px); font-weight:800; max-width:960px; animation:pjFadeUp .9s .1s ease both;
}
.pj-text-slider{ position:relative; height:34px; overflow:hidden; margin-top:26px; max-width:680px; animation:pjFadeUp 1s .2s ease both; }
.pj-text-slide{
	position:absolute; left:0; top:0; width:100%; opacity:0; transform:translateY(14px);
	transition:opacity .6s ease, transform .6s ease; font-size:16px; color:#eef3f8;
	border-left:3px solid var(--pj-gold); padding-left:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pj-text-slide.is-active{ opacity:1; transform:translateY(0); }

@media (max-width:780px){
	.pj-video-hero{ height:480px; }
	.pj-video-hero-bg{ display:block; } /* video kekal dimainkan di mobile (responsive) */
	.pj-text-slide{ white-space:normal; font-size:14.5px; }
	.pj-text-slider{ height:56px; }
}

@media (max-width:480px){
	.pj-video-hero{ height:400px; }
	.pj-video-hero-title{ font-size:clamp(22px,7vw,30px); }
	.pj-video-hero-eyebrow{ font-size:11px; padding:4px 12px; }
}

/* =========================================================
   QUICK ACCESS
   ========================================================= */
.pj-quickaccess{ margin-top:-40px; position:relative; z-index:20; }
.pj-quickaccess-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pj-qa-card{
	background:#fff; border-radius:var(--pj-radius); box-shadow:var(--pj-shadow); padding:24px 18px;
	text-align:center; font-weight:600; color:var(--pj-navy); display:flex; flex-direction:column; gap:10px; align-items:center;
	transition:transform var(--pj-transition), box-shadow var(--pj-transition);
}
.pj-qa-card:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(10,61,98,.15); }
.pj-qa-icon{ font-size:30px; }
.pj-qa-label{ font-size:14.5px; }

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.pj-section-heading{ text-align:center; max-width:640px; margin:0 auto 40px; }
.pj-eyebrow{ color:var(--pj-gold); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12.5px; }
.pj-section-heading h2{ font-size:clamp(24px,3vw,32px); margin-top:6px; }

/* =========================================================
   NEWS
   ========================================================= */
.pj-news{ padding:80px 0 60px; }
.pj-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pj-news-card{ background:#fff; border-radius:var(--pj-radius); overflow:hidden; box-shadow:var(--pj-shadow); transition:transform var(--pj-transition); }
.pj-news-card:hover{ transform:translateY(-6px); }
.pj-news-thumb img, .pj-news-thumb-placeholder{ width:100%; height:190px; object-fit:cover; background:linear-gradient(135deg,var(--pj-blue-light),#cfe0ee); }
.pj-news-body{ padding:20px; }
.pj-news-date{ color:var(--pj-text-muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
.pj-news-body h3{ font-size:18px; margin:8px 0; }
.pj-news-body h3 a{ color:var(--pj-navy); }
.pj-news-body p{ color:var(--pj-text-muted); font-size:14.5px; }
.pj-read-more{ font-weight:600; font-size:14px; }
.pj-read-more:hover{ color:var(--pj-navy); }

/* =========================================================
   STATS
   ========================================================= */
.pj-stats{ background:linear-gradient(135deg,var(--pj-navy),var(--pj-blue)); padding:60px 0; }
.pj-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.pj-counter{ display:block; font-family:var(--pj-font-head); font-size:clamp(28px,4vw,40px); font-weight:800; color:#fff; }
.pj-stat small{ color:#cfe0ee; font-size:13.5px; text-transform:uppercase; letter-spacing:.05em; }

/* =========================================================
   USEFUL LINKS
   ========================================================= */
.pj-links{ padding:70px 0 90px; }
.pj-links-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pj-link-card{
	background:#fff; border:1px solid var(--pj-border); border-radius:var(--pj-radius); padding:22px 14px;
	text-align:center; font-weight:600; color:var(--pj-text); transition:all var(--pj-transition);
}
.pj-link-card:hover{ border-color:var(--pj-gold); color:var(--pj-navy); transform:translateY(-4px); box-shadow:var(--pj-shadow); }

/* =========================================================
   FOOTER
   ========================================================= */
.pj-footer{ background:#08283F; color:#c8d8e4; padding-top:60px; }
.pj-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:40px; }
.footer-widget-title{ color:#fff; font-size:16px; margin-bottom:16px; }
.pj-footer-address p{ font-size:14px; line-height:1.8; }
.pj-footer-links{ list-style:none; padding:0; margin:0; }
.pj-footer-links li{ margin-bottom:10px; }
.pj-footer-links a{ color:#c8d8e4; font-size:14px; }
.pj-footer-links a:hover{ color:var(--pj-gold); }
.pj-social-icons{ display:flex; gap:10px; }
.pj-social-icons a{
	width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
	transition:background var(--pj-transition);
}
.pj-social-icons a:hover{ background:var(--pj-gold); color:var(--pj-navy); }
.pj-social-icons a svg{ display:block; }
.pj-visitor-count{ display:flex; gap:24px; }
.pj-visitor-count .pj-counter{ font-size:24px; color:#fff; }
.pj-visitor-count small{ color:#9fb6c7; font-size:12px; }

.pj-footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:18px 0; }
.pj-footer-bottom-inner{ display:flex; justify-content:space-between; font-size:13px; color:#9fb6c7; flex-wrap:wrap; gap:6px; }

.pj-back-to-top{
	position:fixed; bottom:26px; right:26px; width:46px; height:46px; border-radius:50%;
	background:var(--pj-navy); color:#fff; border:none; font-size:18px; cursor:pointer; z-index:400;
	opacity:0; visibility:hidden; transform:translateY(12px); transition:all var(--pj-transition);
	box-shadow:0 6px 18px rgba(10,61,98,.35);
}
.pj-back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.pj-back-to-top:hover{ background:var(--pj-gold); color:var(--pj-navy); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* =========================================================
   GENERIC PAGE / SINGLE
   ========================================================= */
.pj-page-wrap{ padding:60px 0 90px; }
.pj-page-thumb{ margin:0 0 30px; border-radius:var(--pj-radius); overflow:hidden; }
.pj-page-content{ font-size:16px; }
.pj-page-content img{ border-radius:var(--pj-radius); }
.pj-single-nav{ display:flex; justify-content:space-between; margin-top:40px; padding-top:20px; border-top:1px solid var(--pj-border); font-weight:600; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
	.pj-news-grid{ grid-template-columns:repeat(2,1fr); }
	.pj-links-grid{ grid-template-columns:repeat(3,1fr); }
	.pj-footer-grid{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   EKONOMI SNAPSHOT (Homepage — ringkas)
   ========================================================= */
.pj-econ-snapshot{
	padding:70px 0; position:relative;
	background-color:#F7F9FB;
	background-image:
		linear-gradient(135deg, rgba(10,61,98,.035) 25%, transparent 25%),
		linear-gradient(225deg, rgba(10,61,98,.035) 25%, transparent 25%);
	background-size:60px 60px;
}
.pj-econ-header{ text-align:center; max-width:680px; margin:0 auto 44px; }
.pj-econ-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:36px; }
.pj-econ-stat-card{
	background:#fff; border-radius:var(--pj-radius); padding:28px 20px; text-align:center;
	box-shadow:var(--pj-shadow); border-top:4px solid var(--pj-navy); transition:transform var(--pj-transition);
}
.pj-econ-stat-card:hover{ transform:translateY(-5px); }
.pj-econ-stat-card.is-accent{ border-top-color:var(--pj-gold); }
.pj-econ-stat-value{ font-family:var(--pj-font-head); font-size:clamp(24px,3vw,32px); font-weight:800; color:var(--pj-navy); display:block; }
.pj-econ-stat-label{ font-size:13px; color:var(--pj-text-muted); margin-top:6px; display:block; line-height:1.5; }
.pj-econ-stat-sub{ font-size:12px; color:var(--pj-gold); font-weight:700; margin-top:4px; display:block; }
.pj-econ-cta{ text-align:center; }
.pj-econ-cta .pj-btn{ background:var(--pj-navy); color:#fff; }
.pj-econ-cta .pj-btn:hover{ background:var(--pj-blue); }

/* =========================================================
   FULL INFOGRAPHIC PAGE (Data Ekonomi)
   ========================================================= */
.pj-econ-page{ padding:60px 0 90px; }
.pj-econ-block{ background:#fff; border-radius:var(--pj-radius); box-shadow:var(--pj-shadow); padding:36px; margin-bottom:34px; }
.pj-econ-block-title{ font-size:20px; margin-bottom:6px; }
.pj-econ-block-sub{ color:var(--pj-text-muted); font-size:14px; margin-bottom:26px; }

/* --- Bar chart: KDNK growth trend --- */
.pj-bar-chart{ display:flex; align-items:flex-end; gap:22px; height:220px; padding:0 10px 30px; position:relative; border-bottom:2px solid var(--pj-border); }
.pj-bar-group{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:6px; height:100%; position:relative; }
.pj-bar{
	width:22px; border-radius:4px 4px 0 0; position:relative; height:0;
	transition:height 1.1s cubic-bezier(.16,1,.3,1);
}
.pj-bar.is-johor{ background:linear-gradient(180deg,#e14848,#b5262d); }
.pj-bar.is-malaysia{ background:linear-gradient(180deg,var(--pj-blue),var(--pj-navy)); }
.pj-bar-value{
	position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:700; color:var(--pj-text);
	opacity:0; transition:opacity .4s ease .8s;
}
.pj-bar.is-visible .pj-bar-value{ opacity:1; }
.pj-bar-year{ position:absolute; bottom:-26px; left:50%; transform:translateX(-50%); font-size:12.5px; color:var(--pj-text-muted); white-space:nowrap; }
.pj-chart-legend{ display:flex; gap:22px; justify-content:center; margin-top:44px; font-size:13px; }
.pj-chart-legend span{ display:inline-flex; align-items:center; gap:7px; }
.pj-legend-dot{ width:11px; height:11px; border-radius:3px; display:inline-block; }

/* --- Donut chart: sector contribution --- */
.pj-donut-row{ display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
.pj-donut-wrap{ position:relative; width:220px; height:220px; flex-shrink:0; }
.pj-donut{
	width:100%; height:100%; border-radius:50%;
	transform:scale(.7) rotate(-90deg); opacity:0;
	transition:transform 1s cubic-bezier(.16,1,.3,1), opacity .8s ease;
}
.pj-donut.is-visible{ transform:scale(1) rotate(-90deg); opacity:1; }
.pj-donut-center{
	position:absolute; inset:18px; background:#fff; border-radius:50%; display:flex; flex-direction:column;
	align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px var(--pj-border);
}
.pj-donut-center strong{ font-family:var(--pj-font-head); font-size:26px; color:#b5262d; }
.pj-donut-center small{ font-size:11px; color:var(--pj-text-muted); text-align:center; padding:0 10px; }
.pj-donut-legend{ display:grid; grid-template-columns:1fr 1fr; gap:14px; flex:1; min-width:280px; }
.pj-donut-legend-item{ display:flex; align-items:center; gap:10px; font-size:14px; }
.pj-donut-legend-item strong{ color:var(--pj-navy); }

/* --- Ranking list: pelaburan negeri --- */
.pj-rank-list{ display:flex; flex-direction:column; gap:16px; }
.pj-rank-item{ display:grid; grid-template-columns:32px 130px 1fr 110px; align-items:center; gap:16px; }
.pj-rank-num{
	width:32px; height:32px; border-radius:50%; background:var(--pj-blue-light); color:var(--pj-navy);
	display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.pj-rank-item.is-first .pj-rank-num{ background:var(--pj-gold); color:#fff; }
.pj-rank-state{ font-weight:700; color:var(--pj-text); font-size:14.5px; }
.pj-rank-bar-track{ background:var(--pj-blue-light); border-radius:20px; height:14px; overflow:hidden; }
.pj-rank-bar-fill{ height:100%; border-radius:20px; width:0; transition:width 1.2s cubic-bezier(.16,1,.3,1); background:linear-gradient(90deg,var(--pj-blue),var(--pj-navy)); }
.pj-rank-item.is-first .pj-rank-bar-fill{ background:linear-gradient(90deg,#e0b93a,var(--pj-gold)); }
.pj-rank-amount{ font-weight:700; color:var(--pj-navy); font-size:14.5px; text-align:right; }

/* --- Sector growth list --- */
.pj-sector-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.pj-sector-card{ display:flex; gap:14px; padding:16px; border:1px solid var(--pj-border); border-radius:8px; align-items:flex-start; }
.pj-sector-dot{ width:14px; height:14px; border-radius:4px; flex-shrink:0; margin-top:4px; }
.pj-sector-card h4{ font-size:14.5px; margin:0 0 3px; color:var(--pj-text); }
.pj-sector-card .pj-sector-figure{ font-weight:800; color:var(--pj-navy); font-size:15px; }
.pj-sector-card p{ font-size:12.5px; color:var(--pj-text-muted); margin:4px 0 0; line-height:1.5; }

.pj-econ-source{ font-size:12px; color:var(--pj-text-muted); text-align:right; margin-top:10px; font-style:italic; }

/* --- Compact grid variant (kurang scroll — 2x2 kad) --- */
.pj-econ-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
.pj-econ-grid .pj-econ-block{ margin-bottom:0; height:100%; padding:26px; }
.pj-econ-grid .pj-econ-block-title{ font-size:16.5px; }
.pj-econ-grid .pj-econ-block-sub{ font-size:12.5px; margin-bottom:18px; }
.pj-econ-grid .pj-bar-chart{ height:150px; gap:10px; padding:0 4px 26px; }
.pj-econ-grid .pj-bar{ width:14px; }
.pj-econ-grid .pj-bar-value{ font-size:10px; top:-18px; }
.pj-econ-grid .pj-bar-year{ font-size:11px; bottom:-22px; }
.pj-econ-grid .pj-chart-legend{ margin-top:36px; font-size:12px; gap:16px; }
.pj-econ-grid .pj-donut-row{ gap:20px; }
.pj-econ-grid .pj-donut-wrap{ width:140px; height:140px; }
.pj-econ-grid .pj-donut-center{ inset:14px; }
.pj-econ-grid .pj-donut-center strong{ font-size:19px; }
.pj-econ-grid .pj-donut-center small{ font-size:9.5px; }
.pj-econ-grid .pj-donut-legend{ grid-template-columns:1fr; gap:9px; font-size:12.5px; min-width:auto; }
.pj-econ-grid .pj-rank-item{ grid-template-columns:24px 84px 1fr 74px; gap:8px; }
.pj-econ-grid .pj-rank-num{ width:24px; height:24px; font-size:12px; }
.pj-econ-grid .pj-rank-state{ font-size:13px; }
.pj-econ-grid .pj-rank-amount{ font-size:13px; }
.pj-econ-grid .pj-rank-list{ gap:13px; }
.pj-econ-grid .pj-sector-grid{ grid-template-columns:1fr; gap:11px; }
.pj-econ-grid .pj-sector-card{ padding:12px; }
.pj-econ-grid .pj-sector-card h4{ font-size:13px; }
.pj-econ-grid .pj-sector-card p{ font-size:11.5px; }
.pj-econ-grid .pj-econ-source{ font-size:11px; }

@media (max-width:960px){
	.pj-econ-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   LAPORAN EKONOMI TAHUNAN (Report Cards — Homepage)
   ========================================================= */
.pj-report-section{ padding:70px 0; background:var(--pj-bg); }
.pj-report-header{ text-align:center; max-width:680px; margin:0 auto 40px; }
.pj-report-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.pj-report-card{
	background:#fff; border-radius:var(--pj-radius); box-shadow:var(--pj-shadow); overflow:hidden;
	display:flex; gap:22px; padding:26px; transition:transform var(--pj-transition), box-shadow var(--pj-transition);
}
.pj-report-card:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(10,61,98,.16); }
.pj-report-thumb{
	flex-shrink:0; width:88px; height:112px; border-radius:6px; position:relative;
	background:linear-gradient(160deg,var(--pj-navy),var(--pj-blue));
	display:flex; align-items:center; justify-content:center;
}
.pj-report-thumb::before{
	content:''; position:absolute; top:0; right:0; width:0; height:0;
	border-style:solid; border-width:0 18px 18px 0; border-color:transparent rgba(255,255,255,.85) transparent transparent;
}
.pj-report-thumb.is-latest{ background:linear-gradient(160deg,#e0b93a,var(--pj-gold)); }
.pj-report-thumb-year{ color:#fff; font-family:var(--pj-font-head); font-weight:800; font-size:20px; letter-spacing:.02em; }
.pj-report-body{ flex:1; }
.pj-report-tag{
	display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
	background:var(--pj-blue-light); color:var(--pj-navy); padding:3px 10px; border-radius:12px; margin-bottom:8px;
}
.pj-report-tag.is-latest{ background:#fbf0d3; color:#8a6a10; }
.pj-report-title{ font-size:16.5px; margin:0 0 8px; color:var(--pj-navy); }
.pj-report-desc{ font-size:13px; color:var(--pj-text-muted); line-height:1.6; margin:0 0 14px; }
.pj-report-meta{ font-size:11.5px; color:var(--pj-text-muted); margin-bottom:12px; display:flex; gap:12px; align-items:center; }
.pj-report-download{
	display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--pj-navy);
	border:1.5px solid var(--pj-navy); border-radius:24px; padding:7px 16px; transition:all var(--pj-transition);
}
.pj-report-download:hover{ background:var(--pj-navy); color:#fff; }
.pj-report-download svg{ width:14px; height:14px; }

@media (max-width:780px){
	.pj-report-grid{ grid-template-columns:1fr; }
	.pj-report-card{ flex-direction:column; }
	.pj-report-thumb{ width:64px; height:82px; }
}

/* =========================================================
   PERKHIDMATAN — Senarai Fail Muat Turun
   ========================================================= */
.pj-services-hero{ background:linear-gradient(135deg,var(--pj-navy),var(--pj-blue)); padding:56px 0 68px; color:#fff; }
.pj-services-hero h1{ color:#fff; font-size:clamp(24px,3.2vw,34px); margin-bottom:8px; }
.pj-services-hero p{ color:#d7e6f0; max-width:640px; font-size:14.5px; }

.pj-services-page{ padding:0 0 90px; }
.pj-services-toolbar{
	background:#fff; border-radius:var(--pj-radius); box-shadow:var(--pj-shadow);
	padding:22px; margin-top:-34px; position:relative; z-index:5; margin-bottom:34px;
}
.pj-services-search{ position:relative; margin-bottom:16px; }
.pj-services-search input{
	width:100%; padding:12px 16px 12px 42px; border-radius:8px; border:1.5px solid var(--pj-border);
	font-family:var(--pj-font-body); font-size:14.5px; color:var(--pj-text); transition:border-color var(--pj-transition);
}
.pj-services-search input:focus{ outline:none; border-color:var(--pj-blue); }
.pj-services-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--pj-text-muted); }
.pj-services-toc{ display:flex; flex-wrap:wrap; gap:8px; }
.pj-services-toc a{
	font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:16px; background:var(--pj-blue-light);
	color:var(--pj-navy); transition:all var(--pj-transition);
}
.pj-services-toc a:hover{ background:var(--pj-navy); color:#fff; }

.pj-services-category{ background:#fff; border-radius:var(--pj-radius); box-shadow:var(--pj-shadow); margin-bottom:16px; overflow:hidden; scroll-margin-top:90px; }
.pj-cat-header{
	display:flex; align-items:center; justify-content:space-between; padding:20px 24px; cursor:pointer;
	background:#fff; transition:background var(--pj-transition);
}
.pj-cat-header:hover{ background:var(--pj-blue-light); }
.pj-cat-header-left{ display:flex; align-items:center; gap:12px; }
.pj-cat-title{ font-family:var(--pj-font-head); font-weight:700; color:var(--pj-navy); font-size:15.5px; margin:0; }
.pj-cat-count{ font-size:11.5px; background:var(--pj-blue-light); color:var(--pj-navy); padding:2px 10px; border-radius:12px; font-weight:700; }
.pj-cat-chevron{ width:20px; height:20px; color:var(--pj-navy); transition:transform var(--pj-transition); flex-shrink:0; }
.pj-services-category.is-open .pj-cat-chevron{ transform:rotate(180deg); }
.pj-cat-body{
	max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1);
}
.pj-services-category.is-open .pj-cat-body{ max-height:3000px; }
.pj-cat-body-inner{ padding:6px 24px 18px; }

.pj-file-row{
	display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 6px;
	border-top:1px solid var(--pj-border); transition:background var(--pj-transition);
}
.pj-file-row:hover{ background:var(--pj-blue-light); }
.pj-file-row.is-hidden{ display:none; }
.pj-file-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.pj-file-icon{ width:34px; height:34px; border-radius:6px; background:var(--pj-blue-light); color:var(--pj-navy); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; font-weight:800; }
.pj-file-name{ font-size:14px; color:var(--pj-text); font-weight:600; overflow-wrap:anywhere; }
.pj-file-download{
	flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
	color:var(--pj-navy); border:1.3px solid var(--pj-navy); border-radius:20px; padding:6px 14px;
	transition:all var(--pj-transition); white-space:nowrap;
}
.pj-file-download:hover{ background:var(--pj-navy); color:#fff; }
.pj-file-download.is-disabled{ opacity:.4; pointer-events:none; border-color:var(--pj-text-muted); color:var(--pj-text-muted); }
.pj-file-download svg{ width:13px; height:13px; }

.pj-services-empty{ text-align:center; padding:50px 20px; color:var(--pj-text-muted); display:none; }
.pj-services-empty.is-visible{ display:block; }

@media (max-width:780px){
	.pj-file-row{ flex-direction:column; align-items:flex-start; gap:10px; }
	.pj-file-download{ align-self:flex-end; }
}

@media (max-width:780px){
	.pj-econ-stats-grid{ grid-template-columns:1fr 1fr; }
	.pj-donut-row{ justify-content:center; }
	.pj-donut-legend{ grid-template-columns:1fr; }
	.pj-sector-grid{ grid-template-columns:1fr; }
	.pj-rank-item{ grid-template-columns:26px 90px 1fr 80px; gap:10px; }
	.pj-econ-block{ padding:22px; }
	.pj-bar-chart{ gap:10px; }
	.pj-topbar-inner{ font-size:12px; }
	.pj-nav{
		position:fixed; top:0; right:-100%; width:78%; max-width:320px; height:100vh; background:#fff;
		box-shadow:-8px 0 24px rgba(0,0,0,.12); padding:90px 26px 26px; transition:right var(--pj-transition); z-index:600;
	}
	.pj-nav.is-open{ right:0; }
	.pj-nav-overlay{
		display:none; position:fixed; inset:0; background:rgba(10,20,30,.45); z-index:599;
	}
	.pj-nav-overlay.is-open{ display:block; }
	.pj-nav-menu{ flex-direction:column; gap:4px; }
	.pj-nav-menu ul{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; padding-left:14px; display:none; }
	.pj-nav-menu li.is-open > ul{ display:block; }
	.pj-menu-toggle{ display:flex; }
	.pj-hero-slides, .pj-hero{ min-height:auto; height:420px; }
	.pj-quickaccess-grid{ grid-template-columns:1fr 1fr; }
	.pj-stats-grid{ grid-template-columns:1fr 1fr; }
	.pj-links-grid{ grid-template-columns:1fr 1fr; }
	.pj-news-grid{ grid-template-columns:1fr; }
	.pj-footer-grid{ grid-template-columns:1fr; }
}

@media (max-width:480px){
	.pj-topbar-right{ display:none; }
	.pj-hero-title{ font-size:26px; }
}