/* =========================================================
   PERPUSTAKAAN SMPN 4 SUMBERJAYA
   MAIN STYLESHEET
   ========================================================= */


/* =========================================================
   01. GOOGLE FONT & ROOT VARIABLES
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --blue: #0757a6;
    --blue2: #0a70cf;
    --dark: #083d75;
    --yellow: #ffd027;

    --text: #0d3e75;
    --muted: #607895;

    --line: #dce8f3;
    --soft: #f4f9fe;

    --shadow: 0 8px 24px rgba(6, 67, 125, .08);
}


/* =========================================================
   02. RESET & GLOBAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    color: var(--text);
    background: #fff;

    /* Ukuran font utama */
    font-size: 15px;
    line-height: 1.55;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input {
    font: inherit;
}

.brand img,
.hero-bg,
.category-card img,
.news-card > img {
    display: block;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}


/* =========================================================
   03. TOPBAR
   ========================================================= */

.topbar {
    height: 34px;
    background: var(--blue);
    color: #fff;
    font-size: 12px;
}

.topbar-inner {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-left,
.socials {
    display: flex;
    align-items: center;
    gap: 22px;
}

.top-left span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.socials {
    gap: 16px;
}

.socials a:hover {
    color: var(--yellow);
}


/* =========================================================
   04. HEADER & NAVBAR
   ========================================================= */

.header {
    height: 78px;
    background: #fff;

    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);

    position: relative;
    z-index: 50;
}

.nav-wrap {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ---------- Brand ---------- */

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand img {
    width: 53px;
    height: 53px;
    object-fit: contain;
}

.brand-name {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.3px;
}

.brand-tag {
    font-size: 11px;
    color: #627b98;
}


/* ---------- Navigation ---------- */

.nav {
    display: flex;
    align-items: center;
    gap: 3px;
}

.nav > a {
    position: relative;

    padding: 29px 14px 26px;

    font-size: 14px;
    font-weight: 600;
}

.nav > a.active,
.nav > a:hover {
    color: var(--blue);
}

.nav > a.active::after {
    content: "";

    position: absolute;

    height: 3px;

    background: var(--yellow);

    bottom: 0;
    left: 14px;
    right: 14px;
}


/* =========================================================
   05. LOGIN ANGGOTA BUTTON
   ========================================================= */

.btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;

    gap: 6px;

    width: auto;
    height: 40px;

    padding: 0 13px;
    margin-left: 10px;

    border: 0;
    border-radius: 7px;

    background: var(--yellow);
    color: #173c69;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;

    cursor: pointer;
    white-space: nowrap;

    text-decoration: none;

    transition: .2s ease;
}

.btn-login:hover {
    background: #f6c500;
    color: #173c69;
    transform: translateY(-1px);
}


/* =========================================================
   06. MOBILE MENU BUTTON
   ========================================================= */

.mobile-toggle {
    display: none;

    border: 0;
    background: none;

    color: var(--blue);

    font-size: 27px;

    cursor: pointer;
}


/* =========================================================
   07. HERO SECTION
   ========================================================= */

.hero {
    height: 380px;

    position: relative;

    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;

    background-image: url('../img/hero.jpg');

    background-size: cover;
    background-position: center right;

    transform: scale(1.02);
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 64, 124, .96) 0%,
            rgba(5, 76, 143, .86) 36%,
            rgba(6, 75, 140, .32) 67%,
            rgba(4, 60, 115, .05) 100%
        );
}

.hero-inner {
    height: 100%;

    display: flex;
    align-items: center;

    position: relative;
    z-index: 2;
}

.hero-copy {
    width: 610px;

    color: #fff;

    padding-left: 6px;
}


/* ---------- Hero Label ---------- */

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    background: var(--yellow);
    color: #173d68;

    border-radius: 5px;

    padding: 6px 11px;

    font-size: 12px;
    font-weight: 800;
}


/* ---------- Hero Heading ---------- */

.hero h1 {
    font-size: 40px;
    line-height: 1.08;

    margin: 16px 0 12px;

    letter-spacing: -1.3px;
}

.hero h1 strong {
    color: #fff;
}


/* ---------- Hero Description ---------- */

.hero p {
    font-size: 15px;

    max-width: 570px;

    margin: 0 0 18px;

    color: #f2f8ff;
}


/* =========================================================
   08. SEARCH BOX
   ========================================================= */

.search {
    width: 560px;
    max-width: 100%;

    height: 48px;

    display: flex;
    align-items: center;

    background: #fff;

    border-radius: 9px;

    padding-left: 13px;

    overflow: hidden;

    box-shadow: 0 7px 22px rgba(0, 0, 0, .15);
}

.search > i {
    font-size: 18px;
    color: #6484a4;
}

