@import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700");

/* Reset */
html, body {
  margin: 0;
  padding: 0;
}

/* Plava traka */
#plavatraka {
  width: 100%;
  height: 70px;
  background-color: #04A2D7;
  display: block;
}

/* Crni meni */
.crnimenikontejner {
  display: inline-block;
  position: relative;
}

.crnimenidugme {
  background-color: #000;
  color: #fff;
  padding: 10px 0;
  border-radius: 8%;
  position: relative;
  top: 7px;
}

.crnimeni-unutra {
  display: none;
  position: absolute;
  top: 30px;
  min-width: 160px;
  background-color: #000;
  box-shadow: 0 8px 16px 0 #000;
  z-index: 99000;
}

.crnimeni-unutra a {
  display: block;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  border: thin solid #fff;
}

.crnimeni-unutra button {
  background-color: #C7DFE5;
}

.crnimenikontejner:hover .crnimeni-unutra { display: block; }
.crnimenidugme:hover,
button[type=reset]:hover,
button[type=submit]:hover,
.crnimeni-unutra a:hover { opacity: 0.6; }

/* Digitalni sat */
#digital-clock {
  display: none;
  width: 120px;
  height: 30px;
  padding: 5px 0;
  font-family: Orbitron, "PT Sans Narrow", sans-serif;
  letter-spacing: 0;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.69);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Kontakt modal */
.Kmodal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding-top: 50px;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.Kmodal legend{
  font-size: 30px;
}

.Kmodal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: min(80%, 600px);
}

/* Close */
.close {
  color: #aaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
  position: relative;
  bottom: 20px;
  cursor: pointer;
}

.close:hover,
.close:focus { color: red; }

/* Forme unutar Kontakt modal-a */
#KontaktModal input[type=text],
#KontaktModal input[type=email],
#KontaktModal textarea {
  width: 100%;
  padding: 6px 0;
  display: inline-block;
  background: #f1f1f1;
  border: thin solid #ccc;
}

#KontaktModal button[type=submit],
#KontaktModal button[type=reset] {
  width: 80px;
  padding: 10px 0;
  background-color: #1D94FC;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

#KontaktModal button[type=submit]:focus-visible,
#KontaktModal button[type=reset]:focus-visible,
.crnimenidugme:focus-visible,
.crnimeni-unutra a:focus-visible {
  outline: 2px solid #1D94FC;
  outline-offset: 2px;
}

/* Animacija */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}

@-webkit-keyframes animatezoom {
  from { -webkit-transform: scale(0); }
  to   { -webkit-transform: scale(1); }
}

@keyframes animatezoom {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Dekorativni točkovi (placeholder) */
.levitocak,
.desnitocak { display: none; }  

/* LOG */

#loginContainer {
  position: absolute;   /* fiksiramo ceo blok desno gore */
  top: 7px;             /* udaljenost od vrha */
  right: 4px;           /* udaljenost od desne ivice */
  text-align: right;    /* sve poravnano desno */
  border: none;
}

#Logmeni {
  background-color: blue;
  color: white;
  padding: 10px 10px;
  border-radius: 8%;
  cursor: pointer;
}

/* The Modal (background) */
.Lmodal {
  display: none;        /* Hidden by default */
  position: fixed;      /* Stay in place */
  z-index: 1000;           /* Sit on top */
  padding-top: 50px;    /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;          /* Full width */
  height: 100%;         /* Full height */
  overflow: auto;       /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
fieldset {
  border: 1px solid #aaa;
  border-radius: 6px;
  padding: 15px;
}
.Lmodal legend {
  font-size: 30px;
}
.Lmodal label {
  font-weight: bold;
}

/* Modal Content */
.Lmodal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  max-width: 500px;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 30px;
  font-weight: bold;
  position: relative;
  bottom: 20px;
}
.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

input[type=text],
input[type=password] {
  padding: 16px 0px;
  width: 100%;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}
form input[type=email]{
  padding: 16px 0px;
  width: 100%;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

button[type=submit] {
  background-color: #1D94FC;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  cursor: pointer;
  width: 100%;
  border-radius: 6px;
}

button[type=button] {
  background-color: #1D94FC;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  cursor: pointer;
  width: 100%;
  border-radius: 6px;
}

#Logmeni:hover {
  opacity: 0.6;
}
button[type=submit]:hover {
  opacity: 0.6;
}
button[type=button]:hover {
  opacity: 0.6;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}
