:root {
   --item1-transform: translateX(-200%) translateY(-5%) scale(1.5);
   --item1-filter: blur(30px);
   --item1-zIndex: 11;
   --item1-opacity: 0;

   --item2-transform: translateX(0);
   --item2-filter: blur(0px);
   --item2-zIndex: 10;
   --item2-opacity: 1;

   --item3-transform: translate(160%,10%) scale(0.8);
   --item3-filter: blur(10px);
   --item3-zIndex: 9;
   --item3-opacity: 1;

   --item4-transform: translate(120%,20%) scale(0.5);
   --item4-filter: blur(30px);
   --item4-zIndex: 8;
   --item4-opacity: 1;
    
   --item5-transform: translate(120%,30%) scale(0.3);
   --item5-filter: blur(40px);
   --item5-zIndex: 7;
   --item5-opacity: 0;
	 
	--hue: 0;
	--sat: 0%;
	--bg: hsl(var(--hue), var(--sat), 90%);
	--fg: hsl(var(--hue), var(--sat), 10%);
	--trans-dur: 0.3s;

	--case-width: 85vw;
	--br: calc(var(--case-width) / 22.2);
	--case-color: #b4b4b4;
	--case-padding: calc(var(--br) / 3.2);
	--keys-gap: 2px;
	--keys-padding: calc(var(--br) / 5.5);
	--plate-color: #e7e4e2;
	--shadow-angle: 135deg;

}

.carousel { position: relative; height:1070px; overflow: hidden; margin-top: -150px; z-index:99; }

