/* =========================================================
ASWOGARD GREEN SCHOOL
CERITA KITA
========================================================= */

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;

 
font-family: 'Outfit', sans-serif;

background: #f8faf6;

color: #354435;
 

}

img {
max-width: 100%;
}

a {
text-decoration: none;
}

/* =========================================================
CONTAINER
========================================================= */

.cerita-container {
width: min(1120px, calc(100% - 40px));

 
margin: auto;
 

}

/* =========================================================
HEADER
========================================================= */

.cerita-header {
background: rgba(255,255,255,0.96);

 
border-bottom: 1px solid #edf1eb;

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

}

.cerita-nav {
min-height: 76px;

 
display: flex;
align-items: center;
justify-content: space-between;
 

}

.cerita-brand {
display: flex;
align-items: center;
gap: 12px;

 
color: #344834;
 

}

.brand-symbol {
width: 42px;
height: 42px;

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

background: #f0f5ed;

border-radius: 50%;

font-size: 21px;
 

}

.cerita-brand strong {
display: block;

 
font-size: 15px;
letter-spacing: 1.5px;
 

}

.cerita-brand small {
display: block;

 
margin-top: 2px;

color: #8a9488;

font-size: 11px;
 

}

.back-home {
color: #71836e;

 
font-size: 14px;
font-weight: 500;

transition: 0.25s;
 

}

.back-home:hover {
color: #40583e;

 
transform: translateX(-3px);
 

}

/* =========================================================
HERO
========================================================= */

.cerita-hero {
padding: 95px 0 80px;

 
text-align: center;

background:
    radial-gradient(
        circle at 20% 20%,
        rgba(183,205,175,0.22),
        transparent 35%
    ),
    radial-gradient(
        circle at 80% 40%,
        rgba(221,203,174,0.18),
        transparent 35%
    ),
    #f8faf6;
 

}

.cerita-eyebrow {
font-size: 11px;

 
font-weight: 700;

letter-spacing: 3px;

color: #82967d;
 

}

.cerita-hero h1 {
margin: 15px 0 10px;

 
font-size: clamp(48px, 7vw, 76px);

line-height: 1;

font-weight: 600;

color: #354935;
 

}

.cerita-hero p {
margin: 0 auto;

 
max-width: 520px;

color: #7a8579;

font-size: 17px;

line-height: 1.7;
 

}

.hero-decoration {
margin-top: 28px;

 
color: #9aac92;

font-size: 17px;
 

}

/* =========================================================
FILTER
========================================================= */

.cerita-filter {
padding: 0 0 55px;

 
background: #f8faf6;
 

}

.filter-list {
display: flex;

 
justify-content: center;

flex-wrap: wrap;

gap: 10px;
 

}

.filter-button {
border: 1px solid #dfe7db;

 
background: #ffffff;

color: #71806e;

padding: 10px 18px;

border-radius: 50px;

font-family: inherit;

font-size: 13px;

cursor: pointer;

transition: 0.25s;
 

}

.filter-button:hover {
border-color: #b9cbb2;

 
transform: translateY(-2px);
 

}

.filter-button.active {
background: #71886b;

 
border-color: #71886b;

color: #ffffff;

box-shadow:
    0 7px 18px rgba(83,105,78,0.15);
 

}

/* =========================================================
MAIN
========================================================= */

.cerita-main {
padding: 20px 0 100px;
}

/* =========================================================
FEATURED
========================================================= */

.cerita-featured {
display: grid;

 
grid-template-columns: 1.15fr 0.85fr;

background: #ffffff;

border-radius: 30px;

overflow: hidden;

box-shadow:
    0 20px 55px rgba(55,75,53,0.08);
 

}

.featured-image {
min-height: 520px;

 
position: relative;

overflow: hidden;
 

}

.featured-image img {
width: 100%;
height: 100%;

 
object-fit: cover;

display: block;

transition: transform 0.7s ease;
 

}

.cerita-featured:hover .featured-image img {
transform: scale(1.04);
}

.featured-label {
position: absolute;

 
top: 24px;
left: 24px;

padding: 8px 14px;

border-radius: 50px;

background: rgba(255,255,255,0.92);

color: #64765f;

font-size: 10px;

font-weight: 700;

letter-spacing: 1.5px;
 

}

.featured-content {
padding: 55px 50px;

 
display: flex;

flex-direction: column;

justify-content: center;
 

}