@-webkit-keyframes animatezoom {
  from { -webkit-transform: scale(0) }
  to   { -webkit-transform: scale(1) }
}

/* Ime korisnika apsolutno ispod dugmeta, unutar loginContainer */
#korisnikInfo {
  margin-top: -12px;    /* razmak ispod dugmeta */
  font-weight: bold;
  font-style: italic;
  color: black;
  white-space: nowrap;
  position: absolute;
  top: 53px;            /* udaljenost od vrha */
  text-decoration: underline;
}

/* KRAJ LOG */


/* REG */

#Regmeni {
  background-color: blue;
  color: white;
  padding: 10px 0px;
  cursor: pointer;
  position: absolute;
  top: 7px;
  right: 160px;
  border-radius: 8%;
  /* float: right; */
}

/* The Modal (background) */
.Rmodal {
  display: none;        /* Hidden by default */
  position: fixed;      /* Stay in place */
  z-index: 99999;           /* Sit on top */
  padding-top: 50px;    /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;          /* Full width */
  height: 100%;         /* Full height */
  overflow: auto;       /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.Rmodal legend {
  font-size: 30px;
}
.Rmodal label {
  font-weight: bold;
}

/* Modal Content */
.Rmodal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  max-width: 500px;
  width: 80%;
}

#Regmeni:hover {
  opacity: 0.6;
}

button[type=submit]:hover {
  opacity: 0.6;
}

/* KRAJ REG */

/* Wrapper za lozinku sa ikonicom */
.password-wrapper {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 15px; /* da se odvoji od sledećih elemenata */
}

.password-wrapper input {
  width: 100%;
  padding-right: 35px; /* prostor za ikonicu desno */
  box-sizing: border-box;
}

.password-wrapper i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
  font-size: 18px;
}

.password-wrapper i:hover {
  color: #1D94FC; /* hover boja */
}



/* NASLOV */

#naslov {
  background: url('../img/stara_planina.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 250px;
  position: relative;
}

.logo {
  position: absolute;
  top: 70px;
  left: 5px;
}
.logo img {
  width: 100px;   /* smanji širinu logotipa */
  height: auto;   /* visina se prilagođava proporcionalno */
}


.naslovi {
  position: absolute;
  top: 50%;               /* vertikalno centriranje */
  left: 50%;              /* horizontalno centriranje */
  transform: translate(-50%, -50%);
  text-align: center;
  color: black;           /* obavezno definiši boju */
  font-family: Comic Sans MS;
  font-size: 18px;
  font-style: italic;
  text-shadow: 4px 2px 2px white;
  z-index: 2;             /* da bude iznad pozadine */
}

         /*LEGENDA DUGME*/

.legendakontejner{
  display: inline-block;
  position: relative;
  float: right;
  margin-right: 10px;
  z-index: 3;
}

.legendadugme {
  color: white;
  padding: 10px 50px;
  font-size: 15px;
  border-radius: 15px 15px 15px 15px;
  background: linear-gradient(to right, #f44336, #00BFFF);
}

.legenda-unutra {
  display: none;
  position: absolute;
  top: 40px;
  right: 0px;
  min-width: 160px;
  background-color: #0099cc; 
}
.legenda-unutra a {
  display: block;
  padding: 6px 10px;
  color: #fff;
  text-decoration: none;
  border: outset;
}
.legendakontejner:hover .legenda-unutra { display: block; }
.legendadugme:hover{
  background: linear-gradient(to right, #00BFFF, #f44336);
  transform: scale(1.03);
}
.legenda-unutra a:hover { 
  opacity: 0.6;
  transform: scale(1.03); 
}


/* SKROL */

#skrol {
  width: 100%;
  height: 25px;
  background-color: #A9A7A7;
  display: flex;
  margin-top: -15px;
}

#leviskrol,
#desniskrol {
  width: 48%;
  overflow: hidden;
  position: relative;
}

#srednjiskrol {
  width: 4%;
  background-color: #A9A7A7;
}

.scroll-text {
  position: absolute;
  white-space: nowrap;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  color: black;
  animation: scrollLeft 20s linear infinite;
}

/* Levi deo sporije */
#leviskrol .scroll-text {
  animation-duration: 35s;
}

/* Desni deo brže */
#desniskrol .scroll-text {
  animation-duration: 25s;
}

@keyframes scrollLeft {
  0%   { transform: translateX(50%); }
  100% { transform: translateX(-100%); }
}


            /*KRAJ SKROLA*/

            /*KAFANA, VRTIC*/


