/* styles.css — сопствени прилагодувања (компатибилно со Tailwind) */

/* основни utility прилагодувања */
:root{
  --gun-900: #0b0d10;
  --gun-800: #12161B;
  --accent-1: #6D6BFF;
  --accent-2: #60A5FA;
  --accent-3: #22D3EE;
}

/* миксани класички стилови користени во HTML */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Glass effect (се користи како Tailwind класа .glass) */
.glass {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.04);
}

/* Основен gradient (за херој позадина) */
.gradient {
  background: linear-gradient(135deg, var(--gun-900) 0%, #0f1724 40%, #0b1220 100%);
}

/* Accent gradient за логотип и текст */
.accent-gradient {
  background: linear-gradient(90deg, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
}

/* shadow-glow utility (Tailwind дефинираше слично) */
.shadow-glow {
  box-shadow: 0 8px 40px rgba(99,102,241,0.16);
}

/* Прилагодувања за малите екрани */
@media (max-width: 640px) {
  .font-display { font-size: 1.1rem; }
}

/* Accessibility: focus outlines for keyboard users */
a:focus, button:focus {
  outline: 3px solid rgba(99,102,241,0.18);
  outline-offset: 2px;
}

/* Лесно прилагодување на картичките за подобар контраст на неколку екрани */
.border-white\/8 { border-color: rgba(255,255,255,0.08); }
.bg-gun-800\/50 { background-color: rgba(18,22,27,0.5); }

/* Ако сакаш да вклучам фино-уредување на некои типографски елементи */
h1,h2,h3 { letter-spacing: -0.01em; }
p { line-height: 1.6; color: rgba(255,255,255,0.9); }

/* Помошни класи за аспекти кои Tailwind генерираше inline (само ако треба) */
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

/* Малку помек hover за копчињата */
a.bg-indigo-600:hover { transform: translateY(-1px); transition: transform .18s ease; }

/* Carousel 3-up custom styles (compatible with Tailwind look) */
#carousel-track { transition: transform 450ms cubic-bezier(.22,.9,.36,1); display:flex; gap:16px; align-items:stretch; }

/* slide sizing controlled by JS via CSS var --slides */
.carousel-slide { flex: 0 0 calc(100% / var(--slides)); box-sizing: border-box; min-height: 160px; }

/* make arrows visible on md+ (we used hidden md:flex in HTML) */
/* style arrow buttons */
#carousel-prev, #carousel-next {
  width:48px; height:48px; font-size:24px; color: #fff; line-height:1;
  display: flex; align-items:center; justify-content:center;
}

/* small screens: arrows visible as smaller circles */
@media (max-width: 767px) {
  #carousel-prev, #carousel-next { display: none !important; }
}

/* ensure images look consistent */
.carousel-slide img { border-radius: .5rem; object-fit: cover; }

/* optional: smoother touch */
.carousel-slide { touch-action: pan-y; -webkit-user-select: none; user-select:none; }

/* Ensure no unwanted gaps that може да влијаат на px преводи */
#carousel-track { gap: 16px; align-items: stretch; }

/* Each slide should not wrap; width е контролиран од JS */
.carousel-slide { box-sizing: border-box; }

/* Arrows: олеснување за кликање */
#carousel-prev, #carousel-next { cursor: pointer; user-select: none; }

/* Prevent text selection during drag */
#carousel-track, #carousel-track * { -webkit-user-select: none; -ms-user-select: none; user-select: none; }