/*
Theme Name: Preporucamo Ultimate Dark
Version: 3.3 (Aspect Ratio 1:1 added)
*/

/* =========================================================
   1. LOKALNI FONTOVI
   ========================================================= */
@font-face { font-family: 'Outfit'; src: url('fonts/OutfitRegular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/OutfitBold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/OutfitBlack.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* =========================================================
   2. OSNOVE, RESET I GLOBALNI RAZMACI
   ========================================================= */
html { overflow-y: scroll; background-color: #09090b; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* Body drži jedini glavni razmak od ruba ekrana, nema dupliranja */
body { background-color: #09090b; color: #e5e7eb; margin: 0; padding: 1rem; font-family: 'Outfit', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { body { padding: 2rem; } }

h1, h2, h3, h4, a, span, li, p, time, div { font-style: normal; margin: 0; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* FIKSIRAN MAIN RAZMAK: Ubija sve stare Tailwind klase na svim stranicama */
main { 
    padding: 0 !important; 
    margin-top: 2rem !important; 
    margin-bottom: 5rem !important; 
}
@media (min-width: 768px) { 
    main { 
        margin-top: 3rem !important; 
    } 
}

/* =========================================================
   3. ZAGLAVLJE I NAVIGACIJA
   ========================================================= */
.site-header-container { position: sticky; top: 1rem; z-index: 99999; width: 100%; max-width: 95rem; margin: 0 auto; }
.site-header { height: 4rem; display: flex; align-items: center; justify-content: space-between; background-color: rgba(24, 24, 27, 0.95); border: 1px solid #27272a; border-radius: 1rem; padding: 0 1.5rem; backdrop-filter: blur(12px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
@media (min-width: 768px) { .site-header { padding: 0 2rem; } }

.site-logo { font-size: 1.25rem; font-weight: 900; letter-spacing: -0.05em; color: #ffffff; text-transform: uppercase; }
.site-logo span { color: #ef4444; }

.nav-desktop ul { display: flex; gap: 1.5rem; list-style: none; align-items: center; margin: 0; padding: 0; }
.nav-desktop li { position: relative; }
.nav-desktop .sub-menu { display: none; }
.nav-desktop li:hover > .sub-menu { display: flex; position: absolute; top: 100%; left: 0; background: #111111; border: 1px solid #27272a; border-radius: 0.75rem; padding: 0.625rem; min-width: 240px; flex-direction: column; gap: 4px; z-index: 99999; }
.nav-desktop a { font-size: 0.6875rem; font-weight: 800; color: #9ca3af; text-transform: uppercase; white-space: nowrap; transition: color 0.2s; }
.nav-desktop a:hover { color: #ffffff; }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
@media (min-width: 768px) { .header-actions { gap: 1rem; } }
.header-actions button { background: transparent; border: none; cursor: pointer; padding: 0.5rem; color: #9ca3af; transition: color 0.3s; }
.header-actions button:hover { color: #ffffff; }

#search-btn svg, #mob-toggle svg { width: 1.25rem; height: 1.25rem; }
#mob-toggle svg { width: 1.75rem; height: 1.75rem; }
#mob-toggle { display: flex; }

#mobile-nav, #search-box { display: none; }
#mobile-nav.active, #search-box.active { display: block; }

/* FIX ZA MOBILNI MENI */
#mobile-nav { position: absolute; top: 115%; left: 0; right: 0; background-color: #09090b !important; border: 1px solid #27272a; border-radius: 1.5rem; padding: 2rem; z-index: 100000; max-height: 75vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8); }
#search-box { position: absolute; top: 115%; left: 0; right: 0; z-index: 100000; background-color: #18181b; border: 1px solid #27272a; border-radius: 1rem; padding: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8); }

.mobile-menu-container ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }

/* FIX ZA LINKOVE U MOBILNOM MENIJU (Ubijena plava boja) */
.mobile-menu-container a, #mobile-nav a { color: #ffffff !important; text-decoration: none !important; font-size: 1.125rem; font-weight: 900; text-transform: uppercase; }
/* Nježno siva za podkategorije, da se razlikuju */
.mobile-menu-container .sub-menu a, .mobile-menu-container ul.children a { font-size: 1rem !important; font-weight: 700 !important; text-transform: none !important; color: #9ca3af !important; }

/* =========================================================
   4. STRUKTURA I LAYOUT (Tailwind zamjena)
   ========================================================= */
.max-w-\[90rem\] { max-width: 90rem; } .max-w-md { max-width: 28rem; } .max-w-2xl { max-width: 42rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.grid { display: grid; } .flex { display: flex; }
.flex-col { flex-direction: column; } .flex-row { flex-direction: row; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.flex-shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; }
.flex-wrap { flex-wrap: wrap; }
.relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; }
.top-4 { top: 1rem; } .top-8 { top: 2rem; } .top-28 { top: 7rem; }
.bottom-6 { bottom: 1.5rem; } .bottom-8 { bottom: 2rem; } 
.left-6 { left: 1.5rem; } .right-6 { right: 1.5rem; } .left-8 { left: 2rem; } .right-8 { right: 2rem; }
.z-10 { z-index: 10; } .z-20 { z-index: 20; }
.overflow-hidden { overflow: hidden; }

.min-w-0 { min-width: 0; }
.min-w-\[85\%\] { min-width: 85%; }

/* DIMENZIJE */
.w-full { width: 100%; } .h-full { height: 100%; }
.w-24 { width: 6rem; } .h-24 { height: 6rem; }
.w-16 { width: 4rem; } .h-16 { height: 4rem; }
.w-8 { width: 2rem; } .h-8 { height: 2rem; }
.w-3 { width: 0.75rem; } .w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-32 { width: 8rem; } .h-32 { height: 8rem; }
.w-\[500px\] { width: 500px; } .h-\[500px\] { height: 500px; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
.aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
.aspect-square { aspect-ratio: 1 / 1; }
.min-h-\[500px\] { min-height: 500px; } .min-h-\[400px\] { min-height: 400px; } 
.h-\[288px\] { height: 288px; } .h-\[300px\] { height: 300px; } .h-56 { height: 14rem; }
.object-cover { object-fit: cover; }

/* =========================================================
   5. BOJE, EFEKTI I GRADIJENTI
   ========================================================= */
.bg-cardbg { background-color: #18181b; } .bg-darkbg { background-color: #09090b; }
.bg-brand { background-color: #ef4444; } .bg-accent { background-color: #f59e0b; }
.bg-gray-600 { background-color: #4b5563; } .bg-gray-800 { background-color: #1f2937; } .bg-purple-500 { background-color: #a855f7; }

.text-white { color: #ffffff; } .text-brand { color: #ef4444; }
.text-gray-100 { color: #f3f4f6; } .text-gray-200 { color: #e5e7eb; } .text-gray-300 { color: #d1d5db; } .text-gray-400 { color: #9ca3af; } .text-gray-500 { color: #6b7280; } .text-gray-600 { color: #4b5563; } .text-gray-700 { color: #374151; }
.text-purple-400 { color: #c084fc; } .text-green-500 { color: #22c55e; } .text-orange-500 { color: #f97316; } .text-yellow-500 { color: #eab308; } .text-\[\#10b981\] { color: #10b981; } .text-\[\#ef4444\] { color: #ef4444; }

.border { border: 1px solid #27272a; } .border-t { border-top: 1px solid #27272a; } .border-b { border-bottom: 1px solid #27272a; } .border-2 { border: 2px solid #374151; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }
.border-brand { border-color: #ef4444; } .border-yellow-500 { border-color: #eab308; } .border-gray-800 { border-color: #27272a; } .border-gray-700 { border-color: #374151; }
.last\:border-0:last-child { border-width: 0; }

.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5); } .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); } .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5); } .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; } .opacity-10 { opacity: 0.1; } .opacity-20 { opacity: 0.2; }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0,0,0,0.5)); } .drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0,0,0,0.5)); }
.blur-\[150px\] { filter: blur(150px); } .blur-\[80px\] { filter: blur(80px); }

.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-black\/80 { --tw-gradient-from: rgba(0,0,0,0.8); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-darkbg { --tw-gradient-from: #09090b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-darkbg\/90 { --tw-gradient-from: rgba(9,9,11,0.9); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-transparent { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent); }
.via-darkbg\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(9,9,11,0.5), var(--tw-gradient-to, transparent); }
.via-darkbg\/80 { --tw-gradient-stops: var(--tw-gradient-from), rgba(9,9,11,0.8), var(--tw-gradient-to, transparent); }
.via-darkbg\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(9,9,11,0.4), var(--tw-gradient-to, transparent); }
.via-darkbg\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(9,9,11,0.2), var(--tw-gradient-to, transparent); }
.to-transparent { --tw-gradient-to: transparent; }

/* =========================================================
   6. SPACING I TIPOGRAFIJA
   ========================================================= */
.p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; } .p-12 { padding: 3rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-4 { padding-top: 1rem; } .pt-8 { padding-top: 2rem; } .pt-12 { padding-top: 3rem; }
.pb-2 { padding-bottom: 0.5rem; } .pb-4 { padding-bottom: 1rem; } .pb-5 { padding-bottom: 1.25rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-12 { padding-bottom: 3rem; } .pb-20 { padding-bottom: 5rem; }
.pl-3 { padding-left: 0.75rem; }
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; }
.mt-0\.5 { margin-top: 0.125rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; }
.gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-12 { gap: 3rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; }

.font-black { font-weight: 900; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; }
.uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; }
.tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } .tracking-tight { letter-spacing: -0.025em; } .tracking-tighter { letter-spacing: -0.05em; }
.leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.625; } .leading-\[1\.1\] { line-height: 1.1; }
.text-center { text-align: center; } .whitespace-nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.block { display: block; } .inline-block { display: inline-block; }

.rounded-\[2rem\] { border-radius: 2rem; } .rounded-\[2\.5rem\] { border-radius: 2.5rem; }
.rounded-3xl { border-radius: 1.5rem; } .rounded-2xl { border-radius: 1rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-full { border-radius: 9999px; }

/* HOVER EFEKTI */
.transition { transition-property: color, background-color, border-color, transform, opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.duration-300 { transition-duration: 300ms; } .duration-500 { transition-duration: 500ms; } .duration-700 { transition-duration: 700ms; }
.hover\:border-brand:hover { border-color: #ef4444; } .hover\:border-green-500\/50:hover { border-color: rgba(34, 197, 94, 0.5); }
.hover\:text-white:hover { color: #ffffff; } .hover\:text-brand:hover { color: #ef4444; } .hover\:bg-gray-800:hover { background-color: #1f2937; } .hover\:bg-\[\#1877F2\]:hover { background-color: #1877F2; } .hover\:bg-black:hover { background-color: #000000; }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:text-brand { color: #ef4444; } .group:hover .group-hover\:text-white { color: #ffffff; } .group:hover .group-hover\:text-gray-300 { color: #d1d5db; }
.group:hover .group-hover\:text-purple-400 { color: #c084fc; } .group:hover .group-hover\:text-green-400 { color: #4ade80; } .group:hover .group-hover\:text-orange-400 { color: #fb923c; } .group:hover .group-hover\:text-yellow-500 { color: #eab308; }
.group:hover .group-hover\:opacity-90 { opacity: 0.9; } .group:hover .group-hover\:opacity-100 { opacity: 1; }
.flex-1 { flex: 1 1 0%; }

/* SCROLL EFEKTI (Za recenzije) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.overflow-x-auto { overflow-x: auto; }
.snap-x { scroll-snap-type: x mandatory; } .snap-mandatory { scroll-snap-type: x mandatory; } .snap-center { scroll-snap-align: center; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   7. RESPONSIVE MEDIA QUERIES
   ========================================================= */
@media (max-width: 767px) {
    .hidden { display: none; }
}

@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-end { align-items: flex-end; } .sm\:items-start { align-items: flex-start; }
    .sm\:min-w-\[380px\] { min-width: 380px; }
    .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .sm\:text-left { text-align: left; }
}

@media (min-width: 768px) {
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:col-span-12 { grid-column: span 12 / span 12; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-span-4 { grid-column: span 4 / span 4; }
    .md\:p-8 { padding: 2rem; } .md\:p-10 { padding: 2.5rem; } .md\:p-12 { padding: 3rem; }
    .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .md\:rounded-\[2\.5rem\] { border-radius: 2.5rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; } .md\:text-6xl { font-size: 3.75rem; line-height: 1; } .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .md\:gap-6 { gap: 1.5rem; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:min-h-\[600px\] { min-height: 600px; } .lg\:min-h-\[650px\] { min-height: 650px; }
    .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
    .lg\:flex { display: flex; }
}

@media (min-width: 1280px) {
    .xl\:block { display: block; }
    .xl\:hidden { display: none; }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================
   8. PROSE (Stilovi teksta unutar članaka)
   ========================================================= */
.prose { color: #d1d5db; line-height: 1.8; font-size: 1.125rem; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: #ffffff; font-weight: 900; margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.3; }
.prose h2 { font-size: 1.875rem; } .prose h3 { font-size: 1.5rem; }
.prose p { margin-bottom: 1.5rem; }
.prose a { color: #ef4444; text-decoration: none; font-weight: 700; transition: color 0.3s; } .prose a:hover { color: #818cf8; }
.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; } .prose li { margin-bottom: 0.5rem; }
.prose blockquote { border-left: 4px solid #ef4444; background-color: #09090b; padding: 1.5rem; border-radius: 0 1rem 1rem 0; margin: 2rem 0; font-style: normal; }

/* =========================================================
   9. FIX ZA SLIKE UNUTAR ČLANKA (Classic Editor)
   ========================================================= */
.prose img {
    border-radius: 1.5rem !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.prose .aligncenter { display: block; margin: 2.5rem auto !important; }
.prose .alignnone { margin: 2.5rem 0 !important; }
.prose .alignleft { float: left; margin: 0.5rem 2rem 1rem 0 !important; }
.prose .alignright { float: right; margin: 0.5rem 0 1rem 2rem !important; }
.prose::after { content: ""; display: table; clear: both; }

/* =========================================================
   10. ARCHIVE I SINGLE CUSTOM KLASE
   ========================================================= */

/* Archive.php: Fiksni grid, kartice i hover efekti */
.brutal-grid { display: grid !important; grid-template-columns: repeat(1, 1fr) !important; gap: 2rem !important; width: 100% !important; }
@media (min-width: 640px) { .brutal-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .brutal-grid { grid-template-columns: repeat(4, 1fr) !important; } }

.portrait-card { position: relative !important; width: 100% !important; border-radius: 2.5rem !important; overflow: hidden !important; background: #161616 !important; border: 1px solid #222 !important; transition: transform 0.3s ease !important; }
.portrait-card:hover { transform: translateY(-5px) !important; }
.card-link { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 50 !important; background-color: rgba(0,0,0,0) !important; }
.image-container { position: relative !important; width: 100% !important; padding-top: 133.33% !important; }
.image-container img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
.rating-badge { position: absolute !important; top: 1.25rem !important; right: 1.25rem !important; background: #5551FF !important; color: #ffffff !important; font-weight: 900 !important; padding: 0.35rem 0.75rem !important; border-radius: 1rem !important; z-index: 45 !important; font-size: 0.875rem !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; display: flex !important; align-items: center !important; gap: 0.25rem !important; }

/* Archive.php i Index.php: Paginacija */
.custom-pagination .nav-links { display: flex; justify-content: center; gap: 10px; margin-top: 50px; }
.custom-pagination .page-numbers { background: #111; border: 1px solid #1f2937; color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 900; text-decoration: none; transition: all 0.3s; }
.custom-pagination .page-numbers:hover { border-color: #ef4444; color: #ef4444; }
.custom-pagination .page-numbers.current { border-color: #ef4444; color: #ef4444; }

.paginate-links-custom a, .paginate-links-custom span { padding: 0.5rem 1rem; border-radius: 0.75rem; background-color: #18181b; border: 1px solid #27272a; transition: all 0.3s; }
.paginate-links-custom a:hover { border-color: #ef4444; color: #ef4444; }
.paginate-links-custom span.current { background-color: #ef4444; color: white; border-color: #ef4444; }

/* Single.php: Hero desktop prebrisavanja i optimizacija učitavanja slika */
.hero-desktop-override { position: relative; display: block; width: 100%; height: 45vh; min-height: 400px; overflow: hidden; border-radius: 2rem; background-color: #111; }
.hero-desktop-override .no-lazy { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; margin: 0; padding: 0; max-width: none; }