.moj-reklamni-blok {
  width: 100%;
  height: 1cm;
  background-color: #d9edf7;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.moj-reklamni-item {
  width: 5cm;
  height: 100%;
  background-size: 210%;
  background-position: center 80%;
  background-repeat: no-repeat;
  display: block;
  position: relative;
  cursor: pointer;
  animation: blink 2s infinite; /* animacija u mirovanju */
}

/* definicija animacije */
@keyframes blink {
  0%   { filter: brightness(100%); }
  50%  { filter: brightness(120%); } /* malo svetlije */
  100% { filter: brightness(100%); }
}

.moj-reklamni-item:hover {
  background-size: 240%; /* zumira sliku na hover */
}

.moj-reklamni-item.kafana {
  background-image: url("../img/reklama/kafana.jpg");
}

.moj-reklamni-item.vrtic {
  background-image: url("../img/reklama/vrtic.jpg");
}

/* Stilizovani tooltip */
.moj-reklamni-item::after {
  content: attr(data-tooltip);    /* tekst iz HTML atributa */
  position: absolute;
  bottom: 120%;                   /* iznad elementa */
  left: 50%;
  transform: translateX(-50%);
  background: #f9f9f9;            /* svetla pozadina */
  color: #333;                    /* tamna slova */
  padding: 8px 12px;              /* unutrašnji razmak */
  border-radius: 6px;
  border: 1px solid #ccc;         /* diskretna ivica */
  white-space: nowrap;
  opacity: 0;                     /* skriven dok nije hover */
  pointer-events: none;
  transition: opacity 0.3s ease;
  font-size: 18px;                /* krupniji tekst */
  font-weight: bold;              /* naglašeno */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* blaga senka */
  z-index: 10;                    /* da bude iznad svega */
}

.moj-reklamni-item:hover::after {
  opacity: 1;                     /* prikazuje se na hover */
}



/* SMART MENI */

/* Glavni kontejner */
#linknavi {
  display: inline-block;
  width: 45%;
  height: auto;
}

/* Linkovi */
.meni-link {
  color: #2A2A2A;
  text-decoration: none;
  font-weight: bold;
}

/* Strelice */
.strelica,
.strelica1,
.strelica2 {
  position: absolute;
  right: 2px;
  font: 16px/30px monospace !important;
  border-radius: 4px;
  width: 34px;
  text-align: center;
}

.strelica {
  top: 0;
  height: 34px;
  background: rgba(0, 0, 0, 0.1);
  color: #DDDDDD;
}

.strelica1 {
  top: 0;
  height: 44px;
  background: #104E8B;
  color: #fff;
}

.strelica2 {
  top: 47px;
  height: 44px;
  background: #104E8B;
  color: #fff;
}

