/* ============================================================
   TAMBAHAN TEMA — hero besar, pencarian melayang, kartu subjek bulat
   File ini murni TAMBAHAN di atas slims-modern-theme.css.
   Tidak mengubah _home.php atau file PHP lain — cuma restyle
   elemen yang SUDAH ADA lewat CSS.
   ============================================================ */

/* ---------- Hero (header + mask) ---------- */
.c-header {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(15,23,42,0.55), rgba(15,23,42,0.25)),
        linear-gradient(160deg, #1e3a2f 0%, #3d5a3a 30%, #d97706 65%, #0f172a 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* Kalau mau pakai foto asli (bukan gradasi), upload gambar lewat Admin,
   lalu ganti baris 'background:' di atas jadi:
   background: linear-gradient(135deg, rgba(15,23,42,0.55), rgba(15,23,42,0.25)),
               url('URL_GAMBAR_KAMU') center/cover no-repeat;
*/
.c-header .mask {
    position: absolute;
    inset: 0;
    background: none;
}
.c-header .navbar {
    background: transparent !important;
    box-shadow: none;
    position: relative;
    z-index: 2;
}

/* ---------- Kotak pencarian melayang di TENGAH hero ---------- */
/* #section1 membungkus header (.c-header) dan form pencarian sebagai saudara sejajar,
   jadi kita jadikan #section1 sebagai acuan posisi, lalu form-nya "diambangkan"
   pas di tengah area hero pakai position:absolute. */
#section1 {
    position: relative;
}
#section1 form,
.search-form,
.form-search {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 680px;
    margin: 0;
    padding: 0 1rem;
}
#section1 input[type="text"],
#section1 input[type="search"],
.search-form input,
.form-search input {
    width: 100%;
    background: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 1rem 3.5rem 1rem 1.75rem !important;
    font-size: 1rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
#section1 .btn,
.search-form .btn,
.form-search .btn {
    position: absolute;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: none !important;
    color: var(--brand-primary, #0f172a) !important;
    box-shadow: none !important;
    padding: 0.4rem !important;
}

/* ---------- Kartu subjek bulat berwarna ---------- */
.topic {
    list-style: none;
    gap: 1.5rem;
}
.topic li {
    background: #fff;
    border: 1px solid var(--border-soft, #e2e8f0);
    border-radius: 18px;
    padding: 1.75rem 1.25rem;
    width: 180px;
    box-shadow: 0 2px 10px rgba(15,23,42,0.05);
}
.topic li:hover {
    box-shadow: 0 12px 32px rgba(15,23,42,0.1);
    transform: translateY(-3px);
}
.topic li a {
    text-decoration: none !important;
    color: var(--text-main, #1e293b) !important;
    font-weight: 600;
    text-align: center;
}
.topic li img {
    display: block;
    margin: 0 auto;
    width: 96px !important;
    height: 96px !important;
    max-width: 100%;
    border-radius: 50%;
    padding: 18px;
    box-sizing: border-box; /* padding masuk hitungan lebar/tinggi, jadi tidak melewati card */
    object-fit: contain;
}
/* Warna pastel bergantian, meniru gaya di gambar referensi */
.topic li:nth-child(5n+1) img { background-color: #dcfce7; } /* hijau */
.topic li:nth-child(5n+2) img { background-color: #dbeafe; } /* biru */
.topic li:nth-child(5n+3) img { background-color: #ede9fe; } /* ungu */
.topic li:nth-child(5n+4) img { background-color: #fef3c7; } /* kuning/oranye */
.topic li:nth-child(5n+5) img { background-color: #fce7f3; } /* pink */

/* ---------- Judul section ---------- */
#slims-home h4 {
    text-align: center;
    font-weight: 700;
}
#slims-home .subtitle-section {
    font-weight: 400;
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
}
/* ==== Posisi search box di tengah hero ==== */
section[id="section1 container-fluid"] {
    position: relative;
}

section[id="section1 container-fluid"] #search-wraper.search {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none; /* biar area kosong di sekitar box tidak menutupi nav/klik lain */
}

#search-wraper .container,
#search-wraper .row,
#search-wraper .col-lg-8 {
    width: 100%;
}

#search-wraper .card {
    pointer-events: auto;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15) !important;
    background-image: url('../images/icon/ios7-search.png');
    background-repeat: no-repeat;
    background-position: 96% center;
    background-size: 22px;
}

#search-wraper .card-body {
    padding: 0.75rem 1.5rem;
}

#search-wraper .input-transparent {
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    padding-right: 40px;
    width: 100%;
}

@media (max-width: 767px) {
    #search-wraper .col-lg-8 {
        max-width: 92%;
        flex: 0 0 92%;
    }
}

