/* Basic reset */
*  {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
  
}

@media (max-width: 480px) {
  .main {
    padding-top: 60px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
    
  }
  .header{
    
   display: block; 
    
    background-color: rgb(0, 0, 0);
  }
  .logo-div{
    display: flex;
    justify-content: center;
    background-color: rgb(0, 0, 0);
  }
  .logo-jpg {
    display: flex;
    width: 100%;
    
   
   
  }
  .desni-sektor{
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: center;
  }

 
}

body {
 
  font-family: 'Arial', sans-serif;
  background-color: #454545;
  color: #000000;
}

header {
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000000;
  padding: 5px;
  position: fixed;
 width: 100%;





  position: fixed;
  top: 0;
  width: 100%;
  background: #000;
  color: #fff;
  z-index: 999;
  transition: top 0.3s ease;


}

header .logo-div img {
  max-width: 200px; /* Adjust your logo size */
display: flex;
}


nav ul {
  list-style-type: none;
  display: flex;
  gap: 20px;
}

nav a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight:bold;
}

nav a:hover {
  color: #ff6449; /* Highlight color on hover */
}

main {
 
  padding: 40px 20px;
}

#gallery-page h2 {
   
  text-align: center;
  margin-bottom: 20px;
}
#gallery-page h1 {
   
  text-align: center;
  margin-bottom: 20px;
}


 


#year_buttons {
  background-color: rgb(#cccccc);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;

}
.gallery1 {
  background-color: rgb(#cccccc);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
   
  
}

.artwork {
  background-color: rgb(228, 228, 228);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  scrollbar-width: none;
  scroll-behavior: inherit;
}

footer {
  text-align: center;
  padding: 5px;
  background-color: #454545;
  color: white;
}


.dugme {
  background-color: red;
}


.photos_container {
  background-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 8%;

}









html, body { margin:0; padding:0; overflow-x:hidden; width: 100%; }
/* Desktop stil (default) */
#gallery {
  background-color: rgba(0, 0, 0, 0);      /* crvena pozadina */
  display: flex;              /* fleks kontejner */
  flex-wrap: wrap;            /* slike prelaze u novi red ako nema mesta */
  justify-content: space-between;    /* centriranje horizontalno */
  gap: 0px;                  /* razmak između slika */
  padding: 10px;             /* unutrašnji razmak */
  padding-left: 0px; 
  padding-right: 0px;

}

#gallery img {
  width: auto;                /* standardna širina */
  height: 300px;              /* visina thumbnail-a na desktopu */
  display: block;             /* uklanja inline razmak */
  object-fit: cover;          /* slike se skaliraju proporcionalno i popunjavaju okvir */
}

/* Stil za mobilne uređaje */
@media (max-width: 600px) {
  #gallery {
    display: flex;
    flex-direction: column; /* slike jedna ispod druge */
    padding: 0;             /* uklanjamo padding da slike idu do ivica ekrana */
    margin: 0;              /* uklanjamo marginu ako postoji */
    width: 100vw;
    
  }

  #gallery img {
    width: 100%;           /* zauzima punu širinu ekrana */
    max-width: 100%;
    width: calc(100% - 2px);
    height: auto;           /* proporcije se čuvaju */
    object-fit: contain;    /* ne seče sliku */
    display: block;
    margin: 0;              /* uklanja default marginu */
    display: block;
  
  
  }
}

 

.artwork a {
    text-decoration: none; /* uklanja underline */
    color: inherit;        /* nasleđuje boju teksta iz parenta */
    display: block;        /* puni div */
    outline: none;         /* uklanja fokus okvir */
}

.artwork a:focus, 
.artwork a:active {
    outline: none;         /* uklanja fokus kad se klikne */
}


/* Fullscreen loader */
#loader {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  transition: opacity 0.5s ease;
}

#loader.hidden {
  opacity:0;
  pointer-events:none;
}

/* Animated circle */
.circle {
  width:50px;
  height:50px;
  border:5px solid #fff;
  border-top:5px solid #666;
  border-radius:50%;
  animation: spin 1s linear infinite;
}

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

