/*

Theme Name: ECM Re-build 2026

*/



:root {

    --primary: #004a8d;

    --accent: #ffb400;

    --dark: #1a1a1a;

    --grey: #f4f7f9;

    --white: #ffffff;

}



* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }



body, html {

    margin: 0; padding: 0;

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

    background: var(--grey);

    overflow-x: hidden;

    width: 100%;

}



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



/* --- HEADER & NAV (FIXED) --- */

.site-header {

    background: var(--white);

    padding: 15px 0;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 15px rgba(0,0,0,0.05);

}



.header-flex {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo-wrapper a { display: flex; align-items: center; text-decoration: none; gap: 12px; }

.logo-wrapper img { width: 50px; height: auto; }

.text-logo { display: flex; flex-direction: column; }

.main-title { font-size: 1.2rem; font-weight: 800; color: var(--primary); line-height: 1; }

.sub-title { font-size: 0.65rem; color: #888; text-transform: uppercase; margin-top: 4px; }



.menu-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    gap: 30px;

}



.menu-list li a {

    text-decoration: none;

    color: var(--dark);

    font-size: 1.1rem; /* Menu lebih besar */

    font-weight: 600;

    padding: 10px 15px;

    border-radius: 8px;

    transition: 0.3s;

}



.menu-list li a:hover {

    color: var(--primary);

    background: #f0f7ff;

}



/* --- HERO SECTION --- */

.hero-section {

    padding: 100px 0;

    background: linear-gradient(rgba(0, 74, 141, 0.9), rgba(0, 30, 60, 0.9)), url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?auto=format&fit=crop&w=1200&q=80');

    background-size: cover;

    background-position: center;

    color: white;

    text-align: center;

}



.btn-hero {

    display: inline-block;

    background: var(--accent);

    color: var(--dark);

    padding: 12px 30px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 700;

    margin-top: 20px;

}



/* --- SERVICES GRID (FIXED BOX) --- */

.container-minimal { max-width: 900px; margin: 0 auto; padding: 60px 20px; }

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



.service-card {

    background: var(--white);

    border: 1px solid #ddd;

    border-radius: 15px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

    cursor: pointer;

    overflow: hidden;

    transition: 0.3s ease;

}



.service-card:hover { border-color: var(--primary); transform: translateY(-3px); }



.card-visible { padding: 25px; display: flex; align-items: center; gap: 15px; }

.card-visible h3 { margin: 0; font-size: 1.1rem; flex-grow: 1; color: #333; }

.card-visible .dashicons {

    font-size: 24px; width: 44px; height: 44px;

    color: var(--primary); background: #f0f7ff;

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

    border-radius: 10px;

}



.card-hidden-content { display: grid; grid-template-rows: 0fr; transition: 0.4s ease; }

.service-card.is-open .card-hidden-content { grid-template-rows: 1fr; }

.inner-padding { overflow: hidden; padding: 0 25px 25px 84px; }



/* --- RESPONSIVE --- */

@media (max-width: 768px) {

    .header-flex { flex-direction: column; gap: 20px; }

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

    .inner-padding { padding: 0 20px 20px 20px; }

}

/* Pengaturan Grid untuk Katalog Buku */

.book-grid {

    display: grid;

    /* Membuat kolom otomatis: minimal 250px, maksimal mengisi ruang yang ada */

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: 30px; /* Jarak antar buku */

    margin-top: 40px;

}



/* Memastikan gambar buku rapi dan konsisten */

.img-container img {

    width: 100%;

    height: 320px; /* Atur tinggi tetap agar sejajar */

    object-fit: cover; /* Agar gambar tidak gepeng */

    border-radius: 8px;

    transition: transform 0.3s ease;

}



.kartu-buku:hover .img-container img {

    transform: scale(1.05); /* Efek zoom saat hover */

}