/* ==========================================================================
   MODUL:anatomija — potpisni element, anatomija cipele
   Postolar-Ilić · prototip v2 · MODUL:anatomija
   Ovaj list se u E5 veže KAO ZADNJI SLOJ, iza style.css i media_queries.css.
   Ne mijenjati .wrapper ni lanac kontejnera jezgre.
   ========================================================================== */

.anatomija{background:var(--kost);border-radius:22px;box-shadow:var(--sjena);padding:clamp(18px,2.4vw,30px);border:1px solid var(--linija)}
.anat-glava{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px dashed var(--linija);padding-bottom:14px;margin-bottom:6px}
.anat-glava h3{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-2)}
.anat-glava span{font:500 12px/1 var(--f-mono);color:var(--konjak)}
.crtez{position:relative;margin:0 -6px}
.crtez svg{width:100%;height:auto;display:block;overflow:visible}
.crtez .dio{transition:opacity .35s,filter .35s;cursor:pointer}
.crtez[data-aktivan] .dio{opacity:.78;filter:saturate(.35) brightness(1.06)}
.crtez[data-aktivan="potpetica"] .d-potpetica,.crtez[data-aktivan="don"] .d-don,.crtez[data-aktivan="gornjiste"] .d-gornjiste,.crtez[data-aktivan="vrh"] .d-vrh,.crtez[data-aktivan="vezice"] .d-vezice,.crtez[data-aktivan="podstava"] .d-podstava{opacity:1;filter:drop-shadow(0 0 7px rgba(217,145,79,.85))}
.crtez .kota{font:500 10px var(--f-mono);letter-spacing:.12em;fill:var(--tekst-2)}
.crtez .kota-l{stroke:var(--tekst-2);stroke-width:.8;fill:none}
.tocka-dio{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--bordo);color:var(--papir);font:600 12px/34px var(--f-mono);box-shadow:0 0 0 5px rgba(49,9,9,.14);transition:transform .25s,background .25s}
.tocka-dio::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--konjak);opacity:0;animation:puls 2.4s ease-out infinite}
.tocka-dio:hover,.tocka-dio[aria-pressed="true"]{transform:scale(1.14);background:var(--konjak)}
.tocka-dio[aria-pressed="true"]::before{opacity:1}
.t-potpetica{left:19%;top:87%}
.dijelovi{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.dijelovi>li>button{width:100%;background:none;border:1px solid var(--linija);border-radius:10px;padding:10px 6px;font:500 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-2);cursor:pointer;transition:all .2s}
.dijelovi>li>button:hover{border-color:var(--konjak);color:var(--tekst)}
.dijelovi>li>button[aria-pressed="true"]{background:var(--bordo);border-color:var(--bordo);color:var(--papir)}
.opis-dijela{margin-top:16px;border-top:1px dashed var(--linija);padding-top:18px;min-height:148px}
.opis-dijela>div{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start;animation:uvod .45s ease both}
.opis-dijela>div[hidden]{display:none}
@keyframes uvod{from{opacity:0;transform:translateY(8px)}}
.opis-dijela .br{grid-row:1 / span 3;font:300 54px/0.9 var(--f-disp);color:var(--konjak)}
.opis-dijela h3{font-size:26px}
.opis-dijela p{margin:0;color:var(--tekst-2)}
.opis-dijela .poveznica{margin-top:8px}
@media (max-width:720px){
  .dijelovi{grid-template-columns:repeat(3,1fr)}
  .tocka-dio{width:28px;height:28px;margin:-14px 0 0 -14px;line-height:28px;font-size:11px}
  .opis-dijela .br{font-size:40px}
  .opis-dijela h3{font-size:22px}
}