/* =====================================================================
   IMPERATIV — virtuelna biblioteka
   Paleta: Fern / Pistaći / Komorač / Med / Narandža / Trešnjin cvijet
   ===================================================================== */

:root {
    --papir:        #F8F3E6;
    --papir-tamniji:#EFE6D0;
    --komorac:      #EBDEC0;
    --pistaci:      #C6C09C;
    --fern:         #768E78;
    --fern-tamna:   #55684F;
    --mastilo:      #2F3A2C;
    --mastilo-blijedo: #6C7565;
    --narandza:     #E8922F;
    --med:          #FCC88A;
    --bozur:        #E79897;
    --tresnja:      #FECDBE;
    --zvoncic:      #B7CBDB;
    --limeta:       #A9C23F;

    --drvo-gore:    #E4BE8C;
    --drvo-lice:    #C9975C;
    --drvo-dole:    #A97B44;

    --radijus:      14px;
    --sjenka-meka:  0 18px 40px -26px rgba(47, 58, 44, .55);
    --prelaz:       .42s cubic-bezier(.22, .68, .28, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(1100px 620px at 78% -12%, rgba(252, 200, 138, .40), transparent 62%),
        radial-gradient(900px 560px at 6% 8%, rgba(118, 142, 120, .22), transparent 58%),
        linear-gradient(180deg, var(--papir) 0%, var(--papir-tamniji) 100%);
    background-attachment: fixed;
    color: var(--mastilo);
    font-family: "Karla", "Segoe UI", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* police idu šire od teksta — polica tako izgleda duže */
main.omot { width: min(1420px, 100% - 40px); }

.preskoci {
    position: absolute;
    left: -9999px;
    background: var(--fern);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 10px 0;
    z-index: 99;
}
.preskoci:focus { left: 0; top: 0; }

:focus-visible {
    outline: 3px solid var(--narandza);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   Zaglavlje
   --------------------------------------------------------------- */
.vrh { padding: 54px 0 10px; }

.vrh-red {
    display: flex;
    align-items: center;
    gap: 22px;
}

.znak {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 26px -18px rgba(47, 58, 44, .6);
    overflow: hidden;
}
.znak img { max-width: 84%; max-height: 84%; display: block; }
.znak-crtez { width: 46px; height: 74px; }

.znak-tekst .podnaslov {
    margin: 0 0 2px;
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--mastilo-blijedo);
}

.znak-tekst h1 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    line-height: .95;
    letter-spacing: -.02em;
}

.uvod {
    max-width: 62ch;
    margin: 26px 0 0;
    font-size: 1.06rem;
    color: #4A5545;
}

/* ---------------------------------------------------------------
   Traka sa pretragom
   --------------------------------------------------------------- */
.traka {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 30px;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(118, 142, 120, .28);
}

.pretraga {
    position: relative;
    flex: 1 1 320px;
    display: flex;
    align-items: center;
}
.pretraga svg {
    position: absolute;
    left: 16px;
    width: 19px; height: 19px;
    fill: none;
    stroke: var(--mastilo-blijedo);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}
.pretraga input {
    width: 100%;
    padding: 14px 44px 14px 46px;
    font: inherit;
    color: var(--mastilo);
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(118, 142, 120, .34);
    border-radius: 999px;
    transition: border-color .2s, background .2s;
}
.pretraga input::placeholder { color: var(--mastilo-blijedo); }
.pretraga input::-webkit-search-cancel-button,
.pretraga input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.pretraga input:focus {
    background: #fff;
    border-color: var(--fern);
    outline: none;
    box-shadow: 0 0 0 4px rgba(118, 142, 120, .18);
}
.ocisti {
    position: absolute;
    right: 10px;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(118, 142, 120, .16);
    color: var(--mastilo);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.ocisti:hover { background: rgba(118, 142, 120, .3); }

.stanje {
    margin: 0;
    font-size: 15px;
    color: var(--mastilo-blijedo);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   Polica
   --------------------------------------------------------------- */
main { padding: 46px 0 90px; }

.polica {
    margin-bottom: 58px;
    transition: opacity .35s ease, max-height .5s ease, margin .35s ease, transform .35s ease;
}

.polica.sakrivena {
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    pointer-events: none;
}

.polica-zaglavlje {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.polica-zaglavlje h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -.01em;
}
.polica-zaglavlje p {
    margin: 0;
    display: flex;
    gap: 14px;
    font-size: 14.5px;
    color: var(--mastilo-blijedo);
}
.polica-zaglavlje .tema {
    padding: 2px 12px;
    border-radius: 999px;
    background: rgba(118, 142, 120, .18);
    color: var(--fern-tamna);
}

.polica--velika {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-inline: clamp(12px, 3vw, 46px);
}
.polica--velika .polica-zaglavlje { padding-inline: 4px; }
.polica--velika .polica-zaglavlje h2 { font-size: 2.6rem; }
.polica--velika .polica-zaglavlje .tema {
    background: var(--med);
    color: #6B4212;
    font-weight: 600;
}

/* --- konstrukcija police: zadnja stranica, bočne strane, daska --- */
.pregrada {
    position: relative;
    padding: 26px 30px 0;
    border-radius: 16px 16px 6px 6px;
}

/* zadnja stranica ormara */
.zadnja-stranica {
    position: absolute;
    inset: 0 0 12px 0;
    background:
        repeating-linear-gradient(90deg,
            rgba(169, 123, 68, .10) 0 1px,
            transparent 1px 7px,
            rgba(255, 255, 255, .16) 7px 8px,
            transparent 8px 26px),
        linear-gradient(180deg, rgba(176, 128, 74, .38), rgba(176, 128, 74, .18));
    border-radius: 16px 16px 0 0;
    box-shadow:
        inset 0 16px 30px -16px rgba(76, 52, 26, .7),
        inset 0 0 0 1px rgba(120, 82, 42, .14);
}

/* bočne strane ormara */
.pregrada::before,
.pregrada::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 12px;
    width: 15px;
    background: linear-gradient(90deg, var(--drvo-lice), var(--drvo-gore) 55%, var(--drvo-dole));
    box-shadow: inset 0 0 0 1px rgba(120, 82, 42, .22);
}
.pregrada::before { left: 0;  border-radius: 14px 4px 6px 8px; }
.pregrada::after  { right: 0; border-radius: 4px 14px 8px 6px; }

.knjige {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 330px;
    transition: gap var(--prelaz);
}
.pregrada[data-poravnanje="sredina"] .knjige { justify-content: safe center; }
.pregrada[data-poravnanje="desno"]   .knjige { justify-content: safe flex-end; }

.pregrada:hover .knjige,
.pregrada:focus-within .knjige { gap: 13px; }

.knjige--klizne {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(169, 123, 68, .5) transparent;
}
.knjige--klizne::-webkit-scrollbar { height: 7px; }
.knjige--klizne::-webkit-scrollbar-track { background: transparent; }
.knjige--klizne::-webkit-scrollbar-thumb {
    background: rgba(169, 123, 68, .5);
    border-radius: 99px;
}

.polica--velika .knjige {
    height: 640px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(169, 123, 68, .5) transparent;
}
.polica--velika .knjige::-webkit-scrollbar { height: 7px; }
.polica--velika .knjige::-webkit-scrollbar-thumb {
    background: rgba(169, 123, 68, .5);
    border-radius: 99px;
}
/* na velikoj polici su i same knjige šire */
.polica--velika .knjiga { width: calc(var(--debljina, 42px) * 1.65); }

.prazno {
    align-self: center;
    margin: 0 auto;
    padding-bottom: 60px;
    color: #8A7A5F;
    font-size: 15px;
}

/* daska */
.daska {
    position: relative;
    z-index: 3;
    margin: 0 -26px;
    height: 18px;
    background: linear-gradient(180deg,
        #F3D8AE 0%,
        var(--drvo-gore) 34%,
        var(--drvo-lice) 78%,
        var(--drvo-dole) 100%);
    border-radius: 999px;
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, .7),
        inset 0 -2px 3px -1px rgba(120, 82, 42, .35),
        0 14px 22px -14px rgba(76, 52, 26, .85);
}
.daska-lice { display: none; }

.polica--velika .daska { height: 26px; margin: 0 -34px; }
.polica--velika .pregrada { padding: 34px 38px 0; }
.polica--velika .pregrada::before,
.polica--velika .pregrada::after { width: 20px; }

/* ---------------------------------------------------------------
   Knjiga (hrbat)
   --------------------------------------------------------------- */
.knjiga {
    flex: 0 0 auto;
    width: var(--debljina, 42px);
    height: var(--visina, 74%);
    padding: 0;
    border: 0;
    cursor: pointer;
    background:
        /* platno — sitna vertikalna i horizontalna tekstura */
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, .05) 0 1px,
            transparent 1px 3px),
        repeating-linear-gradient(180deg,
            rgba(0, 0, 0, .05) 0 1px,
            transparent 1px 4px),
        /* hrbat: uvez lijevo, listovi desno */
        linear-gradient(90deg,
            rgba(0, 0, 0, .14) 0 2px,
            rgba(255, 255, 255, .42) 2px 5px,
            rgba(255, 255, 255, .10) 5px 9px,
            transparent 9px calc(100% - 9px),
            rgba(0, 0, 0, .10) calc(100% - 9px) calc(100% - 5px),
            rgba(255, 255, 255, .30) calc(100% - 5px) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .06) 45%, rgba(0, 0, 0, .18)),
        var(--boja, #768E78);
    border-radius: 3px 6px 6px 3px;
    box-shadow:
        2px 4px 10px -6px rgba(47, 40, 28, .8),
        inset 0 0 0 1px rgba(0, 0, 0, .07);
    transform-origin: bottom center;
    transition: transform var(--prelaz), box-shadow var(--prelaz), opacity .3s ease, filter .3s ease;
    overflow: hidden;
}

