.sejarah-page{
background:#f1f5f9;
font-family:'Inter',sans-serif;
overflow-x:hidden;
color:#1e293b;
}

/* =========================
HERO 4K MODERN
========================= */

.sejarah-hero{

position:relative;

padding-top:100px;
padding-bottom:70px;

background:
linear-gradient(
135deg,
rgba(15,23,42,.95),
rgba(30,41,59,.92),
rgba(30,64,175,.88),
rgba(220,38,38,.82)
),

url('/images/bg-jdih.jpg');

background-size:cover;
background-position:center;
background-attachment:fixed;

overflow:hidden;
}

.sejarah-hero::before{

content:'';

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(255,255,255,.12),
transparent 45%
);

}

.sejarah-hero-box{

position:relative;

z-index:2;

max-width:100%;

margin:auto;

text-align:center;
}

.sejarah-title{

font-size:clamp(4.5rem,9vw,8.5rem);

font-weight:900;

line-height:1.05;

letter-spacing:-3px;

color:white;

margin-bottom:28px;

text-shadow:
0 8px 30px rgba(0,0,0,.35);
}

.sejarah-subtitle{

max-width:1600px;

margin:auto;

font-size:clamp(1.5rem,2.4vw,2.1rem);

line-height:1.6;

font-weight:500;

color:rgba(255,255,255,.92);
}

/* =========================
CONTENT
========================= */

.sejarah-content-section{

padding:45px 0;
}

.sejarah-card{

background:white;

border-radius:36px;

padding:55px 70px;

max-width:100%;

margin:auto;

box-shadow:
0 20px 60px rgba(15,23,42,.08);

border:
1px solid rgba(226,232,240,.8);
}

/* TITLE */

.sejarah-card h2{

font-size:clamp(2.8rem,5vw,4rem);

font-weight:800;

color:#991b1b;

margin-top:40px;
margin-bottom:18px;

position:relative;
}

.sejarah-card h2::after{

content:'';

display:block;

width:90px;
height:6px;

border-radius:999px;

margin-top:14px;

background:
linear-gradient(
90deg,
#dc2626,
#2563eb
);
}

/* PARAGRAPH */

.sejarah-card p{

font-size:clamp(1.35rem,1.8vw,1.9rem);

line-height:1.7;

font-weight:500;

text-align:justify;
letter-spacing:.2px;

color:#334155;

margin-bottom:8px;
}

/* LIST */

.sejarah-card ul{

padding-left:30px;

margin-top:20px;
margin-bottom:40px;
}

.sejarah-card li{

font-size:clamp(1.3rem,1.7vw,1.8rem);

line-height:1.6;

margin-bottom:8px;

color:#334155;
}

/* =========================
TIMELINE MODERN
========================= */

.timeline-modern{

display:flex;

flex-direction:column;

gap:20px;

margin-top:40px;
}

.timeline-card{

display:flex;

gap:26px;

align-items:flex-start;

padding:24px;

border-radius:28px;

background:
linear-gradient(
135deg,
#ffffff,
#f8fafc
);

border:
1px solid rgba(226,232,240,.9);

box-shadow:
0 10px 30px rgba(15,23,42,.05);

transition:.35s ease;
}

.timeline-card:hover{

transform:
translateY(-6px);

box-shadow:
0 20px 40px rgba(37,99,235,.12);
}

.timeline-icon{

width:70px;
height:70px;

min-width:70px;

border-radius:50%;

display:flex;

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

font-size:28px;

color:white;

background:
linear-gradient(
135deg,
#2563eb,
#dc2626
);

box-shadow:
0 10px 24px rgba(37,99,235,.28);
}

.timeline-content{

flex:1;
}

.timeline-year{

font-size:48px;

font-weight:900;

margin-bottom:10px;

color:#dc2626;
}

.timeline-text{

font-size:clamp(1.3rem,1.7vw,1.8rem);

line-height:1.6;

font-weight:500;

color:#334155;
}

/* =========================
PEJABAT
========================= */

.nama-pejabat{

font-weight:800;

color:#1d4ed8;
}

/* =========================
MOBILE
========================= */

@media(max-width:992px){

.sejarah-hero{

padding-top:120px;
padding-bottom:90px;

background-attachment:scroll;
}

.sejarah-card{

padding:45px 28px;
}

.timeline-card{

flex-direction:column;
}

.timeline-icon{

width:60px;
height:60px;

min-width:60px;

font-size:22px;
}
}

@media(max-width:768px){

.sejarah-title{

letter-spacing:-1px;
}

.sejarah-subtitle{

line-height:1.8;
}

.sejarah-card{

border-radius:24px;
}

.sejarah-card h2{

margin-top:50px;
}

.timeline-year{

font-size:24px;
}
}


@media(max-width:1400px){

.sejarah-card{
padding:70px 60px;
}

}

@media(max-width:768px){

.sejarah-card{
padding:35px 20px;
}

.sejarah-card p,
.timeline-text,
.sejarah-card li{

text-align:left;
}

}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

.sejarah-page{
font-family:'Poppins',sans-serif;
}

.sejarah-title{
animation:fadeDown 1.2s ease;
font-weight:800;
}

.sejarah-subtitle{
animation:fadeUp 1.8s ease;
}

@keyframes fadeDown{
0%{
opacity:0;
transform:translateY(-80px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(80px);
}
100%{
opacity:1;
transform:translateY(0);
}
}


/* =====================================
FORCE FONT FINAL
===================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Nunito+Sans:wght@300;400;500;600;700;800&display=swap');

.sejarah-page{
font-family:'Nunito Sans',sans-serif;
}

.sejarah-title,
.sejarah-card h2,
.paragraf-awal{
font-family:'Lora',serif;
}

.sejarah-card p,
.sejarah-card li,
.timeline-text,
.sejarah-subtitle{
font-family:'Nunito Sans',sans-serif;
font-weight:500;
}