.search input {
    flex: 1;

    border: 0;
    outline: 0;

    padding: 0 10px;

    font-size: 14px;

    color: #264d74;
}

.search button {
    height: 40px;

    margin-right: 4px;

    padding: 0 28px;

    border: 0;
    border-radius: 7px;

    background: var(--blue);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.search-message {
    min-height: 15px;

    margin-top: 6px;

    font-size: 12px;

    color: #fff;
}


/* =========================================================
   09. FEATURES / LAYANAN SINGKAT
   ========================================================= */

.features {
    background: #fff;
}

.feature-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    padding: 24px 0 25px;
}

.feature {
    text-align: center;

    padding: 0 22px;

    border-right: 1px solid var(--line);
}

.feature:last-child {
    border: 0;
}


/* ---------- Feature Icon ---------- */

.feature-icon {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    margin: 0 auto 9px;

    font-size: 22px;
}

.feature-icon.blue {
    background: var(--blue);
    color: #fff;
}

.feature-icon.yellow {
    background: var(--yellow);
    color: #23476e;
}


/* ---------- Feature Text ---------- */

.feature h3 {
    font-size: 13px;

    margin: 0 0 6px;
}

.feature p {
    font-size: 11px;

    line-height: 1.55;

    color: var(--muted);

    margin: 0;
}


/* =========================================================
   10. MAIN CONTENT
   ========================================================= */

.main-section {
    padding: 8px 0 35px;
}

.two-column {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 310px;

    gap: 22px;
}


/* =========================================================
   11. SECTION BOX
   ========================================================= */

.section-box {
    border: 1px solid var(--line);

    border-radius: 7px;

    overflow: hidden;

    background: #fff;
}

.section-title {
    height: 43px;

    padding: 0 12px;

    background:
        linear-gradient(
            90deg,
            #edf7ff,
            #fff
        );

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title h2 {
    font-size: 17px;

    margin: 0;
}

.section-title h2 i {
    margin-right: 7px;
}

.section-title a,
.side-title a {
    font-size: 11px;

    color: var(--blue);

    font-weight: 700;
}


/* =========================================================
   12. KATEGORI BUKU
   ========================================================= */

.category-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    padding: 12px;
}

.category-card {
    border: 1px solid var(--line);

    border-radius: 6px;

    overflow: hidden;

    transition: .2s;
}

.category-card:hover,
.news-card:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow);
}

.category-card img {
    width: 100%;
    height: 98px;

    object-fit: cover;
}

.category-info {
    padding: 8px 10px 10px;
}

.category-info h3 {
    font-size: 14px;

    margin: 0 0 4px;
}

.category-info span {
    font-size: 11px;

    color: #52789f;
}

.category-info i {
    margin-right: 4px;
}


/* =========================================================
   13. BERITA & KEGIATAN
   ========================================================= */

.news-box {
    margin-top: 18px;
}

.news-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    padding: 12px;
}

.news-card {
    border: 1px solid var(--line);

    border-radius: 6px;

    overflow: hidden;

    transition: .2s;
}

.news-card > img {
    width: 100%;
    height: 92px;

    object-fit: cover;
}

.news-body {
    padding: 8px 10px 10px;
}

.date {
    font-size: 10px;

    color: #718aa4;
}

.news-body h3 {
    font-size: 13px;

    line-height: 1.4;

    margin: 3px 0 5px;
}

.news-body p {
    font-size: 11px;

    color: var(--muted);

    line-height: 1.45;

    margin: 0 0 7px;
}

.news-body a {
    font-size: 11px;

    color: var(--blue);

    font-weight: 700;
}


/* =========================================================
   14. SIDEBAR
   ========================================================= */

.sidebar {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


/* =========================================================
   15. STATISTIK KOLEKSI
   ========================================================= */

.stats-card {
    border-radius: 7px;

    overflow: hidden;

    background: #f1f7fd;

    border: 1px solid #e0ecf7;
}

.stats-head {
    background:
        linear-gradient(
            135deg,
            #0b67bc,
            #07519d
        );

    color: #fff;

    padding: 17px 18px;

    display: flex;
    align-items: center;

    gap: 13px;
}

.stats-icon {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .15);

    display: grid;
    place-items: center;

    font-size: 23px;
}

.stats-head span {
    display: block;

    font-size: 12px;
}

.stats-head strong {
    font-size: 25px;

    line-height: 1.05;
}

.stats-head small {
    font-size: 12px;
}


/* ---------- Stat Rows ---------- */

.stat-row {
    display: grid;

    grid-template-columns: 27px 1fr auto;

    gap: 7px;

    padding: 10px 16px;

    border-bottom: 1px solid #dce8f3;

    align-items: center;

    font-size: 11px;
}

.stat-row:last-child {
    border: 0;
}

.stat-row i {
    font-size: 17px;

    color: var(--blue);
}

