/* ---------- slika od zvuka: zvucna traka i knjiga teksta ---------- */

.rad-head{padding:26px 0 6px}
.rad-head h1{margin:0;font-size:30px;font-weight:400;letter-spacing:-.02em}
.rad-head .meta-line{display:block;margin:8px 0 0;font-family:var(--mono);font-size:11px;
                     letter-spacing:.05em;color:var(--muted)}

/* zvucna traka */
.zvuk{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
      padding:12px 0;margin:14px 0 0;background:var(--paper);
      border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.zvuk button{font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
             background:none;border:1px solid var(--hair);color:var(--ink);
             padding:7px 14px;cursor:pointer;white-space:nowrap}
.zvuk button:hover{border-color:var(--ink)}
.zvuk .t{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.zvuk .traka{position:relative;flex:1;height:2px;background:var(--hair);cursor:pointer;min-width:60px}
.zvuk .traka i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);display:block}
.zvuk .traka:hover{height:4px;margin-top:-1px}
.zvuk .nota{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* knjiga teksta */
.tknjiga{margin:26px 0 0}
.tknjiga .kbar{display:flex;align-items:center;gap:12px;
               font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.tknjiga .kbar .sp{margin-left:auto}
.tknjiga .kbar button{font:inherit;background:none;border:1px solid var(--hair);
                      color:var(--muted);padding:4px 10px;cursor:pointer}
.tknjiga .kbar button:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.tknjiga .kbar button:disabled{opacity:.35;cursor:default}

.tstage{position:relative;margin-top:10px;perspective:2400px;
        display:flex;align-items:stretch;justify-content:center}
.tsheet{position:relative;width:100%;height:70vh;min-height:380px;transform-style:preserve-3d;
        background:var(--card);box-shadow:0 12px 40px rgba(20,20,15,.16)}
.tp{position:absolute;top:0;height:100%;width:50%;overflow:hidden;background:var(--card)}
.tp.left{left:0}
.tp.right{left:50%}
.tsheet::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:30px;
               transform:translateX(-50%);pointer-events:none;z-index:3;
               background:linear-gradient(90deg,rgba(20,20,15,0),rgba(20,20,15,.10) 45%,
                          rgba(20,20,15,.10) 55%,rgba(20,20,15,0))}

.tpage{height:100%;padding:34px 40px;overflow:hidden;
       font-size:14px;line-height:1.62;color:#33332c;white-space:pre-wrap}
.tpage .num{position:absolute;bottom:12px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.tp.left .tpage .num{left:40px}
.tp.right .tpage .num{right:40px}
.tp.prazna{background:var(--card)}

/* list koji se okrece */
.tleaf{position:absolute;top:0;height:100%;width:50%;z-index:5;
       transform-style:preserve-3d;will-change:transform}
.tleaf.fwd{left:50%;transform-origin:left center}
.tleaf.bwd{left:0;transform-origin:right center}
.tleaf .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;background:var(--card)}
.tleaf .face.back{transform:rotateY(180deg)}
.tleaf .shade{position:absolute;inset:0;pointer-events:none;background:rgba(20,20,15,0);
              transition:background .5s ease}
.tleaf.turning .shade{background:rgba(20,20,15,.14)}

.thalf{position:absolute;top:0;bottom:0;width:42%;z-index:4;background:none;border:0;
       cursor:pointer;padding:0}
.thalf.prev{left:0;cursor:w-resize}
.thalf.next{right:0;cursor:e-resize}

/* podrad */
.podrad{margin:64px 0 0;padding-top:30px;border-top:1px solid var(--hair)}
.podrad h2{margin:0;font-size:22px;font-weight:400;letter-spacing:-.02em}
.podrad .meta-line{display:block;margin:7px 0 18px;font-family:var(--mono);font-size:11px;
                   letter-spacing:.05em;color:var(--muted)}
.mreza{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:22px}
.mreza img{width:100%;height:auto;display:block;background:var(--card)}

.rad-tekst{max-width:60ch;margin:22px 0 0;font-size:14.5px;color:#3a3a33;white-space:pre-line}
.rad-potpis{margin:12px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted)}
.rad-veza{display:inline-block;margin-top:10px;font-size:13.5px;color:var(--signal);text-decoration:none}
.rad-veza:hover{text-decoration:underline}

@media (max-width:760px){
  .tsheet{height:66vh;min-height:340px}
  .tsheet::after{display:none}   /* jedna stranica - nema hrpta */
  .tp.left{display:none}
  .tp.right{left:0;width:100%}
  .tleaf{width:100%}
  .tleaf.fwd{left:0}
  .tpage{padding:24px 22px;font-size:13.5px}
  .tp.left .tpage .num,.tp.right .tpage .num{right:22px;left:auto}
  .zvuk{flex-wrap:wrap;gap:10px}
}

/* da ljepljiva zvučna traka ne prekrije naslov pri skoku */
.podrad,.tknjiga{scroll-margin-top:76px}