/* Dugme dropdown */
.dropbtn {
  position: relative;
  color: #2A2A2A;
  padding: 5px 10px 5px 5px;
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  border: groove;
  width: 100%;
  background-image: linear-gradient(to bottom, #f9f9f9, #2e8cb8);
}

.dropbtn a { text-decoration: none; }

/* Dropdown sadržaj */
.dropdown-content,
.dropdown-content-crkve,
.dropdown-content-razno {
  opacity: 0;
  transform: translateY(15px) translateX(-15px) scale(0.95);
  transition: opacity 0.5s ease, transform 0.9s ease;
  visibility: hidden;
  position: absolute;
  margin-left: 90px;
  background-color: #B9D3EE;
  width: 160px;
  box-shadow: 0px 8px 16px 0px black;
  z-index: 1;
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.dropdown-content a,
.dropdown-content-crkve a,
.dropdown-content-razno a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border: solid thin black;
}

.dropdown-content a:hover,
.dropdown-content-crkve a:hover,
.dropdown-content-razno a:hover {
  background-image: linear-gradient(to bottom, #3298c8, #A6E2FE); transform: scale(1.03);
}

/* Hover efekti */
.dropdown:hover .dropdown-content,
.dropdown:hover .dropdown-content-crkve,
.dropdown:hover .dropdown-content-razno {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  visibility: visible;
}

.dropdown:hover .dropbtn {
  background-image: linear-gradient(to bottom, #2d89b4, #297ca3); transform: scale(1.03);
}

/* Dodatni nivo dropdown-a */
.dropdown-content1 {
  display: none;
  position: absolute;
  margin-left: 40px;
  background-color: #D7E6F4;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px black;
  z-index: 1;
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.dropdown1:hover .dropdown-content1 { display: block; }

/* POSLEDNJI POSTOVI */
.poslednjipostovi {
  width: 55%;
  height: 338px;
  background-image: linear-gradient(to bottom, #A9A7A7, #F9FAFA);
  float: right;
  overflow-y: scroll;
}

.poslednji-postovi-title {
  color: black;
  font-size: 20px;
  text-shadow: #FBFCEF 4px 2px 2px;
}

.poslednjipostovi ul {
  list-style: none;
  padding-left: 0;
}

.poslednjipostovi li {
  margin-bottom: 8px;
  margin-left: 10px;
}

.poslednjipostovi a {
  font-size: 17px;
  color: #2A2A2A;
  text-decoration: none;
}

.poslednjipostovi a:hover { 
  text-decoration: underline; color: red; }
  
  
  
.last-post a {
                /* osnovna boja teksta */
  font-weight: bold;           
  text-shadow: 0 0 5px #00ffff,
               0 0 10px #00ffcc,
               0 0 20px #00b56d; 
  display: inline-block;
  animation: glowPulseCool 1.5s infinite;
}

@keyframes glowPulseCool {
  0%   { text-shadow: 0 0 25px #ffffff, 0 0 15px #ffffff, 0 0 30px #ffffff; } /* bljesak belo */
  50%  { text-shadow: 0 0 10px #00ccff, 0 0 20px #00b56d, 0 0 30px #00ff99; } /* prelaz ka plavo‑zelenoj */
  100% { text-shadow: 0 0 15px #00e6b8, 0 0 25px #00cc99, 0 0 35px #00b56d; } /* završna nijansa između plave i zelene */
}




  
  

/* Scrollbar */
.poslednjipostovi::-webkit-scrollbar,
.ispodreklame::-webkit-scrollbar { width: 18px; }

.poslednjipostovi::-webkit-scrollbar-thumb,
.ispodreklame::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #2196F3;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
  border: 3px solid black;
}

.poslednjipostovi::-webkit-scrollbar-track,
.ispodreklame::-webkit-scrollbar-track {
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #FEFE9A, #717070);
  box-shadow: inset 0 0 6px rgba(0,0,0,.4);
}

.poslednjipostovi::-webkit-scrollbar-thumb:hover,
.ispodreklame::-webkit-scrollbar-thumb:hover { background: #555; }

/* ISPOD REKLAME */
.ispodreklame {
  width: 100%;
  position: relative;
  margin-top: px;
  background: rgba(63, 70, 106, 0.5) url('../img/ispodreklame.jpg');
  background-size: contain;
  background-color: rgba(255, 0, 0, 0.4);
  overflow: hidden;
  overflow-y: scroll;
}

.ispodreklame .tekst {
  background-color: #BBFEA6;
  opacity: 0.7;
  color: black;
  text-shadow: #FFFFFF 4px 4px 2px;
  font-size: 19px;
  font-weight: bold;
}

/* NLS */
.nls {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to bottom, #717070, #F9FAFA, #717070);
  position: relative;
  margin-top: -18px;
}

.skrol1 {
  animation: kretanje 2s linear infinite alternate;
  font-size: 15px;
  color: white;
  text-shadow: black 4px 4px 2px;
  font-weight: bold;
}

@keyframes kretanje {
  0%   { margin-left: 10%; }
  100% { margin-right: 10%; }
}
.linijaglavna hr {
  width: 80%;
  margin: 0 auto;
  border: none;            /* ukloni default */
  border: 3px solid black; /* crna linija */
}
.linijaglavna1 hr{
  width: 80%;
  margin: 0 auto;
  border: none;            /* ukloni default */
  border: 3px solid red; /* crvena linija */
  border-radius: 20px;
}


/* INTERVJU */
.intervjuime {
  font-size: 30px;
  font-weight: bold;
  margin-top: 20px;
}

.intervjuzanimanje {
  font-size: 19px;
  font-weight: bold;
  margin: 20px 0;
}

.petar {
  width: 250px;
  height: 250px;
}

.flip-cardcelo {
  text-align: center;
  padding: 10px;
}

/* Tekst iznad intervjua */
.intervjutekst {
  background-image: linear-gradient(to bottom, #F9FAFA, #717070, #F9FAFA);
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-style: italic;
}

.skrol2 {
  animation: pokretanje 5s linear infinite alternate;
  font-size: 15px;
  color: white;
  text-shadow: black 4px 4px 2px;
}

@keyframes pokretanje {
  0%   { transform: translate(25vw, 0); }
  100% { transform: translate(-25vw, 0); }
}

/* Glavni prostor */
.prostorzaintervju {
  width: 100%;
  max-height: 500px;
  background-image: linear-gradient(to bottom, #717070, #F9FAFA, #717070);
  overflow-y: scroll;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
}

/* Kartica */
.flip-card {
  background-color: transparent;
  width: 250px;
  height: 250px;
  perspective: 1000px;
  margin: 0 auto;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 18px 18px 15px #444;
}

.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

/* Responsive */
@media screen and (max-width: 768px) {
  .prostorzaintervju {
    display: block;
    height: auto;
  }
}

/* Scrollbar */
.prostorzaintervju::-webkit-scrollbar { width: 18px; }
.prostorzaintervju::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #2196F3;
  box-shadow: inset 0 0 6px rgba(0,0,0,.5);
  border: 3px solid black;
}
.prostorzaintervju::-webkit-scrollbar-track {
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #FEFE9A, #717070);
  box-shadow: inset 0 0 6px rgba(0,0,0,.4);
}
.prostorzaintervju::-webkit-scrollbar-thumb:hover { background: #555; }

/* O NAMA */
.onama {
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 1px;
}

.levionama,
.desnionama {
  padding: 10px;
  background-image: linear-gradient(to bottom, #717070, #F9FAFA, #717070);
  display: flex;
  justify-content: space-around;
  text-align: center;
  position: relative;
  margin-top: 1px;
}
.levionama{
  position: relative;
  top: -1px;
}
.desnionama{
  position: relative;
  top: -19px;
}
.srednjionama {
  font-size: 18px;
  font-weight: 800;
  color: black;
  background-image: linear-gradient(to bottom, #A29F9F, #F9FAFA, #C1C1C1);
  position: relative;
  top: -1px;
  text-align: justify;
}

.srednjionamanaslov {
  font-size: 20px;
  text-align: center;
}

.prvitekst,
.drugitekst {
  width: 100px;
  font-size: 13px;
  font-style: italic;
}

.onamaime { font-weight: bold; }

.srednjitekst {
  color: black;
  text-shadow: white 2px 2px 2px;
  font-size: 10px;
  font-weight: 800;
}

/* Hover preview */
.pacir_unutra,
.celaviisus_unutra,
.park_maketa_unutra {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px black;
  z-index: 1;
}

.pacir:hover .pacir_unutra,
.celaviisus:hover .celaviisus_unutra,
.park_maketa:hover .park_maketa_unutra { display: block; }

/* Slike */
.ful {
  margin-bottom: 50px;
  display: flex;
  justify-content: center;   /* centriraj horizontalno */
  align-items: center;       /* centriraj vertikalno */
}

.slika-wrap {
  position: relative;        /* watermark vezan za sliku */
  display: inline-block;
}

.slika-wrap img {
  width: 90%;
  max-width: 600px;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.6);
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center center;
  cursor: pointer;
}

.slika-wrap img:hover {
  transform: scale(1.2);     /* zumiranje na hover */
  box-shadow: 0 8px 16px rgba(0,0,0,0.9);
  z-index: 10;
}

/* watermark stalno u gornjem desnom uglu slike */
.izvor-slike-galerija {
  position: absolute;
  top: 10px;
  right: 70px;
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  text-shadow: 1px 1px 2px #000;
  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 20;
}

.izvor-slike-galerija a {
  color: #ffcc00;
  text-decoration: none;
}

.izvor-slike-galerija a:hover {
  text-decoration: underline;
}

.tekst {
  padding: 15px;
  text-align: center;
  font-weight: bold;
}

/* KONTAKT */
.kontakt {
  width: 100%;
  height: 140px;
  background-image: linear-gradient(to bottom, #F9FAFA, #FEFE9A, #717070);
  margin-top: 2px;
  padding-top: 15px;
  text-align: center;
}

.kontakt button {
  padding: 10px 40px;
  background-color: black;
  color: white;
  border-color: white;
  border-radius: 50%;
  cursor: pointer;
}

.kontakt button:hover,
.kontakt .fa:hover { opacity: 0.7; }

.kontakt .fa {
  padding: 10px 13px;
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.fa-facebook { background: #3B5998; color: white; }
.fa-youtube  { background: #bb0000; color: white; }
.fa-instagram{ background: #F65757; color: white; }
.fa-envelope { background: #4C98DB; color: white; }

.komentar-box {
  background-color: #f9f9f9;
  border-left: 4px solid #007BFF;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.prikazi-dugme {
  margin-top: 5px;
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}

.dugme-komentari {
  display: inline-block;
  margin: 10px 0 15px;
  padding: 8px 16px;
  background: linear-gradient(to right, #007BFF, #00BFFF);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.dugme-komentari:hover {
  background: linear-gradient(to right, #0056b3, #0099cc);
  transform: scale(1.03);
}

.naslov-komentari {
  border: 2px solid #007BFF;
  background-color: #f0f8ff;
  padding: 10px 15px;
  border-radius: 8px;
  margin: 20px 0 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.naslov-komentari h4 {
  margin: 0;
  color: #007BFF;
  font-weight: bold;
}


/* DUGME IDI GORE */
#dugmezagore {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 199;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: darkred;
  color: white;
  cursor: pointer;
  padding: 11px;
  border-radius: 4px;
  box-shadow: 7px 7px 10px #444;
}
#dugmezagore:hover { background-color: blue; }

/* DUGME ZA KOMENTAR */
#mySidenav p {
  position: fixed;
  left: -100px;
  transition: 1s;
  padding: 10px 30px 10px 45px;
  width: 150px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 30px 5px 0;
  z-index: 40;
}
#mySidenav button {
  position: absolute;
  margin-top: -7px;
  margin-left: -25px;
  padding: 0 20px;
  background-color: black;
  color: white;
  font-size: 28px;
  cursor: pointer;
}
#mySidenav p:hover {
  left: 0;
  background-color: blue;
}
#projects {
  top: 50px;
  background-color: #f44336;
}

/* CRNA STRANICA ZA KOMENTAR */
body { font-family: 'Lato', sans-serif; }

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.9);
  overflow-x: hidden;
  transition: 1.5s;
  z-index: 999;
}

.overlay-content {
  position: relative;
  top: 3%;
  left: 10%;
  width: 80%;
  height: 93%;
  background-image: linear-gradient(to top, #717070, #F9FAFA);
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
}
.overlay a:hover,
.overlay a:focus { color: #f1f1f1; }

.overlay .closebtn {
  position: absolute;
  top: -15px;
  right: 5px;
  font-size: 60px;
  text-decoration: none;
}

/* KOMENTAR */
.overlay-content legend{
  font-size: 30px;
}
.overlay-content input[type=text],
.overlay-content input[type=email],
.overlay-content textarea {
  padding: 6px 0;
  width: 100%;
  display: inline-block;
  border: thin solid;
  background-color: white;
}

.overlay-content button[type=submit],
.overlay-content button[type=reset] {
  padding: 10px 0;
  width: 80px;
  background-color: #1D94FC;
  color: white;
  cursor: pointer;
  border-radius: 6px;
}
.overlay-content button[type=submit]:hover,
.overlay-content button[type=reset]:hover { opacity: 0.6; }

.komentar-admin {
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: #333;
  font-family: Arial, sans-serif;
  margin-left: 20px;
  background: #eef;
  padding: 8px;
}
.komentar-admin strong { color: #0055aa; }
.komentar-admin em { font-size: 14px; color: #666; }

.komentar-korisnik {
  background: #f9f9f9;
  font-size: 14px;
  line-height: 1.4;
  color: #444;
  font-family: Arial, sans-serif;
}

.komentar-admin::before {
  content: "👑 Admin odgovor:";
  display: block;
  font-weight: bold;
  color: #0055aa;
  margin-bottom: 4px;
}

/* Slike */
img:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  cursor: pointer;
}

.slika-zoom {
  position: relative;
  display: inline-block;
}
.slika-zoom::after {
  content: "🔍";
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 18px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slika-zoom:hover::after { opacity: 1; }

.komentari {
    position: relative;
    z-index: 999;
    background: white; /* opciono, da prekrije sve ispod */
}

/* FUTER */

.futer {
  background-image: linear-gradient(to bottom, #F9FAFA,#c7c7c7,#F9FAFA);
  padding: 30px 20px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border-top: 1px solid #ccc;
}

.futer-opis p {
  margin-bottom: 15px;
  font-weight: bold;
}

.futer-navigacija a {
  margin: 0 10px;
  color: #333;
  text-decoration: none;
}

.futer-navigacija a:hover {
  text-decoration: underline;
}

.futer-kontakt p {
  margin: 5px 0;
}

.futer-ikonice a {
  margin: 0 8px;
  font-size: 20px;
  color: #333;
}

.futer-ikonice a:hover {
  color: #0077cc;
}

.futer-copyright {
  margin-top: 20px;
  font-size: 13px;
  color: #666;
}
.admin-dugme {
  margin-top: 10px;
  margin-bottom: 15px; /* razmak ispod dugmeta */
  padding: 10px 20px;
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.3s ease;
}
.futer-ikonice {
  margin-top: 10px; /* dodatni razmak iznad ikonica */
}
.admin-dugme:hover {
  background-color: #005fa3;
  transform: scale(1.03);
}

/* 284px */
@media screen and (min-width: 284px) {
  .izbor { position: relative; top: 2px; left: 20px; }
  .overlay-content { width: 80%; background-image: linear-gradient(to top, #717070, #F9FAFA); }
  .dugmici { display: inline-block; width: 45%; }
  #Regmeni{
    position: absolute;
    right: 43%;
  }
  #Logmenikoment, #Regmenikoment {
    position: absolute; top: 15%; background-color: blue; color: white; border-radius: 8%; cursor: pointer;
  }
  #Logmenikoment { right: 60%; padding: 10px; }
  #Regmenikoment { right: 20%; padding: 10px 0; }
  #Logmenikoment:hover, #Regmenikoment:hover { opacity: 0.6; }
  .srednjitekst { font-size: 13px; }
  .prvitekst, .drugitekst { margin: 10px 0; }
  .srednjionama p { position: relative; margin: 0 10px; }
  #projects{
    position: relative;
    top: 29px;
    z-index: 9999;
  }
  .glow { font-size: 17px; }
}

/* 330px */
@media screen and (min-width: 330px) {
  .crnimenidugme { padding: 10px; }
  #Regmeni { position: absolute; right: 120px; }

  #skrol { position: relative; margin-top: -26px; }
  .dropbtn { font-size: 16px; }
  .poslednjipostovi { width: 55%; height: 358px; position: relative; margin-top: 0.01px; }
  .skrol1, .skrol2 { font-size: 18px; }
  .kontakt .fa { padding: 10px 13px; font-size: 30px; width: 30px; }
}

/* 375px */
@media screen and (min-width: 375px) {
  #Regmeni {  padding: 10px; }
  #Logmeni { right: 90px; margin-top: 1px; padding: 10px; }
  #linknavi { width: 46%; }
  .poslednjipostovi { width: 54%; height: 377px; }
  .nlstekst { font-size: 11px; color: white; text-shadow: black 4px 4px 2px; }
  .dropbtn { font-size: 17px; padding: 5px 10px 5px 20px; }
  .dropdown-content1 { display: none; position: absolute; margin-left: 70px; min-width: 160px; }
  .dropdown:hover .dropbtn { background-image: linear-gradient(to bottom, #2d89b4, #297ca3); transform: scale(1.03); }
  .naslovi { font-size: 11px; }
  .kontakt .fa { padding: 10px 20px; font-size: 30px; width: 30px; }
  .skrol1, .skrol2 { font-size: 20px; }
}

/* 420px */
@media screen and (min-width: 420px) {
  #loginContainer { top: 7px; right: 20px; text-align: right; }
  #Regmeni{right: 140px}
  .dropbtn { font-size: 17.5px; }
  .naslovi { font-size: 12px; }
  .skrol1, .skrol2 { font-size: 23px; }
  .ispodreklame { margin-top: 0.1px; }
  .poslednjipostovi { width: 54%; height: 385px; }   
}

/* 475px */
@media screen and (min-width: 475px) {
  .levitocak { display: inline; margin-left: 10px; }
  .desnitocak { display: inline; float: right; margin-right: 10px; }
  .crnimenidugme { top: -10px; margin-left: -8px; }
  #loginContainer { top: 51px; right: 70px; display: flex; align-items: center; gap: 10px; }
  #korisnikInfo { margin-top: -54px; }
  #Logmeni { right: 70px; margin-top: -50px; }
  #Regmeni { right: 190px; }
  #naslov { position: relative; }
  .naslovi { font-size: 14px; }
  #skrol { position: relative; margin-top: -18px; }
  .dropbtn { padding: 5px 10px 5px 40px; font-size: 18px; }
  .poslednjipostovi { width: 50%; height: 390px; }
  #linknavi { width: 50%; }
  .skrol1, .skrol2 { font-size: 27px; }
  @keyframes pokretanje {
    0%, 100% { transform: translate(30vw, 0); }
    100% { transform: translate(-30vw, 0); }
  }
}

/* 590px */
@media screen and (min-width: 590px) {
  #digital-clock { display: block; margin-top: -54px; margin-left: -83px; font-size: 22px; }
  #loginContainer { top: 43px; }
  #korisnikInfo { margin-top: -47px; }
  #Logmeni { margin-top: -36px; }
  #Regmeni { right: 185px; }
  .ispodreklame { width: 60%; height: 400px; margin-top: 88px; }
  .ispodreklame .tekst { font-size: 14.5px; }
  #linknavi { display: block; width: 100%; }
  .dropbtn { padding: 2px 0 16px; text-align: center; }
  .strelica { top: 70%; font: bold 16px monospace !important; right: 40%; background: none; }
  .dropdown { width: 20%; float: left; }
  .dropdown-content { margin-left: 65px; }
  .dropdown-content-crkve, .dropdown-content-razno { margin-left: -75px; }
  .dropdown-content1 { margin-left: -80px; }
  .poslednjipostovi { width: 40%; height: 400px; }
  .skrol1, .skrol2 { font-size: 30px; }
  .srednjionama { position: relative; margin-top: -7px; }
  .slikaonama { width: 50%; }
  .prvitekst, .drugitekst { width: 150px; font-size: 13px; }
  .kurs { width: 50%; float: right; z-index: 50; }
  .vesti {   position: relative; z-index: 1; width: 285px; height: 130px; }
  .kontakt { position: relative; margin-top: -1px; }
  .glow { font-size: 22px; }  
}

/* 600px */
@media (min-width: 600px) {
  #Regmeni { right: 190px; }
  .ispodreklame .tekst { font-size: 15px; }
}

/* 630px */
@media (min-width: 630px) { .ispodreklame .tekst { font-size: 15.5px; } }

/* 660px */
@media (min-width: 660px) { .ispodreklame .tekst { font-size: 16px; } }

/* 675px */
@media (min-width: 675px) { .ispodreklame .tekst { font-size: 16.2px; } 
  .logo img {
    width: 250px;   /* smanji širinu logotipa */
    height: auto;   /* visina se prilagođava proporcionalno */
  }
  .logo {
    position: absolute;
    top: 15px;
    left: 5px;
  } 
}

/* 690px */
@media (min-width: 690px) { .ispodreklame .tekst { font-size: 16.5px; } 
.glow { font-size: 26px; }
}

/* 710px */
@media (min-width: 710px) { .ispodreklame .tekst { font-size: 17px; } }

/* 769px */
@media (min-width: 769px) {
  #digital-clock { width: 250px; letter-spacing: 5px; font-size: 30px; margin-left: -88px; }
  .poslednjipostovi { width: 30%; height: 440px; }
  .ispodreklame { width: 70%; height: 410px; padding-top: 10px; }
  .nls { width: 70%; }
  hr { margin-top: 15px; }
    .prostorzaintervju {
    height: 430px;
    display: flex;
    overflow-x: scroll;   /* horizontalni klizac */
    overflow-y: hidden;   /* sakrij vertikalni */
  }
  .flip-cardcelo { float: left; }
}
/* 900px */
@media (min-width: 900px) {
#projects{
  top: 70px;
}
}
/* 990px */
 @media screen and (min-width: 1150px) {
.dropdown {
  width: 10%;
  }
.ispodreklame{
  position: relative;
  margin-top: 1px;
}
.dropdown-content
  { margin-left: 65px; 
  }
 .dropdown-content-razno { margin-left: 65px; 
 }
 .dropdown-content1 { margin-left: 80px; 
 }
}

/* 📱 Futer za mobilne uređaje */
@media (max-width: 600px) {

  .futer {padding: 20px 10px; text-align: center;}
  .futer-opis p {font-size: 14px; line-height: 1.4; margin-bottom: 15px;}
  .futer-navigacija {display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px;}
  .futer-navigacija a {font-size: 15px; padding: 6px 0;}
  .futer-kontakt p {font-size: 14px; margin: 6px 0;}
  .admin-dugme {width: 100%; padding: 12px; font-size: 16px; margin: 15px 0;}
  .futer-ikonice {margin-top: 15px;}
  .futer-ikonice a {font-size: 24px; margin: 0 10px;}
  .futer-copyright p {font-size: 13px; margin-top: 20px;}
}