.stat-row b {
    font-size: 12px;
}


/* =========================================================
   16. PENGUMUMAN
   ========================================================= */

.announcement-card {
    border: 1px solid var(--line);

    border-radius: 7px;

    overflow: hidden;
}

.side-title {
    height: 43px;

    padding: 0 13px;

    background:
        linear-gradient(
            90deg,
            #edf7ff,
            #fff
        );

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.side-title h2 {
    font-size: 14px;

    margin: 0;
}

.side-title h2 i {
    margin-right: 6px;
}


/* ---------- Announcement Item ---------- */

.announcement {
    display: grid;

    grid-template-columns: 46px 1fr;

    gap: 10px;

    padding: 10px 12px;

    border-bottom: 1px solid var(--line);
}

.announcement:last-child {
    border: 0;
}

.announcement h3 {
    font-size: 11px;

    line-height: 1.4;

    margin: 1px 0 3px;
}

.announcement small {
    font-size: 9px;

    color: #8aa0b7;
}


/* ---------- Date Box ---------- */

.date-box {
    width: 43px;
    height: 48px;

    border-radius: 6px;

    background: #f0f6fc;

    text-align: center;

    padding-top: 3px;
}

.date-box b {
    display: block;

    color: var(--blue);

    font-size: 15px;

    line-height: 1;
}

.date-box span {
    display: block;

    font-size: 10px;

    font-weight: 700;
}

.date-box small {
    font-size: 9px;
}


/* =========================================================
   17. QUOTE CARD
   ========================================================= */

.quote-card {
    min-height: 108px;

    background: #eaf6ff;

    border-radius: 7px;

    padding: 16px;

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

    color: #07477f;
}

.quote-card b {
    font-size: 14px;

    line-height: 1.35;
}

.quote-card small {
    display: block;

    font-size: 8px;

    margin-top: 7px;

    color: #5b7b9b;
}

.quote-card > i {
    font-size: 55px;

    color: #4da0df;

    opacity: .55;
}


/* =========================================================
   18. PROFIL PERPUSTAKAAN
   ========================================================= */

.profile-strip {
    background: #f5faff;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    padding: 42px 0;
}

.profile-inner,
.contact-inner {
    display: grid;

    grid-template-columns: 1.25fr .75fr;

    gap: 70px;

    align-items: center;
}

.kicker {
    font-size: 11px;

    letter-spacing: 1px;

    color: var(--blue);

    font-weight: 800;
}

.profile-strip h2,
.contact-section h2 {
    font-size: 23px;

    line-height: 1.2;

    margin: 5px 0 10px;
}

.profile-strip p,
.contact-section p {
    font-size: 13px;

    color: var(--muted);

    max-width: 650px;
}


/* ---------- Profile Points ---------- */

.profile-points {
    display: grid;

    gap: 10px;

    font-size: 12px;

    font-weight: 600;
}

.profile-points i {
    color: var(--blue);

    margin-right: 7px;
}


/* =========================================================
   19. KONTAK
   ========================================================= */

.contact-section {
    padding: 42px 0;
}

.contact-list {
    display: grid;

    gap: 10px;
}

.contact-list div {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;
}

.contact-list i {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    background: #edf6ff;

    color: var(--blue);

    border-radius: 7px;
}


/* =========================================================
   20. FOOTER
   ========================================================= */

.footer {
    background: #0a407b;

    color: #fff;
}

.footer-grid {
    display: grid;

    grid-template-columns: 1.3fr 1fr 1.3fr .8fr;

    gap: 35px;

    padding: 36px 0;
}


/* ---------- Footer Brand ---------- */

.footer-brand {
    display: flex;

    gap: 11px;
}

.footer-brand img {
    width: 58px;
    height: 58px;

    object-fit: contain;
}

.footer h3 {
    font-size: 14px;

    margin: 4px 0;
}

.footer h4 {
    font-size: 11px;

    margin: 0 0 10px;
}


/* ---------- Footer Links ---------- */

.footer p,
.footer a {
    display: block;

    font-size: 11px;

    color: #d8e8f7;

    margin: 4px 0;
}

.footer p i {
    width: 17px;
}

.footer a:hover {
    color: var(--yellow);
}


/* ---------- Footer Social ---------- */

.footer-social {
    display: flex;

    gap: 9px;
}

.footer-social a {
    width: 32px;
    height: 32px;

    border: 1px solid rgba(255, 255, 255, .25);

    border-radius: 7px;

    display: grid;
    place-items: center;

    font-size: 15px;
}


/* =========================================================
   21. FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .17);

    padding: 12px 0;
}

.footer-bottom .container {
    display: flex;

    justify-content: space-between;

    font-size: 10px;

    color: #bfd3e7;
}


/* =========================================================
   22. LOGIN MODAL
   =========================================================
   Masih dipertahankan karena HTML modal masih ada.
   Jika nanti login sudah sepenuhnya menggunakan halaman
   /login, bagian modal ini bisa dihapus.
   ========================================================= */

.modal {
    display: none;

    position: fixed;

    inset: 0;

    z-index: 100;

    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex;
}

.modal-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(0, 30, 65, .7);
}

