/* =========================================================================
TELEFONIJA — GLAVNI STILOVI
-------------------------------------------------------------------------
Sve boje su definisane kao CSS promenljive u :root bloku ispod.
Kada dobijete finalni logo, samo izmenite HEX vrednosti
--primary-color i --secondary-color i ceo sajt će automatski
promeniti akcentne boje.
========================================================================= */
:root{
/* ----- OSNOVNE BOJE (uzete iz Petros Mobile loga) ----- */
--primary-color: #4169F0; /* plava iz loga — dugmad, cene, naglasci */
--primary-color-dark: #3151C4; /* tamnija nijansa za hover stanja */
--secondary-color: #9A2FE0; /* ljubičasta iz loga — linkovi, sekundarni akcenti */
--secondary-color-dark: #7A25B3;
--gradient-brand: linear-gradient(135deg, #B22FE5 0%, #4169F0 100%); /* isti gradijent kao u logu */
/* ----- POZADINE (tamna, "tech" tema) ----- */
--bg-base: #0A0E17;
--bg-elevated: #121826;
--bg-elevated-2: #1A2233;
--bg-elevated-3: #212B40;
--border-color: #262F44;
--border-color-light: #333F5A;
/* ----- TEKST ----- */
--text-primary: #EDEFF4;
--text-muted: #9AA4BC;
--text-faint: #626C85;
--text-on-accent: #FFFFFF;
/* ----- STATUSNE BOJE ----- */
--color-success: #3E9169;
--color-used: #B08830;
--color-danger: #C0453B;
/* ----- TIPOGRAFIJA ----- */
--font-display: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
/* ----- OSTALO ----- */
--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 10px;
--shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.5);
--transition-fast: 150ms ease;
--transition-med: 280ms cubic-bezier(.4, 0, .2, 1);
--container-width: 1440px; /* globalno ograničenje za ultra-široke monitore */
--header-height: 76px;
/* Visina akcijske trake na vrhu — koristi se i za pomeranje headera i
za razmak na vrhu stranice. Ako ukinete akciju, postavite na 0px. */
--promo-height: 38px;
}
/* =========================================================================
RESET & OSNOVA
========================================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }
html{
scroll-behavior: smooth;
/* FLUIDNA TIPOGRAFIJA — 2027+ standard
Pošto skoro sve veličine fonta na sajtu koriste "rem" jedinicu (koja
se računa u odnosu na font-size ovog elementa), fluidno
skaliranje OVDE automatski provlači glatko skaliranje kroz CEO
sajt — naslove, cene, dugmad — bez potrebe da se ručno menja na
desetine mesta. Raspon: 15px na najmanjim telefonima do 18px na
ultra-širokim/4K monitorima, sa glatkim prelazom između. */
font-size: clamp(15px, 0.85vw + 12.8px, 18px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body{
margin: 0;
background: var(--bg-base);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,
h2,
h3,
h4{
font-family: var(--font-display);
font-weight: 600;
line-height: 1.2;
margin: 0;
letter-spacing: -0.01em;
}
p{ margin: 0; }
:focus-visible{
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.container{
max-width: var(--container-width);
margin: 0 auto;
/* Fluidan razmak — uže na malim telefonima, šire na velikim ekranima,
bez naglih "skokova" na tačno određenim tačkama preloma. */
padding: 0 clamp(16px, 4vw, 32px);
}
.visually-hidden{
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* =========================================================================
DUGMAD
========================================================================= */
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 28px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
background: var(--gradient-brand);
color: var(--text-on-accent);
}
.btn-outline{
background: transparent;
border-color: var(--border-color-light);
color: var(--text-primary);
}
.btn-block{ width: 100%; }
.btn-sm{ padding: 8px 16px; font-size: 0.85rem; }
.btn:disabled{
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* =========================================================================
HEADER
========================================================================= */
.site-header{
position: sticky;
top: var(--promo-height); /* stoji odmah ispod akcijske trake */
z-index: 100;
background: rgba(10, 14, 23, 0.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
height: var(--header-height);
}
.site-header .container{
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo-link{
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* PLACEHOLDER ZA LOGO — zamenite "moj-logo.png" putanjom do vašeg fajla.
Preporučena veličina: visina oko 40px,
providna (PNG/SVG) pozadina. */
.logo-link img{
height: 38px;
width: auto;
}
.logo-link .logo-text{
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.02em;
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.logo-link .logo-text span{ font-weight: 500; }
.main-nav{ display: flex; }
/* Razmak se sam smanjuje na užim ekranima (clamp), pa meni od 8 stavki
ostaje u JEDNOM redu i ne prelama se. "nowrap" to i garantuje. */
.main-nav ul{ display: flex; gap: clamp(14px, 1.6vw, 30px); flex-wrap: nowrap; }
.main-nav a{
font-size: clamp(0.82rem, 0.92vw, 0.95rem);
font-weight: 500;
color: var(--text-muted);
position: relative;
padding: 6px 0;
white-space: nowrap;
transition: color var(--transition-fast);
}
.main-nav a::after{
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0; height: 2px;
background: var(--primary-color);
transition: width var(--transition-med);
}
.main-nav a.active{ color: var(--text-primary); }
.main-nav a.active::after{ width: 100%; }
.header-actions{ display: flex; align-items: center; gap: clamp(8px, 1.2vw, 18px); min-width: 0; }
.cart-btn{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
background: var(--bg-elevated);
border: 1px solid var(--border-color);
color: var(--text-primary);
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.cart-btn svg{ width: 20px; height: 20px; }
.cart-badge{
position: absolute;
top: -6px;
right: -6px;
min-width: 19px;
height: 19px;
padding: 0 4px;
border-radius: 999px;
background: var(--primary-color);
color: var(--text-on-accent);
font-size: 0.68rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
transition: transform 220ms cubic-bezier(.34,1.56,.64,1);
}
.cart-badge.visible{ transform: scale(1); }
.nav-toggle{
display: none;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-primary);
}
.nav-toggle svg{ width: 20px; height: 20px; }
/* =========================================================================
TRAKA ZA PRETRAGU (ispod headera, na svim stranicama)
========================================================================= */
.search-bar-strip{
background: transparent;
padding: 18px 0;
}
.site-search-form{
display: flex;
align-items: center;
gap: 10px;
max-width: 720px;
margin: 0 auto;
position: relative;
}
.site-search-icon{
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--text-faint);
pointer-events: none;
}
.site-search-input{
flex: 1;
padding: 14px 16px 14px 46px;
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
border-radius: 999px;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px; /* NE menjati na rem/manje — iOS Safari automatski zumira ako je input font manji od 16px */
transition: border-color var(--transition-fast);
}
.site-search-input::placeholder{ color: var(--text-faint); }
.site-search-input:focus{ outline: none; border-color: var(--primary-color); }
.site-search-btn{
border-radius: 999px;
padding: 13px 26px;
flex-shrink: 0;
}
@media (max-width: 560px) {
.search-bar-strip { padding: 14px 0; }
.site-search-btn { padding: 13px 18px; font-size: 0.85rem; }
}
/* =========================================================================
HERO
========================================================================= */
.hero{
padding: 32px 0 56px;
overflow: hidden;
position: relative;
}
/* Hero je u jednoj koloni: tekst na vrhu, reklamni slajder ispod preko
cele širine. Tako baner ima prostora da se vidi i na računaru, umesto
da bude stisnut u usku kolonu pored teksta. */
.hero .container{
display: grid;
grid-template-columns: 1fr;
justify-items: center;
gap: 44px;
}
.hero-copy{ max-width: 720px; text-align: center; }
.hero h1{
font-size: clamp(1.7rem, 4vw, 3.4rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text-primary);
margin-bottom: 22px;
max-width: 18ch;
margin-left: auto;
margin-right: auto;
}
.hero p.hero-desc{
font-size: 1.1rem;
color: var(--text-muted);
max-width: 52ch;
margin-left: auto;
margin-right: auto;
margin-bottom: 36px;
}
.hero-actions{ display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
/* Stilizovan CSS "telefon" — rezerva koja se pojavljuje samo ako reklamni
slajder nema nijednu sliku, da početna ne ostane bez ijedne slike. */
.hero-telefon{
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 420px;
}
.phone-mock{
width: 210px;
height: 420px;
background: linear-gradient(155deg, var(--bg-elevated-3), var(--bg-elevated));
border: 1px solid var(--border-color-light);
border-radius: 30px;
padding: 10px;
box-shadow: var(--shadow-elevated);
position: relative;
animation: float 5s ease-in-out infinite;
}
.phone-mock .screen{
width: 100%;
height: 100%;
border-radius: 20px;
background: linear-gradient(160deg, var(--secondary-color) 0%, var(--bg-base) 65%);
position: relative;
overflow: hidden;
}
.phone-mock .screen::before{
content: '';
position: absolute;
top: 14px; left: 50%;
transform: translateX(-50%);
width: 46px; height: 6px;
border-radius: 4px;
background: rgba(0,0,0,0.35);
}
.phone-mock .screen .glow{
position: absolute;
bottom: -40px; right: -30px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(178,47,229,0.55), transparent 70%);
border-radius: 50%;
}
.phone-mock-back{
position: absolute;
width: 210px; height: 420px;
border-radius: 30px;
border: 1px solid var(--border-color);
top: 26px; left: 34px;
z-index: -1;
opacity: 0.4;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
/* =========================================================================
SEKCIJE — ZAJEDNIČKO
========================================================================= */
.section{ padding: 88px 0; }
/* Nekada je ova klasa davala svetliju pozadinu, pa su se sekcije smenjivale
u trakama. Sad sve dele istu pozadinu kao hero (--bg-base), a razdvaja ih
samo razmak — stranica deluje kao jedna celina, a ne kao spojeni delovi. */
.section-alt{ background: transparent; }
.section-head{
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 44px;
}
.section-head h2{
font-size: clamp(1.3rem, 2.6vw, 2.1rem);
color: var(--text-primary);
}
.section-head p{
color: var(--text-muted);
max-width: 50ch;
margin-top: 10px;
}
/* =========================================================================
ZNAČKE POVERENJA (TRUST BADGES)
========================================================================= */
.trust-grid{
display: grid;
/* Fluidna mreža — sama bira broj kolona prema raspoloživom prostoru
(minimum ~230px po kartici), bez potrebe za ručnim tačkama preloma
za svaku moguću širinu ekrana. */
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 28px;
}
.trust-card{
padding: 30px 26px;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
transition: border-color var(--transition-med), transform var(--transition-med);
}
.trust-card .icon{
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(65, 105, 240, 0.14);
border-radius: var(--radius-sm);
color: var(--primary-color);
margin-bottom: 18px;
}
.trust-card .icon svg{ width: 22px; height: 22px; }
.trust-card h3{ font-size: 1.05rem; margin-bottom: 8px; color: var(--text-primary); }
.trust-card p{ color: var(--text-muted); font-size: 0.92rem; }
/* =========================================================================
KATEGORIJE
========================================================================= */
.category-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.category-card{
position: relative;
padding: 40px 28px;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background: linear-gradient(160deg, var(--bg-elevated-2), var(--bg-elevated));
overflow: hidden;
transition: transform var(--transition-med), border-color var(--transition-med);
}
.category-card .cat-icon{
width: 48px; height: 48px;
color: var(--secondary-color);
margin-bottom: 22px;
}
.category-card .cat-icon svg{ width: 100%; height: 100%; }
.category-card h3{ font-size: 1.2rem; margin-bottom: 8px; }
.category-card span.cat-link{
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary-color);
font-size: 0.9rem;
font-weight: 600;
margin-top: 14px;
}
/* =========================================================================
PROIZVODI / KARTICE
========================================================================= */
.product-toolbar{
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.filter-btn{
padding: 9px 18px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 0.88rem;
font-weight: 500;
transition: all var(--transition-fast);
}
.filter-btn.active{
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--text-on-accent);
}
.product-grid{
display: grid;
/* auto-fill (a ne auto-fit) — kartice zadržavaju prirodnu veličinu čak
i kad ima malo rezultata (npr. 1 proizvod od pretrage se neće
razvući preko cele širine reda). */
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 24px;
}
.product-card{
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}
.product-card::before{
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-brand);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition-med);
}
.product-media{
position: relative;
aspect-ratio: 1 / 1;
background: var(--bg-elevated-2);
display: flex;
align-items: center;
justify-content: center;
}
/* PLACEHOLDER ZA SLIKU PROIZVODA — putanja se definiše u products.js
(polje "image"). Preporučena rezolucija: kvadratna,
min. 800x800px,
pozadina po mogućstvu jednobojna/providna radi ujednačenog izgleda. */
.product-media img{
width: 100%; height: 100%;
object-fit: contain;
padding: 24px;
}
/* BEDŽ "NOVO" / "POLOVNO" — traka u gornjem levom uglu kartice.
Puna boja sa senkom, da se jasno vidi i preko svetlih fotografija
proizvoda (ranije je bio providan pa se gubio na belim slikama). */
.badge{
position: absolute;
top: 0; left: 0;
padding: 7px 16px 7px 14px;
border-radius: 0 0 10px 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
z-index: 2;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.badge-new{ background: var(--gradient-brand); }
.badge-used{ background: linear-gradient(135deg, #C89230 0%, #A6761F 100%); }
.product-info{ padding: 20px 20px 22px; }
.product-cat{ font-size: 0.76rem; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; }
.product-name{
font-size: 1.02rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
min-height: 46px;
}
.product-name a{ color: inherit; }
.product-desc{ font-size: 0.85rem; color: var(--text-muted); margin-bottom: 14px; }
.product-footer{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.product-price{ font-family: var(--font-display); font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem); font-weight: 700; color: var(--text-primary); }
.product-price small{ display: block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; color: var(--text-faint); }
.add-to-cart-btn{
width: 42px; height: 42px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color-light);
background: transparent;
color: var(--text-primary);
display: flex; align-items: center; justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.add-to-cart-btn svg{ width: 18px; height: 18px; }
.add-to-cart-btn.added{
background: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
.section-footer-cta{
text-align: center;
margin-top: 48px;
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
/* =========================================================================
NAPREDNI FILTERI (sidebar + grid layout)
========================================================================= */
.shop-layout{
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
.shop-layout.with-sidebar{
grid-template-columns: minmax(220px, 260px) 1fr;
align-items: start;
}
.filters-sidebar{
display: none;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 22px;
position: sticky;
top: calc(var(--header-height) + 20px);
}
.shop-layout.with-sidebar .filters-sidebar{ display: block; }
.filters-sidebar-header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
}
.filters-sidebar-header h3{ font-size: 1.05rem; }
.filters-reset-btn{
background: transparent;
border: none;
color: var(--text-faint);
font-size: 0.8rem;
font-weight: 600;
text-decoration: underline;
padding: 0;
}
.filter-group{
padding: 18px 0;
border-bottom: 1px solid var(--border-color);
}
.filter-group:last-child{ border-bottom: none; padding-bottom: 0; }
.filter-group-label{
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 12px;
}
.filter-select{
width: 100%;
padding: 10px 12px;
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.88rem;
cursor: pointer;
}
.filter-select:focus{ outline: none; border-color: var(--primary-color); }
/* --- Dual-handle price range slider (dva preklopljena) --- */
.price-range{
position: relative;
height: 30px;
margin-top: 6px;
}
.price-range-track{
position: absolute;
top: 50%;
left: 0; right: 0;
height: 4px;
background: var(--bg-elevated-3);
border-radius: 2px;
transform: translateY(-50%);
}
.price-range-fill{
position: absolute;
top: 0; height: 100%;
background: var(--gradient-brand);
border-radius: 2px;
}
.price-range input[type="range"]{
position: absolute;
top: 0; left: 0;
width: 100%; height: 30px;
margin: 0;
background: transparent;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
}
.price-range input[type="range"]::-webkit-slider-runnable-track{ background: transparent; }
.price-range input[type="range"]::-moz-range-track{ background: transparent; border: none; }
.price-range input[type="range"]::-webkit-slider-thumb{
pointer-events: auto;
-webkit-appearance: none;
appearance: none;
width: 17px; height: 17px;
border-radius: 50%;
background: var(--gradient-brand);
border: 2px solid var(--bg-elevated);
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
margin-top: 6px;
}
.price-range input[type="range"]::-moz-range-thumb{
pointer-events: auto;
width: 17px; height: 17px;
border-radius: 50%;
background: var(--gradient-brand);
border: 2px solid var(--bg-elevated);
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.price-range-values{
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 0.82rem;
color: var(--text-muted);
font-weight: 600;
}
/* --- Checkbox liste (brend / memorija / stanje) --- */
.filter-checkbox-list{ display: flex; flex-direction: column; gap: 10px; }
.filter-checkbox-item{
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 0.86rem;
color: var(--text-muted);
}
.filter-checkbox-item input[type="checkbox"]{
appearance: none;
-webkit-appearance: none;
width: 17px; height: 17px;
flex-shrink: 0;
border: 1px solid var(--border-color-light);
border-radius: 4px;
background: var(--bg-elevated-2);
position: relative;
cursor: pointer;
transition: all var(--transition-fast);
}
.filter-checkbox-item input[type="checkbox"]:checked{
background: var(--gradient-brand);
border-color: transparent;
}
.filter-checkbox-item input[type="checkbox"]:checked::after{
content: '';
position: absolute;
left: 5px; top: 1px;
width: 4px; height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* --- Panel sa rezultatima --- */
.products-panel-topbar{
display: none;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.shop-layout.with-sidebar .products-panel-topbar{ display: flex; }
.filters-toggle-btn{ display: none; align-items: center; gap: 8px; }
.results-count{ font-size: 0.85rem; color: var(--text-faint); margin-left: auto; }
.no-results{
display: none;
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
font-size: 0.95rem;
}
.no-results.visible{ display: block; }
/* =========================================================================
PETRON ROBOT — CHAT PODRŠKA
-------------------------------------------------------------------------
Plutajuće dugme (donji desni ugao) koje otvara prozor za razgovor.
Avatar robota je slika iz slike/bot/petron-robot-avatar.jpg — zamenite
je bilo kada svojom novom slikom ako promenite maskotu.
========================================================================= */
.chatbot-launcher{
position: fixed;
right: 22px;
bottom: 22px;
z-index: 400;
width: 62px;
height: 62px;
border-radius: 50%;
border: none;
padding: 0;
cursor: pointer;
background: var(--gradient-brand);
padding: 3px;
box-shadow: 0 10px 30px rgba(65, 105, 240, 0.4);
transition: transform var(--transition-fast);
}
.chatbot-launcher img{
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--bg-base);
display: block;
}
.chatbot-launcher::before{
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid var(--primary-color);
opacity: 0.5;
animation: chatbot-pulse 2.4s ease-out infinite;
}
@keyframes chatbot-pulse {
0% { transform: scale(0.9); opacity: 0.6; }
70% { transform: scale(1.25); opacity: 0; }
100% { transform: scale(1.25); opacity: 0; }
}
.chatbot-launcher-badge{
position: absolute;
top: -2px; right: -2px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--color-danger);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-base);
}
.chatbot-launcher.open{ display: none; }
.chatbot-window{
position: fixed;
right: 22px;
/* Podiže se iznad tastature na svakom uređaju, ne samo na telefonu.
Na računaru je --vv-tastatura nula, pa nema nikakvog efekta. */
bottom: calc(22px + var(--vv-tastatura, 0px));
z-index: 401;
width: min(380px, calc(100vw - 32px));
/* --vv-visina postavlja chatbot.js prema stvarno vidljivom delu ekrana.
Rezerva je 100dvh, pa 100vh za starije pregledače. */
height: min(600px, calc(100vh - 100px));
height: min(600px, calc(100dvh - 100px));
height: min(600px, calc(var(--vv-visina, 100dvh) - 100px));
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-elevated);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(16px) scale(0.97);
opacity: 0;
pointer-events: none;
transition: all 220ms cubic-bezier(.34,1.2,.64,1);
}
.chatbot-window.open{
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
.chatbot-header{
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: var(--gradient-brand);
flex-shrink: 0;
}
.chatbot-avatar{
width: 42px; height: 42px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255,255,255,0.5);
flex-shrink: 0;
}
.chatbot-header-text{ flex: 1; min-width: 0; }
.chatbot-name{ font-weight: 700; color: #fff; font-size: 0.98rem; }
.chatbot-status{
display: flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
color: rgba(255,255,255,0.85);
}
.chatbot-status .status-dot{
width: 7px; height: 7px;
border-radius: 50%;
background: #3EE18A;
flex-shrink: 0;
}
.chatbot-close-btn{
background: rgba(0,0,0,0.15);
border: none;
color: #fff;
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.chatbot-close-btn svg{ width: 15px; height: 15px; }
.chatbot-messages{
flex: 1;
overflow-y: auto;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
.chatbot-msg{ display: flex; gap: 9px; max-width: 88%; }
.chatbot-msg.bot{ align-self: flex-start; }
.chatbot-msg.user{ align-self: flex-end; flex-direction: row-reverse; }
.chatbot-msg-avatar{
width: 26px; height: 26px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
margin-top: 2px;
}
.chatbot-msg-bubble{
padding: 10px 14px;
border-radius: 14px;
font-size: 0.88rem;
line-height: 1.5;
white-space: pre-line;
}
.chatbot-msg.bot .chatbot-msg-bubble{
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
color: var(--text-primary);
border-top-left-radius: 4px;
}
.chatbot-msg.user .chatbot-msg-bubble{
background: var(--gradient-brand);
color: #fff;
border-top-right-radius: 4px;
}
.chatbot-typing{
display: flex;
gap: 4px;
padding: 12px 14px;
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
border-radius: 14px;
border-top-left-radius: 4px;
width: fit-content;
}
.chatbot-typing span{
width: 6px; height: 6px;
border-radius: 50%;
background: var(--text-faint);
animation: chatbot-typing-bounce 1.2s infinite ease-in-out;
}
.chatbot-typing span:nth-child(2){ animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3){ animation-delay: 0.3s; }
@keyframes chatbot-typing-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.chatbot-quick-replies{
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 18px 14px;
flex-shrink: 0;
}
.chatbot-quick-reply{
padding: 7px 13px;
border-radius: 999px;
border: 1px solid var(--border-color-light);
background: var(--bg-elevated-2);
color: var(--text-muted);
font-size: 0.78rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.chatbot-input-row{
display: flex;
gap: 10px;
padding: 14px 16px;
border-top: 1px solid var(--border-color);
flex-shrink: 0;
}
.chatbot-input-row input{
flex: 1;
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 11px 16px;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px; /* NE menjati na rem/manje — iOS Safari automatski zumira ako je input font manji od 16px */
}
.chatbot-input-row input:focus{ outline: none; border-color: var(--primary-color); }
.chatbot-send-btn{
width: 40px; height: 40px;
border-radius: 50%;
border: none;
background: var(--gradient-brand);
color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform var(--transition-fast);
}
.chatbot-send-btn svg{ width: 17px; height: 17px; }
@media (max-width: 480px) {
.chatbot-window {
right: 16px;
/* Kad se otvori tastatura, --vv-tastatura postane njena visina i
prozor se podigne iznad nje. Bez toga polje za kucanje završi
ispod tastature i korisnik ne vidi šta piše. */
bottom: calc(16px + var(--vv-tastatura, 0px));
width: calc(100vw - 24px);
height: calc(100vh - 90px);
height: calc(100dvh - 90px);
height: calc(var(--vv-visina, 100dvh) - 90px);
}
.chatbot-launcher { right: 16px; bottom: 16px; }
}
/* =========================================================================
MODAL — USPEŠNA PORUDŽBINA (checkout.html)
========================================================================= */
.success-modal-overlay{
position: fixed;
inset: 0;
z-index: 600;
background: rgba(6, 8, 14, 0.88);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 250ms ease;
}
.success-modal-overlay.open{ opacity: 1; pointer-events: auto; }
.success-modal{
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 40px 36px;
max-width: 480px;
width: 100%;
text-align: center;
box-shadow: var(--shadow-elevated);
transform: translateY(20px) scale(0.96);
transition: transform 300ms cubic-bezier(.34,1.4,.64,1);
}
.success-modal-overlay.open .success-modal{ transform: translateY(0) scale(1); }
.success-modal-box-anim{
font-size: 3.2rem;
line-height: 1;
margin-bottom: 18px;
display: inline-block;
animation: success-box-pack 1.6s ease-in-out infinite;
}
@keyframes success-box-pack {
0%, 100% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.08) rotate(-4deg); }
50% { transform: scale(0.96) rotate(0deg); }
75% { transform: scale(1.08) rotate(4deg); }
}
.success-modal h2{
font-size: 1.35rem;
color: var(--text-primary);
margin-bottom: 14px;
line-height: 1.35;
}
.success-modal > p{
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.6;
margin-bottom: 24px;
}
.success-modal-steps{
display: flex;
flex-direction: column;
gap: 16px;
text-align: left;
margin-bottom: 28px;
}
.success-modal-steps li{
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.5;
}
.success-modal-steps li strong{ color: var(--text-primary); }
.success-modal-steps .step-emoji{ font-size: 1.2rem; flex-shrink: 0; }
.promo-code-box{
background: var(--bg-elevated-2);
border: 1px dashed var(--primary-color);
border-radius: var(--radius-md);
padding: 18px;
margin-bottom: 24px;
text-align: center;
}
.promo-code-intro{
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 12px;
}
.promo-code-value{
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.04em;
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* =========================================================================
STRANICA POJEDINAČNOG PROIZVODA (proizvod.html)
========================================================================= */
.pd-breadcrumb{
padding: 20px 0 0;
font-size: 0.82rem;
color: var(--text-faint);
}
.pd-breadcrumb a{ color: var(--text-muted); }
.pd-layout{
display: grid;
grid-template-columns: 1fr 1fr 340px;
gap: 36px;
padding: 28px 0 64px;
align-items: start;
}
/* ---------- KOLONA 1 — GALERIJA ---------- */
.pd-gallery{ position: sticky; top: calc(var(--header-height) + 16px); }
.pd-main-image-wrap{
position: relative;
aspect-ratio: 1 / 1;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
overflow: hidden;
cursor: zoom-in;
}
.pd-main-image-wrap img{
width: 100%;
height: 100%;
object-fit: contain;
padding: 20px;
display: block;
}
.pd-zoom-pane{
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: 220%;
opacity: 0;
transition: opacity 150ms ease;
pointer-events: none;
}
.pd-main-image-wrap.zooming .pd-zoom-pane{ opacity: 1; }
.pd-zoom-hint{
position: absolute;
bottom: 12px; right: 12px;
background: rgba(10, 14, 23, 0.7);
color: var(--text-muted);
font-size: 0.72rem;
padding: 5px 10px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 5px;
pointer-events: none;
}
.pd-zoom-hint svg{ width: 12px; height: 12px; }
.pd-thumbs{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
margin-top: 14px;
}
.pd-thumb{
aspect-ratio: 1 / 1;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
padding: 0;
transition: border-color var(--transition-fast);
}
.pd-thumb img{ width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pd-thumb.active{ border-color: var(--primary-color); box-shadow: 0 0 0 1px var(--primary-color); }
/* ---------- KOLONA 2 — NASLOV I BEDŽEVI ---------- */
.pd-info-cat{ font-size: 0.8rem; color: var(--text-faint); font-weight: 600; margin-bottom: 8px; }
.pd-info h1{
font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
color: var(--text-primary);
margin-bottom: 20px;
line-height: 1.25;
}
.pd-badges{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.pd-badge{
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 16px;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
min-width: 92px;
}
.pd-badge-label{ font-size: 0.68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.pd-badge-value{ font-size: 0.92rem; font-weight: 600; color: var(--text-primary); }
.pd-badge.condition .pd-badge-value{ color: var(--color-success); }
.pd-badge.condition.mid .pd-badge-value{ color: var(--color-used); }
.pd-variant-picker{ margin-bottom: 28px; display: flex; flex-direction: column; gap: 20px; }
.pd-variant-label{
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 10px;
}
.pd-variant-label span{ font-weight: 500; color: var(--text-muted); }
.pd-variant-options{ display: flex; flex-wrap: wrap; gap: 10px; }
.pd-variant-btn{
padding: 10px 18px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color-light);
background: var(--bg-elevated);
color: var(--text-primary);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.pd-variant-btn.active{
background: var(--gradient-brand);
border-color: transparent;
color: #fff;
}
.pd-color-swatches{ display: flex; flex-wrap: wrap; gap: 12px; }
.pd-color-swatch{
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid var(--border-color);
cursor: pointer;
padding: 0;
position: relative;
transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.pd-color-swatch.active{
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--primary-color);
}
.pd-highlights{ display: flex; flex-direction: column; gap: 12px; }
.pd-highlight-item{
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.88rem;
color: var(--text-muted);
}
.pd-highlight-item svg{ width: 18px; height: 18px; color: var(--primary-color); flex-shrink: 0; margin-top: 1px; }
/* ---------- KOLONA 3 — CENA I KUPOVINA ---------- */
.pd-purchase-box{
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 24px;
position: sticky;
top: calc(var(--header-height) + 16px);
}
.pd-price-row{ margin-bottom: 18px; }
.pd-price-label{ font-size: 0.78rem; color: var(--text-faint); margin-bottom: 4px; }
.pd-price{
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
font-weight: 700;
color: var(--text-primary);
}
.pd-price small{ display: block; font-family: var(--font-body); font-size: 0.76rem; font-weight: 500; color: var(--text-faint); margin-top: 4px; }
.pd-cross-sell{
margin: 20px 0;
padding-top: 18px;
border-top: 1px solid var(--border-color);
}
.pd-cross-sell-title{ font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.pd-cross-sell-item{
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
cursor: pointer;
font-size: 0.85rem;
color: var(--text-muted);
}
.pd-cross-sell-item input[type="checkbox"]{
appearance: none;
-webkit-appearance: none;
width: 18px; height: 18px;
flex-shrink: 0;
border: 1px solid var(--border-color-light);
border-radius: 4px;
background: var(--bg-elevated-2);
position: relative;
cursor: pointer;
}
.pd-cross-sell-item input[type="checkbox"]:checked{ background: var(--gradient-brand); border-color: transparent; }
.pd-cross-sell-item input[type="checkbox"]:checked::after{
content: '';
position: absolute;
left: 6px; top: 2px;
width: 4px; height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pd-cross-sell-item .cs-name{ flex: 1; color: var(--text-primary); }
.pd-cross-sell-item .cs-price{ color: var(--text-faint); font-size: 0.8rem; }
.pd-add-to-cart-btn{ margin-top: 4px; }
.pd-trust-list{
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 10px;
}
.pd-trust-list .pd-highlight-item svg{ color: var(--color-success); }
/* ---------- TABOVI (OPIS / SPECIFIKACIJE) ---------- */
.pd-tabs{ padding-bottom: 80px; }
.pd-tabs-nav{
display: flex;
gap: 8px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 28px;
}
.pd-tab-btn{
padding: 12px 22px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted);
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pd-tab-btn.active{ color: var(--primary-color); border-bottom-color: var(--primary-color); }
.pd-tab-panel{ display: none; max-width: 760px; }
.pd-tab-panel.active{ display: block; }
.pd-tab-panel p{ color: var(--text-muted); line-height: 1.75; font-size: 0.95rem; }
.pd-specs-table{ width: 100%; border-collapse: collapse; }
.pd-specs-table tr{ border-bottom: 1px solid var(--border-color); }
.pd-specs-table tr:last-child{ border-bottom: none; }
.pd-specs-table th,
.pd-specs-table td{
text-align: left;
padding: 14px 16px;
font-size: 0.9rem;
}
.pd-specs-table th{
width: 220px;
color: var(--text-faint);
font-weight: 500;
}
.pd-specs-table td{ color: var(--text-primary); font-weight: 500; }
.pd-specs-table tr:nth-child(odd){ background: var(--bg-elevated); }
/* ---------- LIGHTBOX ---------- */
.pd-lightbox{
position: fixed;
inset: 0;
z-index: 500;
background: rgba(6, 8, 14, 0.94);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
}
.pd-lightbox.open{ opacity: 1; pointer-events: auto; }
.pd-lightbox-img-wrap{
max-width: min(900px, 90vw);
max-height: 82vh;
}
.pd-lightbox-img-wrap img{
max-width: 100%;
max-height: 82vh;
object-fit: contain;
border-radius: var(--radius-sm);
}
.pd-lightbox-close{
position: absolute;
top: 22px; right: 26px;
width: 42px; height: 42px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
display: flex; align-items: center; justify-content: center;
}
.pd-lightbox-close svg{ width: 18px; height: 18px; }
.pd-lightbox-nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px; height: 46px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
display: flex; align-items: center; justify-content: center;
}
.pd-lightbox-nav svg{ width: 20px; height: 20px; }
.pd-lightbox-prev{ left: 24px; }
.pd-lightbox-next{ right: 24px; }
.pd-lightbox-counter{
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
font-size: 0.82rem;
}
@media (max-width: 1024px) {
.pd-layout { grid-template-columns: 1fr 1fr; }
.pd-purchase-box { grid-column: 1 / -1; position: static; }
}
@media (max-width: 720px) {
.pd-layout { grid-template-columns: 1fr; padding-top: 16px; }
.pd-gallery { position: static; }
.pd-thumbs { grid-template-columns: repeat(5, 1fr); }
.pd-lightbox-nav { width: 38px; height: 38px; }
.pd-lightbox-prev { left: 10px; }
.pd-lightbox-next { right: 10px; }
}
/* =========================================================================
LOKACIJA (Google Maps)
========================================================================= */
.location-wrap{
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 24px;
align-items: stretch;
}
.location-map{
height: 380px;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border-color);
}
.location-map iframe{
/* CSS trik da se besplatna Google Maps ugradnja uklopi u tamnu temu sajta */
filter: invert(92%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
.location-info{
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 28px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
.location-info h3{ font-size: 1.2rem; color: var(--text-primary); }
.location-info p{ color: var(--text-muted); line-height: 1.6; }
/* =========================================================================
CTA TRAKA
========================================================================= */
.cta-strip{
background: transparent;
padding: 60px 0;
text-align: center;
}
.cta-strip h2{ font-size: clamp(1.35rem, 1rem + 1.5vw, 1.8rem); margin-bottom: 12px; }
.cta-strip p{ color: var(--text-muted); margin-bottom: 28px; }
/* =========================================================================
FOOTER
========================================================================= */
.site-footer{
background: transparent;
padding: 72px 0 28px;
}
.footer-grid{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 40px;
margin-bottom: 52px;
}
.footer-brand .logo-text{ font-size: 1.25rem; }
.footer-brand p{
color: var(--text-muted);
font-size: 0.92rem;
margin: 16px 0 22px;
max-width: 32ch;
}
.social-links{ display: flex; gap: 12px; }
.social-links a{
width: 38px; height: 38px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
transition: all var(--transition-fast);
}
.social-links svg{ width: 17px; height: 17px; }
.footer-col h4{
font-size: 0.95rem;
color: var(--text-primary);
margin-bottom: 18px;
}
.footer-col h4 a{
color: var(--text-primary);
font-size: inherit;
transition: color var(--transition-fast);
}
.footer-col ul{ display: flex; flex-direction: column; gap: 11px; }
.footer-col a,
.footer-col p{
color: var(--text-muted);
font-size: 0.9rem;
transition: color var(--transition-fast);
}
.footer-col .hours-row{ display: flex; justify-content: space-between; gap: 12px; }
.footer-bottom{
border-top: 1px solid var(--border-color);
padding-top: 26px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 0.82rem;
color: var(--text-faint);
}
.footer-bottom a{ color: var(--text-faint); }
.footer-legal{
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border-color);
font-size: 0.76rem;
color: var(--text-faint);
text-align: center;
}
/* =========================================================================
KORPA (DRAWER)
========================================================================= */
.cart-overlay{
position: fixed; inset: 0;
background: rgba(6, 8, 14, 0.6);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-med);
}
.cart-overlay.open{ opacity: 1; pointer-events: auto; }
.cart-drawer{
position: fixed;
top: 0; right: 0;
bottom: 0;
width: min(420px, 100%);
background: var(--bg-elevated);
border-left: 1px solid var(--border-color);
z-index: 201;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--transition-med);
}
.cart-drawer.open{ transform: translateX(0); }
.cart-drawer-header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 24px;
border-bottom: 1px solid var(--border-color);
}
.cart-drawer-header h3{ font-size: 1.15rem; }
.cart-close-btn{
width: 34px; height: 34px;
border-radius: var(--radius-sm);
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-muted);
display: flex; align-items: center; justify-content: center;
}
.cart-close-btn svg{ width: 16px; height: 16px; }
.cart-items{
flex: 1;
overflow-y: auto;
padding: 12px 24px;
}
.cart-empty{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--text-muted);
text-align: center;
padding: 40px 20px;
}
.cart-empty svg{ width: 48px; height: 48px; color: var(--text-faint); }
.cart-item{
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--border-color);
}
.cart-item img{
width: 64px; height: 64px;
object-fit: contain;
background: var(--bg-elevated-2);
border-radius: var(--radius-sm);
padding: 6px;
}
.cart-item-name{ font-size: 0.92rem; font-weight: 600; margin-bottom: 4px; }
.cart-item-cond{ font-size: 0.75rem; color: var(--text-faint); margin-bottom: 10px; }
.qty-control{
display: inline-flex;
align-items: center;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.qty-control button{
width: 26px; height: 26px;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 1rem;
display: flex; align-items: center; justify-content: center;
}
.qty-control span{ min-width: 24px; text-align: center; font-size: 0.85rem; }
.cart-item-remove{
color: var(--text-faint);
background: transparent;
border: none;
}
.cart-item-remove svg{ width: 17px; height: 17px; }
.cart-item-price{ text-align: right; font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.cart-drawer-footer{
padding: 22px 24px 26px;
border-top: 1px solid var(--border-color);
}
.cart-summary-row{
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 10px;
}
.cart-summary-row.total{
font-size: 1.15rem;
font-weight: 700;
color: var(--text-primary);
margin: 14px 0 20px;
}
.shipping-note{
font-size: 0.78rem;
color: var(--text-faint);
margin-bottom: 18px;
}
/* =========================================================================
OBAVEŠTENJA (TOAST)
========================================================================= */
.toast{
position: fixed;
bottom: 26px;
left: 50%;
transform: translate(-50%, 20px);
background: var(--bg-elevated-3);
border: 1px solid var(--primary-color);
color: var(--text-primary);
padding: 14px 22px;
border-radius: var(--radius-md);
font-size: 0.9rem;
z-index: 300;
opacity: 0;
pointer-events: none;
transition: all var(--transition-med);
display: flex;
align-items: center;
gap: 10px;
box-shadow: var(--shadow-elevated);
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }
.toast svg{ width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; }
/* =========================================================================
STRANICA ZA PORUČIVANJE (CHECKOUT)
========================================================================= */
.checkout-hero{
padding: 48px 0 8px;
}
.checkout-hero h1{ font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); margin-bottom: 10px; }
.checkout-hero p{ color: var(--text-muted); }
.checkout-layout{
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 40px;
padding: 40px 0 96px;
align-items: flex-start;
}
.checkout-panel{
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 32px;
}
.checkout-panel h2{
font-size: 1.2rem;
margin-bottom: 24px;
}
.delivery-illustration{
display: flex;
align-items: center;
gap: 18px;
padding: 18px 20px;
margin-bottom: 26px;
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
}
.delivery-illustration-svg{ width: 76px; height: 60px; flex-shrink: 0; }
.delivery-illustration-text{ display: flex; flex-direction: column; gap: 3px; }
.delivery-illustration-text strong{ color: var(--text-primary); font-size: 0.95rem; }
.delivery-illustration-text span{ color: var(--text-muted); font-size: 0.82rem; }
/* Ako zamenite ilustraciju pravom slikom (![]()
),
ovaj stil je takođe primenjen da izgleda moderno i pouzdano. */
img.delivery-illustration{
width: 100%;
max-height: 160px;
object-fit: cover;
border-radius: var(--radius-md);
margin-bottom: 26px;
border: 1px solid var(--border-color);
}
.form-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-group{ display: flex; flex-direction: column; gap: 8px; }
.form-group.full{ grid-column: 1 / -1; }
.form-group label{
font-size: 0.85rem;
font-weight: 500;
color: var(--text-muted);
}
.form-group input,
.form-group textarea,
.form-group select{
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 12px 14px;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 16px; /* NE menjati na rem/manje — iOS Safari automatski zumira ako je input font manji od 16px */
transition: border-color var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
outline: none;
border-color: var(--primary-color);
}
.form-group input.invalid{ border-color: var(--color-danger); }
.field-error{
font-size: 0.76rem;
color: var(--color-danger);
min-height: 14px;
}
.promo-input-row{
display: flex;
gap: 10px;
}
.promo-input-row input{ flex: 1; }
.promo-input-row .btn{ flex-shrink: 0; white-space: nowrap; }
.promo-status{
font-size: 0.82rem;
margin-top: 8px;
min-height: 16px;
}
.promo-status.success{ color: var(--color-success); }
.promo-status.error{ color: var(--color-danger); }
.promo-original-price{
color: var(--text-faint);
font-size: 0.85em;
font-weight: 500;
margin-right: 6px;
}
.promo-discounted-price{
color: var(--color-success);
}
/* Honeypot — sakriven od pravih korisnika (i vizuelno i za čitače
ekrana), ali i dalje prisutan u DOM-u tako da ga botovi mogu popuniti. */
.honeypot-field {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.form-note{
font-size: 0.8rem;
color: var(--text-faint);
margin-top: 18px;
}
.order-summary-list{ margin-bottom: 20px; }
.order-summary-item{
display: flex;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.9rem;
}
.order-summary-item .osi-name{ color: var(--text-primary); font-weight: 500; }
.order-summary-item .osi-meta{ color: var(--text-faint); font-size: 0.78rem; }
.order-summary-item .osi-price{ color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.checkout-status{
margin-top: 18px;
padding: 14px 16px;
border-radius: var(--radius-sm);
font-size: 0.88rem;
display: none;
}
.checkout-status.success{
display: block;
background: rgba(62, 145, 105, 0.12);
border: 1px solid rgba(62, 145, 105, 0.35);
color: var(--color-success);
}
.checkout-status.error{
display: block;
background: rgba(192, 69, 59, 0.12);
border: 1px solid rgba(192, 69, 59, 0.35);
color: var(--color-danger);
}
/* ---------- IZBOR NAČINA PREUZIMANJA ---------- */
.delivery-method-section{ margin-bottom: 28px; }
.delivery-method-title{
font-size: 1.1rem;
margin-bottom: 16px;
}
.delivery-options{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.delivery-option{
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 18px;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.delivery-option-static{
cursor: default;
max-width: 480px;
}
.delivery-option input[type="radio"]{
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.delivery-option-check{
position: absolute;
top: 14px; right: 14px;
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid var(--border-color-light);
flex-shrink: 0;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.delivery-option input[type="radio"]:checked ~ .delivery-option-check{
border-color: var(--primary-color);
background: var(--gradient-brand);
box-shadow: inset 0 0 0 3px var(--bg-elevated);
}
.delivery-option:has(input[type="radio"]:checked){
border-color: var(--primary-color);
box-shadow: 0 0 0 1px var(--primary-color);
}
.delivery-option-media{
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: var(--radius-sm);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-elevated-2);
}
.delivery-option-media img{ width: 100%; height: 100%; object-fit: cover; }
.delivery-option-media-icon{ background: var(--bg-elevated-2); padding: 10px; }
.delivery-option-media-icon img{ object-fit: contain; }
.delivery-option-title{
display: block;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
margin-bottom: 4px;
}
.delivery-option-desc{
display: block;
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.4;
}
.pickup-note{
grid-column: 1 / -1;
display: none;
font-size: 0.82rem;
color: var(--secondary-color);
background: rgba(154, 47, 224, 0.1);
border: 1px solid rgba(154, 47, 224, 0.3);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin: -6px 0 4px;
}
.pickup-note.visible{ display: block; }
.pickup-note a{ font-weight: 600; text-decoration: underline; }
.address-field.hidden{ display: none; }
.empty-cart-notice{
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-cart-notice a{ color: var(--primary-color); font-weight: 600; }
/* =========================================================================
STRANICA "INFORMACIJE" (o nama, uslovi, privatnost, isporuka, povraćaj)
========================================================================= */
.legal-jump-nav{
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 32px 0 8px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 40px;
}
.legal-jump-nav a{
padding: 9px 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 0.86rem;
font-weight: 500;
transition: all var(--transition-fast);
}
.legal-content{
max-width: 760px;
margin: 0 auto;
padding-bottom: 96px;
}
.legal-section{
padding: 40px 0;
border-bottom: 1px solid var(--border-color);
scroll-margin-top: 100px;
}
.legal-section:last-child{ border-bottom: none; }
.legal-section h2{
font-size: 1.5rem;
color: var(--text-primary);
margin-bottom: 18px;
}
.legal-section p{
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 14px;
}
.legal-section ul{
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 14px;
}
.legal-section li{
color: var(--text-muted);
line-height: 1.65;
padding-left: 22px;
position: relative;
}
.legal-section li::before{
content: '';
position: absolute;
left: 0; top: 9px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gradient-brand);
}
.legal-section li strong{ color: var(--text-primary); }
.legal-section a{ color: var(--primary-color); font-weight: 500; }
/* =========================================================================
RESPONZIVNOST
========================================================================= */
/* =========================================================================
RESPONZIVNOST — SVEOBUHVATNE TAČKE PRELOMA (2027+ STANDARD)
-------------------------------------------------------------------------
Zahvaljujući fluidnoj tipografiji (html font-size gore) i fluidnim
mrežama (repeat(auto-fill/auto-fit, minmax(...))) na karticama
proizvoda/prednosti/kategorija, VEĆINA elemenata se već sama
prilagođava BEZ potrebe za tačkama preloma ispod. Ono što ostaje su
samo STRUKTURNE prilagodbe rasporeda (kolone koje treba da postanu
1 kolona, bočna traka koja treba da nestane na uskom ekranu, itd.)
za pet opsega uređaja:
• < 375px — vrlo mali / stariji telefoni
• 375px – 480px — moderni mobilni telefoni
• 481px – 992px — tableti i sklopivi telefoni (foldables)
• 993px – 1200px — laptopovi
• > 1200px — desktop i ultra-široki monitori (podrazumevano,
pa nema poseban blok — to je "default" stanje
iznad svih media query-ja, već ograničeno na
max-width: 1440px preko .container)
========================================================================= */
/* ---------- TABLETI, SKLOPIVI TELEFONI I MANJI EKRANI (do 1024px) ----------
Napomena: gornja granica je 1024px (širina iPad-a u pejzažnom režimu)
umesto tačno 992px, radi bolje pokrivenosti stvarnih tablet uređaja —
raspored ispod važi za SVE širine do 1024px (uključujući i mobilne
telefone), a uže/mobilne dodatne prilagodbe su niže u ovom fajlu. */
@media (max-width: 1024px){
.footer-grid { grid-template-columns: 1fr 1fr; }
.checkout-layout { grid-template-columns: 1fr; }
.location-wrap { grid-template-columns: 1fr; }
.shop-layout.with-sidebar { grid-template-columns: 1fr; }
.filters-toggle-btn { display: inline-flex; }
.filters-sidebar {
position: static;
margin-bottom: 4px;
}
.shop-layout.with-sidebar .filters-sidebar { display: none; }
.shop-layout.with-sidebar .filters-sidebar.mobile-open { display: block; }
}
/* ---------- LAPTOPOVI (1025px – 1200px) ---------- */
@media (min-width: 1025px) and (max-width: 1200px){
/* Malo uža treća kolona na stranici proizvoda da bi se sve tri
kolone udobno smestile bez preteranog stiskanja galerije. */
.pd-layout { grid-template-columns: 1fr 1fr 300px; }
}
@media (max-width: 860px) {
.hero .container { gap: 32px; }
.hero-telefon { height: 300px; }
.phone-mock, .phone-mock-back { width: 160px; height: 320px; }
}
/* ---------- MODERNI MOBILNI TELEFONI (do 480px) ---------- */
@media (max-width: 720px) {
.main-nav { display: none; }
.nav-toggle { display: flex; }
.main-nav.mobile-open {
display: flex;
position: fixed;
/* Header je pomeren naniže za visinu akcijske trake, pa i meni mora
da počne ispod oba — inače prekrije sam header. */
top: calc(var(--promo-height) + var(--header-height));
left: 0; right: 0;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-color);
padding: 20px 24px 28px;
z-index: 99;
}
.main-nav.mobile-open ul { flex-direction: column; gap: 18px; }
.section { padding: 48px 0; }
.section-head { flex-direction: column; align-items: flex-start; }
.product-grid { gap: 14px; }
.product-name { min-height: 0; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.form-grid { grid-template-columns: 1fr; }
.cart-drawer { width: 100%; }
.delivery-options { grid-template-columns: 1fr; }
/* Manji, "prirodniji" razmaci na mobilnom — sajt manje deluje
"zumirano"/zbijeno i više kao nativna aplikacija. */
.hero { padding: 44px 0 52px; }
.trust-card { padding: 20px 18px; }
.category-card { padding: 18px; }
.product-info { padding: 16px 16px 18px; }
.cta-strip { padding: 44px 0; }
}
@media (max-width: 480px) {
.hero h1 { max-width: none; }
.hero-actions .btn { flex: 1; }
/* Manja, "prirodnija" dugmad i naslovi na telefonu — sajt manje
deluje "zumirano" i više kao nativna aplikacija. */
.btn { padding: 11px 20px; font-size: 0.88rem; }
.btn-sm { padding: 8px 14px; font-size: 0.82rem; }
.logo-text { font-size: 1.05rem; }
.otkup-price-badge { font-size: 0.8rem; padding: 8px 14px; }
.pd-price { font-size: clamp(1.3rem, 1.1rem + 1.5vw, 2.1rem); }
.product-price { font-size: 1rem; }
/* Otkup telefona — animacija i hero znatno manji na mobilnom */
.otkup-hero { padding: 28px 0 36px; }
.otkup-hero-inner { gap: 28px; }
.otkup-phone { width: 92px; height: 184px; border-radius: 20px; }
.otkup-phone-notch { width: 36px; height: 10px; }
.otkup-hero-anim { gap: 14px; }
.otkup-price-badge { font-size: 0.72rem; padding: 6px 12px; }
.otkup-hero-text h1 { font-size: 1.5rem; }
.otkup-hero-sub { font-size: 0.95rem; margin-bottom: 12px; }
.otkup-hero-desc { font-size: 0.85rem; margin-bottom: 20px; }
}
/* ---------- VRLO MALI / STARIJI TELEFONI (< 375px) ---------- */
@media (max-width: 374px){
.container { padding: 0 12px; }
.hero { padding: 48px 0 56px; }
.btn { padding: 11px 18px; font-size: 0.88rem; }
.product-grid, .trust-grid, .category-grid { gap: 10px; }
.pd-thumbs { grid-template-columns: repeat(4, 1fr); }
}
/* =========================================================================
HOVER EFEKTI — SAMO ZA UREĐAJE SA MIŠEM (2027+ STANDARD)
-------------------------------------------------------------------------
Svi :hover efekti sa CELOG sajta su namerno grupisani OVDE, unutar
@media (hover: hover) and (pointer: fine) — ovo znači da se aktiviraju
ISKLJUČIVO na uređajima sa pravim mišem (desktop/laptop). Na dodirnim
ekranima (mobilni, tablet) ovi efekti se uopšte ne primenjuju, čime se
izbegava dosadan "zalepljeni hover" bug (kad dodirnete dugme na telefonu
i ono ostane u hover stanju dok ne dodirnete nešto drugo).
========================================================================= */
@media (hover: hover) and (pointer: fine) {
.btn-primary:hover { filter: brightness(1.08);
box-shadow: 0 6px 24px rgba(65, 105, 240, 0.35); }
.btn-outline:hover { border-color: var(--primary-color);
color: var(--primary-color); }
.main-nav a:hover { color: var(--text-primary); }
.main-nav a:hover::after { width: 100%; }
.cart-btn:hover { border-color: var(--primary-color); transform: translateY(-1px); }
.trust-card:hover { border-color: var(--primary-color);
transform: translateY(-4px); }
.category-card:hover { transform: translateY(-5px); border-color: var(--border-color-light); }
.filter-btn:hover { color: var(--text-primary); }
.product-card:hover { transform: translateY(-6px);
border-color: var(--border-color-light);
box-shadow: var(--shadow-elevated); }
.product-card:hover::before { transform: scaleX(1); }
.product-name a:hover { color: var(--primary-color); text-decoration: underline; }
.add-to-cart-btn:hover { background: var(--gradient-brand);
border-color: transparent;
color: var(--text-on-accent);
transform: scale(1.06); }
.filters-reset-btn:hover { color: var(--primary-color); }
.filter-checkbox-item:hover { color: var(--text-primary); }
.chatbot-launcher:hover { transform: scale(1.06); }
.chatbot-quick-reply:hover { border-color: var(--primary-color);
color: var(--text-primary); }
.chatbot-send-btn:hover { transform: scale(1.06); }
.pd-breadcrumb a:hover { color: var(--primary-color); }
.pd-thumb:hover { border-color: var(--border-color-light); }
.pd-variant-btn:hover { border-color: var(--primary-color); }
.pd-color-swatch:hover { transform: scale(1.1); }
.pd-tab-btn:hover { color: var(--text-primary); }
.social-links a:hover { color: var(--primary-color); border-color: var(--primary-color); }
.footer-col h4 a:hover { color: var(--primary-color); }
.footer-col a:hover { color: var(--primary-color); }
.footer-bottom a:hover { color: var(--primary-color); }
.cart-close-btn:hover { color: var(--text-primary); border-color: var(--border-color-light); }
.qty-control button:hover { color: var(--primary-color); }
.cart-item-remove:hover { color: var(--color-danger); }
.delivery-option:hover { border-color: var(--border-color-light); transform: translateY(-2px); }
.delivery-option-static:hover { border-color: var(--border-color); transform: none; }
.legal-jump-nav a:hover { color: var(--text-primary);
border-color: var(--primary-color); }
.legal-section a:hover { text-decoration: underline; }
}
/* =========================================================================
OTKUP TELEFONA — HERO SA ANIMACIJOM
========================================================================= */
.otkup-hero{
padding: 72px 0 80px;
background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(178,47,229,0.12), transparent);
}
.otkup-hero-inner{
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.otkup-hero-text h1{ font-size: clamp(1.6rem, 1.3rem + 2.5vw, 2.8rem); margin-bottom: 6px; }
.otkup-hero-sub{
font-family: var(--font-display);
font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
font-weight: 600;
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 18px;
}
.otkup-hero-desc{ color: var(--text-muted); line-height: 1.65; margin-bottom: 28px; max-width: 52ch; }
.otkup-hero-anim{
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.otkup-phone{
width: 168px;
height: 336px;
border-radius: 34px;
background: linear-gradient(180deg, var(--bg-elevated), var(--bg-elevated-2));
border: 2px solid var(--border-color);
position: relative;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.otkup-phone-notch{
width: 64px; height: 16px;
background: var(--bg-base);
border-radius: 0 0 12px 12px;
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.otkup-scan-line{
position: absolute;
left: 6%; right: 6%;
height: 3px;
border-radius: 2px;
background: var(--gradient-brand);
box-shadow: 0 0 18px 4px rgba(65, 105, 240, 0.55);
animation: otkup-scan 2.6s ease-in-out infinite;
}
@keyframes otkup-scan{
0% { top: 8%; opacity: 0.35; }
50% { top: 90%; opacity: 1; }
100% { top: 8%; opacity: 0.35; }
}
.otkup-price-badge{
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-elevated);
border: 1px solid var(--primary-color);
border-radius: 999px;
padding: 10px 18px;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
animation: otkup-badge-pulse 2.6s ease-in-out infinite;
}
.otkup-price-check{
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--gradient-brand);
color: #fff;
font-size: 0.72rem;
flex-shrink: 0;
}
@keyframes otkup-badge-pulse{
0%, 35% { opacity: 0; transform: translateY(8px); }
55%, 88% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce){
.otkup-scan-line, .otkup-price-badge { animation: none; opacity: 1; top: 50%; }
}
/* ---------- FORMA ZA PROCENU ---------- */
.otkup-form-container{
display: grid;
grid-template-columns: 1fr 340px;
gap: 32px;
align-items: start;
}
.otkup-panel{ margin: 0; }
.otkup-radio-label{
display: block;
font-size: 0.85rem;
color: var(--text-faint);
font-weight: 600;
margin-bottom: 10px;
}
.otkup-radio-row{ display: flex; gap: 20px; }
.otkup-radio-option{
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.92rem;
color: var(--text-primary);
}
.otkup-radio-option input[type="radio"]{
width: 18px; height: 18px;
accent-color: var(--primary-color);
cursor: pointer;
}
.otkup-info-panel{
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 28px 24px;
position: sticky;
top: 100px;
}
.otkup-info-panel h3{ font-size: 1.1rem; margin-bottom: 18px; }
.otkup-steps{ display: flex; flex-direction: column; gap: 16px; }
.otkup-steps li{
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.55;
}
.otkup-steps li strong{ color: var(--text-primary); }
.otkup-steps .step-emoji{ font-size: 1.2rem; flex-shrink: 0; }
/* ---------- RESPONZIVNOST ---------- */
@media (max-width: 992px){
.otkup-hero-inner{ grid-template-columns: 1fr; }
.otkup-hero-anim{ order: -1; }
.otkup-form-container{ grid-template-columns: 1fr; }
.otkup-info-panel{ position: static; }
}
@media (max-width: 480px){
.otkup-hero{ padding: 48px 0 56px; }
.otkup-phone{ width: 130px; height: 260px; }
.otkup-radio-row{ gap: 14px; }
}
/* =========================================================================
JEZIK I VALUTA — DROPDOWN PREKIDAČI (header)
========================================================================= */
.lang-cur-switchers{
display: flex;
align-items: center;
gap: 8px;
}
.lang-cur-dropdown{ position: relative; }
.lang-cur-trigger{
display: flex;
align-items: center;
gap: 5px;
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 7px 10px;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition-fast);
}
.lang-cur-trigger:focus-visible{ outline: 2px solid var(--primary-color); outline-offset: 2px; }
.lang-flag{ font-size: 1rem; line-height: 1; }
.lang-cur-caret{ width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; }
.lang-cur-menu{
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 128px;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-elevated);
padding: 6px;
display: none;
flex-direction: column;
gap: 2px;
z-index: 120;
}
.lang-cur-menu.open{ display: flex; }
.lang-cur-option{
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
border-radius: 6px;
padding: 8px 10px;
color: var(--text-muted);
font-family: var(--font-body);
font-size: 0.85rem;
text-align: left;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.lang-cur-option.active{ color: var(--text-primary); background: var(--bg-elevated-2); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
.lang-cur-option:hover{ background: var(--bg-elevated-2); color: var(--text-primary); }
.lang-cur-trigger:hover{ border-color: var(--primary-color); }
}
@media (max-width: 480px){
.lang-cur-trigger{ padding: 6px 8px; font-size: 0.75rem; }
.lang-cur-switchers{ gap: 6px; }
}
/* =========================================================================
STATUS ZALIHE NA STRANICI PROIZVODA
========================================================================= */
.pd-stock-status{
font-size: 0.82rem;
color: var(--color-warning, #d9a441);
margin-bottom: 10px;
min-height: 18px;
}
.pd-stock-status.out-of-stock{
color: var(--color-danger);
font-weight: 600;
}
.pd-add-to-cart-btn:disabled{
opacity: 0.5;
cursor: not-allowed;
}
/* "Nema na stanju" ide u DESNI ugao, da se ne preklopi sa
"Novo"/"Polovno" trakom koja stoji u levom uglu. */
.badge-out-of-stock{
background: var(--color-danger);
color: #fff;
left: auto;
right: 0;
border-radius: 0 0 0 10px;
padding: 7px 14px 7px 16px;
}
.out-of-stock-card .product-media img{ opacity: 0.5; }
.add-to-cart-btn:disabled{
opacity: 0.4;
cursor: not-allowed;
}
/* =========================================================================
"USKORO / REZERVACIJA" BANER (početna strana)
========================================================================= */
.coming-soon{
padding: clamp(44px, 7vw, 76px) 0;
background: transparent;
position: relative;
overflow: hidden;
}
.coming-soon-inner{ position: relative; text-align: center; max-width: 760px; margin: 0 auto; }
.coming-soon-badge{
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
color: var(--text-muted);
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 16px;
}
.coming-soon-title{
font-family: var(--font-display);
font-size: clamp(1.9rem, 6.5vw, 3.8rem);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.05;
margin: 0 0 10px;
background: var(--gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.coming-soon-lead{
color: var(--text-primary);
font-size: clamp(1rem, 2.2vw, 1.2rem);
margin: 0 0 6px;
}
.coming-soon-img{
display: block;
width: 100%;
max-width: 620px;
height: auto;
margin: 10px auto 6px;
filter: drop-shadow(0 24px 48px rgba(0,0,0,0.45));
}
.coming-soon-dates{ color: var(--text-muted); font-size: 0.95rem; margin: 0 0 22px; }
.coming-soon-dates strong{ color: var(--text-primary); }
.coming-soon-btn{ margin-bottom: 12px; }
.coming-soon-note{ color: var(--text-faint); font-size: 0.84rem; margin: 0; }
@media (max-width: 480px){
.coming-soon{ padding: 36px 0; }
.coming-soon-img{ margin: 6px auto 4px; }
.coming-soon-dates{ font-size: 0.86rem; }
}
/* =========================================================================
MODAL ZA REZERVACIJU
========================================================================= */
.rez-overlay{
position: fixed; inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(3px);
opacity: 0; visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast);
z-index: 200;
}
.rez-overlay.open{ opacity: 1; visibility: visible; }
.rez-modal{
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -48%);
width: min(560px, calc(100vw - 32px));
/* Isto kao kod čata: kad se na telefonu otvori tastatura, modal se
skuplja na vidljivi deo ekrana umesto da ostane visok preko cele
visine i gurne polja ispod tastature. */
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
max-height: calc(var(--vv-visina, 100dvh) - 48px);
overflow-y: auto;
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-elevated);
padding: clamp(22px, 4vw, 34px);
opacity: 0; visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
z-index: 201;
}
.rez-modal.open{ opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.rez-close{
position: absolute; top: 14px; right: 14px;
width: 34px; height: 34px;
display: grid; place-items: center;
background: var(--bg-elevated-2);
border: 1px solid var(--border-color);
border-radius: 50%;
color: var(--text-muted);
cursor: pointer;
}
.rez-close svg{ width: 16px; height: 16px; }
.rez-modal h2{ font-size: clamp(1.25rem, 3.4vw, 1.6rem); margin: 0 0 6px; padding-right: 40px; }
.rez-sub{ color: var(--text-muted); font-size: 0.92rem; margin: 0 0 22px; }
.rez-label{
display: block;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 8px;
}
.rez-colors{ display: flex; flex-wrap: wrap; gap: 10px; }
.rez-color{
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--bg-elevated-2);
font-size: 0.88rem;
cursor: pointer;
transition: border-color var(--transition-fast);
}
.rez-color input{ position: absolute; opacity: 0; width: 0; height: 0; }
.rez-color:has(input:checked){ border-color: var(--primary-color); }
.rez-dot{
width: 18px; height: 18px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.28);
flex-shrink: 0;
}
.rez-status{ margin-top: 14px; font-size: 0.88rem; text-align: center; min-height: 20px; }
.rez-status.error{ color: var(--color-danger); }
.rez-status.success{ color: var(--color-success, #4ec97f); }
.rez-success{ text-align: center; }
.rez-success-icon{ font-size: 2.6rem; margin-bottom: 10px; }
.rez-success p{ color: var(--text-muted); margin: 0 0 22px; }
@media (hover: hover) and (pointer: fine){
.rez-close:hover{ color: var(--text-primary); border-color: var(--primary-color); }
.rez-color:hover{ border-color: var(--primary-color); }
}
/* =========================================================================
AKCIJSKA TRAKA NA VRHU (promo-bar)
-------------------------------------------------------------------------
Fiksirana je na sam vrh prozora, iznad headera. Da ne bi prekrila
sadržaj, telo stranice dobija razmak jednak visini trake
(--promo-height), a header se spušta za istu vrednost.
========================================================================= */
body{ padding-top: var(--promo-height); position: relative; }
/* =========================================================================
SVETLO SA VRHA STRANICE
-------------------------------------------------------------------------
Jedan ljubičasto-plavi odsjaj koji počinje na vrhu i postepeno se gasi
naniže. Ranije je to bila mala mrlja zaključana u hero sekciji, pa se
videla granica gde prestaje. Ovako prelazi preko svih sekcija i nestaje
negde oko sredine stranice.
z-index -1 znači: iznad pozadinske boje tela, ispod celog sadržaja.
Ne hvata klikove i ne pomera se pri skrolovanju — vezano je za vrh
dokumenta, a ne za ekran.
========================================================================= */
body::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1700px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(115% 55% at 78% -5%, rgba(154, 47, 224, 0.26) 0%, rgba(154, 47, 224, 0) 62%),
radial-gradient(95% 45% at 12% 2%, rgba(65, 105, 240, 0.18) 0%, rgba(65, 105, 240, 0) 66%),
linear-gradient(180deg, rgba(138, 60, 210, 0.13) 0%, rgba(138, 60, 210, 0.05) 45%, rgba(138, 60, 210, 0) 100%);
}
@media (max-width: 860px){
body::before{ height: 1200px; }
}
.promo-bar{
position: fixed;
top: 0; left: 0;
width: 100%;
height: var(--promo-height);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 6px 10px;
/* Poluprovidna tamna podloga sa zamućenjem — u duhu tamne teme sajta */
background: rgba(18, 12, 40, 0.82);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(178, 47, 229, 0.30);
color: var(--text-muted);
font-size: 0.86rem;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.promo-bar strong{ color: var(--text-primary); }
/* Iznos popusta — istaknut kao "nalepnica" u brend gradijentu, sa
pulsiranjem i svetlucanjem koje prelazi preko njega. */
.highlight-price{
position: relative;
display: inline-block;
padding: 2px 9px;
margin: 0 3px;
border-radius: 6px;
background: var(--gradient-brand);
color: #fff;
font-weight: bold;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
animation: priceKucanje 1.9s ease-in-out infinite;
}
@keyframes priceKucanje{
0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(178, 47, 229, 0); }
45% { transform: scale(1.13); box-shadow: 0 0 22px rgba(178, 47, 229, 0.75); }
}
/* Svetlucanje koje prelazi preko iznosa */
.highlight-price::after{
content: "";
position: absolute;
top: 0; left: -120%;
width: 60%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
animation: priceSjaj 2.6s ease-in-out infinite;
}
@keyframes priceSjaj{
0%, 18% { left: -120%; }
55%, 100% { left: 160%; }
}
/* Ikonica poklona — nenametljivo se njiše */
.gift-icon{
display: inline-block;
font-size: 1.1rem;
flex-shrink: 0;
transform-origin: bottom center;
animation: giftWiggle 2.4s ease-in-out infinite;
}
@keyframes giftWiggle{
0%, 40% { transform: rotate(0deg) scale(1) translateY(0); }
46% { transform: rotate(-16deg) scale(1.22) translateY(-2px); }
53% { transform: rotate(14deg) scale(1.22) translateY(-2px); }
60% { transform: rotate(-12deg) scale(1.18) translateY(-1px); }
67% { transform: rotate(10deg) scale(1.14); }
74% { transform: rotate(-6deg) scale(1.08); }
82% { transform: rotate(3deg) scale(1.03); }
90%, 100%{ transform: rotate(0deg) scale(1); }
}
.promo-bar-cta{
flex-shrink: 0;
padding: 3px 12px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
color: var(--text-primary);
transition: background var(--transition-fast), border-color var(--transition-fast);
animation: ctaDisanje 3s ease-in-out infinite;
}
@keyframes ctaDisanje{
0%, 100% { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 0 0 rgba(65,105,240,0); }
50% { border-color: rgba(148, 170, 255, 0.75); box-shadow: 0 0 14px rgba(65,105,240,0.45); }
}
@media (hover: hover) and (pointer: fine){
.promo-bar:hover .promo-bar-cta{
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.45);
}
}
/* Kratka poruka je sakrivena na širokim ekranima */
.promo-bar-text-short{ display: none; }
/* --- MOBILNI: traka mora biti vrlo tanka da ne smeta pri skrolovanju --- */
@media (max-width: 760px){
:root{ --promo-height: 30px; }
.promo-bar{
gap: 7px;
padding: 4px 8px;
font-size: 0.74rem;
}
.gift-icon{ font-size: 0.95rem; }
/* Zamena duge poruke kratkom + sklanjanje dugmeta */
.promo-bar-text,
.promo-bar-cta{ display: none; }
.promo-bar-text-short{ display: inline; }
/* Manja "nalepnica" i blaži puls, da stane u traku od 30px */
.highlight-price{
padding: 1px 7px;
margin: 0 2px;
border-radius: 5px;
}
}
@media (max-width: 760px){
@keyframes priceKucanje{
0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(178, 47, 229, 0); }
45% { transform: scale(1.07); box-shadow: 0 0 14px rgba(178, 47, 229, 0.7); }
}
}
@media (prefers-reduced-motion: reduce){
.gift-icon,
.highlight-price,
.highlight-price::after,
.promo-bar-cta{ animation: none !important; }
.highlight-price::after{ display: none; }
}
/* =========================================================================
DUGME "POZOVITE NAS" (header, pored prekidača za valutu)
-------------------------------------------------------------------------
Koristi brend gradijent iz loga. Animacije: blago pulsiranje samog
dugmeta i prsten koji se širi oko njega, kao signal poziva.
========================================================================= */
.header-call-btn{
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding: 9px 16px;
border-radius: 999px;
background: var(--gradient-brand);
color: #fff;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
box-shadow: 0 4px 16px rgba(122, 47, 200, 0.35);
animation: callPulse 2.6s ease-in-out infinite;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.header-call-btn svg{
width: 15px; height: 15px;
flex-shrink: 0;
animation: callShake 2.6s ease-in-out infinite;
}
@keyframes callPulse{
0%, 100% { box-shadow: 0 4px 16px rgba(122, 47, 200, 0.35); }
50% { box-shadow: 0 4px 24px rgba(122, 47, 200, 0.70); }
}
/* Slušalica se "zatrese" kao kad telefon zvoni */
@keyframes callShake{
0%, 58%, 100% { transform: rotate(0deg); }
62% { transform: rotate(-16deg); }
66% { transform: rotate(14deg); }
70% { transform: rotate(-12deg); }
74% { transform: rotate(10deg); }
78% { transform: rotate(-6deg); }
82% { transform: rotate(0deg); }
}
/* Prsten koji se širi oko dugmeta — signal poziva */
.header-call-ring{
position: absolute;
inset: 0;
border-radius: 999px;
border: 2px solid rgba(178, 47, 229, 0.65);
animation: callRing 2.6s ease-out infinite;
pointer-events: none;
}
@keyframes callRing{
0% { transform: scale(1); opacity: 0.75; }
55%, 100%{ transform: scale(1.35); opacity: 0; }
}
@media (hover: hover) and (pointer: fine){
.header-call-btn:hover{
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(122, 47, 200, 0.6);
}
}
/* Na užim ekranima ostaje samo ikonica, da header ostane pregledan i da
meni od 8 stavki ima dovoljno prostora da stane u jedan red. */
@media (max-width: 1250px){
.header-call-text{ display: none; }
.header-call-btn{ padding: 9px; }
}
@media (max-width: 420px){
.header-call-btn{ padding: 8px; }
.header-call-btn svg{ width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce){
.header-call-btn,
.header-call-btn svg,
.header-call-ring{ animation: none !important; }
.header-call-ring{ display: none; }
}
/* =========================================================================
STRANICA SERVISA
========================================================================= */
.servis-layout{
display: grid;
grid-template-columns: 1fr 340px;
gap: clamp(24px, 4vw, 44px);
align-items: start;
padding: clamp(28px, 5vw, 48px) 0;
}
.servis-form-wrap{
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: clamp(22px, 4vw, 34px);
}
.servis-form-wrap h2{ margin: 0 0 6px; font-size: clamp(1.2rem, 3vw, 1.5rem); }
.servis-radio-label{
display: block;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 8px;
}
.servis-nacin{ display: flex; flex-wrap: wrap; gap: 10px; }
.servis-radio{
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--bg-elevated-2);
font-size: 0.88rem;
cursor: pointer;
transition: border-color var(--transition-fast);
}
.servis-radio input{ position: absolute; opacity: 0; width: 0; height: 0; }
.servis-radio:has(input:checked){ border-color: var(--primary-color); }
.servis-status{ margin-top: 14px; font-size: 0.88rem; text-align: center; min-height: 20px; }
.servis-status.error{ color: var(--color-danger); }
.servis-info{ display: flex; flex-direction: column; gap: 16px; }
.servis-card{
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 22px;
}
.servis-card h3{ margin: 0 0 14px; font-size: 1rem; }
.servis-steps{ margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; }
.servis-steps li{ margin-bottom: 10px; }
.servis-steps strong{ color: var(--text-primary); }
.servis-list{ margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.9; }
.servis-contact p{ color: var(--text-muted); font-size: 0.88rem; margin: 0 0 14px; }
/* Numerisana lista pravila servisa */
.servis-pravila{
margin: 18px 0 0;
padding-left: 22px;
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.75;
}
.servis-pravila li{ margin-bottom: 16px; }
.servis-pravila strong{ color: var(--text-primary); }
/* --- MODAL POTVRDE --- */
.servis-overlay{
position: fixed; inset: 0;
background: rgba(0,0,0,0.7);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0; visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast);
z-index: 200;
}
.servis-overlay.open{ opacity: 1; visibility: visible; }
.servis-modal{
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -48%);
width: min(440px, calc(100vw - 32px));
background: var(--bg-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: var(--shadow-elevated);
padding: clamp(24px, 4vw, 34px);
text-align: center;
opacity: 0; visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
z-index: 201;
}
.servis-modal.open{ opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.servis-success-icon{ font-size: 2.6rem; margin-bottom: 10px; }
.servis-success h2{ margin: 0 0 8px; font-size: 1.35rem; }
.servis-success p{ color: var(--text-muted); margin: 0 0 22px; }
@media (hover: hover) and (pointer: fine){
.servis-radio:hover{ border-color: var(--primary-color); }
}
@media (max-width: 900px){
.servis-layout{ grid-template-columns: 1fr; }
}
/* =========================================================================
HEADER NA MALIM EKRANIMA
-------------------------------------------------------------------------
Sa dodatim dugmetom "Pozovite nas" header je na uskim telefonima počeo
da izlazi van ekrana, što je pravilo vodoravno pomeranje i stranica je
delovala "skraćeno"/zumirano. Ovde sve zbijamo da pouzdano stane.
========================================================================= */
@media (max-width: 560px){
.site-header .container{ gap: 10px; }
.logo-link img{ height: 30px; width: auto; }
.logo-text{ font-size: 1.02rem; }
.header-actions{ gap: 7px; }
.header-call-btn{ padding: 8px; }
}
@media (max-width: 400px){
/* Ime brenda ostaje vidljivo i na uskim telefonima. Umesto da ga
sklanjamo, zbijamo sve ostalo u zaglavlju da mu napravimo mesta:
ikonica, dugmad i razmaci idu za koji piksel dole. */
.site-header .container{ gap: 8px; }
.site-header .logo-link{ gap: 8px; min-width: 0; }
.site-header .logo-link img{ height: 26px; width: auto; }
.site-header .logo-text{ font-size: 0.9rem; white-space: nowrap; }
.header-actions{ gap: 5px; }
.header-call-btn{ padding: 7px; }
.cart-btn{ width: 36px; height: 36px; }
.nav-toggle{ width: 34px; height: 34px; }
.lang-cur-trigger{ padding: 6px 7px; }
}
@media (max-width: 340px){
/* Na najužim telefonima (iPhone SE i slični) cele dve reči ne mogu da
stanu pored dugmadi, pa u zaglavlju ostaje samo "Petros". U podnožju
ime ostaje celo, tamo ima mesta. */
.site-header .logo-text span{ display: none; }
}
/* Osigurač protiv vodoravnog pomeranja. Namerno koristimo "clip", a NE
"hidden" — "hidden" bi napravio novi kontejner za skrolovanje i
pokvario lepljivi (sticky) header, dok "clip" samo odseca višak. */
html{ overflow-x: clip; }
.coming-soon{ position: relative; }
/* =========================================================================
SLAJDER REKLAMA U HERO SEKCIJI
-------------------------------------------------------------------------
Slike se smenjuju blagim pretapanjem. Strelice i tačkice se sakrivaju
kad postoji samo jedan slajd. Slike podešavate u hero-slajder.js.
========================================================================= */
.reklame{
padding: 20px 0 0;
}
@media (max-width: 860px){
.reklame{ padding: 16px 0 0; }
}
.hero-slajder{
position: relative;
width: 100%;
/* Slike su 16:9, pa širina i visina idu zajedno: pri 740 px baner je
416 px visok. Odnos stranica se ne dira — slika se ne seče niti
razvlači, samo se ceo okvir smanjuje. */
max-width: 740px;
margin: 0 auto;
aspect-ratio: 16 / 9;
border-radius: 28px;
overflow: hidden;
background: var(--bg-elevated);
/* Bez tvrdog okvira. Umesto njega: tanka svetla nit, meka senka ispod i
blag brend-sjaj okolo — slika deluje kao staklo položeno na stranicu,
a ne kao nalepnica. */
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.07),
0 26px 60px rgba(0, 0, 0, 0.55),
0 0 80px -24px rgba(122, 47, 200, 0.45);
}
/* Staklena opna preko slike: rub tone u pozadinu, a po gornjoj ivici ide
svetli odsjaj. Ne hvata klikove i stoji ISPOD strelica i tačkica
(one su na z-index 2), pa ostaje sve upotrebljivo. */
.hero-slajder::after{
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
box-shadow:
inset 0 0 18px 4px rgba(10, 14, 23, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
background:
linear-gradient(147deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 34%),
radial-gradient(125% 95% at 50% 50%, rgba(10, 14, 23, 0) 74%, rgba(10, 14, 23, 0.45) 100%);
}
@media (max-width: 860px){
.hero-slajder{ border-radius: 20px; }
.hero-slajder::after{ box-shadow: inset 0 0 13px 3px rgba(10, 14, 23, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
}
/* Na niskim ekranima (laptopovi 1366×768 i slični) baner od 416 px gurne
naslov tačno ispod pregiba. Ovde ga spuštamo na 660 px širine, odnosno
371 px visine, pa se početak hero sekcije opet vidi. Odnos stranica
ostaje isti — slika se i dalje ne seče. */
@media (min-width: 861px) and (max-height: 820px){
.hero-slajder{ max-width: 660px; }
}
.hero-slajdovi{ position: absolute; inset: 0; }
.hero-slajd{
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 600ms ease, visibility 600ms ease;
display: block;
}
.hero-slajd.aktivan{ opacity: 1; visibility: visible; }
.hero-slajd img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* --- STRELICE --- */
.hero-strelica{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(10, 14, 23, 0.62);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
cursor: pointer;
z-index: 2;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.hero-strelica svg{ width: 17px; height: 17px; }
.hero-strelica-levo{ left: 10px; }
.hero-strelica-desno{ right: 10px; }
/* --- TAČKICE --- */
.hero-tackice{
position: absolute;
left: 0; right: 0; bottom: 12px;
display: flex;
justify-content: center;
gap: 7px;
z-index: 2;
}
.hero-tackica{
width: 8px; height: 8px;
border-radius: 50%;
border: none;
padding: 0;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: background var(--transition-fast), width var(--transition-fast);
}
.hero-tackica.aktivna{
width: 22px;
border-radius: 999px;
background: var(--gradient-brand);
}
/* Kod jednog slajda nema šta da se prelistava */
.hero-slajder.jedan-slajd .hero-strelica,
.hero-slajder.jedan-slajd .hero-tackice{ display: none; }
@media (hover: hover) and (pointer: fine){
.hero-strelica:hover{
background: rgba(10, 14, 23, 0.88);
border-color: var(--primary-color);
}
.hero-tackica:hover{ background: rgba(255, 255, 255, 0.75); }
}
@media (max-width: 480px){
.hero-strelica{ width: 32px; height: 32px; }
.hero-strelica-levo{ left: 7px; }
.hero-strelica-desno{ right: 7px; }
}
@media (prefers-reduced-motion: reduce){
.hero-slajd{ transition: none; }
}
/* =========================================================================
SKOK NA SEKCIJU (linkovi sa #)
-------------------------------------------------------------------------
Header je lepljiv i stoji ispod akcijske trake. Bez ovoga bi, pri skoku
na sekciju, njen vrh završio SAKRIVEN ispod headera. "scroll-margin-top"
kaže browseru da ostavi taj prostor.
========================================================================= */
:target,
#kontakt,
.legal-section,
section[id]{
scroll-margin-top: calc(var(--promo-height) + var(--header-height) + 16px);
}
/* Glatko skrolovanje kroz ceo sajt, osim kad korisnik traži manje pokreta */
@media (prefers-reduced-motion: no-preference){
html{ scroll-behavior: smooth; }
}
/* =========================================================================
OTKUP — DUGMAD ZA WHATSAPP I VIBER
-------------------------------------------------------------------------
Stoje umesto nekadašnjeg polja za slike i u prozoru posle slanja. Dve
aplikacije jer nema svako obe. Zvanične boje su namerno zadržane, da se
prepoznaju na prvi pogled.
========================================================================= */
.otkup-app-btns{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 4px 0 2px;
}
.success-modal .otkup-app-btns{ justify-content: center; margin: 16px 0; }
.otkup-app-btn{
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 20px;
border-radius: 10px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: transform 160ms ease, box-shadow 160ms ease;
}
.otkup-app-btn svg{ width: 22px; height: 22px; flex-shrink: 0; }
.otkup-app-wa{ background: #25D366; color: #08130A; }
.otkup-app-vb{ background: #7360F2; color: #FFFFFF; }
@media (hover: hover) and (pointer: fine){
.otkup-app-wa:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35); }
.otkup-app-vb:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(115, 96, 242, 0.38); }
}
@media (prefers-reduced-motion: reduce){
.otkup-app-btn{ transition: none; }
.otkup-app-btn:hover{ transform: none; }
}
@media (max-width: 480px){
.otkup-app-btn{ flex: 1 1 100%; justify-content: center; }
}
/* Zaključano stanje — dok kupac ne pošalje zahtev. Boje se gase u sivo,
klik ne prolazi, a tastatura ih preskače (tabindex se sklanja iz JS-a). */
.otkup-app-zakljucano .otkup-app-btn{
filter: grayscale(1);
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.otkup-app-napomena{ margin-top: 10px; }
.otkup-app-napomena-aktivna{ color: #25D366; font-weight: 600; }