#masterPreloader { position: fixed; inset: 0; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 9999; }
.loader-circle { width: 50px; height: 50px; border: 4px solid #888; border-top: 4px solid #fff; border-radius: 50%; animation: spiner 1s linear infinite; margin-bottom: 10px; }

@keyframes spiner {
  to { transform: rotate(360deg); }
}

.carousel .list { position: absolute; width: 100%; background: #fff; max-width: 100%; height: 100%; left: 40%; transform: translateX(-40%); }
.carousel .list .item { position: absolute; left: 0%; width: 100%; height: 100%; font-size: 15px; transition: left 0.5s, opacity 0.5s, width 0.5s; }
.carousel .list .item:nth-child(n + 6){ opacity: 0; }
.carousel .list .item:nth-child(2) { z-index: 10; transform: translateX(0); }
.carousel .list .item img { width: 65%; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: right 1.5s; }
.carousel .list .item.wide img { width: 100%; }
.carousel .list .item .introduce { opacity: 0; pointer-events: none; }
.carousel .list .item:nth-child(2) .introduce{ opacity: 1; pointer-events: auto; width: 550px; position: absolute; top: 45%; left: 10%; transform:  translateY(-45%); transition: opacity 0.5s; }
.carousel .list .item .introduce .title { font-size: 2em; font-weight: 700; line-height: 1.3em; text-transform: uppercase; }
.carousel .list .item .introduce .topic { font-size: 5em; line-height: 1em; font-weight: 800; }
.carousel .list .item .introduce .topic span { font-size: 9em; position:absolute; line-height: 2em; left:-50px; top:-140px; opacity: 0.10; font-weight: 800; }
.carousel .list .item .introduce .des { font-size: 18px; line-height: 1.6rem; color: var(--tg-color-gray-7); font-weight: 600; margin-top: 15px; }
.carousel .list .item { position: absolute; left: 0%; width: 100%; height: 100%; font-size: 15px; transition: left 0.5s, opacity 0.5s, width 0.5s; }

.text_rotation_right { display: none; opacity:0; visibility:hidden; }

.carousel .list .item:nth-child(1) { transform: var(--item1-transform); filter: var(--item1-filter); z-index: var(--item1-zIndex); opacity: var(--item1-opacity); pointer-events: none; }
.carousel .list .item:nth-child(3) { transform: var(--item3-transform); filter: var(--item3-filter); z-index: var(--item3-zIndex); }
.carousel .list .item:nth-child(4) { transform: var(--item4-transform); filter: var(--item4-filter); z-index: var(--item4-zIndex); }
.carousel .list .item:nth-child(5) { transform: var(--item5-transform); filter: var(--item5-filter); opacity: var(--item5-opacity); pointer-events: none; }
	 
/* animacija teksta za item2 */
.carousel .list .item:nth-child(2) .introduce .title,
.carousel .list .item:nth-child(2) .introduce .topic,
.carousel .list .item:nth-child(2) .introduce .des,
.carousel .list .item:nth-child(2) .introduce .seeMore,
.carousel .list .item:nth-child(2) .introduce .btn-four { opacity: 0; animation: showContent 0.5s 1s ease-in-out 1 forwards; }

@keyframes showContent {
    from{ transform: translateY(-30px); filter: blur(10px); }
	 to { transform: translateY(0); opacity: 1; filter: blur(0px); }
}
.carousel .list .item:nth-child(2) .introduce .topic { animation-delay: 1.2s; }
.carousel .list .item:nth-child(2) .introduce .des { animation-delay: 1.4s; }
.carousel .list .item:nth-child(2) .introduce .seeMore { animation-delay: 1.6s; }
.carousel .list .item:nth-child(2) .introduce .btn-four { animation-delay: 1.6s; }

/* next */
.carousel.next .item:nth-child(1){ animation: transformFromPosition2 0.5s ease-in-out 1 forwards; }

@keyframes transformFromPosition2{
    from { transform: var(--item2-transform); filter: var(--item2-filter); opacity: var(--item2-opacity); }
}

.carousel.next .item:nth-child(2){ animation: transformFromPosition3 0.7s ease-in-out 1 forwards; }

@keyframes transformFromPosition3{
    from { transform: var(--item3-transform); filter: var(--item3-filter); opacity: var(--item3-opacity); }
}

.carousel.next .item:nth-child(3){ animation: transformFromPosition4 0.9s ease-in-out 1 forwards; }

@keyframes transformFromPosition4{
    from { transform: var(--item4-transform); filter: var(--item4-filter); opacity: var(--item4-opacity); }
}
.carousel.next .item:nth-child(4){ animation: transformFromPosition5 1.1s ease-in-out 1 forwards; }

@keyframes transformFromPosition5{
    from{ transform: var(--item5-transform); filter: var(--item5-filter); opacity: var(--item5-opacity); }
}

/* prev */
.carousel.prev .list .item:nth-child(5){ animation: transformFromPosition4 0.5s ease-in-out 1 forwards; }
.carousel.prev .list .item:nth-child(4){ animation: transformFromPosition3 0.7s ease-in-out 1 forwards; }
.carousel.prev .list .item:nth-child(3){ animation: transformFromPosition2 0.9s ease-in-out 1 forwards; }
.carousel.prev .list .item:nth-child(2){ animation: transformFromPosition1 1.1s ease-in-out 1 forwards; }

@keyframes transformFromPosition1{
    from { transform: var(--item1-transform); filter: var(--item1-filter); opacity: var(--item1-opacity);         }
}

.carousel .list .item .detail{ opacity: 0; pointer-events: none; }

/* prikaz detalja */
.carousel.showDetail .list .item:nth-child(3), .carousel.showDetail .list .item:nth-child(4){ left: 100%; opacity: 0; pointer-events: none; }
.carousel.showDetail .list .item:nth-child(2) { width: 100%; }
.carousel.showDetail .list .item:nth-child(2) .introduce { opacity: 0; pointer-events: none; }
.carousel.showDetail .list .item:nth-child(2) img { right: 50%; }
.carousel.showDetail .list .item:nth-child(2) .detail { opacity: 1; width: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: right; pointer-events: auto; }
.carousel.showDetail .list .item:nth-child(2) .detail .title { font-size: 6em; font-weight:800; line-height: 2em; }
.carousel.showDetail .list .item:nth-child(2) .detail .specifications { display: flex; gap: 10px; width: 100%; border-top: 1px solid #5553; margin-top: 20px; }
.carousel.showDetail .list .item:nth-child(2) .detail .specifications div {
    width: 150px;
    text-align: center;
    flex-shrink: 0;
    background: var(--raisin-black-1);
    color: #var(--platinum);
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    padding: 15px; }
	 
.carousel.showDetail .list .item:nth-child(2) .detail .specifications div p:nth-child(1) { font-weight: 800; }

.carousel.carousel.showDetail .list .item:nth-child(2) .model3dViewer_btns button{ font-family: Poppins; background-color: transparent; border: 1px solid #5555; margin-left: 5px; padding: 5px 10px; letter-spacing: 2px; font-weight: 500; }
.carousel.carousel.showDetail .list .item:nth-child(2) .model3dViewer_btns button:nth-child(2) { background-color: #693EFF; color: #eee; }
	 
.carousel.showDetail .list .item:nth-child(2) .detail .title,
.carousel.showDetail .list .item:nth-child(2) .detail .des,
.carousel.showDetail .list .item:nth-child(2) .detail .specifications,
.carousel.showDetail .list .item:nth-child(2) .detail .model3dViewer_btns { opacity: 0; animation: showContent 0.5s 1s ease-in-out 1 forwards; }
.carousel.showDetail .list .item:nth-child(2) .detail .des{ animation-delay: 1.2s; }
.carousel.showDetail .list .item:nth-child(2) .detail .specifications { animation-delay: 1.4s; }
.carousel.showDetail .list .item:nth-child(2) .detail .model3dViewer_btns { animation-delay: 1.6s; }
.carousel.showDetail #back { opacity: 1; }
.carousel.showDetail #prev, .carousel.showDetail #next { opacity: 0; pointer-events: none; }

.carousel.showDetail::before { transform: translate(-100%, -50%) rotate(90deg); filter: blur(130px); }

@media screen and (max-width: 991px){
    /* ipad, tablet */
    .carousel .list .item { width: 90%;}
    .carousel.showDetail .list .item:nth-child(2) .detail .specifications { overflow: auto; }
    .carousel.showDetail .list .item:nth-child(2) .detail .title { font-size: 2em; }
}
@media screen and (max-width: 767px){
    /* mobitel */
    .carousel { height: 600px; }
    .carousel .list .item { width: 100%; font-size: 10px; }
    .carousel .list { height: 100%; }
    .carousel .list .item:nth-child(2) .introduce { width: 50%; }
    .carousel .list .item img { width: 50%; }
    .carousel.showDetail .list .item:nth-child(2) .detail { backdrop-filter: blur(10px); font-size: small; }
    .carousel .list .item:nth-child(2) .introduce .des,
    .carousel.showDetail .list .item:nth-child(2) .detail .des { height: 100px; overflow: auto; }
    .carousel.showDetail .list .item:nth-child(2) .detail .model3dViewer_btns { display: flex; width: max-content; float: right; }
}

.carousel .list .item #model3DView { width: 100%; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: right 1.5s; }
.canvas-360-wrapper { width: 100%; max-width: 1920px; aspect-ratio: 16 / 9; position: relative; background: transparent; min-height: 300px; /* opcija fallbacka */ margin-left: 200px; }
.canvas-360-wrapper canvas { width: 70%; height: 70%; margin: 200px auto 0 auto; display: block; cursor: grab; }

#model3DView canvas { }  
.canvas-360-wrapper[data-theme="light"] canvas { }
.carousel .item:nth-child(2) canvas { }
canvas[aria-label*="47"] { }
#model3DView.fullscreen canvas { }
.hotspot-layer + canvas { }
	
#carouselAnd360Nav  { position: absolute; right: 50px; top:0; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; padding: 1rem; }


.keyboardWrap, .keyboardWrap button { color: var(--fg); font-family: var(--tg-other-font-family); }
.keyboardWrap{
/*	background-color: var(--bg);
	background-image: linear-gradient(
		-45deg,
		hsla(var(--hue), var(--sat), 0%, 0),
		hsla(var(--hue), var(--sat), 0%, 0.3)
	);
*/
	display: flex; height: 26rem; transition: background-color var(--trans-dur), color var(--trans-dur); position: absolute; z-index: 9999;
}

.keyboard:before, .keyboard:after { transition: background-color var(--trans-dur), box-shadow var(--trans-dur); }
.keyboard, .keyboard__key-lines { display: flex; }
.keyboard { border-radius: 0.75em;align-items: center;margin: 0 auto;padding: 1em;position: relative;width: auto;height: 4.5em;display: flex;background: linear-gradient(var(--shadow-angle), #c9c9c9, #a3a3a5), var(--case-color);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;box-shadow: inset 0.5em 0.5em 0 rgba(255, 255, 255, 0), -5em -5em 18em rgba(255, 255, 255, 0), 0.5em 0.5em 0 rgba(0, 0, 0, 0), 0.5em 0.5em 0 0em rgba(0,0,0,0.4), 0em 0em 0em rgba(0, 0, 0, 0.2), 2em 2em 8em rgba(0, 0, 0, 0);}
.keyboard:before, .keyboard:after { background-color: hsl(var(--hue), var(--sat), 90%); content: ""; display: block; position: absolute; bottom: 100%; }
.keyboard:before { box-shadow: -0.5em -0.5em 0.75em hsla(0, 0%, 0%, 0.6), 0.25em 0 0.25em hsla(var(--hue), var(--sat), 10%, 0.2) inset, 0.25em -1.25em 0.5em hsla(var(--hue), var(--sat), 10%, 0.5) inset; left: calc(50% - 0.5em); width: 1em; height: 40em; }
.keyboard:after { border-radius: 0.25em 0.25em 0 0; box-shadow: 0.375em -0.25em 0.5em hsla(var(--hue), var(--sat), 10%, 0.5) inset; left: calc(50% - 0.75em); width: 1.5em; height: 1.25em; }
.keyboard__cmd { display: block; width: 1em; height: 1em; }
.keyboard__key { background-color: hsl(var(--hue), var(--sat), 95%); border-radius: 0.3em; box-shadow: -0.4em -0.25em 0.15em hsla(0, 0%, 0%, 0.25), 0 0 0 0.1em hsla(0, 0%, 0%, 0.3), 0.04em 0.04em 0.04em hsla(0, 0%, 0%, 0.4) inset, -0.1em -0.1em 0.04em hsla(0, 0%, 100%, 0.8) inset; color: hsl(var(--hue), var(--sat), 50%); margin: 0 0.35em; outline: transparent; padding: 0.10em; position: relative; width: 2.8em; height: 3em; transition: background-color var(--trans-dur), box-shadow 0.15s, color var(--trans-dur); -webkit-appearance: none; appearance: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; cursor: pointer; }
.keyboard__key--prev, .keyboard__key--next { width: 3.5em; }
.keyboard__key:active, .keyboard__key.active { box-shadow: 0 0 0.2em hsla(0, 0%, 0%, 0.2), 0 0 0 0.1em hsla(0, 0%, 0%, 0.4), 0 -0.05em 0 hsla(0, 0%, 0%, 0.6) inset, -0.05em -0.15em 0.05em hsla(0, 0%, 100%, 0.8) inset; }
.keyboard__key-line { font-size: 2em; }
.keyboard__key-line--small { font-size: 0.6em; line-height: 1.1em; font-weight: 800; text-transform: uppercase; padding-top: 0em; }
.keyboard__key-line--tr { margin: 0 auto; }
.keyboard__key-line--br { margin: 0 auto; }
.keyboard__key-lines { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; transition: transform 0.15s; }
#next .keyboard__key-lines i, #prev .keyboard__key-lines i { font-size: 2em; line-height: 2em; }
.keyboard__key:active .keyboard__key-lines,
.keyboard__key.active .keyboard__key-lines { transform: translateY(-1px); }
.keyboard__key:before { box-shadow: 0 0 0 0.5em hsla(223, 90%, 50%, 0); border-radius: 0.5em; content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: box-shadow var(--trans-dur); }
.keyboard__key:focus-visible:before { box-shadow: 0 0 0 0.5em hsla(223, 90%, 50%, 0.5); }

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue), var(--sat), 20%);
		--fg: hsl(var(--hue), var(--sat), 90%);
	}
	.keyboard__key { background-color: hsl(var(--hue), var(--sat), 15%); box-shadow: -0.4em -0.25em 0.25em hsla(0, 0%, 0%, 0.25), 0 0 0 0.1em hsla(0, 0%, 0%, 0.3), 0.04em 0.04em 0.04em hsla(0, 0%, 0%, 0.4) inset, -0.1em -0.1em 0.04em hsla(0, 0%, 100%, 0.05) inset; color: hsl(var(--hue), var(--sat), 90%); }
	.keyboard__key:active,
	.keyboard__key.active { box-shadow: 0 0 0.2em hsla(0, 0%, 0%, 0.2), 0 0 0 0.1em hsla(0, 0%, 0%, 0.4), 0 -0.05em 0 hsla(0, 0%, 0%, 0.4) inset, -0.05em -0.15em 0.05em hsla(0, 0%, 100%, 0.05) inset; }
}


/* canvas navigacija */
.canvas-nav-node { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); display: flex; gap: 0.5rem; padding: 0.7rem; background: linear-gradient(var(--shadow-angle), #c9c9c9, #a3a3a5), var(--case-color); border-radius: 0.5rem; pointer-events: none; z-index: 999; box-shadow: inset 0.5em 0.5em 0 rgba(255, 255, 255, 0), -5em -5em 18em rgba(255, 255, 255, 0), 0.5em 0.5em 0 rgba(0, 0, 0, 0), 0.5em 0.5em 0 0em rgba(0, 0, 0, 0.4), 0em 0em 0em rgba(0, 0, 0, 0.2), 2em 2em 8em rgba(0, 0, 0, 0); }
.canvas-nav-node .nav-btn { pointer-events: auto; background: var(--plate-color); color: var(--fg); border: none; border-radius: 0.4rem; width: 3em; height: 3em; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0.05em 0.05em rgba(255,255,255,0.8), 0.05em 0.05em 0.1em rgba(0,0,0,0.3); cursor: pointer; transition: background var(--trans-dur), box-shadow 0.15s; }
.canvas-nav-node .nav-btn:hover { background: var(--case-color); }
.canvas-nav-node .nav-btn:active { box-shadow: inset 0 0.1em 0.2em rgba(0,0,0,0.3); }
.canvas-nav-node .nav-btn i { font-size: 1.5rem; line-height: 1; }
.canvas-nav-node .nav-btn.hidden { display: none !important; }

.fullscreen .canvas-nav-node { top: 0.5rem; right: 0.5rem; }
.canvas-360-wrapper.fullscreen { position: relative; }
.fs-controls { pointer-events: none; }
.fs-controls button { pointer-events: auto; }
button.disabled { opacity: 0.5; pointer-events: none; }
button.disabled { cursor: not-allowed; }



#model3DView .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#model3DView .spinner { position: static; width: 40px; height: 40px; border: 4px solid var(--tg-theme-primary); border-top: 4px solid #333; border-radius: 50%; animation: spin 1s linear infinite; }

@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#model3DView .loader-text span { font-size: 12px; line-height: 20px; font-weight: 800; background: var(--tg-theme-primary); color: var(--white); border-radius: 5px; letter-spacing: 1px; display: inline-block; padding: 3px 30px 3px 6px; }
#model3DView .loader-text span:nth-child(2) { color: #ffffff;
    background: red;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0px;
    text-transform: uppercase;
    position: absolute;
    /* top: 28px; */
    /* left: 58px; */
    transform: rotate(25deg);
    padding: 15px;
    border-radius: 8px;
   box-shadow: inset 0.5em 0.5em 0 rgba(255, 255, 255, 0), -5em -5em 18em rgba(255, 255, 255, 0), 0.5em 0.5em 0 rgba(0, 0, 0, 0), 0.5em 0.5em 0 0em rgba(0, 0, 0, 0.4), 0em 0em 0em rgba(0, 0, 0, 0.2), 2em 2em 8em rgba(0, 0, 0, 0);
	 margin-left: -20px;
    margin-top: -10px;
}
#audioStartScreen { position: fixed; z-index: 9999; inset: 0; position: fixed; z-index: 9999; inset: 0; background: #111; color: #fff; display: flex; justify-content: center; align-items: center; }
#audioStartScreen button { padding: 15px 30px; background: #222; border: none; color: white; font-size: 1.2rem; border-radius: 8px; cursor: pointer; transition: 0.3s ease; }
#audioStartScreen button:hover { background: #444; }



.canvas-360-wrapper .loader {
  display: flex;               /* or block, whatever your markup needs */
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* spinner animation inside it */
.canvas-360-wrapper .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}