/* ==========================================================================
   HALAMAN PUSAT-PUSAT LP2M UIN AR-RANIRY (PERSIS SEPERTI TAMPILAN RESMI)
   ========================================================================== */

.centers-page-wrapper {
background: var(--lp2m-white);
min-height: 80vh;
padding-bottom: 4rem;
}

/* Breadcrumb Bar */
.centers-top-bar {
background: var(--lp2m-green-surface-white);
border-bottom: 1px solid rgba(var(--lp2m-green-brand-rgb), 0.08);
padding: 0.85rem 0;
}
.centers-top-breadcrumb {
font-size: 0.85rem;
color: var(--lp2m-gray-400);
margin: 0;
}
.centers-top-breadcrumb a {
color: var(--lp2m-green-brand);
text-decoration: none;
font-weight: 500;
}
.centers-top-breadcrumb a:hover {
color: var(--lp2m-green-brand);
text-decoration: underline;
}
.centers-top-breadcrumb .sep {
margin: 0 0.5rem;
color: var(--lp2m-gray-300);
}
.centers-top-breadcrumb .current {
color: var(--lp2m-gray-600);
font-weight: 600;
}

/* Main Section */
.centers-main-section {
padding-top: 2.5rem;
}

.centers-header-accent {
width: 4px;
height: 24px;
border-radius: 4px;
background: linear-gradient(to bottom, var(--lp2m-green-brand), var(--lp2m-gold));
}

.centers-unit-label {
letter-spacing: 3px;
font-size: 0.82rem;
font-weight: 700;
color: var(--lp2m-gray-400);
text-transform: uppercase;
}

.centers-main-title {
font-size: clamp(2rem, 3.5vw, 2.6rem);
font-weight: 800;
color: var(--lp2m-green-deep);
line-height: 1.2;
margin-top: 0.25rem;
margin-bottom: 0.75rem;
}

.centers-main-desc {
font-size: 1.05rem;
color: var(--lp2m-gray-400);
max-width: 820px;
line-height: 1.6;
margin-bottom: 2.5rem;
}

/* Kartu Pusat-Pusat (Persis Screenshot) */
.center-unit-card {
background: var(--lp2m-white);
border: 1px solid rgba(var(--lp2m-green-brand-rgb), 0.12);
border-radius: 16px;
padding: 1.75rem;
box-shadow: 0 4px 18px rgba(var(--lp2m-green-deep-rgb), 0.05);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
text-decoration: none;
}

.center-unit-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 32px rgba(var(--lp2m-green-deep-rgb), 0.12);
border-color: rgba(var(--lp2m-gold-rgb), 0.4);
text-decoration: none;
}

.center-unit-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}

.center-unit-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid rgba(var(--lp2m-green-brand-rgb), 0.15);
padding: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease;
}

.center-unit-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
}

.center-unit-icon--brand-soft,
.center-unit-icon--bright-soft,
.center-unit-icon--gold-soft,
.center-unit-icon--brand-pale,
.center-unit-icon--deep-soft {
background: #ffffff;
}

.center-unit-badge--brand-soft {
color: var(--lp2m-green-brand);
background: rgba(var(--lp2m-green-brand-rgb), 0.1);
}
.center-unit-badge--bright-soft {
color: var(--lp2m-green-bright);
background: rgba(var(--lp2m-green-bright-rgb), 0.1);
}
.center-unit-badge--gold-soft {
color: var(--lp2m-gold-text);
background: rgba(var(--lp2m-gold-rgb), 0.15);
}
.center-unit-badge--brand-pale {
color: var(--lp2m-green-brand);
background: rgba(var(--lp2m-green-brand-rgb), 0.15);
}
.center-unit-badge--deep-soft {
color: var(--lp2m-green-deep);
background: rgba(var(--lp2m-green-deep-rgb), 0.1);
}

.center-unit-card:hover .center-unit-icon {
transform: scale(1.1) rotate(-4deg);
}

.center-unit-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 0.35rem 0.75rem;
border-radius: 50rem;
letter-spacing: 0.5px;
text-transform: uppercase;
}

.center-unit-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--lp2m-green-deep);
line-height: 1.4;
margin-bottom: 0.65rem;
transition: color 0.2s ease;
}

.center-unit-card:hover .center-unit-title {
color: var(--lp2m-gold-text);
text-decoration: underline;
}

