/* === DARKMARK – HOVER BEZ POMERANJA + HAMBURGER VIDLJIV === */
:root{
  --gold:#d4af37;--gold-hover:#e6c258;--dark:#0a0a0a;--border:rgba(212,175,55,0.3);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--dark);color:#e8e8e8;font-family:'Montserrat',sans-serif;line-height:1.7;overflow-x:hidden;}
body {
    background: linear-gradient(145deg, #0a0a0a, #111);
}
/* NASLOVI */
h1,h2,h3{font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;}
.gold{color:var(--gold)!important;text-shadow:0 0 20px rgba(212,175,55,.4);}

/* NAVIGACIJA */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1030;
  background:rgba(10,10,10,.98)!important;backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);height:66px;padding:0 15px!important;
  display:flex;align-items:center;justify-content:space-between;
}

/* LOGO – UVEK LEVO */
/* FINAL SIMPLE & PERFECT – ALWAYS THE BEAUTIFUL GLOWING GOLD */
.navbar-brand {
    position: absolute !important;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1035;
}

.nav-logo {
    height: 32px;
    width: auto;
    transition: none; /* no animation needed */
    
    /* This is the exact "hover" version you already love – now permanent */
    filter: 
        brightness(0) 
        saturate(100%) 
        invert(93%) 
        sepia(15%) 
        saturate(2800%) 
        hue-rotate(325deg) 
        brightness(100%) 
        contrast(120%)
        drop-shadow(0 0 25px rgba(212, 175, 55, 0.9)) 
        drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
}

@media (min-width: 992px) {
    .nav-logo { height: 44px; }
}

/* Extra visibility on small phones */
@media (max-width: 576px) {
    .nav-logo { height: 30px; }
}
/* HAMBURGER – UVEK VIDLJIV NA MOBILNOM */
.navbar-toggler{
  display:block;      /* FIKS ZA PRIKAZ */
  position:absolute!important;right:12px;top:50%;transform:translateY(-50%);z-index:1035;
  border:none;background:transparent;
}
.toggler-icon{
  display:block;width:28px;height:3px;background:var(--gold);margin:5px 0;border-radius:2px;
}

/* MOBILNI MENI – LOGO OSTAJE LEVO */
@media(max-width:991px){
  .navbar-collapse{
    position:fixed;top:66px;left:0;right:0;
    background:rgba(10,10,10,.98);backdrop-filter:blur(12px);
    border-top:1px solid var(--border);padding:1rem 0;z-index:1030;
  }
  .navbar-nav{
    text-align:center;
  }
}

/* MENI LINKOVI */
.navbar-nav .nav-link{
  color:#ccc!important;font-weight:500;text-transform:uppercase;font-size:.95rem;
  letter-spacing:1px;padding:.5rem 1rem!important;position:relative;
}
.navbar-nav .nav-link::after{
  content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;
  background:var(--gold);transition:.3s;transform:translateX(-50%);
}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:var(--gold)!important;}
.navbar-nav .nav-link:hover::after,.navbar-nav .nav-link.active::after{width:70%;}

/* HERO – TAČNO ISPOD MENIJA */
.hero{
  margin-top:66px!important;
  min-height:calc(100vh - 66px);
  background:#0a0a0a;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

/* SJAJ */
.hero-glow,.hero-glow2{
  position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.2),transparent 70%);
  filter:blur(90px);animation:pulse 15s infinite;z-index:0;
}
.hero-glow{top:5%;right:5%;}
.hero-glow2{bottom:5%;left:5%;animation-delay:7s;}
@keyframes pulse{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.3);opacity:1}}

