@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

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

body{
background:#0d0d0d;
color:#d6d6d6; /* main text */
font-family:'Poppins',sans-serif;
}

h2, h3 {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.top-links a{
color:#ffd700;
}

.sidebar h2 {
  color: #ffd700;
}

/* TOP BAR */

.topbar{
height:60px;
background:#111;
border-bottom:1px solid #1f1f1f;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 25px;
position:relative;
}

.search-box{
position:absolute;
left:50%;
transform:translateX(-50%);
}

.cat-btn{
display:block;
width:100%;
padding:10px;
margin-bottom:8px;
background:#2f7d6a;
color:white;
text-decoration:none;
border-radius:6px;
}

.cat-btn:hover{
background:#246657;
}

.search-box input{
width:280px;
padding:10px 14px;
border-radius:20px;
border:none;
background:#1c1c1c;
color:white;
font-size:14px;
}

.search-box input:focus{
outline:2px solid #a970ff;
}

.top-links{
display:flex;
gap:15px;
}

.top-links a{
padding:10px 16px;
color:#c084ff;
text-decoration:none;
border-radius:8px;
transition:0.3s;
}

.top-links a:hover{
background:#1c1c1c;
color:white;
}

/* LAYOUT */

.layout{
display:flex;
align-items:flex-start; /* važno za sticky */
gap:20px; /* razmak između sidebar i content */
}

/* SIDEBAR */
.sidebar{
width:220px;
padding:20px;
background:#111;
color:white;
border-right:1px solid #222;

position:sticky;
top:0;
height:100vh;
flex-shrink:0; /* važno da ne skupi sidebar */
overflow-y:auto;
}

/* Category titles */
.sidebar h2 {
  margin-bottom: 15px;
  font-size: 22px;
}

.sidebar h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #aaa;
}

/* CATEGORY BUTTONS (THIS IS THE IMPORTANT PART) */
.sidebar a,
.sidebar button {
  display: block;
  width: 100%;
  padding: 14px 16px; /* BIGGER */
  margin-bottom: 10px;

  background: #1f1f1f;
  color: #eee;

  border: 1px solid #333;
  border-radius: 12px;

  text-align: left;
  font-size: 15px;
  font-weight: 500;

  cursor: pointer;

  transition: all 0.25s ease;
}

/* HOVER */
.sidebar a:hover,
.sidebar button:hover {
  background: linear-gradient(90deg, #ffd700, #b8962e);
  color: #000;
  transform: translateX(6px) scale(1.02);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

/* CLICK (PRESS EFFECT) */
.sidebar a:active,
.sidebar button:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ACTIVE FILTER */
.sidebar button.active {
  background: linear-gradient(90deg, #ffd700, #b8962e);
  color: #000;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.sidebar button::before {
  content: "● ";
  opacity: 0.4;
}

.sidebar button.active::before {
  opacity: 1;
}

/* CONTENT */

/* main content je flex:1, recimo sidebar 220px */
.content {
  flex: 1;
  padding: 20px;
  min-width: 0; /* važno da grid/carousel zna da se smanji */
}
/* CAROUSEL */

.carousel {
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: slide 20s infinite linear;
}

.carousel img {
  width: 300px;
  height: 220px;
  object-fit: cover;
  flex-shrink: 0;
}

/* DESKTOP ANIMATION */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.carousel img:hover {
  transform: scale(1.05);
}

/* GRID */

.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  justify-content: start;
}

/* CARD */

.card-link{
text-decoration:none;
color:inherit;
}

.card{
background:#141414;
border: 1px solid #222;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
transition:0.3s;
}

.card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow: 0 20px 50px rgba(255, 215, 0, 0.15);
}

.card img{
width:100%;
height:160px;
object-fit:cover;
}

.card h3{
padding:10px;
}

.card p{
padding:0 10px 15px;
font-size:14px;
color:#bfa8ff;
}

.sidebar button.active{
background:#a970ff;
color:white;
font-weight:600;
box-shadow:0 0 10px #a970ff;
}

.card-link {
display: block;
}
.card-link{
transition: all 0.3s ease;
}

/* RESPONSIVE */

@media (max-width:700px){

  .layout{
    flex-direction: column;
  }

  .sidebar{
    width: 100%;
    height: auto;          /* FIX */
    position: relative;    /* FIX */
  }

  .search-box input{
    width: 180px;
  }

  .carousel img {
    width: 70vw;   /* responsive */
    height: 180px;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

}

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