/* ============================
    Fonts
    ============================ */
@font-face { font-family: "TT Supermolot Neue"; src: url(font/tt-supermolot-neue-regular.ttf); }
@font-face { font-family: "TT Hoves";           src: url(font/tt-hoves-medium.ttf); }

/* ============================
   Reset & Base
   ============================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: "TT Supermolot Neue", sans-serif;
  color: #fff;
  background: #000;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;            
  -ms-overflow-style: none;         
}
body::-webkit-scrollbar { display: none; }

/* --- Opcionalna tamna gradient pozadina --- */
body.dark-bg {
  background: linear-gradient(135deg, #021027 0%, #051a2f 50%, #020a16 100%);
  min-height: 100vh;
}

/* ============================
   Navbar
   ============================ */
.navbar{
  position: fixed; inset: 0 0 auto 0; height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px; background: transparent; z-index: 2100;
}
.logo img{ height: 70px; cursor: pointer; }

/* --- Hamburger --- */
.menu-toggle{
  position: fixed; right: 0; background: none; border: 0; cursor: pointer;
  padding: 10px 15px; width: 60px; height: 40px; display: flex; flex-direction: column; justify-content: space-between;
  user-select: none; z-index: 2150;
}
.menu-toggle .bar{
  width: 100%; height: 2px; border-radius: 2px; background:#aaa; transition: background-color .4s;
  background-size: 200% 100%; background-position: left center;
}
@keyframes fillLeftToRight { 0% {background-position:right center} 100% {background-position:left center} }
.menu-toggle:hover .bar{ background-image: linear-gradient(to right, #fff 50%, #aaa 50%); animation: fillLeftToRight 1.2s forwards; }
.menu-toggle:hover .bar:nth-child(2){ animation-delay:.2s } .menu-toggle:hover .bar:nth-child(3){ animation-delay:.4s }
.menu-toggle.active .bar:nth-child(1){ transform: rotate(45deg) translate(5px,5px); background:#fff; }
.menu-toggle.active .bar:nth-child(2){ opacity: 0; }
.menu-toggle.active .bar:nth-child(3){ transform: rotate(-45deg) translate(6px,-6px); background:#fff; }

/* ============================
   OVERLAY MENU (Hamburger)
  ============================ */
.overlay-menu{
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
  background: linear-gradient(135deg,#021027 0%,#051a2f 50%,#020a16 100%);
  z-index: 2050;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
  cursor: default;
}
.overlay-menu.active{ opacity:1; pointer-events:auto; }

/* --- Dekorativni valovi u pozadini --- */
.wave-svg{
  position: absolute; top: 0; left: 0;
  width: 300%; height: 100%;
  pointer-events: none; z-index: 0;
}
@keyframes waveUpDown{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
@keyframes waveDownUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
.wave1{ animation: waveUpDown 8s ease-in-out infinite; }
.wave2{ animation: waveDownUp 6s ease-in-out infinite; animation-delay:1.5s; }
.wave3{ animation: waveUpDown 10s ease-in-out infinite; animation-delay:3s; }

/* --- Lista linkova --- */
.overlay-nav{
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  text-align: center;
  text-transform: uppercase; font-weight: 700; letter-spacing: 3px;
  user-select: none;
}
.overlay-nav li{ margin: 20px 0; }
.overlay-nav a{
  display: inline-block; text-decoration: none; color: #fff; font-size: 2rem;
  transition: color .3s, transform .3s;
}
.overlay-nav:hover li:not(:hover) a{ color: rgba(255,255,255,.4); transform: none; font-size: 2rem; }
.overlay-nav li:hover a{ color:#fff; font-size: 2.3rem; transform: scale(1.06); }
.overlay-nav:not(:hover) li.active a{ color:#fff; font-size: 2.2rem; }

/* --- CTA u overlay meniju --- */
.overlay-nav .cta-item{
  margin-top: 26px; padding-top: 18px; position: relative;
}
.overlay-nav .cta-item::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:0; width:220px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(124,172,255,.35), transparent);
  opacity:.5;
}
.overlay-nav .cta-btn{
  display:inline-block; padding:12px 26px; border-radius:999px; text-decoration:none;
  font-weight:900; letter-spacing:2px; text-transform:uppercase; font-size:1rem;
  background:linear-gradient(135deg,#5d8dec,#7cacff); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px rgba(125,172,255,.45), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.overlay-nav .cta-btn:hover,
.overlay-nav .cta-btn:focus{
  background:linear-gradient(135deg,#7cacff,#5d8dec); color:#000; transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(125,172,255,.7), inset 0 0 0 2px rgba(255,255,255,.18);
  outline:none;
}
.overlay-nav .cta-item a{ transform:none !important; font-size:1rem !important; }

/* ============================
   Side navigation
   ============================ */
.side-nav{
  position: fixed; top: 50%; left: 40px; transform: translateY(-50%);
  z-index:1500; user-select:none;
}
.side-nav ul{ list-style:none; }
.side-nav li{ margin:25px 0; }
.side-nav a{
  color: rgba(255,255,255,.6); font-weight:600; font-size:1rem;
  text-transform:uppercase; text-decoration:none; letter-spacing:1.5px;
  border-left:3px solid transparent; padding-left:12px;
  transition: color .3s, border-color .3s, opacity .3s;
}
.side-nav a:hover, .side-nav a:focus{ color: rgba(255,255,255,.9); outline: none; }
.side-nav a.active{ color:#fff; border-left-color:#fff; font-weight:700; }
html, body, .side-nav, .side-nav a{ caret-color: transparent; }

/* ============================
   Transition background
   ============================ */
#transition-bg{
  position: fixed; inset:0; width:100vw; height:100vh;
  background: linear-gradient(135deg,#001f4d 0%,#003366 50%,#001f4d 100%);
  opacity:0; visibility:hidden; pointer-events:none; z-index:15; transition: opacity .7s ease;
}
#transition-bg.visible{ opacity:1; visibility:visible; }

/* ============================
   HERO Sections (index)
   ============================ */
.section-video{
  position: fixed; inset: 0; width:100vw; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none; z-index:0;
  transition: opacity .8s ease, transform .8s ease; transform-origin:center;
  will-change: transform, opacity;
}
.section-video.active{ opacity:1; visibility:visible; pointer-events:auto; z-index:10; transform: none; }

.section-video video{
  position: absolute; top:50%; left:50%;
  min-width:100%; min-height:100%; width:auto; height:auto;
  transform: translate(-50%,-50%);
  object-fit: cover; z-index:0;
  transition: transform .8s ease, opacity .8s ease;
  outline: none !important;
}
.section-video .video-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.5); z-index:1; pointer-events:none; }
.section-video .content{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:90%; max-width:600px; padding:20px; text-align:center; color:#fff; z-index:10; user-select:none;
}
.section-video .content h1{
  font-size:3.5rem; font-weight:600; text-transform:uppercase; letter-spacing:3px; line-height:1.1; margin-bottom:.8rem;
}
.section-video .content p{
  font-family:"TT Hoves",sans-serif; font-size:1rem; color:#ddd; line-height:1.5;
  max-width:500px; margin:0 auto 2rem; padding:15px;
}

/* --- CTA --- */
.fancy-btn{
  position:relative; padding:20px 50px; color:#fff; background:transparent; border:0; cursor:pointer;
  font: bold 1.2rem "TT Supermolot Neue",sans-serif; text-transform:uppercase; letter-spacing:6px;
  transition: .5s; overflow:hidden; z-index:1;
}
.fancy-btn::before, .fancy-btn::after{
  content:""; position:absolute; width:10px; height:10px; box-sizing:border-box; transition:.5s; pointer-events:none;
}
.fancy-btn::before{ top:0; left:0; border-top:2px solid #fff; border-left:2px solid #fff; transition-delay:.5s; }
.fancy-btn::after { right:0; bottom:0; border-right:2px solid #fff; border-bottom:2px solid #fff; transition-delay:.5s; }
.fancy-btn:hover::before, .fancy-btn:hover::after,
.fancy-btn:focus::before, .fancy-btn:focus::after{ width:100%; height:100%; transition-delay:0s; }
.fancy-btn:hover, .fancy-btn:focus{ background:#fff; color:#000; box-shadow:0 0 50px #fff; transition-delay:.5s; }

/* ============================
   3D Five Star (split videos)
   ============================ */
.left-video, .right-video{
  position: fixed; top:0; height:100vh; width:50vw; overflow:hidden; transition: width .5s ease;
  display:flex; align-items:center; justify-content:center; flex-direction:column; background:#000; color:#fff;
}
.left-video{ left:0; } .right-video{ right:0; }
.left-video video, .right-video video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover; z-index:0;
}
.video-overlay1{ position:absolute; inset:0; background:rgba(0,0,0,.3); z-index:1; }
.content-left, .content-right{ position:relative; z-index:2; max-width:80%; text-align:center; }
.content-left h1, .content-right h1{ font-size:2.2rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; }

/* ============================
   Headings / glow
   ============================ */
h1.gallery-name, .detailed-text .h1-wrapper, .h1-wrapper{
  text-align:center; font-size:2.5rem; text-transform:uppercase; color:#fff; letter-spacing:3px;
  margin:80px 0 35px; font-weight:700;
  text-shadow: 0 0 8px #adc7f5, 0 0 16px #246dea, 0 0 24px #adc7f5, 0 0 40px #246dea;
  animation: glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{ text-shadow:0 0 4px #adc7f5,0 0 12px #adc7f5,0 0 20px #adc7f5,0 0 30px #adc7f5; }
  50%   { text-shadow:0 0 10px #246dea,0 0 20px #246dea,0 0 30px #246dea,0 0 45px #246dea; }
}

/* ============================
   Breadcrumb arrows
   ============================ */
.breadcrumb-arrow, .detailed-text .breadcrumb-arrow2{
  position: relative; width:30px; height:20px; cursor:pointer;
}
.breadcrumb-arrow{ margin-left:88%; }
.detailed-text .breadcrumb-arrow2{ margin-left:90%; }
.breadcrumb-arrow span, .breadcrumb-arrow2 span,
.breadcrumb-arrow3 span {
  position:absolute; top:50%; left:6px; transform:translateY(-50%);
  width:120px; height:6px; background:#76a9df; border-radius:3px; transition: background-color .3s;
}
.breadcrumb-arrow::before, .breadcrumb-arrow2::before,
.breadcrumb-arrow::after,  .breadcrumb-arrow2::after,
.breadcrumb-arrow3::before,
.breadcrumb-arrow3::after{
  content:""; position:absolute; top:50%; left:0; transform:translateY(-50%);
  border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:15px solid #76a9df; border-radius:3px 0 0 3px;
}
.breadcrumb-arrow:hover span, .breadcrumb-arrow2:hover span, .breadcrumb-arrow3:hover span{ background:#fff; }
.breadcrumb-arrow:hover::before, .breadcrumb-arrow:hover::after,
.breadcrumb-arrow2:hover::before, .breadcrumb-arrow2:hover::after,
.breadcrumb-arrow3:hover::before, .breadcrumb-arrow3:hover::after{ border-right-color:#fff; }

.breadcrumb-arrow1{
  position: fixed; left:50px; top:60%; width:30px; height:20px; cursor:pointer; z-index:1600;
}
.breadcrumb-arrow1 span{
  position:absolute; top:50%; left:6px; transform:translateY(-50%);
  width:210px; height:6px; background:#aaa; border-radius:3px; transition: background-color .3s;
}
.breadcrumb-arrow1:hover::before, .breadcrumb-arrow1:hover::after{
  content:""; position:absolute; top:50%; left:0; transform:translateY(-50%);
  border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:15px solid #fff; border-radius:3px 0 0 3px;
}

.breadcrumb-arrow3 {
 position: relative; width:30px; height:20px; cursor:pointer; margin-left:75%; 
}

/* ============================
   Gallery
   ============================ */
.image-container{ position:relative; overflow:hidden; border-radius:16px; transition: box-shadow .3s; }
.hover-caption{
  position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.72); color:#fff;
  opacity:0; padding:16px 8px 12px; text-align:center; font-size:1.12rem; letter-spacing:1px;
  border-radius:0 0 16px 16px; transition: opacity .28s; pointer-events:none;
}
.image-container:hover .hover-caption, .image-container:focus-within .hover-caption{ opacity:1; z-index:10; box-shadow:0 14px 40px rgba(0,0,0,.3); }

.gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; padding:40px 4vw; }
.gallery img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.13); transition: transform .27s, box-shadow .22s; cursor:pointer; display:block;
}
.gallery img:hover{ transform: scale(1.04) rotate(-.5deg); box-shadow:0 14px 34px rgba(0,0,0,.21); z-index:2; }

/* ============================
   Content blocks / reveal
   ============================ */
.detailed-text .h2-wrapper, .detailed-text .text, .detailed-text .contact,
.contact-info, .order-form, .certificates-section .h2-wrapper, .certificates-section .text,
.certificates-section .carousel-container, .table-wrapper{
  width:100%; margin:0 0 32px; padding:48px 2rem 40px; display:flex; flex-direction:column; align-items:center;
  background: rgba(8,16,32,.8); border-radius:22px; border:1.5px solid rgba(148,185,255,.16);
  box-shadow:0 6px 48px rgba(55,125,255,.13), 0 1.5px 16px rgba(70,160,255,.08), 0 .5px 0 rgba(0,0,0,.2);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  text-align:left; opacity:0; transform: translateY(64px) scale(.97);
  transition: opacity .7s cubic-bezier(.2,.7,.5,1.1), transform .9s cubic-bezier(.2,.7,.5,1.1);
  will-change: opacity, transform; z-index:2;
}
.table-wrapper{ max-width:100vw; overflow-x:auto; padding:0; }
.detailed-text .h2-wrapper.visible, .detailed-text .text.visible, .detailed-text .contact.visible,
.contact-info.visible, .order-form.visible, .certificates-section .h2-wrapper.visible,
.certificates-section .text.visible, .certificates-section .carousel-container.visible, .table-wrapper.visible{
  opacity:1; transform: none;
}
.detailed-text .h2-wrapper:hover, .detailed-text .text:hover, .detailed-text .contact:hover,
.contact-info:hover, .order-form:hover, .certificates-section .h2-wrapper:hover,
.certificates-section .text:hover, .certificates-section .carousel-container:hover, .table-wrapper:hover{
  box-shadow: 0 6px 36px 6px rgba(48,89,255,.38), 0 0 5px #5388ff88; border-color:#7ba8ffaa;
}

/* --- Titles/paragraphs --- */
.detailed-text .h2-wrapper h2, .certificates-section .h2-wrapper h2{
  color:#a9cbff; font-size:2.8rem; font-weight:900; letter-spacing:3px; margin:0 0 12px; text-transform:uppercase;
  text-shadow:0 0 12px #2c5bffaa, 0 2px 6px #00133288; transition: color .4s;
}
.detailed-text .h2-wrapper:hover h2, .certificates-section .h2-wrapper:hover h2{ color:#78a6ff; text-shadow:0 0 20px #4a7fffcc, 0 3px 8px #0a1a4666; }
.detailed-text .h2-wrapper p, .certificates-section .h2-wrapper p{
  color:#c6d9ff; font: 500 1.55rem "TT Hoves",sans-serif; letter-spacing:1.5px; max-width:660px; margin:0 auto 1.8rem; line-height:1.5;
}
.detailed-text p, .detailed-text ul, .certificates-section p{
  color:#b7c8ff; font-size:1.18rem; letter-spacing:1.1px; text-align:justify; max-width:770px;
  margin:.7rem auto 1.8rem; line-height:1.65; font-weight:400; text-shadow:0 0 3px rgba(0,0,0,.25);
}
.detailed-text strong{ color:#e1e9ff; font-weight:700; text-shadow:0 0 6px #7ea8ffcc; }
.detailed-text ul{ list-style:none; padding-left:0; }
.detailed-text ul li{
  margin:.9rem 0; position:relative; padding-left:1.6rem; font-weight:600; color:#aac7ff;
}
.detailed-text ul li::before{
  content:"★"; position:absolute; left:0; top:0; color:#4b7cff; text-shadow:0 0 6px #60a0ffcc; font-size:1.15rem; line-height:1;
}

/* --- Reveal children --- */
@keyframes reveal-left{ from{opacity:0; clip-path: inset(0 90% 0 0); transform: translateX(-42px);} to{opacity:1; clip-path: inset(0 0 0 0); transform:none;} }
.detailed-text .h2-wrapper.visible > *,
.detailed-text .p-wrapper.visible > *, .detailed-text .ul-wrapper.visible > *,
.detailed-text .contact.visible > *, .contact-info.visible > *, .order-form.visible > *,
.certificates-section .h2-wrapper.visible > *, .certificates-section .text.visible > *,
.certificates-section .carousel-container.visible > *, .table-wrapper.visible > *{
  opacity:0; animation: reveal-left .9s cubic-bezier(.2,.7,.5,1.1) forwards;
}
.detailed-text .h2-wrapper.visible > *{ animation-delay:.08s }
.detailed-text .p-wrapper.visible > *{ animation-delay:.14s }
.detailed-text .ul-wrapper.visible > *{ animation-delay:.19s }
.detailed-text .contact.visible > *{ animation-delay:.25s }
.contact-info.visible > *{ animation-delay:.31s }
.order-form.visible > *{ animation-delay:.37s }
.certificates-section .h2-wrapper.visible > *{ animation-delay:.45s }
.table-wrapper.visible > *{ animation-delay:.15s }

.detailed-text a{
  color:#b7c8ff; text-transform:uppercase; text-decoration:none; font-size:2rem; letter-spacing:1.5px;
  max-width:770px; margin:.7rem auto 1.8rem; display:inline-block; line-height:1.65;
  transition: color .3s;
}
.detailed-text a:hover{ color:#edf3ff; text-shadow:0 0 12px #407fffcc; font-weight:bolder; }

/* ============================
   Contact info
   ============================ */
.contact-info h2{ font-size:2.4rem; font-weight:700; margin-bottom:28px; color:#7cafff; text-shadow:0 0 12px #4a7fffcc; }
.contact-info ul{ list-style:none; display:flex; justify-content:center; gap:32px; max-width:360px; margin:0 auto 40px; }
.contact-info ul li a{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; color:#7cacff; transition: color .3s, transform .3s;
}
.contact-info ul li a:hover, .contact-info ul li a:focus{ color:#a0c0ff; outline:none; transform:scale(1.2); }

/* ============================
   Order form 
   ============================ */
.order-form{ max-width:600px; margin:2rem auto 4rem; padding:2rem; }
.order-form h2{ text-align:center; font-size:1.8rem; margin-bottom:1.5rem; color:#7cacff; font-weight:600; }
.order-form form{ display:flex; flex-direction:column; }
.order-form label{ margin:1rem 0 .5rem; font-weight:600; font-size:1rem; color:#a9bfff; display:block; }
label.required::after{ content:" *"; color:#7cacff; }

.error-msg{ color:#ff6b6b; font-weight:600; margin-top:4px; min-height:1.2em; text-shadow:0 0 8px #ff6b6b88; display:block; }

.order-form .center, .order-form .da, .order-form .ne{ text-align:center; }

.uzorak-gallery{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:10px; }
.uzorak-img{ width:100%; height:100px; object-fit:cover; border:2px solid transparent; border-radius:6px; cursor:pointer; transition: box-shadow .2s, outline .2s; }
.selected-uzorak, .uzorak-img.selected{ outline:3px solid #7cacff; box-shadow:0 0 10px #7cacff; border-radius:8px; }

.radio-group-center{ display:flex; justify-content:center; align-items:center; }

.order-form input[type="file"],
.order-form input[type="url"],
.order-form input[type="email"],
.order-form select,
.order-form textarea{
  width:100%; padding:.5rem .75rem; font-size:1rem; border:1.5px solid #445cdb; border-radius:6px;
  background:#263159; color:#ecf0ff; transition: border-color .3s, background-color .3s; min-height:3rem; resize:vertical;
}
input[type="file"]{ display:none; }
.custom-file-upload{
  display:inline-block; padding:10px 20px; color:#fff; background:#445cdb; border-radius:6px; cursor:pointer; font-weight:700;
  transition: background-color .3s; box-shadow:0 4px 8px rgba(68,92,219,.4);
}
.custom-file-upload:hover{ background:#7cacff; box-shadow:0 6px 14px rgba(124,172,255,.7); }

.order-form input[type="file"]:focus,
.order-form input[type="url"]:focus,
.order-form input[type="email"]:focus,
.order-form select:focus,
.order-form textarea:focus{
  outline:none; border-color:#7cacff; background:#31467a; box-shadow:0 0 8px #7cacff;
}

/* --- Materijal & boje (custom select) --- */
.materijal-sekcija{ position:relative; max-width:600px; margin-top:1rem; color:#aac7ff; }
.materijal-sekcija > label{ font-weight:700; font-size:1.2rem; margin-bottom:.75rem; color:#7cacff; text-transform:uppercase; text-shadow:0 0 12px #4a7fffcc; }
#boje-sekcija{ display:none; margin-top:1rem; max-width:600px; color:#aac7ff; }
#boje-sekcija > label{ font-weight:700; font-size:1.2rem; margin-bottom:.75rem; color:#7cacff; text-transform:uppercase; text-shadow:0 0 12px #4a7fffcc; }

.custom-select{ position:relative; user-select:none; border-radius:6px; cursor:pointer; font-size:1rem; }
.select-selected{
  display:flex; flex-wrap:wrap; align-items:center; position:relative;
  padding:6px 40px 6px 12px; background:#263159; border:1.5px solid #445cdb; border-radius:6px; color:#7cacff;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.select-selected:hover, .select-selected:focus{ background:#31467a; border-color:#7cacff; box-shadow:0 0 8px #7cacff; color:#fff; }
.select-selected .color-circle{ position:relative; margin-right:4px; width:20px; height:20px; border-radius:50%; border:1px solid #445cdb; }
.select-selected .remove-btn{
  position:absolute; top:-6px; right:-6px; width:16px; height:16px; line-height:16px; font-size:12px; text-align:center;
  background:#7cacff; color:#fff; font-weight:700; border-radius:50%; cursor:pointer; opacity:.85; transition:opacity .3s;
}
.select-selected .remove-btn:hover{ opacity:1; }
.select-arrow{
  position:absolute; top:50%; right:12px; transform: translateY(-50%) rotate(45deg);
  border: solid #7cacff; border-width:0 2px 2px 0; padding:4px; transition: transform .3s;
}
.custom-select.opened .select-arrow{ transform: translateY(-50%) rotate(-135deg); }

.select-items{
  position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column;
  background:#263159; border:1.5px solid #445cdb; border-top:none; border-radius:0 0 6px 6px;
  max-height:200px; overflow-y:auto; z-index:1000;
  scrollbar-width: thin; scrollbar-color: rgba(124,172,255,.6) transparent;
}
.select-items.show{ display:flex; }
.select-items .option{
  display:flex; align-items:center; padding:8px 16px; cursor:pointer; color:#ecf0ff; transition: background-color .25s;
}
.select-items .option:hover, .select-items .option.selected{ background:#31467a; color:#7cacff; }
.select-items .option .color-circle{ width:16px; height:16px; margin-right:12px; border:1px solid #445cdb; flex-shrink:0; }
.select-items::-webkit-scrollbar{ width:8px; height:8px; background:transparent; }
.select-items::-webkit-scrollbar-thumb{
  background: rgba(124,172,255,.6); border-radius:10px; border:2px solid transparent; background-clip:content-box;
}
.select-items::-webkit-scrollbar-thumb:hover{ background: rgba(124,172,255,.9); }

.order-form textarea{ min-height:100px; font-size:1rem; line-height:1.4; }
.order-form fieldset{
  margin-top:1.5rem; border:1px solid #445cdb; border-radius:6px; padding:1rem 1.25rem 1.5rem; background:#222b45; color:#b0bff7;
}
.order-form fieldset legend{ font-weight:700; font-size:1.1rem; color:#7cacff; padding:0 .5rem; }
.order-form input[type="radio"]{ margin:0 0.25rem 0 1rem; vertical-align:middle; cursor:pointer; }
.order-form label[for^="obrada"], .order-form label[for^="dorade"],
.order-form label[for^="uzorak"], .order-form label[for^="custom"], .order-form label[for^="velicina"]{
  cursor:pointer; display:inline-block; margin-right:1rem; font-weight:600; color:#a9bfff;
}
#dorade-detalji, #uzorak-izbor, #custom-detalji, #velicina-detalji{
  margin-top:.75rem; background:#2e3b6e; padding:.8rem 1rem; border-radius:5px; color:#d0d8ff;
}
.order-form button[type="submit"], .order-form button[type="button"]{
  margin-top:2rem; padding:.75rem; font-size:1.1rem; font-weight:700; color:#fff;
  background: linear-gradient(135deg,#5d8dec,#7cacff); border:0; border-radius:8px; cursor:pointer;
  transition: background-color .3s, box-shadow .3s; box-shadow:0 4px 14px rgba(125,172,255,.6);
}
.order-form button[type="submit"]:hover, .order-form button[type="submit"]:focus,
.order-form button[type="button"]:hover{ background: linear-gradient(135deg,#7cacff,#5d8dec); box-shadow:0 6px 20px rgba(125,172,255,.8); color:#000; }
.order-form button[type="button"]:focus{ background: linear-gradient(135deg,#7cacff,#5d8dec); box-shadow:0 6px 20px rgba(125,172,255,.8); }

.form-poruka{ margin-top:1rem; font-weight:600; font-size:1.1rem; color:#7cacff; text-shadow:0 0 6px #7ea8ffcc; }
.form-poruka.error{ color:#ff6b6b; text-shadow:0 0 8px #ff6b6b88; }
.btn-ocjena{
  display:inline-block; padding:10px 24px; background: linear-gradient(135deg,#5d8dec,#7cacff);
  color:#fff; border-radius:8px; font-weight:700; text-decoration:none; box-shadow:0 4px 10px rgba(68,92,219,.6);
  transition: background-color .3s; cursor:pointer; font-size:1.1rem;
}
.btn-ocjena:hover, .btn-ocjena:focus{ background: linear-gradient(135deg,#7cacff,#5d8dec); box-shadow:0 6px 20px rgba(125,172,255,.8); color:#000; }

/* --- Laser materijali (cards grid) --- */
.laser-material-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px){
  .laser-material-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){
  .laser-material-grid{ grid-template-columns: 1fr; }
}

/* --- Kartica --- */
.laser-card{
  cursor: pointer;  background: #222b45;  border: 2px solid rgba(124,172,255,.25);  border-radius: 16px;  overflow: hidden;                 
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}

.laser-card:hover{
  transform: translateY(-1px);  border-color: rgba(124,172,255,.7);  box-shadow: 0 10px 24px rgba(124,172,255,.18);
}

/* --- Slika --- */
.laser-card img{
  width: 100%;  height: 110px; object-fit: cover; display: block;  border-top-left-radius: 16px;  border-top-right-radius: 16px;
}

/* --- Naziv --- */
.laser-card .laser-name{
  padding: 10px 10px 12px;  font-weight: 700;  font-size: .95rem;  color: #ecf0ff;
}

/* --- Selected  --- */
.laser-card.selected{
  border-color: #7cacff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 28px 20px rgba(0,0,0,.28);
}

.laser-card.selected img{
  filter: brightness(1.03) contrast(1.03);
}

.laser-material-grid .laser-card:not(.selected){
  opacity: .9;
}

/* =================================================================
   KONTAKT FORMA 
  ================================================================= */
#kontakt-forma{
  max-width: clamp(340px, 78vw, 820px);
  margin: 24px auto 36px;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: 22px;
  background: rgba(10,16,30,.72);
  border: 1px solid rgba(124,172,255,.14);
  box-shadow: 0 22px 68px rgba(24,46,96,.55), inset 0 0 0 1px rgba(124,172,255,.06);
  font-family: "TT Supermolot Neue", sans-serif;
  overflow: hidden;
  background-clip: padding-box;
  outline: 1px solid transparent;
}

#kontakt-forma .form-row.narrow{ max-width:560px; margin:0 auto 18px; }

/* --- Naslovi --- */
#kontakt-forma h3, #kontakt-forma h4, #kontakt-forma legend{
  text-align:center; color:#7cacff; text-shadow:0 0 12px #4a7fffcc;
  margin:8px 0 10px; font-weight:700;
}
#kontakt-forma h3{ font-size:1.4rem; }
#kontakt-forma h4{ font-size:1.15rem; }
#kontakt-forma legend{ font-size:1.05rem; padding:0 .5rem; }

/* --- Polja --- */
#kontakt-forma label{
  display:block; text-align:center; color:#a9bfff; font-weight:700; margin:.35rem auto .45rem;
}
#kontakt-forma label.required::after{ content:" *"; color:#7cacff; }
#kontakt-forma input[type="email"],
#kontakt-forma input[type="url"],
#kontakt-forma textarea{
  width:min(560px,100%); margin:0 auto; display:block; height:44px;
  padding:.6rem .9rem; border-radius:12px; border:1.5px solid #3e57c9;
  background:#111b34; color:#e9efff; font-size:1rem;
  transition:border-color .25s, box-shadow .25s, background-color .25s;
}
#kontakt-forma textarea{ min-height:110px; height:auto; resize:vertical; line-height:1.4; }
#kontakt-forma input:focus, #kontakt-forma textarea:focus{
  outline:none; border-color:#7cacff; box-shadow:0 0 0 3px rgba(124,172,255,.18); background:#142345;
}

/* --- Greške --- */
#kontakt-forma .error-msg{
  min-height:1.1em; text-align:center; color:#ff6b6b; font-weight:700; margin:6px auto 0; text-shadow:0 0 8px #ff6b6b88;
}

/* --- MODEL GROUP  --- */
#kontakt-forma #models-container{ margin-top:6px; position:relative; }
#kontakt-forma .model-group{
  padding:12px 0 22px;
  border-top:1px dashed rgba(124,172,255,.18);
}
#kontakt-forma .model-group:first-child{ border-top:1px dashed rgba(124,172,255,.18); }
#kontakt-forma .model-group-header{
  display:flex; align-items:center; justify-content:center; position:relative; margin:8px 0 10px;
}
#kontakt-forma .remove-model-btn{
  position:absolute; right:0; top:0; background:transparent; border:0; color:#ff6b6b;
  font-size:28px; line-height:1; cursor:pointer; padding:0 8px; border-radius:8px; transition:color .2s, box-shadow .2s;
}
#kontakt-forma .remove-model-btn:hover{ color:#ff3b3b; box-shadow:0 0 8px #ff6b6b66; }

/* --- File button --- */
#kontakt-forma input[type="file"]{ display:none; }
#kontakt-forma .custom-file-upload{
  width:min(560px,100%); margin:0 auto 10px; display:flex; align-items:center; justify-content:center;
  height:42px; padding:0 16px; border-radius:12px;
  background:linear-gradient(135deg,#5d8dec,#7cacff); color:#0b1224; font-weight:900; letter-spacing:.5px;
  border:0; cursor:pointer; box-shadow:0 12px 26px rgba(124,172,255,.35);
  transition:transform .12s ease, box-shadow .25s ease, filter .2s ease;
}
#kontakt-forma .custom-file-upload:hover{ transform:translateY(-1px); box-shadow:0 16px 32px rgba(124,172,255,.55); }

/* --- Custom select (materijal/boje) --- */
#kontakt-forma .custom-select{
  width:min(560px,100%); margin:0 auto 8px; position:relative; user-select:none; cursor:pointer;
}
#kontakt-forma .select-selected{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  padding:10px 44px 10px 14px; border-radius:12px; border:1.5px solid #3e57c9;
  background:#111b34; color:#7cacff; min-height:44px;
  transition:border-color .25s, box-shadow .25s, background-color .25s, color .25s;
}
#kontakt-forma .select-selected:hover{ border-color:#7cacff; box-shadow:0 0 0 3px rgba(124,172,255,.18); color:#e9efff; background:#142345; }
#kontakt-forma .select-arrow{
  position:absolute; top:50%; right:14px; transform:translateY(-50%) rotate(45deg);
  border:solid #7cacff; border-width:0 2px 2px 0; padding:4px; transition:transform .25s;
}
#kontakt-forma .custom-select.opened .select-arrow{ transform:translateY(-50%) rotate(-135deg); }
#kontakt-forma .select-items{
  position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column;
  background:#0f1933; border:1.5px solid #3e57c9; border-top:none; border-radius:0 0 12px 12px; z-index:10;
  max-height:220px; overflow:auto; scrollbar-width:thin; scrollbar-color: rgba(124,172,255,.6) transparent;
}
#kontakt-forma .select-items.show{ display:flex; }
#kontakt-forma .select-items .option{
  display:flex; align-items:center; gap:10px; padding:10px 14px; color:#e9efff; transition:background-color .2s, color .2s;
}
#kontakt-forma .select-items .option:hover, #kontakt-forma .select-items .option.selected{ background:#152447; color:#7cacff; }
#kontakt-forma .color-circle{ width:18px; height:18px; border-radius:50%; border:1px solid #3e57c9; }

#kontakt-forma .select-selected .color-circle{ position:relative; width:20px; height:20px; border:1px solid #3e57c9; }
#kontakt-forma .select-selected .remove-btn{
  position:absolute; top:-6px; right:-6px; width:16px; height:16px; line-height:16px; text-align:center; font-size:12px;
  background:#7cacff; color:#0b1224; border-radius:50%; font-weight:900; cursor:pointer; opacity:.9; transition:opacity .2s;
}
#kontakt-forma .select-selected .remove-btn:hover{ opacity:1; }

/* --- RADIO "DA/NE"  --- */
#kontakt-forma .radio-group-center{
  display:flex; justify-content:center; align-items:center; gap:8px; margin:8px 0 12px;
}
#kontakt-forma .radio-group-center input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
#kontakt-forma .radio-group-center label{
  margin:0 !important; width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"TT Hoves", sans-serif; font-weight:600; font-size:1rem; letter-spacing:.2px;
  color:#cfe0ff; background:#0f1b33; border:1px solid rgba(124,172,255,.25);
  box-shadow: inset 0 0 0 1px rgba(124,172,255,.06);
  cursor:pointer; user-select:none;
  transition: transform .12s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
#kontakt-forma .radio-group-center label:hover{ transform: translateY(-1px); }
#kontakt-forma .radio-group-center input[type="radio"]:checked + label{
  background: linear-gradient(135deg,#5d8dec,#7cacff); color:#0b1224; border-color: transparent;
  box-shadow: 0 8px 18px rgba(124,172,255,.45);
}

/* --- Sekcije detalja --- */
#kontakt-forma .collapse{
  overflow:hidden; max-height:0; opacity:0; padding-top:0; padding-bottom:0;
  transition:max-height .35s ease, opacity .25s ease, padding .25s ease; border-radius:10px;
}
#kontakt-forma .collapse.open{ max-height:900px; opacity:1; padding-top:.6rem; padding-bottom:.6rem; }

/* --- Uzorci --- */
#kontakt-forma .uzorak-gallery{
  width:min(560px,100%); margin:8px auto 0;
  display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;
}
#kontakt-forma .uzorak-img{
  width:100%; height:96px; object-fit:cover; cursor:pointer;
  border-radius:10px; border:2px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
#kontakt-forma .uzorak-img:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(12,20,40,.6); }
#kontakt-forma .uzorak-img.selected-uzorak{ border-color:#7cacff; box-shadow:0 0 0 3px rgba(124,172,255,.28); }

/* --- Gumbi --- */
#kontakt-forma .btn-row{ display:flex; gap:14px; justify-content:center; align-items:center; margin-top:18px; }
#kontakt-forma .btn-primary, #kontakt-forma .btn-secondary{
  min-width:168px; height:46px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px; font-weight:900; letter-spacing:.6px; border:0; cursor:pointer; user-select:none;
  transition: transform .12s ease, box-shadow .25s ease, filter .2s ease, background-color .2s ease, color .2s ease;
}
#kontakt-forma .btn-primary{
  background: linear-gradient(135deg,#5d8dec,#7cacff); color:#0b1224; box-shadow: 0 12px 28px rgba(124,172,255,.38);
}
#kontakt-forma .btn-primary:hover, #kontakt-forma .btn-primary:focus{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(124,172,255,.58); outline:none; }
#kontakt-forma .btn-secondary{
  background:#0f1b33; color:#d7e4ff; border:1px solid rgba(124,172,255,.22);
  box-shadow: 0 8px 18px rgba(16,28,54,.42), inset 0 0 0 1px rgba(124,172,255,.06);
}
#kontakt-forma .btn-secondary:hover, #kontakt-forma .btn-secondary:focus{
  transform: translateY(-1px); background:#152445; box-shadow: 0 12px 26px rgba(16,28,54,.52); outline:none;
}

/* --- Poruka ispod forme --- */
#kontakt-forma + #poruka{ text-align:center; margin-top:12px; font-weight:800; color:#7cacff; }
#kontakt-forma + #poruka.error{ color:#ff6b6b; }

/* --- TABS (1,2,3…) --- */
#models-tabs{
  width:100%; max-width:clamp(340px,78vw,820px);
  margin:0 auto 10px; display:flex; gap:10px; justify-content:center; align-items:center;
}
#models-tabs button{
  min-width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(124,172,255,.22);
  background:#0f1b36; color:#d7e6ff; font-weight:900; cursor:pointer;
  box-shadow:0 2px 8px rgba(16,26,52,.5);
  transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
#models-tabs button:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(124,172,255,.18); }
#models-tabs button.active{
  background: linear-gradient(180deg,#3b64d6,#6fa1ff);
  color:#051028; border-color:transparent; box-shadow: 0 10px 24px rgba(111,161,255,.30);
}
#models-tabs button.error-tab{
  background:#0f1933 !important; color:#eef4ff !important; border-color:#ff6b6b !important;
  box-shadow: inset 0 0 0 1px rgba(255,107,107,.18), 0 6px 16px rgba(255,60,60,.10);
}
#models-tabs button.active.error-tab{
  background: linear-gradient(180deg,#3b64d6,#6fa1ff) !important; color:#051028 !important; border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(111,161,255,.30), inset 0 0 0 1px rgba(255,107,107,.15);
}

/* ============================
   Tabs (modeli) – global
   ============================ */
#models-tabs{ display:flex; gap:8px; margin-bottom:1.5rem; flex-wrap:wrap; }
#models-tabs button{
  min-width:36px; height:36px; border:0; border-radius:6px; cursor:pointer;
  background:#445cdb; color:#fff; font-weight:700; font-size:1rem;
  transition: background-color .3s; box-shadow:0 2px 6px rgba(68,92,219,.4);
  display:flex; align-items:center; justify-content:center;
}
#models-tabs button:hover{ background:#7cacff; }
#models-tabs button.active, #models-tabs button:focus{ background:#7cacff; outline:none; box-shadow:0 0 10px #7cacff; }
#models-tabs button.error-tab{ background:#f70000 !important; color:red !important; font-weight:700 !important; border:2px solid red !important; }

/* ============================
   Model header
   ============================ */
.model-group-header{
  display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:1rem; text-transform:uppercase;
}
.model-group-header h3{
  margin:0 0 .75rem; font-weight:700; font-size:1.5rem; color:#7cacff; flex-grow:1; text-align:center; user-select:none; pointer-events:none; text-shadow:0 0 12px #4a7fffcc;
}
.model-group-header .remove-model-btn{
  position:absolute; right:0; top:50%; transform: translateY(-140%); background:transparent; border:0; color:#ff6b6b;
  font-size:2rem; cursor:pointer; padding:0 8px; border-radius:5px; transition: color .3s; line-height:1;
}
.model-group-header .remove-model-btn:hover, .model-group-header .remove-model-btn:focus{ color:#ff3b3b; outline:none; box-shadow:0 0 8px #ff6b6b; }

/* ============================
   Tehnologija (hero)
   ============================ */
.tehnologija-video{
  position: fixed; inset:0; width:100vw; height:100vh; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .8s ease, transform .8s ease; z-index:0; transform-origin:center; will-change: transform, opacity;
}
.tehnologija-video.active{ opacity:1; visibility:visible; pointer-events:auto; z-index:10; }
.tehnologija-video video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover; z-index:0;
}
.tehnologija-video .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); z-index:1; pointer-events:none; opacity:0; transition: opacity .5s ease; }
.tehnologija-video .overlay-text{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-40%) scale(.95);
  color:#fff; max-width:900px; width:90vw; padding:20px 25px; text-align:center; border-radius:12px; user-select:none; z-index:20; opacity:0; pointer-events:none; transition: opacity .5s ease;
}
@keyframes slideFadeIn{ from{opacity:0; transform: translate(-50%,-40%) scale(.95);} to{opacity:1; transform: translate(-50%,-50%) scale(1);} }
.tehnologija-video:hover .overlay, .tehnologija-video:hover .overlay-text{ opacity:1; pointer-events:auto; }
.tehnologija-video:hover .overlay-text{ animation: slideFadeIn .4s forwards ease-out; }

.tehnologija-video .overlay-text h1,
.tehnologija-video .overlay-text h2,
.tehnologija-video .overlay-text h3{
  font-weight:600; text-transform:uppercase; letter-spacing:3px; line-height:1.1; color:#7ba6ff;
  text-shadow:0 0 10px #1542d6cc, 0 2px 7px #051241cc;
}
.tehnologija-video .overlay-text h1{ font-size:2.7rem; margin-bottom:.8rem; }
.tehnologija-video .overlay-text h2{ font-size:1.8rem; margin-bottom:1rem; }
.tehnologija-video .overlay-text h3{ font-size:1.2rem; margin-bottom:1rem; }
.tehnologija-video .overlay-text p{
  font-family:"TT Hoves",sans-serif; font-size:1rem; text-align:justify; line-height:1.5; color:#d7dbef;
  max-width:700px; margin:0 auto 1.5rem; letter-spacing:.3px;
}
.tehnologija-video .overlay-text ul{
  margin:0 auto 1.5rem; padding-left:20px; text-align:left; max-width:700px; color:#a9b9de; font-weight:600;
}
.tehnologija-video .overlay-text ul li{ margin-bottom:.7rem; position:relative; }
.tehnologija-video .overlay-text ul li::before{
  content:"★"; position:absolute; left:-20px; color:#7ba6ff; font-size:1.2rem; text-shadow:0 0 8px #7ba6ffaa; font-weight:800; line-height:1;
}

/* ============================
   Materijali – tablica
  ============================ */
table{ width:100%; min-width:1080px; border-collapse:collapse; table-layout:fixed; color:#d0e3ff; font-weight:600; font-size:1rem; }
thead tr{ background: linear-gradient(135deg,#204070,#4488ff); color:#fff; text-transform:uppercase; letter-spacing:1.5px; font-weight:900; }
thead th{
  min-width:120px; padding:12px 10px; border:1.5px solid rgba(100,150,255,.3); text-align:center; vertical-align:middle;
}
tbody tr{ height:48px; transition: background-color .3s; }
tbody tr:hover{ background: rgba(65,110,255,.15); }
tbody td{
  min-width:120px; padding:14px 10px; text-align:center; vertical-align:middle;
  border-left:1.5px solid rgba(100,150,255,.3); border-right:1.5px solid rgba(100,150,255,.3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family: Arial, sans-serif; font-size:.95rem; line-height:1.3; color:#a0b8ffcc; text-shadow:0 0 5px #80a8ffbb;
}
tbody td:last-child{ text-align:left; white-space:normal; color:#90aaffcc; font-style:italic; text-shadow:none; }

/* ============================
   Zvjezdice - materijali
============================ */

.table-wrapper tbody td .stars{
  display:inline-flex; gap:2px; letter-spacing:1px;
  font-size:1.05rem; line-height:1; vertical-align:middle;
}

/* --- Puna --- */
.table-wrapper tbody td .stars .s.full{
  color:#ffd76a;                 
  -webkit-text-stroke:1px #8a6b1f;
  text-shadow:
    0 0 6px rgba(255,215,106,.65),
    0 0 14px rgba(124,172,255,.35);
}

/* --- Prazna --- */
.table-wrapper tbody td .stars .s.empty{
  color:#5b6a88;
  -webkit-text-stroke:1px #3a475f;
  text-shadow:none;              
  opacity:.55;
}

.table-wrapper tbody tr:hover .stars .s.full{
  text-shadow:
    0 0 8px rgba(255,215,106,.85),
    0 0 18px rgba(124,172,255,.55);
}

/* ===============================================================
   Multimedija grid + carousel 
   =============================================================== */
.carousel{ position:relative; overflow:hidden; max-width:100%; margin:20px auto; }
.carousel-inner img{ width:100%; display:none; }
.carousel-inner img.active-slide{ display:block; }
.carousel-control{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(36,109,234,.7);
  border:0; color:#fff; font-size:2rem; width:40px; height:40px; padding:0 10px; cursor:pointer;
  border-radius:50%; transition: background-color .25s; z-index:10;
}
.carousel-control:hover{ background:rgba(36,109,234,.9); }
.carousel-control.prev{ left:10px; } .carousel-control.next{ right:10px; }

#pictures{ margin-bottom: clamp(24px, 4vw, 56px); }
#pictures + .h1-wrapper{ margin-top: clamp(8px, 2vw, 16px); }
#videos{ margin-top: clamp(16px, 2.5vw, 32px); }

/* ===============================================================
   Lightbox (clean)
   =============================================================== */
.page-wrap{ width:min(1240px,94vw); margin:10px auto 60px; }
.grid{ display:grid; gap:18px; }
.grid-pictures{ grid-template-columns:repeat(4,1fr); }
.grid-videos{ grid-template-columns:repeat(3,1fr); }
.card{ border:0; padding:0; background:transparent; cursor:pointer; }
.card:focus-visible{ outline:2px solid #5aa9ff; outline-offset:2px; border-radius:16px; }
.thumb{ position:relative; overflow:hidden; border-radius:16px; box-shadow:0 8px 22px rgba(0,0,0,.28); }
.card-image .thumb{ aspect-ratio:4/3; }
.card-video .thumb{ aspect-ratio:16/9; }
.thumb img,.thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.badge-count{
  position:absolute; right:10px; top:10px; background:rgba(0,0,0,.55); color:#fff;
  font-size:.85rem; padding:4px 8px; border-radius:999px; letter-spacing:.4px;
}

/* --- Overlay --- */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  display:none; align-items:center; justify-content:center; padding:24px; z-index:9999;
}
.lightbox-overlay.active{ display:flex; }

/* --- Prozor --- */
.lb-window{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:auto; max-width:96vw; max-height:92vh; background:transparent;
  border-radius:16px; position:relative;
}

/* --- Medij --- */
.lb-media{ position:relative; display:inline-block; }
.lb-media-slot{ display:inline-block; }
.lb-media-slot img,
.lb-media-slot video{
  display:block; margin:0 auto;
  width:auto; height:auto;
  max-width:min(96vw,1100px);
  max-height:calc(92vh - 70px);
  object-fit:contain; border-radius:14px; background:#0b1422;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 28px rgba(0,0,0,.45);
}

/* --- Navigacija --- */
.lb-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(8,16,28,.60);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.45); backdrop-filter:blur(2px);
}
.lightbox-overlay.active .lb-nav-btn{ display:flex; }
.lb-nav-btn:hover{ background:rgba(20,40,70,.72); border-color:rgba(255,255,255,.4); }
.lb-prev{ left:12px; } .lb-next{ right:12px; }
.lb-arrow{ display:flex; align-items:center; justify-content:center; line-height:1; font-size:28px; color:#fff; text-shadow:0 0 2px #000,0 0 6px rgba(0,0,0,.6); }

/* ---Close --- */
.lb-close{
  position:absolute; top:10px; right:10px;
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(8,16,28,.60); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; box-shadow:0 6px 18px rgba(0,0,0,.45); backdrop-filter:blur(2px);
}
.lb-close:hover{ background:rgba(20,40,70,.72); border-color:rgba(255,255,255,.4); }

/* ---Caption --- */
.lb-caption{
  display:block; margin:6px auto 0;
  width:auto; max-width:min(96vw,1100px);
  padding:10px 14px; border-radius:12px;
  background:rgba(10,16,26,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  text-align:center;
}
.lb-caption .lb-caption-text{
  margin:0; color:#b7c8ff; font-size:1.18rem;
  letter-spacing:1.1px; line-height:1.65; font-weight:400;
  text-shadow:0 0 3px rgba(0,0,0,.25);
}

/* ---VIDEI caption --- */
.lb-caption.is-video{
  width:auto !important; max-width:none; white-space:nowrap;
  overflow:visible; text-overflow:clip; background:rgba(10,16,26,.92);
}
.lb-caption.is-video .lb-caption-text{ white-space:nowrap; overflow:visible; text-overflow:clip; }

/* --- Failsafe --- */
.lightbox-overlay .lb-caption,
.lightbox-overlay .lb-caption .lb-caption-text{
  text-align:center !important;
  margin-left:auto; margin-right:auto;
}

/* ============================
   Utilities
   ============================ */
.home-page, .home-page *:not(input):not(textarea):not([contenteditable="true"]){
  caret-color: transparent !important; -webkit-user-select:none !important; user-select:none !important;
}

/* ============================
   Carousel "O nama"
   ============================ */
.carousel-track-container{
  position: relative; overflow: hidden; width: 100%; max-width: 500px;
  margin: 1.5rem auto; border-radius: 22px;
}
.carousel-track{ display: flex; transition: transform .4s ease-in-out; padding: 0; margin: 0; list-style: none; }
.carousel-slide{ min-width: 100%; box-sizing: border-box; }
.carousel-slide img{ display:block; width:100%; height:auto; }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background: rgba(10,16,26,.7);
  color:#fff; font-size:22px; line-height:1; cursor:pointer;
}
.carousel-btn.left{  left:10px; }
.carousel-btn.right{ right:10px; }

/* ============================
   Responsive
   ============================ */
@media (max-width:1200px){
  .grid-pictures{ grid-template-columns:repeat(3,1fr); }
  .grid-videos{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .grid-pictures{ grid-template-columns:repeat(2,1fr); }
  .grid-videos{ grid-template-columns:1fr; }
  .lb-media-slot img, .lb-media-slot video{ max-height:72vh; }
}
@media (max-width:768px){
  .side-nav{ display:none; }
  .navbar{ height:60px; padding:0 10px; } .logo img{ height:50px; }

  .section-video .content{ width:95%; padding:10px; transform: translate(-50%,-50%); }
  .section-video .content h1{ font-size:2.8rem; line-height:1.2; text-align:center; }
  .section-video .content p{ font-size:1rem; text-align:center; }

  .fancy-btn{ padding:15px 40px; font-size:1.1rem; border-radius:30px; background:#fff; color:#000; letter-spacing:4px; box-shadow:0 4px 15px rgba(255,255,255,.4); }
  .fancy-btn:hover, .fancy-btn:focus{ background:#222; color:#fff; box-shadow:0 4px 20px rgba(0,0,0,.5); }
  .fancy-btn::before, .fancy-btn::after{ display:none; }

  .overlay-bg-image{ display:none; }

  .left-video, .right-video{
    position:relative; width:100vw; height:50vh; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#000;
  }
  .left-video video, .right-video video{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; min-width:auto; min-height:auto; object-fit:cover;
  }

  .gallery{ grid-template-columns:1fr; padding:20px 4vw; gap:16px; }
  .gallery img{ box-shadow:0 4px 18px rgba(0,0,0,.2); }

  .detailed-text .h2-wrapper, .detailed-text .h2-wrapper p, .h1-wrapper h1{ text-align:center; }
  h1.gallery-name, .detailed-text .h1-wrapper, .h1-wrapper h1{ font-size:2rem; }

  .detailed-text .h2-wrapper h2, .certificates-section .h2-wrapper h2{ font-size:2.2rem; margin-bottom:16px; padding:0 1rem; }
  .detailed-text .h2-wrapper p, .certificates-section .h2-wrapper p{ font-size:1.2rem; max-width:100%; padding:0 1rem; }

  .detailed-text, .certificates-section{ padding:30px 15px; }
  .detailed-text .p-wrapper, .detailed-text .ul-wrapper, .detailed-text .contact{ max-width:95vw; margin-bottom:1.8rem; padding:0; }
  .detailed-text p, .detailed-text ul{ font-size:1.1rem; line-height:1.6; }
  .detailed-text ul li{ padding-left:1.2rem; font-size:1.1rem; margin:.6rem 0; }
  .detailed-text ul li::before{ font-size:1.2rem; left:-.2rem; top:.1rem; }

  .detailed-text a{ font-size:1.6rem; max-width:95vw; text-align:center; display:block; margin:20px auto; padding:12px 20px; }

  .breadcrumb-arrow, .detailed-text .breadcrumb-arrow2{ margin-left:75%; top:10px; }
  .breadcrumb-arrow span, .detailed-text .breadcrumb-arrow2 span{ width:80px; }

  .tehnologija-video{ position:fixed; width:100vw; height:100vh; }
  .tehnologija-video video{ width:100% !important; height:100% !important; min-width:auto !important; min-height:auto !important; }
  .tehnologija-video .overlay{ background:rgba(0,0,0,.6); }
  .tehnologija-video .overlay-text{ max-width:95vw; width:90vw; padding:15px 20px; font-size:.9rem; transform: translate(-50%,-50%) scale(1); }
  .tehnologija-video .overlay-text h1{ font-size:2rem; margin-bottom:.6rem; }
  .tehnologija-video .overlay-text h2{ font-size:1.3rem; margin-bottom:.8rem; }
  .tehnologija-video .overlay-text h3{ font-size:1rem; margin-bottom:.7rem; }
  .tehnologija-video .overlay-text p{ font-size:.95rem; line-height:1.4; }
  .tehnologija-video .overlay-text ul{ padding-left:18px; font-size:.95rem; }
  .tehnologija-video .overlay-text ul li{ margin-bottom:.5rem; }
  .tehnologija-video .overlay-text ul li::before{ font-size:1rem; }

  .breadcrumb-arrow1{ left:25%; top:40%; width:30px; height:110%; }

  .table-wrapper{ padding:0 .75rem; }
  .table-wrapper table td{ white-space:normal; word-wrap:break-word; }
  .table-wrapper thead th{ white-space:normal; word-wrap:break-word; padding:12px 8px; }

  .table-wrapper thead th:nth-child(1){
    position: sticky; left:0; z-index:30; background: linear-gradient(135deg,#204070,#4488ff);
    border-right:1.5px solid rgba(100,150,255,.3); border-left:1.5px solid rgba(100,150,255,.3);
  }
  .table-wrapper tbody td:nth-child(1){
    position: sticky; left:0; z-index:20; background:#081020; border-right:1.5px solid rgba(100,150,255,.3); border-left:1.5px solid rgba(100,150,255,.3);
    font-weight:bold; color:#a0b8ffcc; text-shadow:0 0 5px #80a8ffbb;
  }
  .table-wrapper tbody tr:hover{ background: rgba(65,110,255,.15); }
  .table-wrapper tbody tr:hover td:nth-child(1){ background: rgba(14,34,99,.58); color:#fff; }
  .table-wrapper tbody tr.selected{ background: rgba(65,110,255,.25); }
  .table-wrapper tbody tr.selected td:nth-child(1){ background: rgba(65,110,255,.25); }

  .order-form, .contact-info{ padding:2rem 1.5rem; max-width:95vw; margin:1.5rem auto; }
  .order-form h2, .contact-info h2{ font-size:1.6rem; }
}

/* =========================================================
   RESPONZIVNO — ORDER/KONTAKT FORMA 
   ========================================================= */

@media (max-width: 768px){
  .laser-material-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .radio-group-center,
  #kontakt-forma .radio-group-center{
    flex-wrap: wrap;    gap: 8px;    justify-content: center;    align-items: center;
  }

  #kontakt-forma .radio-group-center label{
    width: 42px;    height: 42px;    font-size: .95rem;
  }

  .uzorak-gallery,
  #kontakt-forma .uzorak-gallery{
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
}

/* Mobiteli */
@media (max-width: 480px){

  .laser-material-grid{ grid-template-columns: 1fr; }

  /* Kontejneri i naslovi */
  .order-form{ margin: 1.25rem auto 3rem; padding: 1.25rem; }
  .order-form h2{ font-size: 1.45rem; }

  #kontakt-forma{ padding: 18px; border-radius: 18px; }
  #kontakt-forma h3{ font-size: 1.25rem; }
  #kontakt-forma h4, #kontakt-forma legend{ font-size: 1rem; }

  /* Polja  */
  .order-form input[type="url"],
  .order-form input[type="email"],
  .order-form select,
  .order-form textarea{
    min-height: 2.75rem;
    font-size: .98rem;
    padding: .5rem .75rem;
  }

  #kontakt-forma input[type="email"],
  #kontakt-forma input[type="url"],
  #kontakt-forma textarea{
    height: 42px;
    padding: .55rem .8rem;
    border-radius: 10px;
    font-size: .98rem;
  }
  #kontakt-forma textarea{ height: auto; min-height: 110px; }

  /* Radio DA/NE  */
  #kontakt-forma .radio-group-center{ gap: 6px; margin: 6px 0 10px; }
  #kontakt-forma .radio-group-center label{
    width: 38px; height: 38px; font-size: .9rem; border-radius: 50%;
  }

  /* Custom select */
  .select-selected,
  #kontakt-forma .select-selected{
    padding: 8px 40px 8px 12px;
    min-height: 40px;
  }
  .select-arrow,
  #kontakt-forma .select-arrow{ right: 12px; padding: 3px; }

  /* Uzorci */
  .uzorak-gallery,
  #kontakt-forma .uzorak-gallery{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .uzorak-img,
  #kontakt-forma .uzorak-img{ height: 82px; }

  /* Fieldset i detalji */
  .order-form fieldset{ padding: .85rem 1rem 1.1rem; }
  #dorade-detalji, #uzorak-izbor, #custom-detalji, #velicina-detalji,
  #kontakt-forma .collapse.open{
    padding-top: .5rem; padding-bottom: .5rem;
  }

  /* GUMBI  */
  .order-form button[type="submit"],
  .order-form button[type="button"]{
    width: 100%;    min-height: 46px;    font-size: 1rem;    margin-top: 1rem;  }

  #kontakt-forma .btn-row{
    flex-direction: column;    gap: 10px;    align-items: stretch;    margin-top: 14px;  }
  #kontakt-forma .btn-primary,
  #kontakt-forma .btn-secondary{
    min-width: unset;    width: 100%;    height: 46px;    font-size: 1rem;    border-radius: 12px;  }
}

/* Vrlo mali ekrani (320–360px) */
@media (max-width: 360px){

  /* Uzorci*/
  .uzorak-gallery,
  #kontakt-forma .uzorak-gallery{
    grid-template-columns: repeat(2, 1fr);
  }
  .uzorak-img,
  #kontakt-forma .uzorak-img{ height: 76px; }

  #kontakt-forma .radio-group-center label{
    width: 34px; height: 34px; font-size: .85rem;
  }
}

/* --- SAFETY PATCH ---
   Ako negdje postoji globalno pravilo koje sve <button> čini full-width,
   ovim ograničavamo promjene SAMO na gumbe unutar formi,
   a ne na #models-tabs ni X gumb. */
#models-tabs button{ width: auto !important; }
.model-group-header .remove-model-btn,
#kontakt-forma .remove-model-btn{
  width: auto !important; height: auto !important; 
}

/* =========================================================
   CONTACT INFO — RESPONSIVE
   ========================================================= */

.contact-info{
  max-width: clamp(340px, 78vw, 820px);  margin: 24px auto 48px;  padding-inline: clamp(12px, 4vw, 24px);   
  box-sizing: border-box;  text-align: center;
}

.contact-info h2{
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);  margin-bottom: 22px;
}

.contact-info ul{
  list-style: none;  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 20px;  
  margin: 0 auto 28px;  max-width: none;  padding: 0;
}

.contact-info ul li a{
  display: inline-flex;  align-items: center;  justify-content: center;  width: 44px;          
  height: 44px;  border-radius: 10px;  color: #7cacff;
  transition: transform .2s ease, color .2s ease;
}

.contact-info ul li a svg{
  width: 24px;  height: 24px;
}

@media (hover: hover){
  .contact-info ul li a:hover,
  .contact-info ul li a:focus{
    color:#a0c0ff;    transform: scale(1.12);    outline: none;
  }
}

/* ===== Tablet i manje ===== */
@media (max-width: 768px){
  .contact-info{ padding-inline: clamp(14px, 5vw, 22px); }
  .contact-info h2{ font-size: clamp(1.5rem, 3.8vw, 2rem); margin-bottom: 18px; }
  .contact-info ul{ gap: 18px; margin-bottom: 22px; }
  .contact-info ul li a{ width: 42px; height: 42px; }
  .contact-info ul li a svg{ width: 22px; height: 22px; }
}

/* ===== Mobiteli ===== */
@media (max-width: 480px){
  .contact-info{ 
    max-width: min(92vw, 480px); 
    padding-inline: 12px; 
  }
  .contact-info h2{ font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .contact-info ul{ gap: 16px; }
  .contact-info ul li a{ width: 40px; height: 40px; border-radius: 8px; }
  .contact-info ul li a svg{ width: 20px; height: 20px; }
}

/* ===== Vrlo mali ekrani (320–360px) ===== */
@media (max-width: 360px){
  .contact-info{ padding-inline: 10px; }
  .contact-info ul{ gap: 14px; }
  .contact-info ul li a{ width: 38px; height: 38px; }
  .contact-info ul li a svg{ width: 20px; height: 20px; }
}

.card-video .thumb img { width:100%; height:100%; object-fit:cover; display:block; }


/* 
------------------------------------
  Crafted by Zyphera Studios
  www.zyphera-studios.com
------------------------------------
*/