/* =====================================================
   DETAIL BUKU
   detail.css
===================================================== */


/* =====================================================
   BREADCRUMB
===================================================== */

.detail-breadcrumb {
    background: #ffffff;
    border-bottom: 1px solid #e8edf2;
}

.breadcrumb-content {
    min-height: 55px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
}

.breadcrumb-content a {
    color: #6e7b8d;
    transition: 0.3s;
}

.breadcrumb-content a:hover {
    color: #1769aa;
}

.breadcrumb-content > i {
    color: #b1bbc6;
    font-size: 8px;
}

.breadcrumb-content span {
    color: #1769aa;
    font-weight: 600;
}


/* =====================================================
   DETAIL PAGE
===================================================== */

.detail-page {
    background: #f7f9fc;
    padding: 50px 0 80px;
}


/* =====================================================
   DETAIL CONTAINER
===================================================== */

.book-detail {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 55px;
    background: #ffffff;
    border: 1px solid #e5ebf1;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 8px 30px rgba(32, 69, 103, 0.04);
}


/* =====================================================
   COVER
===================================================== */

.detail-cover-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detail-cover {
    width: 280px;
    height: 380px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            145deg,
            #1769aa,
            #55a0d3
        );
    box-shadow:
        12px 18px 35px rgba(20, 60, 90, 0.20);
}

.detail-cover::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 90%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
}

.detail-cover-content {
    position: relative;
    z-index: 2;
    width: 80%;
    text-align: center;
    color: #ffffff;
}

.detail-cover-content i {
    font-size: 58px;
    margin-bottom: 25px;
}

.detail-cover-content strong {
    display: block;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    margin-bottom: 8px;
}

.detail-cover-content span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    opacity: 0.9;
}


/* =====================================================
   COVER VARIATIONS
===================================================== */

.detail-cover.math {
    background:
        linear-gradient(
            145deg,
            #145d97,
            #4b9ed1
        );
}

.detail-cover.ipa {
    background:
        linear-gradient(
            145deg,
            #21774f,
            #5ab87e
        );
}

.detail-cover.indonesia {
    background:
        linear-gradient(
            145deg,
            #bb6423,
            #e3a15d
        );
}

.detail-cover.ips {
    background:
        linear-gradient(
            145deg,
            #5e4b9e,
            #9b86d9
        );
}

.detail-cover.inggris {
    background:
        linear-gradient(
            145deg,
            #bd4e4e,
            #dd8888
        );
}

.detail-cover.kejuruan {
    background:
        linear-gradient(
            145deg,
            #247174,
            #57a9aa
        );
}


/* =====================================================
   AVAILABLE LABEL
===================================================== */

.book-available {
    margin-top: 18px;
    padding: 8px 14px;
    border-radius: 30px;
    background: #eaf8f0;
    color: #278451;
    font-size: 10px;
    font-weight: 700;
}

.book-available i {
    margin-right: 5px;
}


/* =====================================================
   DETAIL CONTENT
===================================================== */

.detail-content {
    padding: 8px 0;
}

.detail-category {
    display: inline-block;
    color: #1769aa;
    background: #edf6fc;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 13px;
}

.detail-content h1 {
    max-width: 700px;
    color: #172033;
    font-size: 35px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 18px;
}


/* =====================================================
   AUTHOR
===================================================== */

.detail-author {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.author-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #edf6fc;
    color: #1769aa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-author > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-author span {
    color: #929cab;
    font-size: 9px;
}

.detail-author strong {
    color: #394557;
    font-size: 11px;
}


/* =====================================================
   RATING
===================================================== */

.detail-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 30px;
}

.stars {
    display: flex;
    gap: 2px;
    color: #f4b740;
    font-size: 12px;
}

.detail-rating > span {
    color: #6f7b8c;
    font-size: 10px;
}

.rating-divider {
    color: #cbd2d9 !important;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.detail-description {
    border-top: 1px solid #edf0f3;
    padding-top: 25px;
}

.detail-description h2 {
    color: #273347;
    font-size: 17px;
    margin-bottom: 10px;
}

.detail-description p {
    max-width: 700px;
    color: #727e8f;
    font-size: 12px;
    line-height: 1.8;
}