.cerita-meta {
display: flex;

 
align-items: center;

gap: 12px;

margin-bottom: 16px;

font-size: 12px;

color: #8b9588;
 

}

.cerita-meta span {
color: #71866c;

 
font-weight: 600;
 

}

.cerita-meta time::before {
content: "•";

 
margin-right: 12px;

color: #c3cabe;
 

}

.cerita-category {
display: inline-block;

 
margin-bottom: 13px;

color: #a18d69;

font-size: 10px;

font-weight: 700;

letter-spacing: 2px;
 

}

.featured-content h2 {
margin: 0 0 18px;

 
font-size: 39px;

line-height: 1.18;

font-weight: 600;

color: #344634;
 

}

.featured-content p {
margin: 0 0 27px;

 
color: #747e73;

font-size: 15px;

line-height: 1.8;
 

}

.read-more {
display: inline-flex;

 
align-items: center;

gap: 10px;

align-self: flex-start;

color: #5f7959;

font-size: 13px;

font-weight: 600;

transition: 0.25s;
 

}

.read-more span {
font-size: 18px;

 
transition: 0.25s;
 

}

.read-more:hover {
color: #354d31;
}

.read-more:hover span {
transform: translateX(5px);
}

/* =========================================================
HEADING
========================================================= */

.cerita-heading {
padding: 95px 0 35px;
}

.cerita-heading span {
color: #8a9c84;

 
font-size: 10px;

font-weight: 700;

letter-spacing: 2.5px;
 

}

.cerita-heading h2 {
max-width: 550px;

 
margin: 12px 0 0;

font-size: 34px;

line-height: 1.25;

font-weight: 500;

color: #3d503c;
 

}

/* =========================================================
CARD GRID
========================================================= */

.cerita-grid {
display: grid;

 
grid-template-columns: repeat(2, 1fr);

gap: 28px;
 

}

.cerita-card {
background: #ffffff;

 
border-radius: 25px;

overflow: hidden;

box-shadow:
    0 14px 40px rgba(55,75,53,0.06);

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
 

}

.cerita-card:hover {
transform: translateY(-6px);

 
box-shadow:
    0 22px 50px rgba(55,75,53,0.11);
 

}

.card-image {
height: 280px;

 
overflow: hidden;
 

}

.card-image img {
width: 100%;
height: 100%;

 
object-fit: cover;

display: block;

transition: transform 0.6s ease;
 

}

.cerita-card:hover .card-image img {
transform: scale(1.05);
}

.card-content {
padding: 30px 32px 34px;
}

.card-content h3 {
margin: 0 0 13px;

 
font-size: 26px;

line-height: 1.25;

font-weight: 600;

color: #3b4c3a;
 

}

.card-content p {
margin: 0 0 25px;

 
color: #7a8378;

font-size: 14px;

line-height: 1.7;
 

}

/* =========================================================
CLOSING
========================================================= */

.cerita-closing {
padding: 90px 20px 0;

 
text-align: center;
 

}

.cerita-closing span {
font-size: 27px;
}

.cerita-closing p {
max-width: 520px;

 
margin: 15px auto 0;

color: #899286;

font-size: 15px;

line-height: 1.8;
 

}

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

.cerita-footer {
padding: 45px 0;

 
text-align: center;

background: #edf3e9;

color: #71806d;
 

}

.cerita-footer strong {
display: block;

 
font-size: 13px;

letter-spacing: 2px;
 

}

.cerita-footer p {
margin: 8px 0 20px;

 
font-size: 13px;
 

}

.cerita-footer span {
font-size: 11px;

 
color: #929c90;
 

}

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

@media (max-width: 850px) {

 
.cerita-featured {
    grid-template-columns: 1fr;
}

.featured-image {
    min-height: 360px;
}

.featured-content {
    padding: 40px 30px;
}

.featured-content h2 {
    font-size: 32px;
}
 

}

@media (max-width: 650px) {

 
.cerita-container {
    width: min(100% - 28px, 1120px);
}

.cerita-hero {
    padding: 70px 0 60px;
}

.cerita-grid {
    grid-template-columns: 1fr;
}

.cerita-heading {
    padding-top: 70px;
}

.cerita-heading h2 {
    font-size: 28px;
}

.card-image {
    height: 240px;
}

.cerita-meta {
    flex-wrap: wrap;
}
 

}