.modal-card {
    position: relative;

    z-index: 1;

    width: min(400px, calc(100% - 30px));

    padding: 27px;

    background: #fff;

    border-radius: 12px;
}

.close {
    position: absolute;

    right: 12px;
    top: 12px;

    width: 30px;
    height: 30px;

    border: 0;

    border-radius: 50%;

    cursor: pointer;
}

.modal-icon {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #eaf5ff;

    color: var(--blue);

    display: grid;
    place-items: center;

    font-size: 23px;
}

.modal-card h2 {
    font-size: 21px;

    margin: 10px 0 3px;
}

.modal-card p,
.modal-card small {
    font-size: 10px;

    color: var(--muted);
}

.modal-card label {
    display: block;

    font-size: 9px;

    font-weight: 700;

    margin: 10px 0 5px;
}


/* ---------- Modal Input ---------- */

.input {
    height: 42px;

    border: 1px solid #d9e5ef;

    border-radius: 7px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 10px;
}

.input i {
    color: #7890a8;
}

.input input {
    width: 100%;

    border: 0;
    outline: 0;

    font-size: 11px;
}


/* ---------- Primary Button ---------- */

.btn-primary {
    width: 100%;
    height: 42px;

    margin-top: 15px;

    border: 0;
    border-radius: 7px;

    background: var(--blue);
    color: #fff;

    font-weight: 700;

    cursor: pointer;
}

/* =========================================================
   LOGIN ANGGOTA - KHUSUS NAVBAR
   ========================================================= */

.nav > a.btn-login {
    padding: 8px 13px;
    margin-left: 10px;

    font-size: 13px;
    font-weight: 800;

    border-radius: 7px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    line-height: 1.2;

    white-space: nowrap;
}

/* =========================================================
   23. TABLET
   ========================================================= */

@media (max-width: 950px) {

    /* Navbar */
    .nav > a {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Features */
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);

        row-gap: 18px;
    }

    .feature:nth-child(3) {
        border: 0;
    }

    /* Main Content */
    .two-column {
        grid-template-columns: 1fr;
    }

    /* Sidebar */
    .sidebar {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    .quote-card {
        grid-column: 1 / -1;
    }

    /* Profile & Contact */
    .profile-inner,
    .contact-inner {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* =========================================================
   24. MOBILE
   ========================================================= */

@media (max-width: 720px) {

    /* ---------- Topbar ---------- */

    .topbar {
        display: none;
    }


    /* ---------- Header ---------- */

    .header {
        height: 66px;
    }

    .brand img {
        width: 45px;
        height: 45px;
    }

    .brand-name {
        font-size: 14px;
    }

    .brand-tag {
        font-size: 8px;
    }


    /* ---------- Mobile Toggle ---------- */

    .mobile-toggle {
        display: block;
    }


    /* ---------- Mobile Navigation ---------- */

    .nav {
        display: none;

        position: absolute;

        left: 14px;
        right: 14px;

        top: 66px;

        background: #fff;

        box-shadow: var(--shadow);

        padding: 8px;

        border-radius: 8px;

        flex-direction: column;

        align-items: stretch;
    }

    .nav.open {
        display: flex;
    }

    .nav > a {
        padding: 11px;

        font-size: 15px;
    }

    .nav > a.active::after {
        display: none;
    }


    /* ---------- Login Button Mobile ---------- */

    .btn-login {
        margin: 4px 0;

        padding: 10px 13px;

        justify-content: center;
    }


    /* ---------- Hero ---------- */

    .hero {
        height: 460px;
    }

    .hero-copy {
        width: 100%;

        padding: 0 8px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 14px;
    }


    /* ---------- Features ---------- */

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

    .feature {
        border: 0;

        padding: 5px 10px;
    }

    .feature:last-child {
        grid-column: 1 / -1;
    }

    .feature p {
        font-size: 11px;
    }


    /* ---------- Category & News ---------- */

    .category-grid,
    .news-grid {
        grid-template-columns: 1fr 1fr;
    }


    /* ---------- Sidebar ---------- */

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

    .quote-card {
        grid-column: auto;
    }


    /* ---------- Footer ---------- */

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

    .footer-bottom .container {
        flex-direction: column;

        gap: 5px;
    }
}


/* =========================================================
   25. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .container {
        width: calc(100% - 26px);
    }

    .category-grid,
    .news-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero {
        height: 480px;
    }
}