/* 
 * EDU-PUBLISH MOBILE PUBLIC STYLES 
 * Active only on screens max-width: 991.98px
 */

/* 1. Navbar adjustments for very small screens (375x812) */
.navbar-brand {
    font-size: 1.1rem !important;
}
.navbar-brand img {
    max-height: 35px !important;
}
.navbar .nav-link {
    padding: 10px 15px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px !important; /* Membuat ujung membulat agar tidak kaku */
    margin-bottom: 5px;
}
.navbar-collapse {
    background: rgba(4, 25, 85, 0.98);
    padding: 1rem;
    border-radius: 12px;
    margin-top: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* 2. Hero Section */
.hero-slider, .hero-slider .carousel-item {
    height: 300px !important; /* Banner lebih proporsional di mobile */
    border-radius: 0 0 1.5rem 1.5rem !important;
}
.hero-section {
    padding: 50px 0 !important;
}
.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
.display-4 {
    font-size: 1.75rem !important;
}
.lead {
    font-size: 0.95rem !important;
}

/* 3. Typography & Titles */
.section-title {
    font-size: 1.4rem !important; /* Judul lebih kecil di mobile */
}
.d-flex.justify-content-between.align-items-end {
    align-items: center !important;
}
.d-flex.justify-content-between.align-items-end a {
    font-size: 0.85rem !important; /* "Lihat semua" lebih kecil */
}

/* 4. Catalog Grid & Cards */
.card {
    margin-bottom: 1rem;
}
.card-img-top {
    height: 200px !important; /* Cover buku lebih pas */
    object-position: top;
}
.book-cover-wrapper {
    height: 180px !important;
}
.book-cover {
    height: 180px !important;
}

/* 5. Action Box (Detail Page) */
.col-sm-6.text-center.text-sm-start, 
.col-sm-6.text-center.text-sm-end {
    text-align: center !important;
    margin-bottom: 1rem;
}

/* 6. Custom Modern Tabs (Detail Page) */
.custom-modern-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 4px !important;
    white-space: nowrap;
    overflow-x: auto; /* Bisa digeser jika layarnya sangat ekstrim kecilnya */
}
.custom-modern-tabs::-webkit-scrollbar {
    display: none;
}
.custom-modern-tabs .nav-item {
    flex: 1; /* Dibagi rata */
}
.custom-modern-tabs .nav-link {
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
    width: 100%;
    text-align: center;
}

/* 7. Footer */
.footer {
    padding: 40px 0 20px !important;
}
.footer-bottom {
    flex-direction: column !important;
    text-align: center;
    gap: 10px;
}