.center-unit-desc {
font-size: 0.9rem;
color: var(--lp2m-gray-500);
line-height: 1.6;
margin-bottom: 1.25rem;
flex: 1;
}

/* Tasks / Program Pokok Preview */
.center-unit-tasks {
background: var(--lp2m-green-surface-white);
border-radius: 10px;
padding: 0.75rem 0.9rem;
margin-bottom: 1.25rem;
border: 1px solid rgba(var(--lp2m-green-brand-rgb), 0.06);
}
.center-unit-tasks-title {
font-size: 0.75rem;
font-weight: 700;
color: var(--lp2m-green-brand);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.35rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
.center-unit-tasks-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.82rem;
color: var(--lp2m-gray-450);
}
.center-unit-tasks-list li {
padding: 0.2rem 0;
display: flex;
align-items: baseline;
gap: 0.4rem;
line-height: 1.4;
}
.center-unit-tasks-list li i {
color: var(--lp2m-green-strong);
font-size: 0.75rem;
flex-shrink: 0;
}

/* Action Link */
.center-unit-link {
font-size: 0.875rem;
font-weight: 700;
color: var(--lp2m-green-brand);
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: gap 0.2s ease, color 0.2s ease;
margin-top: auto;
}

.center-unit-card:hover .center-unit-link {
gap: 0.75rem;
color: var(--lp2m-gold-text);
}

/* Strip Info Bawah */
.centers-footer-strip {
background: linear-gradient(135deg, var(--lp2m-green-surface-light) 0%, var(--lp2m-green-surface) 100%);
border: 1px solid rgba(var(--lp2m-green-brand-rgb), 0.15);
border-radius: 16px;
padding: 1.5rem 2rem;
margin-top: 3.5rem;
}
.centers-footer-strip h6 {
color: var(--lp2m-green-deep);
font-weight: 700;
margin-bottom: 0.35rem;
}
.centers-footer-strip p {
color: var(--lp2m-gray-500);
font-size: 0.9rem;
margin: 0;
}

/* Dark Mode */
.dark .centers-page-wrapper { background: var(--lp2m-dark-bg); }
.dark .centers-top-bar { background: var(--lp2m-dark-topbar); border-bottom-color: rgba(var(--lp2m-white-rgb), 0.06); }
.dark .centers-top-breadcrumb a { color: var(--lp2m-teal); }
.dark .centers-top-breadcrumb .current { color: var(--lp2m-gray-200); }
.dark .centers-main-title { color: var(--lp2m-dark-text); }
.dark .centers-main-desc { color: var(--lp2m-bluegray-400); }
.dark .center-unit-icon--brand-soft,
.dark .center-unit-badge--brand-soft,
.dark .center-unit-icon--brand-pale,
.dark .center-unit-badge--brand-pale,
.dark .center-unit-icon--bright-soft,
.dark .center-unit-badge--bright-soft,
.dark .center-unit-icon--deep-soft,
.dark .center-unit-badge--deep-soft { color: var(--lp2m-green-success-light); }
.dark .center-unit-icon--gold-soft,
.dark .center-unit-badge--gold-soft { color: var(--lp2m-gold-light); }
.dark .center-unit-card { background: var(--lp2m-gray-800); border-color: rgba(var(--lp2m-white-rgb), 0.08); box-shadow: 0 4px 18px rgba(var(--lp2m-black-rgb), 0.3); }
.dark .center-unit-card:hover { border-color: rgba(var(--lp2m-teal-rgb), 0.4); box-shadow: 0 12px 32px rgba(var(--lp2m-black-rgb), 0.4); }
.dark .center-unit-title { color: var(--lp2m-blue-500); }
.dark .center-unit-card:hover .center-unit-title { color: var(--lp2m-teal); }
.dark .center-unit-desc { color: var(--lp2m-bluegray-400); }
.dark .center-unit-tasks { background: var(--lp2m-gray-750); border-color: rgba(var(--lp2m-white-rgb), 0.05); }
.dark .center-unit-tasks-title { color: var(--lp2m-teal); }
.dark .center-unit-tasks-list { color: var(--lp2m-gray-200); }
.dark .center-unit-link { color: var(--lp2m-teal); }
.dark .centers-footer-strip { background: var(--lp2m-gray-800); border-color: rgba(var(--lp2m-white-rgb), 0.08); }
.dark .centers-footer-strip h6 { color: var(--lp2m-teal); }
.dark .centers-footer-strip p { color: var(--lp2m-bluegray-400); }