#search-wraper .card,
#search-wraper .card:focus-within,
#search-wraper .card-body,
#search-wraper form {
    border: none !important;
    outline: none !important;
}

#search-wraper .input-transparent,
#search-wraper .input-transparent:focus,
#search-wraper .input-transparent:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* ==== Samakan tinggi hero di semua halaman seperti beranda ==== */
.c-header {
    height: 420px !important;
    min-height: 420px !important;
}


/* =========================================================
   2. SECTION PETA + TENTANG KAMI
   (INI SECTION BAWAAN TEMPLATE, dari _home.php, diaktifkan
   lewat System > Setting > "classic_map" di admin.
   Di sini kita cuma restyle tampilannya lewat CSS,
   TIDAK menambah HTML baru / TIDAK mengubah _home.php)
   ========================================================= */
 
#slims-home > section:last-of-type {
    background: #f5f6f8;
}
 
#slims-home > section:last-of-type iframe {
    display: block;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
}
 
#slims-home > section:last-of-type .col-md-6:first-child {
    padding-right: 30px;
}
 
#slims-home > section:last-of-type .col-md-6:last-child {
    padding-left: 30px;
}
 
@media (max-width: 767px) {
    #slims-home > section:last-of-type .col-md-6:first-child {
        padding-right: 15px;
        margin-bottom: 24px;
    }
 
    #slims-home > section:last-of-type .col-md-6:last-child {
        padding-left: 15px;
    }
}
 
#slims-home > section:last-of-type h4 {
    font-size: 1.85rem;
    text-align: left;
    margin-bottom: 1.25rem;
}
 
#slims-home > section:last-of-type p {
    color: #4a5568;
    line-height: 1.4;
}
 
#slims-home > section:last-of-type .btn-primary,
#slims-home > section:last-of-type .btn-info,
#slims-home > section:last-of-type .btn-danger,
#slims-home > section:last-of-type .btn-dark {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    font-size: 16px;
    transition: transform .2s ease-in-out;
}
 
#slims-home > section:last-of-type .btn:hover {
    transform: translateY(-2px);
}
 
/* =========================================================
   3. FOOTER GELAP MODERN
   ========================================================= */
 

footer.bg-grey-darkest {
    background-color: #0f172a !important;
}
 
footer .col-md-5 p {
    line-height: 1.4;
    
}
 
footer h4 {
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff;
}
 
footer .input-group .form-control {
    border-radius: 30px 0 0 30px !important;
    border: none;
    padding-left: 20px;
}
 
footer .input-group .btn-primary {
    border-radius: 0 30px 30px 0 !important;
    background-color: #14b8a6;
    border-color: #14b8a6;
    font-weight: 600;
}
 
footer .input-group .btn-primary:hover {
    background-color: #00327f;
    border-color: #0d9488;
}
 
footer hr {
    border-color: rgba(255, 255, 255, 0.1);
}
 
footer .footer-plain-link {
    display: inline-flex;
    align-items: center;
    color: #cbd5e0 !important;
    text-decoration: none;
    border: none !important;
    background: none !important;
    padding: 0.25rem 0 !important;
}
 
footer .footer-plain-link:hover {
    color: #fff !important;
}
 
footer .list-reset li {
    margin-bottom: 8px;
}
 
footer .list-reset a {
    color: #cbd5e0;
}
 
footer .list-reset a:hover {
    color: #fff;
    text-decoration: none;
}
 









/* =========================================================
   4. KARTU KOLEKSI BUKU
   (gambar sampul jadi background penuh, judul overlay putih
   dengan gradasi gelap di bawah, sudut membulat)
   ========================================================= */
 
/* Lebar kartu dibuat otomatis menyesuaikan lebar kontainer yang
   SEBENARNYA (bukan angka tetap), supaya tepat 4 kartu penuh yang
   kelihatan -- sisanya (kartu ke-5, ke-6, dst) baru discroll ke
   samping. Scrollbar-nya disembunyikan (tetap bisa discroll pakai
   trackpad/geser/drag, cuma garis scrollbar-nya yang disembunyikan). */