/* KARTICA – HOVER BEZ POMERANJA (SAMO SCALE + SHADOW) */
.ritual-card {
    background: linear-gradient(145deg, rgba(17,17,17,0.9), rgba(10,10,10,0.8));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 24px;
    padding: 3rem 2.5rem;
    max-width: 500px; /* Narrower for focus */
    box-shadow: 
        0 25px 60px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(212,175,55,0.1);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ritual-card:hover {
    transform: translateY(-8px) scale(1.02); /* Gentle lift */
    border-color: #d4af37;
    box-shadow: 
        0 35px 80px rgba(212,175,55,0.2),
        inset 0 1px 0 #d4af37;
}
.ritual-card h1, .ritual-card p {
    text-shadow: 0 2px 10px rgba(0,0,0,0.8); /* Better readability */
}
@media (max-width: 768px) {
    .ritual-card { padding: 2rem 1.5rem; border-radius: 20px; }
}

/* SKOK */
html{scroll-behavior:smooth;}
section{scroll-margin-top:82px;}
@media(max-width:991px){section{scroll-margin-top:72px;}}


.social-links-nav a {
    color: #d4af37; /* Zlatna */
}

.social-links-nav a:hover {
    color: #f3d77d; /* Svetlija zlatna */
}


.references {
    margin-top: 60px; /* Odmakni od tačaka */
}

.references .ref-box {
    min-height: 180px;     /* Poravnanje */
    padding: 20px 25px;
    background: #111;
    border-radius: 12px;
}


.service-box {
    background: #0e0e0e;
    border: 1px solid #8a6b26;
    border-radius: 14px;
    padding: 25px;
    transition: .3s;
}

.service-box:hover {
    border-color: #d4af37;
    transform: translateY(-5px);
}


.portfolio-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s; /* Optional hover effect */
}
.portfolio-item:hover img {
    transform: scale(1.05); /* Slight zoom on hover for engagement */
}

.reference-list {
    max-width: 300px; /* Prevents lists from being too wide */
    margin: 0 auto;   /* Centers the list within its column */
    padding-left: 20px; /* Keeps bullet points indented nicely */
}


.service-box {
    background: #0e0e0e;
    border: 1px solid #8a6b26;
    border-radius: 14px;
    padding: 30px;  /* Increased from 25px for more internal space */
    transition: .3s;
}
.service-box:hover {
    border-color: #d4af37;
    transform: translateY(-5px);
}



/* Enhanced Gold Variables (with a lighter hover for gradients) */
:root {
    --gold: #d4af37;
    --gold-light: #e6c258; /* For highlights and hovers */
    --dark: #0a0a0a;
    --dark-light: #111111;
    --border: rgba(212,175,55,0.3);
}