.knjiga::before,
.knjiga::after {
    content: "";
    position: absolute;
    left: 5px; right: 7px;
    height: 7px;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .55) 0 2px,
            rgba(0, 0, 0, .10) 2px 5px,
            rgba(255, 255, 255, .45) 5px 7px);
    border-radius: 1px;
}
.knjiga { position: relative; }
.knjiga::before { top: 14px; }
.knjiga::after  { bottom: 14px; }

.knjiga:hover,
.knjiga:focus-visible {
    transform: translateY(-18px) rotate(-1.4deg);
    box-shadow: 4px 16px 26px -12px rgba(47, 40, 28, .75);
}

.hrbat {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: 20px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #2C2419;
    text-align: left;
}
.knjiga--tamna .hrbat { color: #FBF5E7; }

.hrbat-naslov {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 18.5px;
    letter-spacing: .01em;
    max-height: 74%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hrbat-autor {
    font-size: 14px;
    opacity: .78;
    max-height: 24%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.polica--velika .hrbat-naslov { font-size: 26px; }
.polica--velika .hrbat-autor  { font-size: 17px; }
.polica--velika .hrbat { padding: 30px 0; }

.knjiga.prigusena {
    opacity: .1;
    filter: grayscale(.7);
    pointer-events: none;
}

.nema-rezultata,
.prazno-sve {
    margin: 40px 0;
    padding: 26px;
    background: rgba(255, 255, 255, .6);
    border: 1px dashed rgba(118, 142, 120, .45);
    border-radius: var(--radijus);
    text-align: center;
    color: var(--mastilo-blijedo);
}

/* ---------------------------------------------------------------
   Podnožje
   --------------------------------------------------------------- */
.dno {
    padding: 26px 0 40px;
    border-top: 1px solid rgba(118, 142, 120, .28);
}
.dno-red {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 14.5px;
    color: var(--mastilo-blijedo);
}
.dno-red p { margin: 0; }
.dno-red a {
    color: var(--fern-tamna);
    text-decoration: none;
    border-bottom: 1px solid rgba(118, 142, 120, .5);
}
.dno-red a:hover { color: var(--narandza); border-color: var(--narandza); }

/* ---------------------------------------------------------------
   Čitaonica — otvorena knjiga
   --------------------------------------------------------------- */
.citaonica {
    --raspon: 1040px;
    --pola: 520px;
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
    perspective: 2600px;
}
.citaonica[hidden] { display: none; }

.zastor {
    position: absolute;
    inset: 0;
    background: rgba(43, 52, 40, .62);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .4s ease;
}
.citaonica.aktivna .zastor { opacity: 1; }

.knjiga-otvorena {
    position: relative;
    z-index: 2;
    width: var(--pola);
    height: min(78vh, 660px);
    background: linear-gradient(90deg, #FBF6EA 0%, #F5EEDD 48%, #F0E8D4 50%, #FBF6EA 100%);
    border-radius: 4px 10px 10px 4px;
    box-shadow: 0 40px 80px -30px rgba(30, 38, 28, .85);
    transform-style: preserve-3d;
    transition:
        transform .52s cubic-bezier(.2, .72, .24, 1),
        width .9s cubic-bezier(.26, .7, .22, 1),
        opacity .3s ease;
    opacity: 0;
    overflow: hidden;
}
.citaonica.sjela .knjiga-otvorena { opacity: 1; }

/* knjiga se širi dok se korica otvara */
.citaonica.otvorena .knjiga-otvorena { width: var(--raspon); }

.listovi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: var(--raspon);
    height: 100%;
}

/* šav u sredini */
.listovi::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 34px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(120, 96, 58, .22), transparent);
    opacity: 0;
    transition: opacity .5s ease .4s;
    pointer-events: none;
}
.citaonica.otvorena .listovi::after { opacity: 1; }

.stranica {
    padding: 42px 40px;
    overflow-y: auto;
}
.stranica--lijeva { border-right: 1px solid rgba(120, 96, 58, .16); }

.oznaka-izdanja,
.oznaka-stranice {
    margin: 0 0 14px;
    font-size: 13.5px;
    letter-spacing: .05em;
    color: #8A7A5F;
}

.knjiga-otvorena h3 {
    margin: 0 0 6px;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -.01em;
}
.otv-autor {
    margin: 0 0 26px;
    font-size: 1.02rem;
    color: var(--fern-tamna);
}

.izjava {
    position: relative;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.09rem;
    line-height: 1.72;
    padding-left: 20px;
    border-left: 3px solid var(--med);
}
.izjava p { margin: 0 0 14px; }

.o-knjizi {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(120, 96, 58, .18);
    font-size: .97rem;
    color: #55604F;
}
.o-knjizi p { margin: 0 0 12px; }
.o-knjizi .naslov-odjeljka {
    display: block;
    margin-bottom: 8px;
    font-size: 13.5px;
    letter-spacing: .05em;
    color: #8A7A5F;
}

.galerija {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.galerija img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    background: rgba(198, 192, 156, .35);
    box-shadow: 0 10px 20px -14px rgba(47, 40, 28, .8);
    cursor: zoom-in;
    transition: transform .3s ease;
}
.galerija img:hover { transform: scale(1.03); }
.galerija figure { margin: 0; }
.galerija figcaption {
    margin-top: 6px;
    font-size: 12.5px;
    color: #8A7A5F;
}
.galerija-prazna {
    grid-column: 1 / -1;
    padding: 30px 20px;
    border: 1px dashed rgba(120, 96, 58, .35);
    border-radius: 10px;
    text-align: center;
    font-size: 14.5px;
    color: #8A7A5F;
}

.zatvori {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 8;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(47, 58, 44, .1);
    color: var(--mastilo);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}
.zatvori:hover { background: var(--bozur); color: #fff; }

/* korica koja se otvara */
.korica {
    position: absolute;
    left: 0; top: 0;
    width: var(--pola);
    height: 100%;
    z-index: 6;
    display: grid;
    place-items: center;
    cursor: pointer;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px),
        linear-gradient(90deg,
            rgba(0, 0, 0, .26) 0 10px,
            rgba(255, 255, 255, .16) 10px 16px,
            rgba(0, 0, 0, .06) 16px 30px,
            transparent 30px),
        linear-gradient(155deg, rgba(255, 255, 255, .24), rgba(0, 0, 0, .2));
    background-color: var(--boja, #768E78);
    border-radius: 4px 8px 8px 4px;
    transform-origin: left center;
    transform: rotateY(0deg);
    transition: transform 1.05s cubic-bezier(.3, .66, .2, 1);
    box-shadow: 14px 0 34px -18px rgba(30, 38, 28, .95);
    backface-visibility: hidden;
}

.korica-sadrzaj {
    width: min(78%, 360px);
    padding: 40px 26px;
    text-align: center;
    color: #FBF5E7;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 3px;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .09);
}
.korica--tamna .korica-sadrzaj {
    color: #2C2419;
    border-color: rgba(44, 36, 25, .3);
    box-shadow: inset 0 0 0 5px rgba(44, 36, 25, .08);
}

.korica-oznaka {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    letter-spacing: .08em;
    opacity: .8;
}
.korica-sadrzaj h4 {
    margin: 0 0 14px;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.15;
}
.korica-sadrzaj p {
    margin: 0;
    font-size: 1rem;
    opacity: .85;
}

.citaonica.otvorena .korica {
    transform: rotateY(-174deg);
    cursor: default;
}

/* nagovještaj na korici */
.korica-nagovjestaj {
    display: block;
    margin-top: 26px;
    font-size: 13px;
    letter-spacing: .06em;
    opacity: .72;
    animation: disanje 2.6s ease-in-out infinite;
}
@keyframes disanje {
    0%, 100% { opacity: .45; }
    50%      { opacity: .95; }
}
.citaonica.otvorena .korica-nagovjestaj { animation: none; }

/* zamjena sadržaja pri kretanju kroz policu */
.listovi { transition: opacity .19s ease; }
.knjiga-otvorena.mijenja .listovi,
.knjiga-otvorena.mijenja .korica-sadrzaj { opacity: 0; }
.korica-sadrzaj { transition: opacity .19s ease; }

/* strelice lijevo i desno */
.strelica {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(251, 245, 231, .3);
    border-radius: 50%;
    background: rgba(43, 52, 40, .55);
    color: #FBF5E7;
    cursor: pointer;
    transition: background .2s, opacity .2s, transform .2s;
}
.strelica svg {
    width: 24px; height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.strelica:hover:not(:disabled) {
    background: var(--fern);
    transform: translateY(-50%) scale(1.08);
}
.strelica:disabled { opacity: .22; cursor: default; }
.strelica--lijevo { left: clamp(10px, 3vw, 40px); }
.strelica--desno  { right: clamp(10px, 3vw, 40px); }

/* ---------------------------------------------------------------
   Lupa (uvećana fotografija)
   --------------------------------------------------------------- */
.lupa {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 30px;
    background: rgba(30, 38, 28, .88);
    cursor: zoom-out;
}
.lupa img {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 30px 60px -24px #000;
}

/* ---------------------------------------------------------------
   Manji ekrani
   --------------------------------------------------------------- */
@media (max-width: 1120px) {
    .citaonica { --raspon: 92vw; --pola: 46vw; }
}

@media (max-width: 900px) {
    .citaonica {
        --raspon: 100%;
        --pola: 100%;
        padding: 14px 14px 76px;
        perspective: 1500px;
    }

    .knjiga-otvorena {
        height: 84vh;
        height: 84dvh;
        border-radius: 6px;
    }

    .listovi {
        grid-template-columns: 1fr;
        grid-auto-rows: min-content;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .listovi::after { display: none; }

    .stranica { overflow: visible; padding: 26px 20px; }
    .stranica--lijeva {
        border-right: 0;
        border-bottom: 1px solid rgba(120, 96, 58, .16);
    }

    .knjiga-otvorena h3 { font-size: 1.55rem; }
    .otv-autor { margin-bottom: 18px; font-size: 1rem; }
    .izjava { font-size: 1.02rem; padding-left: 14px; }
    .o-knjizi { margin-top: 22px; padding-top: 16px; }
    .galerija { gap: 10px; }

    .korica { border-radius: 6px; }
    .korica-sadrzaj { width: min(86%, 330px); padding: 30px 20px; }
    .korica-sadrzaj h4 { font-size: 1.6rem; }
    .korica-nagovjestaj { margin-top: 20px; }

    .zatvori { top: 8px; right: 8px; width: 36px; height: 36px; font-size: 21px; }

    .strelica {
        width: 46px; height: 46px;
        top: auto; bottom: 16px;
        transform: none;
        background: rgba(43, 52, 40, .78);
    }
    .strelica:hover:not(:disabled) { transform: scale(1.08); }
    .strelica--lijevo { left: 18px; }
    .strelica--desno  { right: 18px; }
}

@media (max-width: 900px) {
    /* velika polica ostaje unutar strane — bez razvlačenja preko ivica */
    .polica--velika {
        width: auto;
        margin-left: 0;
        padding-inline: 0;
    }
    /* na dodir se knjige prevlače lijevo-desno, unutar police */
    .knjige {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(169, 123, 68, .5) transparent;
        padding-bottom: 2px;
    }
    .knjige::-webkit-scrollbar { height: 6px; }
    .knjige::-webkit-scrollbar-thumb {
        background: rgba(169, 123, 68, .45);
        border-radius: 99px;
    }
    /* razmak među knjigama je stalan, jer prelaza mišem nema */
    .pregrada .knjige { gap: 7px; }
    .knjiga:hover, .knjiga:focus-visible { transform: none; }
}

@media (max-width: 700px) {
    body { font-size: 16px; }
    .vrh { padding-top: 34px; }
    .vrh-red { gap: 16px; }
    .znak { width: 72px; height: 72px; border-radius: 18px; }
    .knjige { height: 240px; }
    .polica--velika .knjige { height: 400px; }
    .hrbat-naslov { font-size: 15px; }
    .hrbat-autor { font-size: 12px; }
    .polica--velika .hrbat-naslov { font-size: 18px; }
    .polica--velika .hrbat-autor { font-size: 13px; }
    .polica--velika .polica-zaglavlje h2 { font-size: 1.8rem; }
    .pregrada { padding: 16px 14px 0; }
    .daska { margin: 0 -14px; height: 15px; }
    .polica--velika .pregrada { padding: 20px 16px 0; }
    .polica--velika .daska { margin: 0 -16px; height: 18px; }
    .polica--velika .polica-zaglavlje h2 { font-size: 1.7rem; }
    main { padding: 28px 0 60px; }
    .polica { margin-bottom: 40px; }
    .hrbat { padding: 18px 0; }
    .hrbat-naslov { font-size: 12px; }
    .stanje { white-space: normal; }
    .dno-red { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}