/* Skeleton placeholder */
.skeleton {
  width: 300px;
  height: 200px;
  margin: 1px;
  border-radius: 8px;
  background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Blur + fade-in (LQIP) */
img.blur {
  filter: blur(20px);
  opacity: 0.8;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

img.blur.loaded {
  filter: blur(0);
  opacity: 1;
}

/* Responsive */
@media (max-width:600px){
  .skeleton { height:150px; width:200px; }
}




/*crypto */
/* ---------- CRYPTO DONATION BOX ---------- */
/* Centriranje naslov i paragraf na Donate page */.crypto-row {
    display: flex;
    justify-content: center; /* centriranje svih kolona */
    gap: 40px; /* razmak između kolona */
    flex-wrap: wrap; /* da bude responsive na mobilnom */
}

.crypto-column {
    display: flex;
    flex-direction: column; /* coin iznad, wallet, copy dugme, QR ispod */
    align-items: center;
    text-align: center;
    max-width: 220px;
}

.crypto-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
}

.wallet {
    font-family: monospace;
    background-color: #f0f0f0;
    padding: 6px 10px;
    border-radius: 6px;
    word-break: break-all;
    margin-bottom: 10px;
    display: block;
}

.copy-btn {
    padding: 5px 12px;
    font-size: 0.9em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: #444;
    color: #fff;
    margin-bottom: 10px;
    transition: background 0.2s ease;
}

.copy-btn:hover {
    background-color: #000;
}

.crypto-qr {
    width: 100px;
    height: 100px;
    margin-top: 5px;
}

.note {
    margin-top: 30px;
    font-style: italic;
    color: #ffffff;
    text-align: center;
}

.intro-text {
    text-align: center;       /* centers text horizontally */
    max-width: 700px;         /* optional, nice line length */
    margin: 0 auto 30px auto; /* centers block + bottom spacing */
    font-size: 1.1em;
    line-height: 1.6;
    color: #000000;
}






/*kontakt forma*/
/* Kontakt forma */
/* KONTAKT FORMA BOX */
/* Celokupna forma */
/* Celokupna forma */
form[name="contact"] {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    background-color: #bfbfbf;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-family: 'Arial', sans-serif;
    text-align: center; /* Centriranje teksta unutar forme */
}

/* Labela */
form[name="contact"] label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

/* Inputi i textarea */
form[name="contact"] input,
form[name="contact"] textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    transition: border 0.3s, box-shadow 0.3s;
    text-align: left; /* Tekst unutar inputa levo poravnat */
}

/* Fokus na input */
form[name="contact"] input:focus,
form[name="contact"] textarea:focus {
    border-color: #000; /* crna boja fokusa */
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    outline: none;
}

/* Dugme */
form[name="contact"] button {
    background-color: #000; /* crno dugme */
    color: #fff;
    font-weight: 700;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.2s;
    display: inline-block;
    text-align: center;
}

/* Hover efekat za dugme */
form[name="contact"] button:hover {
    background-color: #333; /* tamnije crno na hover */
    transform: translateY(-2px);
}

/* Poruke nakon slanja */
#success-message {
    display: none;
    margin-top: 15px;
    font-weight: 600;
    text-align: center;
}

#success-message.success {
    color: green; /* za pozitivno slanje */
}

#success-message.error {
    color: red; /* za negativno slanje */
}

/* Responsive */
@media (max-width: 600px) {
    form[name="contact"] {
        padding: 20px;
    }
}

h3 {
    text-align: center;
}






/*za dodatak na dnu stranice za slefdecu godinu*/
.next-year {
  text-align: center;
  margin: 40px 0;
  font-size: 1.2em;
}

.next-year a {
  display: inline-block;
  padding: 10px 20px;
  background: #000000;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}

.next-year a:hover {
  background: #3a3a3a;
}










/*slideshows pocetna*/
/* Canvas i hero overlay */
/* ============================= */
/* Canvas i hero overlay sekcija */
/* ============================= */
.hero-container {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

canvas#bgCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgba(0, 0, 0, 0.301);
    z-index: 1;
}

.hero-overlay h1 {
    font-size: 3rem;
    margin: 0;
    text-shadow: 0 3px 8px rgba(0,0,0,0.8);
}

.hero-overlay p {
    font-size: 1.2rem;
    margin-top: 10px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
/* Primer */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr; /* na mobilnom kolone jedna ispod druge */
  }
}





/*muzika*/
.music-btn {
  position: relative;
  overflow: visible;
  background-color: #000;
  border: none;
  border-radius: 50%;
  padding: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-btn svg {
  color: #fff;
  transition: transform 0.3s, color 0.3s;
  z-index: 2;
}

/* Pulse efekat */
.music-btn {
  position: relative;
  overflow: visible;
  background-color: #00000068;
  border: none;
  border-radius: 50%;
  padding: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.music-btn svg {
  color: #fff;
  transition: transform 0.2s, color 0.2s;
  z-index: 2;
}

.pulse {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(29, 185, 84, 0.5);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  opacity: 0;
}

.music-btn.playing svg {
  color: #1db954;
  transform: scale(1.2);
}



/* ============================================================
   PRO COMPAT PATCH (GLOBAL)
   - Keeps old CSS, but fixes logo sizing + readable colors
   - Fixes fixed-header overlap on ALL pages (since all use index.css)
   ============================================================ */

:root{
  --ko-header-h: 72px;
}

body{
  background: #454545;
  color: #ffffff;
  padding-top: var(--ko-header-h); /* prevents content hiding under fixed header */
}

.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: #000;
}

.logo-div{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
}

.logo-jpg{
  display: block;
  max-width: 200px;
  width: auto;
  height: auto;
}

.desni-sektor{
  background: transparent;
}

.desni-sektor ul{
  list-style: none;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.desni-sektor a{
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.desni-sektor a:hover{
  color: #ff6449;
}

/* Mobile header height */
@media (max-width: 600px){
  :root{ --ko-header-h: 126px; }

  .header{
    flex-direction: column;
    padding: 10px 12px;
  }

  .logo-jpg{
    max-width: 240px;
    width: 70vw;
  }

  .desni-sektor ul{
    justify-content: center;
    gap: 14px;
  }
}

/* ============================================================
   HOME (page-home) — Ultra Premium metal buttons + silver title
   Only affects homepage (index.html adds body.page-home)
   ============================================================ */

body.page-home .main{
  padding: 0 18px 34px;
  background:
    radial-gradient(1200px 520px at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.00) 60%),
    radial-gradient(900px 460px at 50% 100%, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.00) 60%);
}

body.page-home #gallery-page{
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 18px;
}