/* Body Gradient (base for whole site) */
body {
    background: linear-gradient(145deg, #0a0a0a, #111); /* Existing, kept for consistency */
}

/* Section-Specific Gradients (progressively lighter) */
#home {
    background: radial-gradient(circle at center, #0a0a0a 40%, #080808 100%); /* Darkest, with radial for glow focus */
}

#onama {
    background: linear-gradient(145deg, #0a0a0a, #0f0f0f); /* Slightly lighter */
}

#usluge {
    background: linear-gradient(145deg, #0f0f0f, #141414); /* Lighter still */
}

#portfolio {
    background: linear-gradient(145deg, #141414, #191919); /* Mid-tone */
}

#kontakt {
    background: linear-gradient(145deg, #191919, #1e1e1e); /* Approaching lighter gray */
}

footer {
    background: linear-gradient(145deg, #1e1e1e, #232323); /* Lightest dark tone */
    border-top: 1px solid var(--border);
}

/* Gold Accents with Gradients (for buttons, lines, etc.) */
.gold-line {
    background: linear-gradient(to right, transparent, var(--gold), transparent); /* Gradient line for subtlety */
}

.btn-gold {
    background: linear-gradient(145deg, var(--gold), var(--gold-light)); /* Gradient button if you have one */
    border: none;
    color: #0a0a0a;
}

.btn-gold:hover {
    background: linear-gradient(145deg, var(--gold-light), var(--gold));
}


:root {
    --gold: #d4af37;
    --gold-glow: #e6c258;
    --gold-dark: #b8972e;
    --dark-1: #0a0a0a;   /* Hero */
    --dark-2: #0e0e10;
    --dark-3: #121215;
    --dark-4: #16161a;
    --dark-5: #1a1a1f;
    --dark-6: #1f1f26;   /* Footer */
}

/* Stronger, visible gradients – you WILL notice the difference */
#home      { background: radial-gradient(circle at center, #0c0c0c 0%, var(--dark-1) 100%); }
#onama     { background: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-2) 100%); }
#usluge    { background: linear-gradient(135deg, var(--dark-2) 0%, var(--dark-3) 100%); }
#portfolio { background: linear-gradient(135deg, var(--dark-3) 0%, var(--dark-4) 100%); }
#kontakt   { background: linear-gradient(135deg, var(--dark-4) 0%, var(--dark-5) 100%); }
footer     { background: linear-gradient(135deg, var(--dark-5) 0%, var(--dark-6) 100%); }

/* Extra golden glow on section titles */
h2.gold, h3.gold {
    background: linear-gradient(90deg, #b8972e, #d4af37, #f1d28a, #d4af37, #b8972e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(212,175,55,0.4);
}

/* Golden borders and lines with gradient */
.gold-line {
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 20px var(--gold);
}

/* Service boxes – richer gold on hover */
.service-box {
    background: rgba(20,20,25,0.6);
    border: 1px solid rgba(212,175,55,0.2);
    transition: all 0.4s;
}

.service-box:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(212,175,55,0.25);
    transform: translateY(-8px);
}


/* Portfolio – captions + beautiful hover */
.portfolio-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: all 0.4s ease;
}

.portfolio-item:hover img {
    transform: scale(1.04);
    box-shadow: 0 20px 50px rgba(212,175,55,0.25);
}

.portfolio-caption {
    font-size: 1.05rem;
    color: #d4af37;
    font-weight: 600;
    letter-spacing: 0.8px;
    margin-top: 16px !important;
    text-shadow: 0 0 12px rgba(212,175,55,0.3);
    transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-caption {
    color: #f1d28a;
    text-shadow: 0 0 25px rgba(212,175,55,0.7);
}

/* Luxury Scroll Reveals – Sections fade/slide in */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
section { padding: 6rem 0 !important; } /* More breathing room (was 5rem) */
.container { max-width: 1200px; } /* Slightly wider for desktop elegance */

/* Trigger on scroll (add this tiny JS before </body>) */



.text-center.mt-5 p:first-child { /* "Ili nas pozovite" */
    font-size: 1.3rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.text-center.mt-5 p:not(:first-child) { /* Phone lines */
    font-size: 0.95rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}
.text-center.mt-5 i { filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); } /* Glowing icons */


/* PERFECT BALANCE – SMALLER CARDS, VISIBLE DOTS/ARROWS, SMOOTH FADE SLIDES */
#uslugeSlider {
    max-width: 480px !important; /* Smaller carousel container for contained cards */
    height: 65vh !important; /* Slightly shorter for balance */
    z-index: 10 !important;
    overflow: visible !important;
    position: relative !important;
}

.carousel-inner {
    height: 100% !important;
    border-radius: 20px;
    overflow: hidden !important;
    transition: transform 0.6s ease-in-out !important; /* Base slide */
}

/* All slides visible during transition – smooth fade instead of snap */
.carousel-item {
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.6s ease-in-out !important; /* Fade sync with slide */
}

.carousel-item:not(.active) {
    opacity: 0 !important; /* Fade out non-active – no display:none snap */
    visibility: visible !important; /* Keeps them in flow during transition */
}

/* Smaller, Elegant Cards */
.ritual-card {
    position: relative !important; /* Back to relative – no absolute conflicts */
    z-index: 3 !important; /* Above glows, below carousel controls/dots */

    max-width: 450px !important; /* Noticeably smaller, focused */
    width: auto !important; /* Natural width */
    padding: 3rem 2.2rem !important;
    border-radius: 24px !important;

    /* Smooth, original gradient – refined for subtlety */
    background: linear-gradient(145deg, 
        rgba(18,18,20,0.96) 0%, 
        rgba(10,10,12,0.95) 50%, 
        rgba(6,6,8,0.96) 100%);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(212,175,55,0.18);
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.6),
        inset 0 1px 10px rgba(212,175,55,0.1),
        0 0 40px rgba(212,175,55,0.06);

    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ritual-card:hover {
    border-color: #d4af37 !important;
    box-shadow: 
        0 30px 80px rgba(212,175,55,0.22),
        inset 0 1px 14px rgba(212,175,55,0.18),
        0 0 60px rgba(212,175,55,0.18) !important;
    transform: scale(1.015) !important; /* Subtle hover, no translate shift */
}

/* Text: Scaled Down for Balance */
.ritual-card i    { font-size: 4rem !important; margin-bottom: 1rem !important; }
.ritual-card h1   { font-size: 2.5rem !important; margin: 0.5rem 0 !important; letter-spacing: 0.8px; }
.ritual-card .lead{ font-size: 1.2rem !important; margin-bottom: 1.5rem !important; }
.gold-line        { width: 90px !important; height: 3px !important; margin: 1.5rem auto !important; }

/* Glows – Always Behind */
.hero-glow, .hero-glow2 { 
    z-index: 1 !important; 
    position: absolute !important; 
}

/* Dots & Arrows – Always On Top */
.carousel-indicators {
    z-index: 11 !important; /* Above everything */
    bottom: -40px !important; /* Slightly lower for visibility */
}

.carousel-indicators [data-bs-target] {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background-color: rgba(212,175,55,0.45) !important;
    border: 0 !important;
    margin: 0 5px;
    transition: all 0.3s ease;
    z-index: 11 !important;
}

.carousel-indicators .active {
    background-color: #d4af37 !important;
    transform: scale(1.25);
    box-shadow: 0 0 12px #d4af37;
    z-index: 11 !important;
}

.carousel-control-prev, .carousel-control-next {
    z-index: 11 !important; /* On top of cards */
    width: 6% !important;
    opacity: 0.9 !important;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    z-index: 11 !important;
    background-size: 100% !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)) !important; /* Pop from cards */
}