.collection {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    overflow-x: auto !important;
    padding-bottom: 8px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE / Edge lama */
}
 
.collection::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge baru */
}
 
.collection > div.w-48 {
    flex: 0 0 calc((100% - 60px) / 4) !important; /* 100% dibagi 4, dikurangi 3 jarak 20px */
    width: calc((100% - 60px) / 4) !important;
    padding: 0 !important;
}
 
.collection .card {
    position: relative;
    width: 100%;
    height: 390px;
    border-radius: 18px !important;
    overflow: hidden;
    background: #1a202c;
    transition: transform .2s ease-in-out;
}
 
.collection .card:hover {
    transform: translateY(-4px);
}
 
.collection .card-body {
    padding: 0 !important;
    height: 100%;
}
 
.collection .card-image.fit-height {
    position: relative;
    height: 100%;
    margin: 0 !important;
    background: #1a202c;
}
 
/* gambar mengisi penuh kartu, proporsi asli tetap terjaga (tidak distorsi) */
.collection .card-image.fit-height img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
/* gradasi gelap di bawah gambar supaya judul putih tetap terbaca */
.collection .card-image.fit-height::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    background: linear-gradient(to top, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
    pointer-events: none;
}
 
.collection .card-text {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 36px;
    margin: 0 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    z-index: 2;
}
 
/* nama penulis, ditampilkan di bawah judul (diisi oleh script di footer.php) */
.collection .card-author {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
/* Badge "#1 Top Read Yesterday" dst — HANYA di section "Populer".
   Nomor rank-nya beneran mengikuti urutan API popularitas SLiMS
   (bukan angka statistik baca yang dikarang -- itu sengaja tidak
   ditampilkan karena datanya tidak tersedia di backend). */
.popular-section .collection {
    counter-reset: popular-rank;
}
 
.popular-section .collection > div {
    counter-increment: popular-rank;
}
 
/* chip kuning berisi angka rank */
.popular-section .collection > div .card::before {
    content: "#" counter(popular-rank);
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    background: #fbbf24;
    color: #1a202c;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px 0 0 20px;
}
 
/* chip gelap berisi label, nempel di sebelah kanan chip kuning */
.popular-section .collection > div .card::after {
    content: "Top Read Yesterday";
    position: absolute;
    top: 10px;
    left: 46px;
    z-index: 4;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 12px 4px 6px;
    border-radius: 0 20px 20px 0;
    white-space: nowrap;
}





/* =========================================================
   4b. BERITA SEKOLAH (banner tautan ke website SMP, di _home.php)
   ========================================================= */
 
.news-school-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #1a237e, #283593);
    border-radius: 16px;
    padding: 28px 32px;
    text-decoration: none !important;
    color: #fff;
    box-shadow: 0 8px 25px rgba(26, 35, 126, .25);
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
 
.news-school-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(26, 35, 126, .35);
    color: #fff;
}
 
.news-school-banner-label {
    display: inline-block;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}
 
.news-school-banner-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px 0;
    text-align: left !important;
}
 
.news-school-banner-desc {
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    margin: 0;
    max-width: 520px;
    text-align: left !important;
}
 
.news-school-banner-text {
    text-align: left;
}
 
.news-school-banner-btn {
    flex-shrink: 0;
    background: #fff;
    color: #1a237e !important;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 30px;
    white-space: nowrap;
}
 
@media (max-width: 767px) {
    .news-school-banner {
        padding: 24px;
    }
}
 

/* =========================================================
   5. HALAMAN DETAIL BUKU (show_detail)
   ========================================================= */
 
.book-detail-top {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .06);
    margin-top: 24px;
}
 
.book-detail-cover {
    border-radius: 14px;
    background: #f7f7f9 !important;
}
 
/* gambar sampul menyesuaikan penuh kotaknya (tidak ada spasi kosong)
   dan sudutnya melengkung 18px */
.book-detail-cover .shadow {
    border-radius: 18px;
    overflow: hidden;
}
 
.book-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}
 
.book-detail-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}
 
.book-detail-authors {
    color: #718096;
    font-size: 15px;
    margin-bottom: 16px;
}
 
.book-detail-badges {
    margin-bottom: 20px;
}
 
