/* ==========================================================
   SECTION SPACING (sama seperti product.css)
   ========================================================== */

.section{
    padding:60px 0;
}

.section h2{
    font-size:clamp(1.6rem,3vw,2.2rem);
    font-weight:900;
    margin:60px 0 28px;
}

/* ==========================================================
   PAGE HEADER (list page)
   ========================================================== */

.page-header{
    padding:48px 0 24px;
    border-bottom:1px solid var(--color-border);
    margin-bottom:0;
}

.page-header h1{
    font-size:clamp(1.8rem,4vw,2.8rem);
    font-weight:900;
    line-height:1.15;
    letter-spacing:-.02em;
    margin:0 0 20px;
}

.page-header p{
    font-size:.95rem;
    line-height:1.75;
    color:#4b5563;
    max-width:520px;
    margin:0;
}

.empty-state{
    text-align:center;
    padding:80px 0;
}

.empty-state h3{
    font-size:1.4rem;
    font-weight:800;
    margin:0 0 10px;
}

.empty-state p{
    color:#6b7280;
    margin:0 0 20px;
}

/* ==========================================================
   LIST GRID + CARD (ccard, gaya sama seperti .ncard)
   ========================================================== */

.content-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    padding:64px 0;
}

@media(max-width:900px){
    .content-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){
    .content-grid{ grid-template-columns:1fr; }
}

.ccard{
    display:block;
    color:inherit;
}

.ccard__img{
    width:100%;
    aspect-ratio:3/2;
    object-fit:cover;
    border-radius:8px;
    display:block;
    margin-bottom:16px;
    transition:transform .35s;
}

.ccard:hover .ccard__img{
    transform:scale(1.03);
}

.ccard__tag{
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--color-brand);
    margin-bottom:8px;
}

.ccard__title{
    font-size:1rem;
    font-weight:700;
    line-height:1.4;
    margin:0 0 14px;
    transition:color .2s;
}

.ccard:hover .ccard__title{
    color:var(--color-brand);
}

.ccard__read{
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--color-brand);
    display:inline-flex;
    align-items:center;
    gap:5px;
    transition:gap .2s;
}

.ccard:hover .ccard__read{
    gap:10px;
}

/* ==========================================================
   DETAIL: HERO (dark background)
   ========================================================== */

.content-hero{
    background:var(--color-company);
    color:#fff;
    padding:56px 0 48px;
    border-bottom:3px solid var(--color-brand);
}

.content-hero__tag{
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--color-brand-light);
    margin-bottom:14px;
}

.content-hero__title{
    font-size:clamp(1.8rem,4vw,3rem);
    font-weight:900;
    line-height:1.1;
    letter-spacing:-.03em;
    margin:0 0 12px;
}

.content-hero__date{
    font-size:.75rem;
    color:#9ca3af;
    font-weight:600;
    letter-spacing:.08em;
}

/* ==========================================================
   DETAIL: LEAD (gambar kiri + ringkasan kanan)
   ========================================================== */

.content-lead{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
}

@media(max-width:768px){
    .content-lead{ grid-template-columns:1fr; gap:28px; }
}

.content-lead__img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

.content-lead__intro{
    font-size:1.05rem;
    font-weight:600;
    line-height:1.7;
    color:#1a1a1a;
    margin:0;
}

/* ==========================================================
   DETAIL: BODY
   ========================================================== */

.content-body{
    max-width:820px;
    margin:0 auto;
}

.content-body p{
    font-size:.95rem;
    line-height:1.8;
    color:#374151;
    text-align:justify;
    margin:0 0 20px;
}

.content-body h3{
    font-size:1.1rem;
    font-weight:800;
    letter-spacing:-.01em;
    margin:36px 0 12px;
}

.back-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--color-brand);
    margin-bottom:40px;
    transition:gap .2s;
}

.back-link:hover{
    gap:12px;
}

/* ==========================================================
   DETAIL: GALLERY (identik product.css)
   ========================================================== */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

@media(max-width:768px){
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
    .gallery-grid{ grid-template-columns:1fr; }
}

.gallery-item{
    border-radius:10px;
    overflow:hidden;
    aspect-ratio:4/3;
    cursor:pointer;
}

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s;
}

.gallery-item:hover img{
    transform:scale(1.05);
}

/* ==========================================================
   LIGHTBOX
   ========================================================== */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(17,17,17,.75);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    z-index:9999;
}

.lightbox img{
    max-width:90vw;
    max-height:85vh;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.lightbox__close{
    position:fixed;
    top:24px;
    right:32px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s;
}

.lightbox__close:hover{
    background:rgba(255,255,255,.3);
}