.gold-arrow {
    filter: brightness(1.3) !important;
    z-index: 11 !important;
}

/* Mobile: Ensure No Overlap */
@media (max-width: 768px) {
    #uslugeSlider { max-width: 95vw !important; height: 55vh !important; }
    .ritual-card { 
        padding: 2.5rem 1.8rem !important; 
        max-width: 400px !important; 
    }
    .ritual-card i    { font-size: 3.5rem !important; }
    .ritual-card h1   { font-size: 2.2rem !important; }
    .carousel-indicators { bottom: -30px !important; }
}

/* Fix Contact Side-by-Side Layout */
#kontakt .row {
    --bs-gutter-x: 3rem; /* More space between map/form */
}

#kontakt .col-lg-6 {
    flex: 0 0 50% !important; /* Exact 50/50 split on desktop */
    max-width: 50% !important;
}

@media (max-width: 991.98px) {
    #kontakt .col-lg-6 {
        flex: 0 0 100% !important; /* Full width on mobile/tablet */
        max-width: 100% !important;
    }
    #kontakt .row > :first-child { order: 2; } /* Map below form on mobile */
    #kontakt .row > :last-child { order: 1; }   /* Form above map on mobile */
}


/* NAŠE USLUGE – 4 IN A ROW + 5TH CENTERED BELOW */
#usluge .service-box {
    background: rgba(20,20,25,0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 18px;
    transition: all 0.45s ease;
    box-shadow: 0 12px 35px rgba(0,0,0,0.35);
}

#usluge .service-box:hover {
    background: rgba(28,28,35,0.75);
    border-color: #d4af37;
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(212,175,55,0.2);
}

#usluge .service-box i {
    filter: drop-shadow(0 0 12px rgba(212,175,55,0.4));
    transition: all 0.4s;
}
#usluge .service-box:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 20px rgba(212,175,55,0.7));
}

/* 5th box – slightly bigger & highlighted */
#usluge .highlight-box {
    background: rgba(30,30,40,0.7);
    border: 2px solid rgba(212,175,55,0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5),
                inset 0 0 30px rgba(212,175,55,0.1);
}
#usluge .highlight-box:hover {
    border-color: #d4af37;
    box-shadow: 0 30px 70px rgba(212,175,55,0.25),
                inset 0 0 40px rgba(212,175,55,0.15);
}