/* =====================================================
   BOOK INFORMATION
===================================================== */

.book-information {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    margin-bottom: 28px;
}

.information-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e6ebf0;
    border-radius: 8px;
    background: #fbfcfd;
}

.information-item > i {
    color: #1769aa;
    font-size: 15px;
}

.information-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.information-item span {
    color: #939eac;
    font-size: 8px;
}

.information-item strong {
    color: #465264;
    font-size: 10px;
}


/* =====================================================
   DETAIL BUTTONS
===================================================== */

.detail-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.start-reading,
.save-book {
    height: 46px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.start-reading {
    flex: 1;
    border: none;
    background: #1769aa;
    color: #ffffff;
}

.start-reading:hover {
    background: #125589;
    transform: translateY(-2px);
}

.start-reading i {
    margin-right: 6px;
}

.save-book {
    width: 120px;
    border: 1px solid #dce4eb;
    background: #ffffff;
    color: #596678;
}

.save-book:hover {
    border-color: #1769aa;
    color: #1769aa;
}

.save-book i {
    margin-right: 5px;
}


/* =====================================================
   BACK TO CATALOG
===================================================== */

.back-catalog {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #7c8796;
    font-size: 10px;
    font-weight: 600;
    transition: 0.3s;
}

.back-catalog:hover {
    color: #1769aa;
}


/* =====================================================
   RECOMMENDATION
===================================================== */

.recommended-section {
    margin-top: 55px;
}

.detail-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
}

.detail-section-heading h2 {
    color: #202b3e;
    font-size: 24px;
    margin-top: 5px;
}

.see-more {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #1769aa;
    font-size: 11px;
    font-weight: 700;
}

.see-more:hover {
    gap: 10px;
}


/* =====================================================
   RECOMMENDED GRID
===================================================== */

.recommended-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.recommended-card {
    background: #ffffff;
    border: 1px solid #e4eaf0;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
}

.recommended-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 28px rgba(32, 69, 103, 0.09);
}


/* =====================================================
   RECOMMENDED COVER
===================================================== */

.recommended-cover {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.recommended-cover i {
    font-size: 38px;
}

.recommended-cover.math {
    background:
        linear-gradient(
            145deg,
            #145d97,
            #4b9ed1
        );
}

.recommended-cover.ipa {
    background:
        linear-gradient(
            145deg,
            #21774f,
            #5ab87e
        );
}

.recommended-cover.indonesia {
    background:
        linear-gradient(
            145deg,
            #bb6423,
            #e3a15d
        );
}

.recommended-cover.ips {
    background:
        linear-gradient(
            145deg,
            #5e4b9e,
            #9b86d9
        );
}


/* =====================================================
   RECOMMENDED INFO
===================================================== */

.recommended-info {
    padding: 13px;
}

.recommended-info span {
    display: block;
    color: #1769aa;
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 5px;
}

.recommended-info h3 {
    color: #354154;
    font-size: 12px;
    line-height: 1.4;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .book-detail {
        grid-template-columns: 270px 1fr;
        gap: 35px;
        padding: 30px;
    }

    .detail-cover {
        width: 240px;
        height: 330px;
    }

    .detail-content h1 {
        font-size: 29px;
    }

    .recommended-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .detail-page {
        padding: 30px 0 60px;
    }

    .book-detail {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 25px;
    }

    .detail-cover-wrapper {
        align-items: center;
    }

    .detail-cover {
        width: 240px;
        height: 325px;
    }

    .detail-content h1 {
        font-size: 27px;
    }

    .book-information {
        flex-direction: column;
    }

    .detail-actions {
        flex-direction: column;
    }

    .save-book {
        width: 100%;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .breadcrumb-content {
        overflow-x: auto;
        white-space: nowrap;
    }

    .book-detail {
        border-radius: 12px;
        padding: 20px;
    }

    .detail-cover {
        width: 210px;
        height: 290px;
    }

    .detail-cover-content i {
        font-size: 45px;
    }

    .detail-cover-content strong {
        font-size: 17px;
    }

    .detail-content h1 {
        font-size: 24px;
    }

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

    .detail-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

}