.book-tag {
    display: inline-block;
    background: #fdf0e8;
    color: #c2540a;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    margin-right: 8px;
    margin-bottom: 8px;
}
 
.book-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}
 
.book-detail-table tr {
    border-bottom: 1px solid #edf2f7;
}
 
.book-detail-table tr:last-child {
    border-bottom: none;
}
 
.book-detail-table th,
.book-detail-table td {
    text-align: left;
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 400;
    vertical-align: top;
    line-height: 1.3;
}
 
.book-detail-table th {
    color: #718096;
    width: 180px;
    font-weight: 600;
}
 
.book-detail-table td {
    color: #2d3748;
}
 
  
/* =========================================================
   7. HALAMAN INFORMASI (libinfo)
   Halaman ini isinya dari menu "Konten" di admin (editor WYSIWYG
   tanpa mode HTML). Supaya tetap bisa diedit dari admin, CSS ini
   menyasar elemen BAWAAN editor (heading, tabel, blockquote, bold)
   -- bukan class custom -- dan cuma berlaku di halaman Informasi
   lewat wrapper ".libinfo-page" yang ditambahkan di parts/_other.php.
   ========================================================= */
 
.libinfo-page h2 {
    font-size: 26px;
    font-weight: 700;
    color: #1a202c;
}
 
/* heading section di dalam konten (Kontak Perpustakaan, Jam
   Operasional, Koleksi Perpustakaan, Keanggotaan Perpustakaan) --
   dibuat pakai style "Heading 3" di editor */
.libinfo-page h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #1a237e;
    margin: 28px 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e8eaf6;
}
 
.libinfo-page h3:first-child {
    margin-top: 0;
}
 
/* tabel 2 kolom untuk "Kontak Perpustakaan" & "Jam Operasional"
   dibuat lewat tombol Table di toolbar editor */
.libinfo-page table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 20px 0;
    margin: 0 0 8px -20px;
    table-layout: fixed;
}
 
.libinfo-page table td {
    vertical-align: top;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .05);
}
 
.libinfo-page table h3 {
    margin-top: 0;
}
 
.libinfo-page table p {
    margin: 0 0 14px 0;
    font-size: 14px;
    line-height: 1.5;
}
 
.libinfo-page table p:last-child {
    margin-bottom: 0;
}
 
.libinfo-page table strong {
    display: block;
    color: #1a202c;
    margin-bottom: 2px;
}
 
/* deskripsi "Koleksi Perpustakaan" / "Keanggotaan Perpustakaan" --
   ditulis sebagai kutipan/blockquote lewat tombol Quote di editor,
   supaya otomatis tampil sebagai kotak seperti kartu */
.libinfo-page blockquote {
    background: #f7f8fb;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #1a237e;
    border-radius: 12px;
    padding: 18px 22px;
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
    font-style: normal;
}
 
.libinfo-page blockquote p {
    margin: 0;
}
 
@media (max-width: 767px) {
    .libinfo-page table,
    .libinfo-page table tbody,
    .libinfo-page table tr,
    .libinfo-page table td {
        display: block;
        width: 100% !important;
    }
 
    .libinfo-page table {
        border-spacing: 0;
        margin-left: 0;
    }
 
    .libinfo-page table td {
        margin-bottom: 20px;
    }
}
 
 
/* =========================================================
   6. RINGKASAN KETERSEDIAAN (dibuat oleh script di footer.php)
   ========================================================= */
 
.availability-summary-wrapper {
    margin-top: 8px;
}
 
.availability-card {
    background: #f7f8fb;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
}
 
.availability-card-title {
    font-weight: 700;
    color: #1a237e;
    font-size: 16px;
    margin-bottom: 14px;
}
 
.availability-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #2d3748;
}
 
.availability-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
 
.stat-pill {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    padding: 2px 10px;
    border-radius: 20px;
    border: 1.5px dashed;
    font-weight: 700;
}
 
.stat-green {
    color: #2f855a;
    border-color: #68d391;
}
 
.stat-red {
    color: #c53030;
    border-color: #fc8181;
}
 
.availability-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1.5px dashed #1a237e;
    color: #1a237e;
    border-radius: 30px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
 
.availability-toggle-icon {
    font-size: 10px;
    transition: transform .2s ease-in-out;
}
 
.availability-toggle-btn.open .availability-toggle-icon {
    transform: rotate(180deg);
}
 
.availability-list {
    margin-top: 16px;
}