/* Responsive spacing */
@media (max-width: 767px) {
    #usluge .row.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 2rem; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    #usluge .col-md-4 { flex: 0 0 50%; max-width: 50%; } /* 2 per row on tablet */
}

/* Custom Wax Seal Icon for Žigovi */
.custom-seal-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0.5rem;
}

.custom-seal-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--gold, #d4af37);
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.5));
    transition: all 0.3s;
}

.custom-seal-icon:hover svg {
    filter: drop-shadow(0 0 15px rgba(212,175,55,0.8));
}

/* Kompaktan i luksuzan izgled telefona */
.contact-info-row p {
    margin-bottom: 0.4rem !important;
    font-size: 1.02rem;
    line-height: 1.4;
}
.contact-info-row i {
    font-size: 1.4rem !important;
    filter: drop-shadow(0 0 8px rgba(212,175,55,0.4));
}


.btn-gold {
    background: linear-gradient(145deg, #d4af37, #e6c258);
    border: none;
    color: #0a0a0a;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s;
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(212,175,55,0.4);
}

.btn-outline-gold {
    border: 2px solid #d4af37;
    color: #d4af37;
    background: transparent;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-outline-gold:hover {
    background: #d4af37;
    color: #0a0a0a;
    transform: translateY(-3px);
}


/* ────── KONTAKT – ILI NAS POZOVITE (mobilni & desktop) ────── */
.contact-info-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.contact-info-row p {
    margin: 0 !important;
    padding: 0.35rem 0;
    font-size: 1.05rem !important;        /* svi telefoni ista veličina */
    line-height: 1.4;
    display: flex;
    align-items: center;
    flex-wrap: wrap;                       /* dozvoljava blagi prelaz samo ako je baš usko */
    gap: 0.5rem;
}

.contact-info-row i {
    font-size: 1.5rem !important;
    min-width: 36px;                       /* fiksna širina za ikone – poravnanje */
    filter: drop-shadow(0 0 10px rgba(212,175,55,0.5));
}

.contact-info-row strong.gold {
    min-width: 70px;                       /* “Telefoni:” i “Mobilni:” u istoj koloni */
    font-weight: 600 !important;
}

/* Brojevi – ne lome se preko celog reda */
.contact-info-row a {
    white-space: nowrap;                   /* najvažnije – sprečava prelazak u novi red */
    color: #d4af37 !important;
    text-decoration: underline;
    font-weight: 500;
}

/* Na veoma uskim ekranima (ispod 360px) dozvoli blagi prelaz, ali i dalje lepo */
@media (max-width: 380px) {
    .contact-info-row p {
        font-size: 0.98rem !important;
        gap: 0.4rem;
    }
    .contact-info-row a {
        font-size: 0.98rem;
    }
}

/* Način da brojevi ostanu u istoj liniji koliko god je moguće */
@media (max-width: 480px) {
    .contact-info-row p {
        justify-content: center;
        text-align: center;
    }
}

/* Badge za broj slika u grupi */
.portfolio-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(212,175,55,0.85); /* zlatna sa providnošću */
    color: #0a0a0a;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: all 0.3s;
}

.portfolio-item:hover .portfolio-badge {
    background: #d4af37;
    transform: scale(1.1);
}

/* LIGHTBOX – strelice uvek vidljive SAMO na mobilnom, desktop netaknut */
@media (max-width: 991px) {           /* ili max-width: 768px po želji */
    .lb-nav a.lb-prev,
    .lb-nav a.lb-next {
        opacity: 0.8 !important;      /* uvek vidljive */
    }
    .lb-nav a.lb-prev:hover,
    .lb-nav a.lb-next:hover {
        opacity: 1 !important;
    }
    /* Malo veće područje za tap */
    .lb-nav a.lb-prev { width: 60px !important; height: 100px !important; }
    .lb-nav a.lb-next  { width: 60px !important; height: 100px !important; }
}