body.page-home #gallery-page .premium-title{
  text-align: center;
  margin: 8px 0 26px;
  font-weight: 950;
  letter-spacing: 0.8px;
  line-height: 1.22;
  font-size: clamp(20px, 2.2vw, 30px);

  background: linear-gradient(
    115deg,
    #6f6f6f 0%,
    #d6d6d6 14%,
    #ffffff 26%,
    #b5b5b5 40%,
    #ffffff 52%,
    #c2c2c2 66%,
    #ffffff 80%,
    #7a7a7a 100%
  );
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  text-shadow:
    0 10px 28px rgba(0,0,0,0.30),
    0 2px 0 rgba(255,255,255,0.06);

  animation: koTitleShimmer 7.8s linear infinite, koTitleGlow 6.5s ease-in-out infinite;
}

body.page-home #gallery-page .premium-title .subline{
  display: block;
  font-size: 0.80em;
  font-weight: 850;
  margin-top: 6px;
  opacity: 1;
  color: rgba(255,255,255,0.92);
  text-shadow:
    0 0 12px rgba(255,255,255,0.18),
    0 8px 22px rgba(0,0,0,0.28);
}

@keyframes koTitleShimmer{
  0%{ background-position:-220% 0; }
  100%{ background-position: 220% 0; }
}
@keyframes koTitleGlow{
  0%,100% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.10)); opacity: 0.96; }
  50%     { filter: drop-shadow(0 0 18px rgba(255,255,255,0.18)); opacity: 1; }
}

body.page-home #year_buttons{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Thinner ultra premium buttons (FULL CLICKABLE) */
body.page-home #year_buttons .artwork{
  height: 64px;              /* thinner */
  border-radius: 16px;
  text-decoration: none;

  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(232,232,232,0.97) 44%, rgba(195,195,195,0.98) 100%) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(170,170,170,0.55) 40%, rgba(255,255,255,0.75) 70%, rgba(140,140,140,0.55) 100%) border-box;

  box-shadow:
    0 22px 62px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -14px 26px rgba(0,0,0,0.12);

  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

/* Brushed texture */
body.page-home #year_buttons .artwork::after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,0.00) 0px,
    rgba(0,0,0,0.00) 6px,
    rgba(0,0,0,0.04) 7px,
    rgba(0,0,0,0.00) 12px
  );
  opacity: 0.22;
  pointer-events:none;
  mix-blend-mode: overlay;
}

/* Slow sheen sweep */
body.page-home #year_buttons .artwork::before{
  content:"";
  position:absolute;
  top:-95%;
  left:-70%;
  width:58%;
  height:290%;
  transform: rotate(18deg);
  background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.70) 48%, rgba(255,255,255,0) 72%);
  opacity: 0.35;
  pointer-events:none;
  animation: koSheen 6.8s ease-in-out infinite;
}
@keyframes koSheen{
  0%   { transform: translateX(-170%) rotate(18deg); opacity: 0; }
  18%  { opacity: 0.32; }
  58%  { opacity: 0.35; }
  100% { transform: translateX(360%) rotate(18deg); opacity: 0; }
}

body.page-home #year_buttons .artwork:hover{
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.04);
  box-shadow:
    0 30px 78px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.80),
    inset 0 -16px 34px rgba(0,0,0,0.14);
}

body.page-home #year_buttons .artwork:active{
  transform: translateY(-2px) scale(1.0);
}

body.page-home #year_buttons .artwork .year{
  font-weight: 950;
  letter-spacing: 2.2px;
  font-size: clamp(22px, 2.2vw, 34px);
  color: #101010;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  position: relative;
  z-index: 1;
}

body.page-home #year_buttons .artwork:focus-visible{
  outline: 3px solid rgba(255,255,255,0.60);
  outline-offset: 4px;
}

/* Mobile: single column */
@media (max-width: 600px){
  body.page-home #year_buttons{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}