/* =============================================================================
   Dental Centar — glavni stil
   -----------------------------------------------------------------------------
   SKALA: PSD artboard je 1980 px. `html{font-size}` je podešen tako da
   1rem = 10 dizajn-piksela na viewportu od 1980 px. Znači:

        PSD mera / 10 = rem

   Na 1980 px poklapanje je 1:1; ispod toga se sve srazmerno smanjuje
   (isti pristup kao na psihozofija sajtu). Ispod 900 px ide zaseban prelom —
   PSD NEMA mobilni artboard, pa je taj deo moja procena, ne dizajn.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. TOKENI */
:root{
	/* Boje — izmerene iz PSD rendera, ne procenjene */
	--navy:        #003A8D;   /* traka, ikone, kartice, donja traka */
	--navy-dark:   #00155A;   /* dno futera / vrh hero preliva */
	--blue:        #2962B4;   /* CTA, akcenat, marquee */
	--blue-link:   #316DFF;   /* aktivna stavka menija */
	--ink:         #0F313A;   /* naslovi i telo teksta */
	--body:        #2E2E2E;   /* utisci */
	--nav:         #3A3A3A;   /* stavke menija */
	--muted:       #B8B8B8;   /* sporedni tekst na plavom */
	--surface:     #F4F6F6;   /* svetle sekcije i kartice */
	--white:       #FFFFFF;
	--gold:        #FFB311;   /* zvezdice */
	--testi-bg:    #003A8D;   /* izvedeno iz PSD-a: rezultat = 0.85*baza + 0.15*slika */

	/* Tipografija */
	--f-head: 'Urbanist', system-ui, sans-serif;
	--f-body: 'Inter Tight', system-ui, sans-serif;
	--f-num:  'Plus Jakarta Sans', system-ui, sans-serif;

	/* Mere */
	--container: 161rem;      /* 1610 px: sadržaj ide 185 → 1795 */
	--radius-pill: 3.1rem;

	/* Krive */
	--ease: cubic-bezier(.22,.61,.36,1);
	--t-color: .25s ease;
	--t-move: .5s var(--ease);
}

/* 10 px po 1rem na 1980 px; donja granica čuva čitljivost na užim ekranima */
html{ font-size: clamp(6.2px, 0.50505vw, 10px); }

/* ⚠️ 20.08 — ISPRAVKA ZA ELEMENTOR UREĐIVAČ (ne dira sajt).
   Uređivač prikazuje stranu u iframe-u koji je uži od prozora za širinu panela
   (~300px). Pošto je gornja mera vezana za `vw`, font u uređivaču ispadne
   OSETNO manji nego na sajtu — izmereno 6.57px vs 8.08px, tj. 23%.
   Posledica nije samo izgled: Elementor widgetima nižim od ~30px dodaje
   `--toggle-edit-tools` i oni prestanu normalno da reaguju na klik. Zbog
   umanjenog fonta naslov je bio 28px umesto ~34px, pa je upadao u tu zamku.
   To je Aleksandar prijavio kao „elementi ne reaguju na edit" i „bekend je sa
   umanjenim fontom, nije kao front".
   Faktor 0.62 ≈ 0.50505 × (prozor / iframe) i vraća uređivač na meru sajta
   (provereno na 1440, 1600 i 1920 px prozorima). Sajt ovo pravilo ne vidi. */
:root:has(body.elementor-editor-active){ font-size: clamp(6.2px, 0.62vw, 10px); }

/* Elementor u uređivaču crta `.elementor-background-overlay` u svakoj sekciji;
   bez ovoga on hvata klik umesto widgeta ispod njega (pravilo iz playbook-a
   §15 — do sada je nedostajalo u ovoj temi). */
.elementor-background-overlay{ pointer-events:none; }

/* ------------------------------------------------------------- 1. RESET */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
	background:var(--white);
	color:var(--ink);
	font-family:var(--f-body);
	font-size:1.8rem;
	font-weight:600;
	line-height:2.8rem;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x:hidden;
}
img,picture,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.skip-link{
	position:absolute; left:-9999px; top:0; z-index:999;
	background:var(--navy); color:#fff; padding:1.2rem 2rem;
}
.skip-link:focus{ left:0; }

.container{
	display:block;         /* literalno, ne --display: elementor-style-{id} u editoru
	                           učitava se POSLE main.css i pobeđuje custom property bridž */
	width:var(--container);
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
}

/* --------------------------------------------------- 2. TIPOGRAFSKI ELEMENTI */
.h2{
	font-family:var(--f-head);
	font-weight:900;
	font-size:4.5rem;
	line-height:5.5rem;
	color:var(--ink);
}
.h2--center{ text-align:center; }
.h2--white{ color:var(--white); }
.accent{ color:var(--blue); }

.section-lead{
	font-size:1.8rem;
	line-height:2.8rem;
	text-align:center;
	margin-top:2.6rem;
}

.rule{
	display:block;
	width:85.6rem;
	max-width:100%;
	height:.4rem;
	background:rgba(41,98,180,.35);
	margin:1.2rem 0 1.7rem;
	border-radius:.2rem;
}
.rule--wide{ margin:2rem 0 4.5rem; }

p + p{ margin-top:1.5rem; }

/* Neprelomiv segment — termini radnog vremena („10:00h - 14:00h") ostaju u
   jednom redu i u Elementor sadržaju i u PHP templejtima (dc_radno). */
.nowrap{ white-space:nowrap; }

/* Ikonice su alfa-maske 512×512 — boju daje `background`, pa su oštre na svakoj
   rezoluciji i mogu se prebojiti bez novog fajla. */
.dc-ico{
	display:inline-block;
	background-color:currentColor;
	-webkit-mask:var(--ico) center/contain no-repeat;
	mask:var(--ico) center/contain no-repeat;
	width:1em; height:1em;
	flex:none;
}

/* ------------------------------------------------------------- 3. DUGMAD */
.btn{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20.5rem;              /* PSD: 205 px */
	height:6.2rem;              /* PSD: 62 px */
	padding:0 5.6rem 0 0;       /* pun prostor za krug (49 + 7) */
	border-radius:var(--radius-pill);
	font-family:var(--f-body);
	font-size:1.6rem;
	font-weight:600;
	line-height:1;
	color:var(--white);
	overflow:hidden;
	transition:background var(--t-color), transform var(--t-move), box-shadow var(--t-move);
}
.btn--wide{ width:25.7rem; }    /* PSD: 257 px — duži natpisi */

.btn__label{ position:relative; z-index:2; white-space:nowrap; }

.btn__circle{
	position:absolute;
	right:.7rem; top:50%;
	transform:translateY(-50%);
	width:4.9rem; height:4.9rem;
	border-radius:50%;
	display:grid; place-items:center;
	z-index:2;
	transition:transform var(--t-move), background var(--t-color);
}
.btn__circle .dc-ico{ width:3.1rem; height:3.1rem; }
.btn__circle--white{ background:var(--white); color:var(--navy); }
.btn__circle--sm{ width:4.2rem; height:4.2rem; background:var(--white); color:var(--navy); }
.btn__circle--sm .dc-ico{ width:2.8rem; height:2.8rem; }
/* „plus" je gotov krug sa znakom — ne treba mu podloga */
.btn__circle--plus{ width:4.5rem; height:4.5rem; background:none; color:var(--white); }
.btn__circle--plus .dc-ico{ width:4.5rem; height:4.5rem; }

.btn--blue{ background:var(--blue); }
.btn--navy{ background:var(--navy); }
.btn--light-blue{ background:var(--blue); }
.btn--ghost{ background:transparent; box-shadow:inset 0 0 0 .2rem var(--white); }

/* Sjaj koji prelazi preko dugmeta (isti rečnik kao Psihozofija) */
.btn::before{
	content:"";
	position:absolute; top:0; left:-80%;
	width:50%; height:100%;
	background:linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
	transform:skewX(-20deg);
	transition:left .55s ease;
	pointer-events:none;
	z-index:1;
}
.btn:hover::before{ left:130%; }
.btn:hover{ transform:translateY(-.3rem); }
.btn--blue:hover{ background:#2f6cc4; box-shadow:0 1.4rem 2.8rem -1rem rgba(41,98,180,.55); }
.btn--navy:hover{ background:#00448f; box-shadow:0 1.4rem 2.8rem -1rem rgba(0,58,141,.55); }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn:hover .btn__circle--plus{ transform:translateY(-50%) rotate(90deg); }
.btn:hover .btn__circle--white,
.btn:hover .btn__circle--sm{ transform:translateY(-50%) scale(1.06); }

.btnrow{ display:flex; align-items:center; gap:1.4rem; }

/* ============================================================================
   4. ZAGLAVLJE
   Gornja traka 0–81 · glavna traka 81–220 · plava pločica 185→392, do y=210
   ========================================================================== */
.site-header{ position:relative; z-index:20; }

.topbar{ background:var(--navy); height:8.1rem; }
/* ⚠️ 27.08: Elementor sadržaj zaglavlja stoji u svom omotaču `<div class="elementor
   elementor-505">`, a on nema visinu. Zbog toga `height:100%` na `.topbar__inner`
   nije imao za šta da se veže (procenat od `auto` = `auto`), pa je unutrašnjost
   ispala visoka koliko sadržaj (45px u traci od 59px) i zalepila se za GORNJU
   ivicu — tekst i dugme su stajali 13,8px više nego što treba.
   Aleksandar 27.08: „taj kajron desno i taj button levo su ti pomereni gore
   previše… da lepo upadne u tu plavu traku". */
.topbar > .elementor{ height:100%; }
.topbar__inner{
	width:var(--container);
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:2rem;
	padding-left:23.5rem;      /* tekst kreće na 420 px, iza pločice */
}

.topbar__ticker{
	display:block;
	position:relative;
	height:2.6rem;
	overflow:hidden;
}
/* .e-con.e-flex (Elementor, 0,2,0) bije flex skraćenicu iz gornjeg pravila (0,1,0) —
   izjednači specifičnost istom klasom dva puta, kao svi drugi mostovi u ovom fajlu. */
.topbar__ticker.topbar__ticker{ flex:1 1 auto; }
/* 18.08 — pravi uzrok "isečenog" tikera: Elementorov widget-omotač oko
   <ul class="ticker"> nema eksplicitnu visinu, pa kolabira na 0 (jedino mu
   je dete <ul> koje SAMO ima samo apsolutno pozicioniranu decu — lanac
   kolabiranja). .ticker__item se onda pozicionira u odnosu na TAJ 0-visinski
   omotač (najbliži position:relative predak), ne u odnosu na .topbar__ticker
   kako je nameravano — otud tekst "seče" gornju ivicu trake. */
.topbar__ticker .elementor-widget-container,
.topbar__ticker .elementor-widget,
.topbar__ticker .ticker{
	height:100%;
	position:relative;
}
/* 18.08 — uklonjeno vertikalno pomeranje (translateY) iz prelaza, ostaje
   samo fade. Razlog: pomeranje je u screenshotu tokom prelaza izgledalo
   kao da tekst "beži" van trake (klijent je to prijavio kao bag nekoliko
   puta) — sa čistim fade-om tekst uvek ostaje na svom mestu. */
.ticker__item{
	position:absolute; inset:0;
	height:100%; width:100%;
	display:flex; align-items:center; gap:.6rem;
	font-size:1.6rem;
	font-weight:600;
	line-height:2rem;
	color:var(--white);
	white-space:nowrap;
	opacity:0;
	transition:opacity .6s ease;
	pointer-events:none;
}
.ticker__item.is-active{ opacity:1; pointer-events:auto; }
.ticker__item.is-leaving{ opacity:0; }
.ticker__pipe{ opacity:.55; margin-inline:.8rem; }
.ticker__sep{ display:inline-block; width:.2rem; }

.topbar__cta{ flex:none; }

.navbar{ background:var(--white); height:13.9rem; }
.navbar__inner{
	position:relative;
	width:var(--container);
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	height:100%;
	display:flex;
	align-items:center;
}

/* Plava pločica sa logotipom — visi iz gornje trake, zaobljena dole levo */
.brand{
	position:absolute;
	left:0; top:-8.1rem;         /* poravnato sa vrhom gornje trake */
	width:20.7rem;               /* PSD: 185 → 392 */
	height:21rem;                /* PSD: do y=210 */
	background:var(--navy);
	border-radius:0 0 1.2rem 7rem;   /* dole-desno 12, dole-levo 70 */
	display:grid;
	place-items:center;
	z-index:3;
}
.brand__logo{
	width:10.7rem; height:15.1rem;   /* PSD: 236,30 → 343,181 */
	transition:transform var(--t-move);
}
.brand:hover .brand__logo{ transform:scale(1.04); }

.nav{ margin-left:auto; margin-top:2rem; }   /* PSD: tekst menija je 10 px ispod sredine trake */
.nav__list{ display:flex; align-items:center; gap:0; }
.nav__list > li{ position:relative; }
.nav__list > li > a{
	display:block;
	padding:0 5.05rem;
	font-size:1.8rem;
	font-weight:700;
	letter-spacing:.01em;
	line-height:7rem;
	color:var(--nav);
	transition:color var(--t-color);
}
/* podvlaka koja izleti sleva */
.nav__list > li > a::after{
	content:"";
	position:absolute;
	left:5.05rem; right:5.05rem; bottom:1.4rem;   /* ispod teksta: kutija 70 px, mastilo do 165 */
	height:.2rem;
	background:var(--blue-link);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .3s var(--ease);
}
.nav__list > li > a:hover{ color:var(--blue-link); }
.nav__list > li > a:hover::after,
.nav__list > li.current-menu-item > a::after,
.nav__list > li.current_page_item > a::after{ transform:scaleX(1); }
.nav__list > li.current-menu-item > a,
.nav__list > li.current_page_item > a{ color:var(--blue-link); }

.nav__list .sub-menu{
	position:absolute; left:0; top:100%;
	min-width:24rem;
	background:var(--white);
	box-shadow:0 1.8rem 4rem -1.6rem rgba(0,58,141,.35);
	border-radius:.8rem;
	padding:1rem 0;
	opacity:0; visibility:hidden;
	transform:translateY(-.8rem);
	transition:opacity var(--t-color), transform var(--t-color), visibility var(--t-color);
	z-index:10;
}
.nav__list > li:hover .sub-menu,
.nav__list > li:focus-within .sub-menu{ opacity:1; visibility:visible; transform:none; }
.nav__list .sub-menu a{
	display:block;
	padding:1rem 2rem;
	font-size:1.6rem; font-weight:600;
	color:var(--nav);
	transition:background var(--t-color), padding-left var(--t-color);
}
.nav__list .sub-menu a:hover{ background:var(--surface); padding-left:2.6rem; color:var(--blue); }
/* karet za stavke sa padajućim — stane u postojeći padding linka (5.05rem) */
.nav__list > li.menu-item-has-children > a::before{
	content:"▾";
	position:absolute;
	right:2.7rem; top:50%; transform:translateY(-50%);
	font-size:1.3rem; line-height:1;
	color:currentColor;
	opacity:.7;
}

.lang{ display:flex; align-items:center; gap:1.1rem; padding-left:3.95rem; padding-right:.8rem; margin-top:2rem; }
.lang__sep{ width:.4rem; height:6.1rem; background:var(--surface); border-radius:.2rem; }
.lang__btn{
	font-size:1.8rem; font-weight:700; color:var(--nav);
	transition:color var(--t-color);
}
.lang__btn:hover{ color:var(--blue-link); }

.burger{ display:none; }

/* ============================================================================
   5. HERO (220–1121, visina 901)
   ========================================================================== */
.hero{
	display:block;
	position:relative;
	height:90.1rem;
	background:linear-gradient(135deg, #000E4E 0%, #003A8D 50%, #000F50 100%);
	overflow:hidden;
}
.hero__media{
	display:block;
	position:absolute;
	top:0; right:0; bottom:0;
	width:50%;                /* PSD: plavo 0→990, slika 990→1980 */
	overflow:hidden;
}
/* Elementor umeće omotač oko <img>; bez visine na njemu slika se razvuče u
   svoju prirodnu proporciju i prekrije tekst (videlo se na tabletu/telefonu). */
.hero__media > .elementor-widget,
.hero__media .elementor-widget-container{ height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero__inner{ display:block; position:relative; height:100%; }
.hero__copy{ display:block; padding-top:22.7rem; }   /* nadnaslov na y=444 */

.hero__eyebrow{
	font-size:1.8rem;
	font-weight:700;
	line-height:1;
	text-transform:uppercase;
	color:var(--white);
}
.hero__bar,
.hero__eyebrow::after{
	content:"";
	display:block;
	width:18.4rem; height:1.2rem;
	background:var(--blue);
	border-radius:.6rem;
	margin-top:2.5rem;         /* PSD: 490 − 463 */
}
.hero__title{
	font-family:var(--f-head);
	font-weight:900;
	font-size:6rem;
	line-height:9rem;       /* izmereno: razmak linija 90 px */
	color:var(--white);
	margin-top:2.8rem;
}
.hero__title .line{ display:block; }
.hero .btnrow{ margin-top:4.5rem; }    /* PSD: dugmad na y=845 */

/* ============================================================================
   6. INFO TRAKA (1121–1257)
   ========================================================================== */
.infobar{ display:block; background:var(--navy); height:13.6rem; }
.infobar__inner{
	height:100%;
	display:grid;
	grid-template-columns:52.8rem 59.7rem auto;  /* pregrade na 713 i 1310 */
	align-items:center;
}
.infobar__item{
	position:relative;
	display:flex;
	align-items:center;
	gap:2.4rem;
	height:100%;
	padding-left:3.9rem;
}
.infobar__item:nth-child(2){ padding-left:8.1rem; }
.infobar__item:nth-child(3){ padding-left:9.5rem; }
.infobar__text{ display:block; }
.infobar__item + .infobar__item::before{
	content:"";
	position:absolute; left:0; top:50%;
	transform:translateY(-50%);
	width:.4rem; height:9.8rem;
	background:var(--surface);
	border-radius:.2rem;
}
.infobar__ico{
	width:6.1rem; height:6.1rem;
	color:var(--white);
	transition:transform var(--t-move);
}
.infobar__item:hover .infobar__ico{ transform:translateY(-.4rem); }
.infobar__label{
	font-family:var(--f-head);
	font-size:1.8rem; font-weight:600; line-height:2.2rem;
	color:var(--white);
}
.infobar__value{
	font-size:1.8rem; font-weight:400; line-height:2.2rem;
	color:var(--muted);
	margin-top:.8rem;
}
.infobar__value a{ transition:color var(--t-color); }
.infobar__value a:hover{ color:var(--white); }

/* ============================================================================
   7. O NAMA (1259–2231)
   ========================================================================== */
.section--light{ background:var(--surface); }

.about{ display:block; padding:15.4rem 0 17.5rem; }   /* slika kreće na 1411 */
.about__inner{
	display:grid;
	grid-template-columns:64.8rem 85.6rem;
	gap:10.8rem;
	align-items:start;
}

.about__media{ display:block; position:relative; }
.about__media img{
	width:64.8rem; height:64.5rem;
	object-fit:cover;
	border-radius:2rem;
}

/* Značka „20+" — slika ispod, plavi preliv preko nje (PSD: 633,1592 → 869,1828) */
.badge,
.badge2{
	display:block;
	position:absolute;
	left:45rem; top:18.1rem;
	width:23.6rem; height:23.6rem;
	border-radius:2.4rem;
	overflow:hidden;
	color:var(--white);
	box-shadow:0 2rem 4rem -1.6rem rgba(0,32,90,.45);
	transition:transform var(--t-move);
}
.about__media:hover .badge,
.about__media:hover .badge2{ transform:scale(1.03); }
.badge__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* značka „po elementima": pozadina je image widget, tekstovi heading/tekst */
.badge2 .badge__bg2{ position:absolute; inset:0; }
.badge2 .badge__bg2 img{ width:100%; height:100%; object-fit:cover; }
.badge2 .badge__rule2{ margin:.7rem 0 .9rem; }
.badge2 .badge__rule2 .elementor-divider{ padding:0; }
.badge2 .badge__rule2 .elementor-divider-separator{
	display:block; width:18.4rem;
	border:0; height:1.2rem;
	background:var(--white); border-radius:.6rem;
}
.badge::after,
.badge2::after{
	content:"";
	position:absolute; inset:0;
	background:rgba(41,98,180,.82);
}
.badge__body{
	display:block;
	position:relative; z-index:2;
	/* desni odmak 1.6rem: linija je Elementorov divider sirok 100%, pa mu sirinu
	   iz PSD-a (18.4rem = 23.6 - 3.6 - 1.6) daje ova kutija, a ne width iz teme
	   — Elementorov per-post CSS je jaci i vraca ga na 100%. */
	padding:3.3rem 1.6rem 0 3.6rem;
	font-family:var(--f-num);
	font-weight:800;
}
.badge__num{ display:block; font-size:7.52rem; line-height:5.8rem; }
.badge__lead{ display:block; font-size:1.73rem; line-height:1.8rem; margin-top:1.2rem; }
.badge__rule{ display:block; width:18.4rem; height:1.2rem; background:var(--white); border-radius:.6rem; margin:.7rem 0 .9rem; }
.badge__tail{ display:block; font-size:1.73rem; line-height:2.1rem; }

.about__copy{ display:block; }
.about__copy .h2{ margin-top:.8rem; }
.about__copy p + p{ margin-top:3.3rem; }
.about__copy .lead + *{ margin-top:2.8rem; }

.checklist{
	display:grid;
	grid-template-columns:36rem auto;
	gap:2.2rem 3.2rem;
	margin-top:5rem;
}
.checklist li{
	display:flex; align-items:center; gap:.8rem;
	font-size:1.8rem; font-weight:600; line-height:2.2rem;
}
.check{ width:2.8rem; height:2.8rem; color:var(--blue); }
/* kvačicu crta CSS — markup je čist <li>tekst</li> (tekst widget, preživi
   TinyMCE); :has-guard dok je na produkciji stari markup sa .check spanom */
.checklist li:not(:has(.check))::before{
	content:"";
	flex:none;
	width:2.8rem; height:2.8rem;
	background:var(--blue);
	-webkit-mask:url(../icons/accept.png) center/contain no-repeat;
	mask:url(../icons/accept.png) center/contain no-repeat;
}

.about .btnrow{ margin-top:7.6rem; gap:5.7rem; }

/* ============================================================================
   8. USLUGE (2232–3188)
   ========================================================================== */
.services{ display:block; padding:11.8rem 0 16rem; }
.services .svc-grid{ margin-top:15rem; }

.svc-grid{
	display:flex;
	justify-content:space-between;
	align-items:stretch;
}
.svc{
	display:block;
	position:relative;
	width:28.4rem;              /* PSD: 284 px */
	min-height:33.7rem;
	background:var(--surface);
	border-radius:1.2rem;
	padding:8.5rem 3.2rem 0;
	transition:transform var(--t-move), box-shadow var(--t-move);
}
.svc:hover{ transform:translateY(-.6rem); box-shadow:0 2.4rem 4.8rem -2rem rgba(0,58,141,.3); }

/* krug sa ikonicom prelazi preko gornje ivice kartice */
.svc__ico{
	position:absolute;
	left:2.8rem; top:-4.2rem;
	width:8.9rem; height:8.9rem;
	border-radius:50%;
	background:var(--navy);
	display:grid; place-items:center;
	/* beli prsten koji „poje" ugao kartice — u PSD-u je debeo ~12 px
	   (izmereno skeniranjem: krug 216–299, belo 202–215 i 301–314) */
	box-shadow:0 0 0 1.2rem var(--white);
	transition:transform var(--t-move);
}
.svc:hover .svc__ico{ transform:translateY(-.6rem); }
/* SVG ikonice već nose dizajn: bela kontura (stroke) + plava površina (#2962B4).
   Filter bi ih spljoštio u belo — svaka zadržava svoju veličinu iz PSD-a. */
.svc__ico img{ width:auto; height:auto; }

.svc__title{
	font-family:var(--f-head);
	font-size:2.46rem; font-weight:800; line-height:2.8rem;
	color:var(--ink);
}
.svc__text{
	font-size:1.58rem; font-weight:600; line-height:2.5rem;
	color:var(--ink);
	margin-top:3.4rem;
}
.svc__btn{
	position:absolute;
	left:4.1rem; bottom:-2.5rem;   /* dugme visi ispod kartice (PSD: 2992–3054) */
}

/* ============================================================================
   9. AMBIJENT (3189–4110)
   ========================================================================== */
.ambient{ display:block; padding:13rem 0 11.8rem; }
.ambient__inner{
	display:grid;
	grid-template-columns:85.6rem 64.6rem;
	gap:10.8rem;
	align-items:start;
}
.ambient__copy{ display:block; }
.ambient__copy .h2 + *{ margin-top:2.6rem; }

.feat-grid{
	display:grid;
	grid-template-columns:repeat(2, 37rem);
	gap:6.4rem 12.3rem;
}
.feat{ display:block; }
.feat__title,
.feat__title .elementor-heading-title{
	display:flex; align-items:center; gap:1.2rem;
	font-family:var(--f-head);
	font-size:1.8rem; font-weight:700; line-height:2.2rem;
	color:var(--blue);
}
.feat__text{
	font-size:1.6rem; font-weight:600; line-height:2.8rem;
	margin-top:1.4rem;
}

/* Galerija: tri slike u dva stuba + dugme (PSD koordinate su apsolutne) */
.gallery{
	display:block;
	position:relative;
	height:69rem;               /* 3288 → 3978 */
	margin-top:-3.1rem;         /* galerija kreće iznad teksta (PSD y=3288) */
}
.gallery__item{ position:absolute; margin:0; overflow:hidden; border-radius:1.6rem; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item--a{ left:0;      top:0;      width:26rem; height:27.7rem; }
.gallery__item--b{ left:28.5rem; top:6.6rem; width:36rem; height:50.6rem; }
.gallery__item--c{ left:.2rem;  top:29.9rem; width:25.5rem; height:39.1rem; }
.gallery__btn{ position:absolute; left:28.6rem; top:62.8rem; }

/* ============================================================================
   10. UTISCI (4111–4727)
   ========================================================================== */
.testi{
	display:block;
	position:relative;
	background:var(--testi-bg);
	padding:10.5rem 0 9.1rem;
	overflow:hidden;
}
.testi__bg{
	position:absolute; inset:0;
	background:url('../img/utisci-bg.jpg') center/cover no-repeat;
	opacity:.15;
	pointer-events:none;
}
.testi > *{ position:relative; z-index:2; }

.testi__grid{
	display:flex;
	gap:4.7rem;
	margin-top:6.2rem;
	margin-left:9.9rem;        /* PSD: kartice kreću na x=99, ne po kontejneru */
	margin-right:5.4rem;
}
.testi-card{
	display:block;
	width:42.3rem;
	min-height:30.4rem;
	background:var(--white);
	border-radius:1.2rem;
	padding:4.1rem 3.6rem 3rem;
	text-align:center;
	transition:transform var(--t-move), box-shadow var(--t-move);
}
.testi-card:hover{ transform:translateY(-.6rem); box-shadow:0 2.4rem 4.8rem -2rem rgba(0,20,70,.45); }
.stars{ display:flex; justify-content:center; gap:.5rem; }
.star{ width:2.6rem; height:2.6rem; color:var(--gold); }
.testi-card__name{
	font-size:1.8rem; font-weight:600; line-height:2.2rem;
	color:var(--body);
	margin-top:4.3rem;
}
.testi-card__text{
	font-size:1.4rem; font-weight:400; line-height:2.8rem;
	color:var(--body);
	margin-top:1.7rem;
}

/* ============================================================================
   11. AKCIJE (4728–5681)
   ========================================================================== */
.promo{ display:block; padding:12.3rem 0 12.6rem; }
.promo .section-lead{ margin-top:2.4rem; }
.promo__inner{ margin-top:6.7rem; }

.promo__inner{
	display:grid;
	grid-template-columns:53.7rem auto;
	gap:5.8rem;
	align-items:start;
}
.promo__copy{ display:block; padding-top:4.8rem; }
.promo__copy > * + *{ margin-top:2.4rem; }
.promo__copy p + p{ margin-top:2.4rem; }
.promo__copy .btnrow{ margin-top:5.8rem; gap:3rem; }

.promo__cards{
	display:flex;
	gap:2.4rem;
	justify-content:flex-end;
}
.promo-card{
	display:block;
	position:relative;
	width:32.3rem; height:44.8rem;
	background:var(--navy);
	border-radius:1.6rem;
	overflow:hidden;
	transition:transform var(--t-move), box-shadow var(--t-move);
}
.promo-card:hover{ transform:translateY(-.8rem); box-shadow:0 3rem 5rem -2.4rem rgba(0,20,70,.55); }

/* svetlija elipsa u gornjem desnom uglu (PSD: 925,5012 → 1210,5208) */
/* Sve unutar kartice je u PROCENTIMA kartice (PSD: 323 × 448), da odnos ostane
   isti i kad se kartica suzi. U rem merama je slika zuba preklapala naslov na
   svemu ispod 1980 px. */
.promo-card__badge{
	position:absolute;
	left:44.6%; top:-21.4%;
	width:88.2%; height:43.8%;
	border-radius:50%;
	background:var(--blue);
	z-index:2;
}
/* Cene su dva zasebna Elementor widgeta (klijent menja brojku), pa se svaki
   pozicionira posebno — obe su centrirane na x=256 px od leve ivice kartice. */
.promo-card__now,
.promo-card__old{
	position:absolute;
	left:79.3%;
	transform:translateX(-50%);
	z-index:3;
	text-align:center;
	color:var(--white);
	font-family:var(--f-body);
	font-weight:600;
	white-space:nowrap;
}
.promo-card__now{ top:2.7%; font-size:4.14rem; line-height:4rem; }
.promo-card__now .cur{ font-size:2.83rem; }
.promo-card__old{
	top:12.5%;
	font-size:2.09rem; line-height:2.4rem;
}
.promo-card__old .cur{ font-size:1.43rem; }
.promo-card__old::after{
	content:"";
	position:absolute; left:-1.6rem; right:-1.6rem; top:50%;
	height:.5rem;
	background:var(--white);
	border-radius:.25rem;
}
.promo-card__img{
	position:absolute;
	z-index:1;
	transition:transform .6s var(--ease);
}
.promo-card:hover .promo-card__img{ transform:scale(1.05); }
/* 0,3,0 je nužno: most ima `.e-con > .elementor-widget{width:auto}` (0,2,0),
   što je gazilo procenat i slika je na 1440 px izlazila preko naslova. */
.elementor .elementor-element.promo-card__img--png{ left:-25.4%; top:11.2%; width:79.9%; height:auto; }
.elementor .elementor-element.promo-card__img--foto{ inset:0; width:100%; height:100%; }
.promo-card__img--foto img{ width:100%; height:100%; object-fit:cover; }

.promo-card__title{
	position:absolute;
	left:9.9%; top:67.6%;
	z-index:3;
	font-family:var(--f-head);
	font-size:3rem; font-weight:700; line-height:3.4rem;
	color:var(--white);
}
.promo-card__rule{
	position:absolute;
	left:9.3%; top:84.8%;
	z-index:3;
	width:57%; height:.9rem;
	background:var(--white);
	border-radius:.45rem;
}

/* ============================================================================
   12. POKRETNA TRAKA (5682–5827)
   ========================================================================== */
.marquee{
	height:14.6rem;
	background:var(--blue);
	display:flex;
	align-items:center;
	overflow:hidden;
}
.marquee__track{
	display:flex;
	align-items:center;
	gap:2.6rem;
	white-space:nowrap;
	/* 19.08: Aleksandar je trazio 30% pa jos 20% brze -> 42s / 1.56 = 26.9s */
	animation:marquee 27s linear infinite;
	will-change:transform;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__word{
	font-family:var(--f-head);
	font-size:3.5rem; font-weight:700; line-height:1;
	color:var(--white);
}
.marquee__star{ width:3rem; height:3.2rem; color:var(--white); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================================
   13. FUTER (5828–6313) + DONJA TRAKA (6314–6389)
   ========================================================================== */
.site-footer{
	background:linear-gradient(180deg, #003282 0%, var(--navy-dark) 100%);
	color:var(--white);
	padding:12.1rem 0 7.4rem;
}
.site-footer__inner{
	width:153.6rem;                       /* PSD: 221 → 1757 */
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	display:grid;
	grid-template-columns:33.8rem auto 33.8rem;
	gap:6rem;
	align-items:start;
}
/* Futer je Elementor sadržaj (strana 500): njen per-page CSS se štampa POSLE
   main.css, pa most (--display) gubi. Pravi `display` na pravim selektorima
   pobeđuje jer e-con koristi display:var(--display) na specifičnosti 0,1,0. */
.site-footer .site-footer__inner{
	display:grid;
	width:153.6rem; max-width:calc(100% - 6.4rem);
	padding:0;
}
/* ⚠️ 27.08: `width` i `padding` su namerno SKINUTI sa ovog pravila. Bili su
   doslovne vrednosti (0,2,0) i tukli su `width:var(--width)` iz Elementorovog
   `.e-con` (0,1,0), pa kontrola Width na koloni futera nije radila ništa —
   Aleksandar: „sredio bih ga ja ali ti width uopšte ne reaguje na kontejnerima".
   Podrazumevane vrednosti sada daje most preko `--width` / `--padding-*`
   (0,3,0), a kontrola iz panela ga bije jer se štampa POSLE main.css.
   `display:block` OSTAJE doslovan — bez njega per-post `--display:flex`
   (Elementor ga piše i kad ga niko nije dirao) razbije kolone. */
.site-footer .foot-col{ display:block; }
/* Editor futera (strana 500 je canvas, bez <footer> omotača iz teme) — daj
   sadržaju izgled pravog futera: plava pozadina, tri kolone, bele boje */
body.elementor-editor-active .site-footer__inner{
	display:grid;
	grid-template-columns:33.8rem auto 33.8rem;
	gap:6rem;
	align-items:start;
	width:153.6rem; max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	background:linear-gradient(180deg, #003282 0%, var(--navy-dark) 100%);
	color:var(--white);
	padding:6rem 4rem;
	border-radius:1.2rem;
}
body.elementor-editor-active .site-footer__inner .foot-col{ display:block; width:auto; padding:0; }
.foot-title{
	font-family:var(--f-head);
	font-size:2rem; font-weight:700; line-height:2.4rem;
}
.foot-text{
	font-size:1.6rem; font-weight:400; line-height:3.2rem;
	margin-top:1.8rem;
}
.foot-text a{ transition:color var(--t-color); }
.foot-text a:hover{ color:#9CC1F5; }
.foot-rule{
	display:block;
	width:33.8rem; max-width:100%;
	height:.5rem;
	background:var(--white);
	border-radius:.25rem;
	margin-top:.4rem;
}
.foot-col--right .foot-rule{ margin-top:1rem; }
.foot-cta{ margin-top:3.9rem; }

.foot-col--mid{ text-align:center; margin-top:-7rem; }   /* logo je na y=5879 */
/* i jače od Elementorovog `.elementor-widget-image a img[src$=".svg"]{width:48px}` */
.foot-logo img,
.elementor-widget-image.foot-logo a img[src$=".svg"]{ width:10.7rem; height:15.1rem; margin-inline:auto; transition:transform var(--t-move); }
.foot-logo:hover img{ transform:scale(1.04); }
.foot-about{
	font-size:1.5rem; font-weight:600; line-height:2.4rem;
	margin-top:2.4rem;
	line-height:2.4rem;
	max-width:55.8rem;
	margin-inline:auto;
}
.foot-legal{ margin-top:2.9rem; font-size:1.5rem; font-weight:600; }
.foot-legal a{ text-decoration:underline; text-underline-offset:.4rem; transition:color var(--t-color); }
.foot-legal a:hover{ color:#9CC1F5; }

.foot-social{ display:flex; gap:2.1rem; margin-top:3.3rem; }
.foot-social a{ display:block; transition:transform var(--t-move); }

/* Futer „po elementima" (17.08): linija = divider widget, mreže = social-icons.
   Sve mere daje tema — widgeti samo nose klase.
   ⚠️ 27.08: prefiks `.site-footer` je zamenjen UDVOSTRUČENOM klasom (ista
   specifičnost 0,2,0 / 0,3,0, samo bez zavisnosti od pretka). Razlog: strana
   „Futer (sadržaj)" se u Elementoru otvara kao canvas — tamo NEMA <footer
   class="site-footer">, pa se nijedno od ovih pravila nije primenjivalo i
   klijent je u uređivaču video Elementorove podrazumevane SIVE pilule umesto
   belih ikonica („u izmenama kada odem nisu mi te ikonce za mreže").
   Sada uređivač pokazuje isto što i sajt. */
.foot-rule2.foot-rule2{ margin-top:.4rem; }
.foot-col--right .foot-rule2.foot-rule2{ margin-top:1rem; }
.foot-rule2.foot-rule2 .elementor-divider{ padding:0; }
.foot-rule2.foot-rule2 .elementor-divider-separator{
	display:block;
	width:33.8rem; max-width:100%;
	border:0; height:.5rem;
	background:var(--white);
	border-radius:.25rem;
}
.foot-social2.foot-social2{ margin-top:3.3rem; }
.foot-social2.foot-social2 .elementor-social-icons-wrapper{ display:flex; gap:2.1rem; }
.foot-social2.foot-social2 .elementor-social-icon{
	background:none; margin:0; padding:0;
	width:4.9rem; height:4.9rem; font-size:4.2rem; line-height:4.9rem;
	display:grid; place-items:center;
	transition:transform var(--t-move);
}
.foot-social2.foot-social2 .elementor-social-icon:hover{ transform:translateY(-.4rem); }
.foot-social2.foot-social2 .elementor-social-icon i{ color:var(--white); }
.foot-social2.foot-social2 .elementor-social-icon svg{ fill:var(--white); width:4.2rem; height:4.2rem; }
.foot-social a:hover{ transform:translateY(-.4rem); }
.foot-social .dc-ico{ width:4.9rem; height:4.9rem; color:var(--white); }

.colophon{ background:var(--navy); height:7.5rem; }
/* ⚠️ 27.08: donja traka je do sada bila široka `--container` (161rem), a futer iznad
   nje 153,6rem — copyright je zato počinjao 27px LEVO od leve kolone futera, a
   „Izrada web sajta" završavala 27px DESNO od desne. Tako je i u PSD-u (copyright
   192 → 742, kolona futera 221 → 559), ali je Aleksandar 27.08. tražio suprotno:
   „ništa nije poravnato ni sa čim… dole kopirajt i link ka našem sajtu itd".
   ODSTUPANJE OD PSD-a, svesno i na zahtev: donja traka sada deli meru sa futerom,
   pa se copyright poklapa sa levom kolonom, a link sa desnom ivicom desne kolone. */
.colophon__inner{
	width:153.6rem;
	padding:0;
	max-width:calc(100% - 6.4rem);
	margin-inline:auto;
	height:100%;
	display:flex; align-items:center; justify-content:space-between;
	color:var(--white);
	font-size:1.5rem; font-weight:400;
}
.colophon a{ text-decoration:underline; text-underline-offset:.4rem; }

/* ============================================================================
   14. OTKRIVANJE PRI SKROLU
   ========================================================================== */
body.dc-js .reveal{
	opacity:0;
	transform:translateX(-4.6rem);
	transition:opacity .75s ease, transform .75s var(--ease);
	transition-delay:var(--delay, 0s);
	will-change:opacity, transform;
}
body.dc-js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
	body.dc-js .reveal{ opacity:1; transform:none; transition:none; }
	.marquee__track{ animation:none; }
	*{ transition-duration:.01ms !important; }
}

/* ============================================================================
   15. MOST KA ELEMENTORU
   -----------------------------------------------------------------------------
   Sadržaj se uređuje u Elementoru, ali mere ostaju ovde. Elementor kontejneri i
   widgeti nose iste klase kao ručni markup (`hero`, `h2`, `svc`…), a ova sekcija
   samo skida Elementorove podrazumevane vrednosti i pušta da tipografija sa
   omotača propadne na <h1>/<p> unutra.
   ========================================================================== */

/* Elementor za SVAKI kontejner generiše pravilo specifičnosti 0,3,0
   (`.elementor-15 .elementor-element.elementor-element-xxx{--display:flex}`),
   i to se ispisuje PRE našeg fajla. Zato se ovde ide na istu specifičnost —
   `--display:block` gasi Elementorov flex, a raspored dalje rade obične klase
   (`.about__inner{display:grid}` pobeđuje jer se učitava kasnije). */
/* ⚠️ 20.08: most se primenjuje SAMO tamo gde je raspored zaključan PSD-om —
   naslovna, zaglavlje i futer. Ranije je gađao SVE kontejnere na sajtu, pa je
   klijentu gasio Elementorove kontrole: postavi „Row" i ništa se ne desi, slike
   i dalje padnu jedna ispod druge; isto i za gap i padding. Na unutrašnjim
   stranama (posle reseta 18.08 to je običan sadržaj, ne PSD raspored) Elementor
   od sada radi normalno — kao na referenci dentalmc.rs. Prijavio Aleksandar. */
/* ⚠️ 27.08: prefiks je u `:where()` NAMERNO — bez njega selektor je 0,4,0 i bio je
   JAČI od Elementorovog per-post pravila (0,3,0), pa u zaglavlju i futeru nijedna
   kontrola kontejnera nije radila („width uopšte ne reaguje na kontejnerima",
   Aleksandar 27.08). `:where()` ne dodaje specifičnost → izjednačeno na 0,3,0, a
   dalje odlučuje REDOSLED, i on je različit na tri mesta — i to je tačno ono što
   treba:
     · naslovna  — Elementorov CSS je u `elementor-frontend-inline-css` u <head>,
                   PRE main.css → tema pobeđuje → raspored po PSD-u ostaje zaključan;
     · zaglavlje — `<style id="elementor-post-505">` se štampa POSLE main.css → klijent
       i futer     pobeđuje → kontrole (width, padding, gap, smer) rade normalno.
   Provereno merenjem: linija 20 (naslovna) vs 28 (main.css) vs 48 / 511. */
:where(body.home, .site-header, .site-footer) .elementor .elementor-element.e-con{
	--display:block;
	--width:auto;               /* 100% bi ignorisalo margine (npr. .testi__grid) */
	--content-width:100%;
	--min-height:auto;
	--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
	--gap:0px; --row-gap:0px; --column-gap:0px;
	--flex-direction:row;       /* Elementor podrazumeva column — mi rasporede pišemo sami */
	--flex-wrap:initial;
	--justify-content:initial;
	--align-items:initial;
	--align-content:initial;
}
.elementor .elementor-element.elementor-widget{ --kit-widget-spacing:0px; }
/* HTML widget ne sme da bude „containing block" — inače se apsolutno pozicionirani
   delovi (značka 20+, pozadina utisaka, elipsa cene) vežu za widget umesto za sekciju. */
.elementor .elementor-element.elementor-widget-html{ position:static; }
/* Elementorov `--content-width` je već 100% gore; `max-width:none` je ovde nekad
   stajalo i gazilo `.container{max-width:calc(100% - 6.4rem)}` — zbog toga je na
   telefonu sadržaj bio širok 1385 px. Ograničava se samo Elementorov omotač. */
.e-con > .e-con-inner{ max-width:none; }
/* widget je običan blok — širinu i poziciju određuje klasa na njemu */
.e-con > .elementor-widget{ max-width:none; width:auto; }

/* Tipografija se postavlja na omotač widgeta i nasleđuje unutra */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor .elementor-widget-container > *{
	font:inherit;
	color:inherit;
	letter-spacing:inherit;
	text-transform:inherit;
	margin:0;
}
.elementor-widget-text-editor .elementor-widget-container > * + *{ margin-top:1.5rem; }

/* Dugme: Elementor pravi <a class="elementor-button"> u omotaču sa našom klasom */
.dc-btn .elementor-button{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20.5rem;              /* PSD: 205 px */
	height:6.2rem;              /* PSD: 62 px */
	padding:0 5.6rem 0 0;       /* pun prostor za krug (49 + 7) */
	border-radius:var(--radius-pill);
	font-family:var(--f-body);
	font-size:1.6rem;
	font-weight:600;
	line-height:1;
	color:var(--white);
	background:var(--blue);
	overflow:hidden;
	transition:background var(--t-color), transform var(--t-move), box-shadow var(--t-move);
}
.dc-btn .elementor-button-content-wrapper{ position:relative; z-index:2; }
.dc-btn .elementor-button-text{ white-space:nowrap; }

/* 0,3,0 — da nijedno Elementorovo responzivno pravilo ne dira pilulu */
.elementor .elementor-element.dc-btn .elementor-button{ width:20.5rem; flex:0 0 auto; }
.elementor .elementor-element.dc-btn--wide .elementor-button{ width:25.7rem; }
.dc-btn--wide  .elementor-button{ width:25.7rem; }
.dc-btn--navy  .elementor-button{ background:var(--navy); }
.dc-btn--ghost .elementor-button{ background:transparent; box-shadow:inset 0 0 0 .2rem var(--white); }
/* Isti šablon za SVETLU podlogu — `--ghost` je beo pa na beloj strani nestane.
   Dodato 20.08. za par dugmadi na dnu unutrašnjih strana (Aleksandrov zahtev:
   „jedno da bude zakažite i drugo može cenovnik", izgled kao na naslovnoj). */
.dc-btn--outline .elementor-button{ background:transparent; color:var(--blue); box-shadow:inset 0 0 0 .2rem var(--blue); }
/* Ikonica mora da bije i `.dc-btn--plus` koje je niže u fajlu i boji je u belo
   (beo plus na beloj podlozi = nevidljiv), zato obe klase u selektoru. */
.dc-btn--outline .elementor-button::before,
.dc-btn--outline.dc-btn--plus .elementor-button::before{ background:var(--blue); }
.dc-btn--outline .elementor-button:hover{ background:rgba(41,98,180,.08); }

/* krug sa ikonicom — kao ::after, pa dugme ostaje običan Elementor widget */
.dc-btn .elementor-button::after{
	content:"";
	position:absolute;
	right:.7rem; top:50%;
	transform:translateY(-50%);
	width:4.9rem; height:4.9rem;
	border-radius:50%;
	background:var(--white);
	-webkit-mask:none; mask:none;
	z-index:2;
	transition:transform var(--t-move);
}
.dc-btn .elementor-button::before{
	content:"";
	position:absolute;
	right:1.6rem; top:50%;
	transform:translateY(-50%);
	width:3.1rem; height:3.1rem;
	background:var(--navy);
	-webkit-mask:var(--ico) center/contain no-repeat;
	mask:var(--ico) center/contain no-repeat;
	z-index:3;
	transition:transform var(--t-move);
}
/* ikonica po modifikatoru — `--ico` je maska koju čita ::before */
.dc-btn--plus{    --ico:url('../icons/plus.png'); }
.dc-btn--support{ --ico:url('../icons/customer-support.png'); }
.dc-btn--camera{  --ico:url('../icons/camera.png'); }
.dc-btn--list{    --ico:url('../icons/order-list.png'); }

/* ⚠️ 27.08 — par dugmadi na dnu strane (`dc-dugmad-dno`) nije mogao da se poravna
   sa tekstom iznad njega (Aleksandar: „ove dugmiće ne mogu da poravnam u levo sa
   tekstom"). Uzrok nije poravnanje nego PADDING: Elementor svakom kontejneru daje
   podrazumevanih 10px sa svake strane, pa kad kontejner sa dugmadima stoji UNUTAR
   istog kontejnera u kom su i tekst widgeti, dugmad kreću 10px desno od teksta —
   tekst widget nema svoj padding, kontejner ima.
   Padding se gasi u OBA slučaja — i kad je blok ugnježden (o-nama) i kad je
   samostalan kontejner na vrhu strane (estetska): u oba je on brat susednim
   tekstovima, pa bez sopstvenog paddinga kreće tačno odakle i oni. Provereno
   simulacijom na produkciji: /o-nama/ 460→450 (tekst 450), /estetska/ 450→440
   (tekst 440). Specifičnost 0,1,0 — kontrola Padding iz panela (0,3,0) bije ovo. */
.dc-dugmad-dno{
	--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
}

/* „plus" je gotov krug — nema belu podlogu ispod */
.dc-btn--plus .elementor-button::after{ background:none; }
.dc-btn--plus .elementor-button::before{
	right:.7rem;
	width:4.5rem; height:4.5rem;
	background:var(--white);
}
.dc-btn .elementor-button:hover{ transform:translateY(-.3rem); }
.dc-btn--plus .elementor-button:hover::before{ transform:translateY(-50%) rotate(90deg); }
.dc-btn:not(.dc-btn--plus) .elementor-button:hover::after{ transform:translateY(-50%) scale(1.06); }
.dc-btn--blue  .elementor-button:hover{ background:#2f6cc4; box-shadow:0 1.4rem 2.8rem -1rem rgba(41,98,180,.55); }
.dc-btn--navy  .elementor-button:hover{ background:#00448f; box-shadow:0 1.4rem 2.8rem -1rem rgba(0,58,141,.55); }
.dc-btn--ghost .elementor-button:hover{ background:rgba(255,255,255,.12); }

/* ============================================================================
   16. UNUTRAŠNJE STRANE
   -----------------------------------------------------------------------------
   PSD pokriva samo naslovnu. Raspored je po dogovoru sa Aleksandrom — kao na
   dentalmc.rs, levi meni usluga i sadržaj desno — a boje i tipografija su iz PSD-a.
   ========================================================================== */
.page-hero{
	background:linear-gradient(135deg, #000E4E 0%, #003A8D 60%, #00265F 100%);
	color:var(--white);
	padding:9rem 0 8rem;
}
.page-hero__eyebrow{
	font-size:1.6rem; font-weight:700; line-height:1;
	text-transform:uppercase;
	color:rgba(255,255,255,.7);
}
.page-hero__title{
	font-family:var(--f-head);
	font-weight:900;
	font-size:5.4rem;
	line-height:6.2rem;
	margin-top:1.6rem;
}
.crumbs{ margin-top:2rem; font-size:1.6rem; font-weight:600; color:rgba(255,255,255,.75); }
.crumbs a{ transition:color var(--t-color); }
.crumbs a:hover{ color:var(--white); }
.crumbs span[aria-hidden]{ margin-inline:.8rem; }

.page-body{ padding:9rem 0 11rem; }
.page-body__inner{
	display:grid;
	grid-template-columns:34rem auto;
	gap:8rem;
	align-items:start;
}

/* ---- levi meni ---- */
.sidebar{ position:sticky; top:3rem; display:grid; gap:2.4rem; }
.sidebar__title{
	font-family:var(--f-head);
	font-size:2.2rem; font-weight:800; line-height:2.8rem;
	color:var(--ink);
}
.sidebar__nav{ background:var(--surface); border-radius:1.6rem; padding:3rem 2.8rem; }
.sidebar__menu{ margin-top:2rem; }
.sidebar__menu li + li{ border-top:1px solid rgba(15,49,58,.1); }
.sidebar__menu a{
	display:block;
	padding:1.5rem 0 1.5rem 2rem;
	position:relative;
	font-size:1.7rem; font-weight:600; line-height:2.3rem;
	color:var(--ink);
	transition:color var(--t-color), padding-left var(--t-color);
}
.sidebar__menu a::before{
	content:"";
	position:absolute; left:0; top:50%;
	width:.8rem; height:.8rem;
	margin-top:-.4rem;
	border-radius:50%;
	background:var(--blue);
	opacity:.35;
	transition:opacity var(--t-color), transform var(--t-move);
}
.sidebar__menu a:hover{ color:var(--blue); padding-left:2.8rem; }
.sidebar__menu a:hover::before{ opacity:1; transform:scale(1.3); }
.sidebar__menu .is-current > a{ color:var(--blue); font-weight:700; }
.sidebar__menu .is-current > a::before{ opacity:1; }

.sidebar__cta{
	background:var(--navy);
	color:var(--white);
	border-radius:1.6rem;
	padding:3rem 2.8rem;
	text-align:center;
}
.sidebar__cta-ico{ width:5.4rem; height:5.4rem; color:var(--white); margin:0 auto; }
.sidebar__cta-label{ font-family:var(--f-head); font-size:1.9rem; font-weight:700; margin-top:1.4rem; }
.sidebar__cta-tel{ font-size:2.2rem; font-weight:600; margin-top:.6rem; }
.sidebar__cta .btn{ margin-top:2rem; }

.sidebar__hours{ background:var(--surface); border-radius:1.6rem; padding:3rem 2.8rem; }
.sidebar__hours p{ margin-top:1.4rem; font-size:1.6rem; line-height:2.6rem; }

/* ---- sadržaj ---- */
.page-content > * + *{ margin-top:2.4rem; }
/* Na Elementor stranama su widgeti unutar e-con kontejnera, pa ih `> * + *`
   ne vidi — razmak ide na widget koji sledi iza widgeta. Mora PRE pravila za
   naslove (ista specifičnost 0,2,0 — naslovu njegovih 4.8rem daje kasniji red). */
.page-content .elementor-widget + .elementor-widget{ margin-top:2.4rem; }
/* kontejneri u toku sadržaja (akordeon2, galerija-grid…) razmiču se kao widgeti;
   .cta-blok je izuzet (nosi svoj veći razmak), a `>` ne pušta pravilo na
   ugnježdene kontejnere (faq-item unutar akordeona) */
.page-content .elementor > .elementor-widget + .e-con:not(.cta-blok),
.page-content .elementor > .e-con + .elementor-widget,
.page-content .elementor > .e-con + .e-con:not(.cta-blok){ margin-top:2.4rem; }
/* Tipografija ide na OMOTAČ widgeta — most pušta `font:inherit` na <h2>/<p>
   unutra, pa bi pravilo na samom <h2> izgubilo od njega. */
.page-content h2,
.page-content .elementor-widget-heading{
	font-family:var(--f-head);
	font-size:3.4rem; font-weight:900; line-height:4.2rem;
	color:var(--ink);
	margin-top:4.8rem;
}
.page-content h3,
.page-content .elementor-widget-heading[data-widget_type="heading.default"] h3{
	font-family:var(--f-head);
	font-size:2.4rem; font-weight:700; line-height:3.2rem;
	color:var(--blue);
	margin-top:3.6rem;
}
/* ⚠️ 20.08 — Elementorovi widgeti sa sopstvenim naslovom moraju da PUSTE boju.
   Naslov pitanja u `nested-accordion` je <h3 class="e-n-accordion-item-title-text">
   i stoji u .page-content, pa ga gornje pravilo boji plavo DIREKTNO. Elementorova
   kontrola Color piše na omotač i računa na nasleđivanje — direktno pravilo uvek
   bije nasleđeno, zato je Aleksandru boja teksta „ne reagovala" dok se ikonica
   menjala. `inherit` vraća kontrolu panelu.
   Rešeno OVAKO, a ne sa `:not()` na gornjem pravilu: `:not([class*=…])` bi digao
   specifičnost sa 0,1,1 na 0,3,1 i pregazio `.kontakt-kartica h3{margin-top:1.6rem}`
   — kontakt strana je zbog toga narasla tačno 14px. */
.page-content [class*="e-n-accordion"] h3,
.page-content h3[class*="e-n-accordion"]{ color:inherit; font-family:inherit; margin-top:0; }

.page-content .elementor-widget-heading:first-child{ margin-top:0; }
.page-content > *:first-child{ margin-top:0; }
.page-content p{ font-size:1.8rem; line-height:2.8rem; }
/* Generička pravila važe SAMO za običnu tekstualnu listu — kartične liste
   (.lista-check, .koraci, .usluge-lista) imaju svoje mere i :not() ih mora
   izuzeti, inače im viša specifičnost (0,3,1+) pregazi padding i ::before.
   ⚠️ 20.08: `:not([class*="elementor-"])` je OBAVEZAN. Elementorova traka sa
   alatkama iznad svakog elementa u uređivaču je <ul class="elementor-editor-
   element-settings"> i stoji UNUTAR .page-content — bez ovog izuzetka dobija
   `display:grid` (ikonice se poređaju USPRAVNO) i plavi krug iz `li::before`
   pored svake. To je „polomljena traka" koju je Aleksandar prijavio i koju,
   kaže, vidi na svim našim sajtovima — isti obrazac `.sadrzaj ul{display:grid}`
   je svuda. Tema NIKAD ne sme da stilizuje liste bez ovog izuzetka. */
.page-content ul:not(.cenovnik):not(.sidebar__menu):not(.lista-check):not(.koraci):not(.usluge-lista):not([class*="elementor-"]){ display:grid; gap:1.4rem; }
.page-content ul:not(.cenovnik):not(.sidebar__menu):not(.lista-check):not(.koraci):not(.usluge-lista):not([class*="elementor-"]) li{
	position:relative;
	padding-left:3.2rem;
	font-size:1.8rem; line-height:2.8rem;
}
.page-content ul:not(.cenovnik):not(.sidebar__menu):not(.lista-check):not(.koraci):not(.usluge-lista):not([class*="elementor-"]) li::before{
	content:"";
	/* 28.08 (Aleksandar): „smanji mi malo ove sistemske bulete… za 50%".
	   1,4rem → 0,7rem. `top` ide sa .9 na 1.25rem da krug ostane na ISTOJ
	   sredini kao pre (bilo: .9 + .7 = 1,6rem; sad: 1,25 + .35 = 1,6rem) —
	   menja se samo veličina, ništa se ne pomera. */
	position:absolute; left:0; top:1.25rem;
	width:.7rem; height:.7rem;
	border-radius:50%;
	background:var(--blue);
}
/* naslov na vrhu strane (H2 + plava linija ispod), po uzoru na dentalmc.rs —
   18.08, dodato na svih 12 unutrašnjih strana ispred uvodnog pasusa (.lead) */
.page-content .naslov-uvod{
	display:inline-block;
	border-bottom:.3rem solid var(--blue);
	padding-bottom:1rem;
	margin:0 0 2.4rem;
}
.page-content .naslov-uvod .elementor-heading-title{
	font-family:var(--f-head) !important; font-size:2.6rem; font-weight:800;
	color:var(--ink) !important;
	margin:0;
}
/* Uvodni pasus kao izdvojen blok.
   ⚠️ 20.08: pozadina, zaobljenje i padding su prebačeni sa samog <p class="lead">
   na OMOTAČ widgeta, a boja teksta ide preko `inherit`. Razlog: Elementorove
   kontrole (Background, Border Radius, Padding, Text Color) pišu na omotač —
   dok je tema stilizovala <p> direktno, panel nije imao nikakvog efekta i
   klijent tu sivu pozadinu nije mogao da promeni. Sada tema daje podrazumevani
   izgled, a svaka izmena iz Elementora je pregazi. `:where()` je tu namerno:
   bez njega je pravilo 0,3,0 — izjednačeno sa Elementorovim per-element CSS-om,
   a naš fajl se učitava POSLE njega pa bi tema pobeđivala i panel opet ne bi
   radio. `:where()` nosi specifičnost 0, pa pravilo pada na 0,2,0 i uredno gubi
   od Elementora kad korisnik nešto zada.
   Izgled je nepromenjen — provereno merenjem svih 14 strana. */
.page-content .elementor-widget-text-editor:where(:has(.lead)){
	position:relative;
	background:var(--surface);
	border-radius:1.6rem;
	padding:3rem 3.2rem 3rem 4.4rem;
	color:var(--ink);
}
/* Plava crtica — kratka i zaobljena, zalepljena za LEVU IVICU sivog bloka.
   ⚠️ 20.08, tri kruga dok nije sela:
     1. `.lead::before` — vezana za <p>; čim se promeni Padding widgeta tekst se
        pomeri a crtica ostane napolju („linija mi beži").
     2. `::before` na omotaču ali sa `left:2rem` — i dalje fiksna mera, pa kad je
        padding spušten na 11px crtica je upala PREKO teksta.
     3. `border-left` — nije se lomilo, ali crtica postane puna visina ivice i
        izgubi se izgled kratke crtice.
   `left:0` je ono što radi: to je leva ivica padding-boxa, dakle NE zavisi od
   vrednosti paddinga — koliki god klijent zada, crtica stoji na ivici i tekst
   počinje iza nje. `top/bottom` je drže kratkom.
   `:where()` drži specifičnost na 0,2,0 da Elementorove kontrole i dalje biju. */
.page-content .elementor-widget-text-editor:where(:has(.lead))::before{
	content:"";
	position:absolute; left:0; top:1.6rem; bottom:1.6rem;
	width:.6rem;
	border-radius:.3rem;
	background:var(--blue);
	pointer-events:none;
}
.page-content .lead{
	position:relative;
	margin:0;                   /* padding je sada na omotaču — margina <p> bi se sabrala */
	font-size:2rem; line-height:3.2rem;
	color:inherit;
	font-weight:600;
}
/* Plava crtica levo. ⚠️ 20.08: `top/bottom` su spušteni na 0 jer padding više
   nije na <p class="lead"> nego na omotaču widgeta — sa starim `3rem` crtica je
   dobijala visinu 0 i nestajala. `left` je negativan iz istog razloga: prostor
   za nju sada pravi padding omotača. */
.page-content .lead::before{ content:none; }   /* crticu sada crta omotač (gore) */

/* Crtica iznad naslova je izbačena (16.08.2026, Mijat) — na Elementor stranama
   su se crtale dve (omotač + h2) i delovale kao greška. */

/* lista prednosti — kartice sa kvačicom */
.page-content .lista-check{ display:grid; gap:1.6rem; color:var(--ink); }
.page-content .lista-check li{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:0 1.6rem;
	align-items:start;
	background:var(--surface);
	border-radius:1.4rem;
	padding:2.2rem 2.6rem;
	padding-left:2.6rem;
	font-size:1.7rem; line-height:2.7rem;
	transition:transform var(--t-move), box-shadow var(--t-move);
}
.page-content .lista-check li:hover{ transform:translateY(-.3rem); box-shadow:0 1.6rem 3.2rem -1.8rem rgba(0,58,141,.35); }
/* Kvačicu crta CSS — markup je čist <li><strong>…</strong><span>…</span></li>,
   pa klijent stavke menja u tekst editoru. (:has-guard: dok na produkciji još
   stoji stari markup sa .dc-ico, pseudo-ikonica se ne duplira.) */
.page-content .lista-check li::before{ display:none; }
.page-content .lista-check li:not(:has(.dc-ico))::before{
	content:"";
	display:block;
	grid-column:1; grid-row:1;
	width:2.8rem; height:2.8rem; margin-top:.2rem;
	background:var(--blue);
	-webkit-mask:url(../icons/accept.png) center/contain no-repeat;
	mask:url(../icons/accept.png) center/contain no-repeat;
}
.page-content .lista-check li > strong,
.page-content .lista-check li > span{ grid-column:2; }
.page-content .lista-check li > .dc-ico{ width:2.8rem; height:2.8rem; color:var(--blue); margin-top:.2rem; }
.page-content .lista-check .telo{ display:block; }
/* ⚠️ 20.08: boje idu preko `inherit`/`opacity` umesto direktnih vrednosti —
   inače Elementorova kontrola Text Color na omotaču nema efekta (direktno
   pravilo bije nasleđeno). Razlika naslov/opis se čuva prozirnošću. */
.page-content .lista-check strong{ display:block; font-family:var(--f-head); font-size:1.9rem; font-weight:700; color:inherit; }
.page-content .lista-check span{ display:block; margin-top:.4rem; color:inherit; opacity:.72; }

/* koraci — numerisano */
.page-content .koraci{ display:grid; gap:1.6rem; counter-reset:korak; }
.page-content .koraci li{
	position:relative;
	counter-increment:korak;
	padding:1.8rem 2.4rem 1.8rem 7.2rem;
	background:var(--surface);
	border-radius:1.4rem;
	font-size:1.7rem; line-height:2.7rem;
}
.page-content .koraci li::before{
	content:counter(korak);
	position:absolute;
	left:2.2rem; top:50%;
	transform:translateY(-50%);
	width:3.6rem; height:3.6rem;
	border-radius:50%;
	background:var(--navy);
	color:var(--white);
	font-family:var(--f-head);
	font-size:1.7rem; font-weight:800;
	display:grid; place-items:center;
}

/* ---- akordeon (česta pitanja na stranama usluga, po uzoru na dentalmc) ---- */
.akordeon{ display:grid; gap:1.2rem; }
.akordeon details{ border-radius:1.4rem; background:var(--surface); overflow:hidden; }
.akordeon summary{
	list-style:none; cursor:pointer;
	display:flex; align-items:center; justify-content:space-between; gap:1.6rem;
	padding:1.8rem 2.4rem;
	font-family:var(--f-head); font-size:1.8rem; font-weight:700; line-height:2.6rem;
	color:var(--ink);
	transition:background var(--t-color), color var(--t-color);
}
.akordeon summary::-webkit-details-marker{ display:none; }
.akordeon summary::after{
	content:"+";
	flex:0 0 auto;
	font-family:var(--f-head); font-size:2.4rem; font-weight:700; line-height:1;
	color:var(--blue);
	transition:color var(--t-color);
}
.akordeon summary:hover{ background:rgba(0,58,141,.08); }
.akordeon details[open] summary,
.akordeon details[open] summary:hover{ background:var(--blue); color:var(--white); }
.akordeon details[open] summary::after{ content:"–"; color:var(--white); }
.akordeon__telo{ padding:1.8rem 2.4rem 2rem; }
.akordeon__telo p{ font-size:1.7rem; line-height:2.7rem; }

/* ---- akordeon 2.0 — Elementor kontejneri (pitanje = heading widget, odgovor =
   tekst widget), pa klijent sve menja kao tekst. Ponašanje daje main.js;
   bez JS-a — uključujući Elementor editor — sve stavke su otvorene. ---- */
.akordeon2{ display:grid; gap:1.2rem; }
.akordeon2 .faq-item{ border-radius:1.4rem; background:var(--surface); overflow:hidden; }
/* unutar naših kontejnera razmak daje gap/padding, ne widget margina (1080) */
.page-content .e-con .elementor-widget + .elementor-widget{ margin-top:0; }
/* jače od .page-content .elementor-widget-heading (0,3,1) — tipografija pitanja */
.page-content .akordeon2 .faq-pitanje.elementor-widget-heading{
	font-family:var(--f-head); font-size:1.8rem; font-weight:700; line-height:2.6rem;
	margin-top:0;
	position:relative;
	cursor:pointer;
	padding:1.8rem 6.4rem 1.8rem 2.4rem;
	color:var(--ink);
	transition:background var(--t-color), color var(--t-color);
}
.akordeon2 .faq-pitanje .elementor-heading-title,
.page-content .akordeon2 .faq-pitanje[data-widget_type="heading.default"] h3{
	font:inherit; color:inherit; margin:0;
}
.akordeon2 .faq-pitanje::after{
	content:"+";
	position:absolute; right:2.4rem; top:50%; transform:translateY(-50%);
	font-family:var(--f-head); font-size:2.4rem; font-weight:700; line-height:1;
	color:var(--blue);
	transition:color var(--t-color);
}
.akordeon2 .faq-pitanje:hover{ background:rgba(0,58,141,.08); }
.page-content .akordeon2 .je-otvoren .faq-pitanje.elementor-widget-heading,
.page-content .akordeon2 .je-otvoren .faq-pitanje.elementor-widget-heading:hover{
	background:var(--blue); color:var(--white);
}
.akordeon2 .je-otvoren .faq-pitanje::after{ content:"–"; color:var(--white); }
.akordeon2 .faq-odgovor{
	display:grid;
	grid-template-rows:1fr;      /* podrazumevano otvoreno — editor i no-JS fallback */
	padding-left:2.4rem; padding-right:2.4rem;
	padding-top:1.8rem; padding-bottom:2rem;
	overflow:hidden;
	transition:grid-template-rows .35s var(--ease), padding-top .35s var(--ease), padding-bottom .35s var(--ease);
}
.akordeon2 .faq-odgovor > .elementor-widget-container{ min-height:0; }
.akordeon2 .faq-odgovor p{ font-size:1.7rem; line-height:2.7rem; }
/* zatvaranje samo kad JS radi — u editoru je sve vidljivo i editabilno */
body.dc-js .akordeon2 .faq-item:not(.je-otvoren) .faq-odgovor{
	grid-template-rows:0fr;
	padding-top:0; padding-bottom:0;
}
/* Cenovnik redovi (.cenovnik-red) nisu .faq-odgovor (dva widgeta — naziv i
   cena — ne jedan tekst widget), pa grid-template-rows trik ne važi za njih;
   zatvaranje ide direktno preko display:none (18.08, akordeon nije radio). */
body.dc-js .akordeon2 .faq-item:not(.je-otvoren) .cenovnik-red{
	display:none;
}
/* U Elementor editoru stavka stoji kao kolona (pitanje pa odgovor ispod) —
   editor svojim inline stilovima vraća flex-row, pa se ovde gazi pravim display-om */
body.elementor-editor-active .akordeon2 .faq-item{
	display:flex; flex-direction:column; align-items:stretch;
}
body.elementor-editor-active .akordeon2 .faq-pitanje,
body.elementor-editor-active .akordeon2 .faq-odgovor{ width:100%; }

/* ---- NATIVNI Elementor akordeoni (27.08) ------------------------------------
   Posle reseta 18.08. cenovnik koristi PRAVI Elementorov `accordion` widget, a
   nove akordeone Elementor 4.x dodaje kao `nested-accordion`. Nijedan od njih do
   sad nije bio stilizovan — na sajtu su stajali kao goli sivi okviri, ništa nalik
   ostatku sajta (Aleksandar 27.08: „ne valja ovaj accordian i dalje").
   Ovde dobijaju isti izgled koji već ima `.akordeon` iz teme: svetla zaobljena
   stavka, +/− marker, plava traka kad je otvorena.

   Namerno NIJE vezano za `.page-content` — strana se u Elementoru otvara kao
   canvas i tamo tog omotača nema, pa bi uređivač opet pokazivao nešto drugo nego
   sajt (ista greška kao sa ikonicama mreža u futeru).
   Specifičnost je 0,1,0 / 0,2,0 — Elementorove kontrole (Style panel) pišu 0,3,0
   i POSLE ovog fajla, pa svaka vrednost koju klijent zada u panelu i dalje
   pobeđuje. Bez ijednog `!important`. Položaj ikonice (levo/desno) se namerno ne
   dira — to je kontrola „Icon Position". ---------------------------------------- */
.elementor-widget-accordion .elementor-accordion{ display:grid; gap:1.2rem; }
.elementor-widget-accordion .elementor-accordion-item{
	border:0;
	border-radius:1.4rem;
	background:var(--surface);
	overflow:hidden;
}
.elementor-widget-accordion .elementor-tab-title{
	display:flex; align-items:center; gap:1.6rem;
	padding:1.8rem 2.4rem;
	border:0;
	background:none;
	font-family:var(--f-head); font-size:1.8rem; font-weight:700; line-height:2.6rem;
	color:var(--ink);
	transition:background var(--t-color), color var(--t-color);
}
.elementor-widget-accordion .elementor-accordion-title{ font:inherit; color:inherit; }
.elementor-widget-accordion .elementor-accordion-icon{ width:auto; color:var(--blue); }
.elementor-widget-accordion .elementor-accordion-icon svg{ width:1.8rem; height:1.8rem; fill:currentColor; }
.elementor-widget-accordion .elementor-tab-title:hover{ background:rgba(0,58,141,.08); }
.elementor-widget-accordion .elementor-tab-title.elementor-active,
.elementor-widget-accordion .elementor-tab-title.elementor-active:hover{
	background:var(--blue); color:var(--white);
}
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon{ color:var(--white); }
.elementor-widget-accordion .elementor-tab-content{
	border:0;
	padding:1.8rem 2.4rem 2rem;
	font-size:1.7rem; line-height:2.7rem;
	color:var(--body);
}

/* isti izgled za `nested-accordion` (Elementor 4.x ga nudi kao podrazumevani) */
.elementor-widget-n-accordion .e-n-accordion{ display:grid; gap:1.2rem; }
.elementor-widget-n-accordion .e-n-accordion-item{
	border-radius:1.4rem;
	background:var(--surface);
	overflow:hidden;
}
.elementor-widget-n-accordion .e-n-accordion-item-title{
	padding:1.8rem 2.4rem;
	font-family:var(--f-head); font-size:1.8rem; font-weight:700; line-height:2.6rem;
	color:var(--ink);
	transition:background var(--t-color), color var(--t-color);
}
.elementor-widget-n-accordion .e-n-accordion-item-title-text{ font:inherit; color:inherit; }
.elementor-widget-n-accordion .e-n-accordion-item-title-icon{ color:var(--blue); }
.elementor-widget-n-accordion .e-n-accordion-item-title-icon svg{ width:1.8rem; height:1.8rem; fill:currentColor; }
.elementor-widget-n-accordion .e-n-accordion-item-title:hover{ background:rgba(0,58,141,.08); }
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title,
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title:hover{
	background:var(--blue); color:var(--white);
}
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon{ color:var(--white); }

/* blok sa pozivom na akciju na dnu strane */
.page-content .cta-blok{
	background:linear-gradient(135deg, #00195C 0%, #003A8D 100%);
	color:var(--white);
	border-radius:2rem;
	padding:4rem 4.4rem;
	display:grid;
	gap:1.2rem;
	/* margine html widgeta (2.4) i unutrašnjeg div-a (5.6) su se ranije
	   SASTAVLJALE (collapse) u 5.6 — kontejner nosi istu vrednost */
	margin-top:5.6rem;
}
/* i jače od .page-content .elementor-widget-heading[data-widget_type] h3 (0,3,1) */
.page-content .cta-blok h3,
.page-content .cta-blok .elementor-widget-heading[data-widget_type="heading.default"] h3{
	font-family:var(--f-head); font-size:2.6rem; font-weight:800; color:var(--white); margin:0;
}
.page-content .cta-blok{ color:rgba(255,255,255,.85); }
.page-content .cta-blok p{ font-size:1.7rem; line-height:2.7rem; color:inherit; }
.page-content .cta-blok a.tel{
	font-family:var(--f-head);
	font-size:2.8rem; font-weight:800;
	color:var(--white);
	margin-top:.6rem;
}
.page-content .cta-blok a.tel:hover{ color:#9CC1F5; }
/* cta kao kontejner (heading + tekst widget): razmak p → p(a.tel) kao ranije
   između pasusa i broja (gap 1.2 + margin .6) */
.page-content .cta-blok p + p{ margin-top:1.8rem; }

/* ---- pogodnosti pri plaćanju (icon-box widgeti, po uzoru na dentalmc) ---- */
.pay-grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:3.2rem 4rem;
}
/* 18.08 — icon-box widget zamenjen sa TRI POSEBNA widgeta (icon, heading,
   text-editor) u .pay-box kontejneru, da se ikonica i tekst kliknu i menjaju
   nezavisno (isti razlog kao razdvajanje cenovnik naziv/cena).
   Zamka #1 (playbook 08): NOVI kontejner nema per-element --display/--flex-
   -direction override, pa bridž niže specifičnosti gubi od Elementorovog
   .e-con default-a (column za display, ali flex-direction:row iz NAŠEG
   bridža — ovde nam treba baš column, pa idemo na var() istom
   specifičnošću kao bridž da sigurno pobedi). */
.elementor .elementor-element.e-con.pay-box{
	--display:flex; --flex-direction:column;
	--justify-content:center; --align-items:center;
	--gap:1.6rem; --row-gap:1.6rem; --column-gap:1.6rem;
}
.pay-box{ text-align:center; }
.pay-box .pay-box__icon{
	width:7.2rem; height:7.2rem;
	border-radius:50%;
	background:var(--navy);
	display:flex; align-items:center; justify-content:center;
}
/* Elementor 7.x "Inline Font Icons" crta ikonicu kao SVG, ne font glif —
   boji se preko fill na <svg>, ne color na omotaču (18.08, treći krug). */
.pay-box .pay-box__icon .elementor-icon{ color:var(--white); font-size:2.8rem; }
.pay-box .pay-box__icon .elementor-icon svg{ fill:var(--white); }
/* boja/font su i ranije bili na .elementor-icon-box-title (0,2,0) a Elementorov
   default je i dalje pobeđivao (produkcija je zato plava, ne naša --ink) —
   isti razlog kao zamka #1, sad ide direktno na naslov h3 sa !important da
   sigurno pobedi (18.08, drugi krug). */
.pay-box .pay-box__naslov,
.pay-box .pay-box__naslov .elementor-heading-title{
	font-family:var(--f-head) !important;
	font-size:1.8rem; font-weight:800;
	color:var(--blue) !important;
	margin:0;
}
.pay-box .pay-box__opis,
.pay-box .pay-box__opis p{
	font-family:var(--f-body) !important;
	font-size:1.5rem; line-height:2.3rem;
	color:var(--ink) !important;
	margin:0;
}

/* ---- cenovnik ---- */
/* 18.08 (drugi krug): naziv i cena su DVA POSEBNA heading widgeta u jednom
   flex kontejneru (.cenovnik-red) — ne jedan tekst widget sa oba u istom
   <li> (to ih je vezalo u JEDNO editabilno polje). Desni padding veći od
   levog da cena ne stoji zalepljena za ivicu trake. */
.cenovnik-red{
	display:flex; align-items:baseline; justify-content:space-between; gap:1.6rem;
	padding:1.4rem 4rem 1.4rem 2.4rem;
	font-family:var(--f-head); font-size:1.8rem; line-height:2.6rem;
}
/* isti problem kao pay-box__naslov — Elementorov default boji naslov
   widgete plavo i pobeđuje bez !important (18.08, treći krug). */
.cenovnik-red .cenovnik-naziv,
.cenovnik-red .cenovnik-naziv .elementor-heading-title{
	font:inherit; font-weight:600; color:var(--ink) !important; margin:0;
}
.cenovnik-red .cenovnik-cena,
.cenovnik-red .cenovnik-cena .elementor-heading-title{
	font:inherit; font-weight:700; color:var(--blue) !important; white-space:nowrap; margin:0;
}
/* akcijska cena (stara precrtana) — text-editor umesto heading, jer heading
   ne prihvata <small> unutar naslova (18.08, "Ponuda ovog meseca"). */
.cenovnik-red .cenovnik-cena-akcija,
.cenovnik-red .cenovnik-cena-akcija p{
	font-family:inherit; font-weight:700; color:var(--blue) !important; white-space:nowrap; margin:0;
}
.cenovnik-red .cenovnik-cena-akcija small{
	font-weight:400; color:var(--body); text-decoration:line-through; margin-left:.6rem;
}

/* ---- forma ---- */
/* dve kolone preko cele širine sadržaja — Ime|Telefon pa E-mail|Usluga,
   poruka, dugme i napomena idu celom širinom */
.forma{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.forma__red{ display:contents; }
.forma > p,
.forma__polje:has(textarea),
.forma__dugme,
.forma__napomena{ grid-column:1 / -1; }
.forma__polje{ display:grid; gap:.8rem; }
.forma__polje > span{ font-size:1.5rem; font-weight:700; color:var(--ink); }
.forma input, .forma select, .forma textarea{
	font-family:var(--f-body);
	font-size:1.7rem;
	color:var(--ink);
	background:var(--surface);
	border:1px solid rgba(15,49,58,.14);
	border-radius:1rem;
	padding:1.4rem 1.6rem;
	transition:border-color var(--t-color), background var(--t-color);
}
.forma input:focus, .forma select:focus, .forma textarea:focus{
	outline:none;
	border-color:var(--blue);
	background:var(--white);
}
.forma__zamka{ position:absolute; left:-9999px; }
.forma__dugme{ justify-self:start; border:0; }
.forma__napomena{ font-size:1.4rem; line-height:2.2rem; color:#6A7A80; }
.forma__ok, .forma__greska{
	padding:1.6rem 2rem; border-radius:1rem;
	font-size:1.6rem; font-weight:600;
}
.forma__ok{ background:#E7F3EA; color:#1E6B34; }
.forma__greska{ background:#FBE9E9; color:#9B2222; }

/* ---- lista usluga (strana „Naše usluge") ---- */
.usluge-lista{ display:grid; gap:1.6rem; }
.usluge-lista a{
	display:flex; align-items:center; gap:2.4rem;
	background:var(--surface);
	border-radius:1.6rem;
	padding:2.4rem 2.8rem;
	transition:transform var(--t-move), box-shadow var(--t-move);
}
.usluge-lista a:hover{ transform:translateY(-.4rem); box-shadow:0 2rem 4rem -2rem rgba(0,58,141,.3); }
.usluge-lista__ico{
	flex:none;
	width:7.2rem; height:7.2rem;
	border-radius:50%;
	background:var(--navy);
	display:grid; place-items:center;
}
.usluge-lista__ico img{ width:4rem; height:auto; }
.usluge-lista__telo{ display:grid; gap:.6rem; }
.usluge-lista__telo strong{
	font-family:var(--f-head);
	font-size:2.2rem; font-weight:800; line-height:2.8rem;
	color:var(--ink);
}
.usluge-lista__telo em{ font-style:normal; font-size:1.7rem; line-height:2.6rem; color:var(--body); }

/* ---- galerija (strana) ---- */
/* Bez fiksne visine — slike su uspravne (520×554), a `cover` u položenom slotu
   je odsecao vrh natpisa „Dental centar". Svaka zadržava svoj odnos. */
.galerija-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.4rem; align-items:start; }
.galerija-grid figure{ margin:0; border-radius:1.6rem; overflow:hidden; }
.galerija-grid img{ width:100%; height:auto; display:block; transition:transform .6s var(--ease); }
.galerija-grid figure:hover img{ transform:scale(1.05); }
/* galerija kao Elementor image widgeti — klijent menja sliku kroz medijateku */
.galerija-grid .elementor-widget-image{ border-radius:1.6rem; overflow:hidden; }
.galerija-grid .elementor-widget-image:hover img{ transform:scale(1.05); }

/* ---- kontakt blokovi ---- */
.kontakt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; }
.kontakt-kartica{
	background:var(--surface);
	border-radius:1.6rem;
	padding:2.8rem 2.4rem;
	text-align:center;
}
.kontakt-kartica .dc-ico{ width:4.4rem; height:4.4rem; color:var(--blue); margin-inline:auto; }
/* Ikonicu kartice crta CSS (kk-* klasa bira masku) — markup je čist h3 + p,
   pa se kartice menjaju u tekst editoru. :has-guard za stari markup. */
.kontakt-kartica::before{
	content:"";
	display:block;
	width:4.4rem; height:4.4rem; margin-inline:auto;
	background:var(--blue);
	-webkit-mask:var(--kico) center/contain no-repeat;
	mask:var(--kico) center/contain no-repeat;
}
.kontakt-kartica:has(.dc-ico)::before{ content:none; }
.kk-tel{ --kico:url(../icons/customer-support.png); }
.kk-mejl{ --kico:url(../icons/question.png); }
.kk-adresa{ --kico:url(../icons/flexible-hours.png); }
.kontakt-kartica h3{ font-family:var(--f-head); font-size:1.9rem; font-weight:700; margin-top:1.6rem; color:var(--ink); }
.kontakt-kartica p{ font-size:1.7rem; line-height:2.6rem; margin-top:.6rem; }
.mapa{ border:0; width:100%; height:42rem; border-radius:1.6rem; display:block; }
/* mapa kao Elementor Google Maps widget — adresa se menja kao tekst u widgetu.
   !important: Elementorov per-page CSS visinu daje selektorom 0,3,0. */
.mapa-blok iframe{ border:0; width:100%; height:42rem !important; border-radius:1.6rem; display:block; }

/* ============================================================================
   16. RESPONZIVNO
   -----------------------------------------------------------------------------
   PSD NEMA mobilni artboard — sve ispod je moja procena, ne dizajn.
   IDE POSLE MOSTA: Elementor ima `.e-con-full.e-flex{flex-direction:var(--flex-direction)}`
   specifičnosti 0,2,0, pa se smer menja preko `--flex-direction`, a to mora da dođe
   posle bridž pravila iste specifičnosti (0,3,0).
   ========================================================================== */
@media (max-width: 1400px){
	.container, .topbar__inner, .navbar__inner, .colophon__inner, .site-footer__inner{
		max-width:calc(100% - 4.8rem);
	}
	/* kartice utisaka u PSD-u nisu centrirane (99 levo, 54 desno) — ispod pune
	   širine to nema smisla, pa se poravnavaju sa ostatkom sadržaja */
	.testi__grid{ margin-inline:0; padding-inline:4.8rem; }
}

/* ---------------------------------------------------- tablet: 1024 i naniže */
@media (max-width: 1024px){
	html{ font-size:10px; }
	.container, .topbar__inner, .navbar__inner, .colophon__inner, .site-footer__inner{
		width:100%;
		max-width:none;
		padding-inline:2.4rem;
	}

	/* ---- zaglavlje ---- */
	.topbar{ height:auto; padding:1rem 0; }
	.topbar__inner{ padding-left:0; display:block; }
	.topbar__ticker{ height:auto; min-height:2.2rem; }
	/* ⚠️ 05.10 — traka je menjala visinu od slajda do slajda (aktivan slajd je bio u
	   toku, ostali apsolutni), pa je CELA strana skakala 16px na 390px i 35px na 360px
	   na svake 3,5 s. Sada svi slajdovi stoje u ISTOJ ćeliji mreže: visinu daje
	   najviši, kraći su centrirani po visini, a smena je i dalje samo fade. */
	.topbar__ticker .ticker{ display:grid; }
	/* na telefonu je flex pravio kolonu od svake reči — ovde je to običan tekst */
	.ticker__item{
		position:relative; inset:auto;
		grid-area:1 / 1;
		align-self:center;
		height:auto;
		display:block;
		white-space:normal;
		text-align:center;
		font-size:1.3rem; line-height:1.9rem;
	}
	.ticker__pipe{ margin-inline:.5rem; }
	.ticker__sep{ display:none; }
	.topbar__cta{ display:none; }

	.navbar{ height:8.6rem; }
	.navbar__inner{ align-items:center; }
	/* Logo je BELI SVG — bez plave pločice se gubio na belom zaglavlju.
	   Pločica ostaje i na telefonu, samo manja; ujedno je i „nazad na početnu".
	   ⚠️ 05.10 — pločica je ulazila 28px u plavu traku (top:-2.8rem), a tekst u
	   traci je centriran preko cele širine i klijent ga sam kuca: na 390px je
	   prekrivala „Les" iz adrese, početak broja telefona (46px) i 66px četvrtog
	   slajda; na tabletu isto. Sada počinje tačno na dnu plave trake (iste je boje,
	   pa i dalje izgleda kao da visi iz nje) i ne može da dohvati tekst ma koliko
	   redova imao. Logo je ostao iste veličine — zato je bela traka 86 umesto 72px. */
	.brand{
		position:absolute;
		left:0; top:0;
		width:9.6rem; height:8.6rem;
		background:var(--navy);
		border-radius:0 0 .8rem 3.2rem;
		place-items:center;
		z-index:5;
	}
	.brand__logo{ width:5rem; height:7.1rem; }
	.navbar__inner{ position:relative; padding-left:11.2rem; }
	.nav, .lang{ display:none; }
	/* ⚠️ 27.08 — Aleksandar: „na mobilnoj ti se header meni i ne vidi, ja znam da je
	   tamo ali je ceo beo pa se ne vidi hamburger". Tri tanke navy crte na beloj
	   traci su se stvarno gubile. Sada je dugme puna navy pločica sa BELIM crtama —
	   isti jezik kao pločica sa logotipom levo, pa se vidi na prvi pogled.
	   Mera crta i razmak (.6rem) su ostali isti, da X animacija i dalje pogađa. */
	.burger{
		display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.6rem;
		width:4.6rem; height:4.6rem; margin-left:auto;
		background:var(--navy);
		border-radius:1.2rem;
	}
	.burger span{ display:block; width:2.4rem; height:.3rem; background:var(--white); border-radius:.2rem;
		transition:transform .3s ease, opacity .3s ease; }
	.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(.9rem) rotate(45deg); }
	.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
	.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-.9rem) rotate(-45deg); }

	/* Mobilni meni: panel sa razdvojenim stavkama, strelicom, CTA dugmetom i
	   kontaktom na dnu — da ne bude gola lista linkova. */
	.mobile-menu{
		background:var(--white);
		padding:1.6rem 2.4rem 3.2rem;
		border-bottom:.4rem solid var(--navy);
		box-shadow:0 2rem 4rem -2rem rgba(0,32,90,.35);
	}
	.mobile-menu .nav__list{ display:block; }
	.mobile-menu .nav__list > li + li{ border-top:1px solid rgba(15,49,58,.1); }
	.mobile-menu .nav__list > li > a{
		display:flex; align-items:center; justify-content:space-between;
		padding:1.7rem .4rem;
		font-family:var(--f-head);
		font-size:1.9rem; font-weight:700; line-height:2.4rem;
		color:var(--ink);
	}
	.mobile-menu .nav__list > li > a::after{
		content:"›";
		position:static;
		display:block;
		width:auto; height:auto;
		transform:none;
		background:none;
		font-size:2.4rem; font-weight:400;
		color:var(--blue);
		opacity:.5;
	}
	.mobile-menu .nav__list > li.current-menu-item > a,
	.mobile-menu .nav__list > li.current_page_item > a{ color:var(--blue); }
	.mobile-menu .nav__list > li.current-menu-item > a::after{ opacity:1; }
	/* pod-stavke u mobilnom meniju: statične, uvučene, bez desktop senke */
	.mobile-menu .sub-menu{
		position:static;
		opacity:1; visibility:visible; transform:none;
		box-shadow:none; background:none; border-radius:0;
		min-width:0;
		padding:0 0 1.2rem 1.6rem;
	}
	.mobile-menu .sub-menu a{ padding:.9rem 0; font-size:1.7rem; }
	.mobile-menu .sub-menu a:hover{ background:none; padding-left:.4rem; }
	.mobile-menu .nav__list > li.menu-item-has-children > a::before{ content:none; }
	.mobile-menu__cta{ margin-top:2.4rem; width:100%; }

	.mobile-menu__kontakt{
		margin-top:2.4rem;
		padding-top:2.4rem;
		border-top:1px solid rgba(15,49,58,.1);
		display:grid; gap:1.4rem;
	}
	.mobile-menu__kontakt li{ display:flex; align-items:center; gap:1.4rem; font-size:1.6rem; line-height:2.2rem; }
	.mobile-menu__kontakt .dc-ico{ width:2.8rem; height:2.8rem; color:var(--blue); }

	/* ---- hero ---- */
	.hero{ height:auto; padding-bottom:5.6rem; }
	.hero__media{ position:relative; width:100%; height:32rem; }
	.hero__inner{ height:auto; }
	.hero__copy{ padding-top:4rem; }
	.hero__title{ font-size:4rem; line-height:5rem; margin-top:2.4rem; }
	.hero .btnrow{ margin-top:3.2rem; }

	/* ---- info traka ---- */
	.infobar{ height:auto; padding:3.2rem 0; }
	.infobar__inner{ grid-template-columns:1fr; gap:2.4rem; }
	.infobar__item,
	.infobar__item:nth-child(2),
	.infobar__item:nth-child(3){ padding-left:0; height:auto; align-items:flex-start; gap:1.6rem; }
	.infobar__ico{ margin-top:.2rem; }
	.infobar__text{ flex:1 1 auto; }
	.infobar__item + .infobar__item::before{ display:none; }

	/* ---- dve kolone -> jedna ---- */
	.about__inner, .ambient__inner, .promo__inner{ grid-template-columns:1fr; gap:4.8rem; }
	.about{ padding:6.4rem 0 8rem; }
	.about__media img{ width:100%; height:auto; }
	.badge, .badge2{ left:auto; right:2.4rem; top:auto; bottom:-3.2rem; }
	.about__copy .h2{ margin-top:4.8rem; }

	.rule, .rule--wide, .foot-rule{ width:100%; }
	.checklist{ grid-template-columns:1fr; margin-top:3.2rem; }
	.about .btnrow{ margin-top:4rem; }

	/* ---- usluge ---- */
	.services{ padding:6.4rem 0 8rem; }
	.services .svc-grid{ margin-top:8rem; }
	.svc-grid{ flex-wrap:wrap; gap:8rem 2.4rem; justify-content:flex-start; }
	.svc{ width:calc(50% - 1.2rem); min-height:0; padding-bottom:3.2rem; display:flex; }
	.elementor .elementor-element.svc{ --flex-direction:column; }
	/* dugme na desktopu visi ispod kartice; na telefonu ide u tok da ne gazi sledeću */
	.svc__btn{ position:static; margin-top:2.4rem; align-self:flex-start; }

	/* ---- ambijent ---- */
	.ambient{ padding:6.4rem 0 8rem; }
	.feat-grid{ grid-template-columns:1fr; gap:3.2rem; }
	.gallery{ height:auto; margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; align-items:start; }
	/* bez fiksne visine — `cover` je odsecao vrh natpisa „Dental centar" */
	.gallery__item{ position:static; width:auto !important; height:auto !important; }
	.gallery__item img{ height:auto; }
	.gallery__btn{ position:static; grid-column:1 / -1; justify-self:start; }

	/* ---- utisci ---- */
	.testi{ padding:6.4rem 0 6.4rem; }
	.testi__grid{ flex-wrap:wrap; margin:4.8rem 0 0; padding-inline:2.4rem; }
	.testi-card{ width:calc(50% - 2.4rem); min-height:0; padding:3.2rem 2.4rem 3.2rem; }
	.testi-card__name{ margin-top:2.4rem; }

	/* ---- akcije ---- */
	.promo{ padding:6.4rem 0 8rem; }
	.promo .section-lead{ margin-bottom:0; }
	.promo__inner{ margin-top:4.8rem; }
	.promo__copy{ padding-top:0; }
	.promo__cards{ flex-wrap:wrap; justify-content:flex-start; gap:2.4rem; }
	/* odnos stranica iz PSD-a umesto fiksne visine — sve unutra je u procentima */
	.promo-card{ width:calc(50% - 1.2rem); height:auto; aspect-ratio:323 / 448; }

	/* ---- unutrašnje strane ---- */
	.page-hero{ padding:5.6rem 0 4.8rem; }
	.page-hero__title{ font-size:3.6rem; line-height:4.4rem; }
	.page-body{ padding:5.6rem 0 7.2rem; }
	.page-body__inner{ grid-template-columns:1fr; gap:4.8rem; }
	.sidebar{ position:static; order:2; }
	.page-content{ order:1; }
	.forma{ grid-template-columns:1fr; }
	.kontakt-grid{ grid-template-columns:1fr; }
	.galerija-grid{ grid-template-columns:1fr; }
	.cenovnik li{ flex-wrap:wrap; }
	.cenovnik li i{ display:none; }
	.cenovnik li::after{ display:none; }
	.cenovnik li span{ width:100%; }

	/* ---- marquee i futer ---- */
	.marquee{ height:9.6rem; }
	.marquee__word{ font-size:2.4rem; }
	.marquee__star{ width:2rem; height:2.2rem; }

	.site-footer{ padding:6.4rem 0 6.4rem; }
	.site-footer__inner{ grid-template-columns:1fr; gap:4rem; text-align:center; }
	.foot-col--mid{ margin-top:0; order:-1; }
	.foot-social{ justify-content:center; }
	.foot-rule{ margin-inline:auto; }
	.foot-cta{ margin-top:2.4rem; }
	.foot-about{ margin-top:2.4rem; }
	.colophon{ height:auto; padding:1.6rem 0; }
	.colophon__inner{ flex-direction:column; gap:.8rem; text-align:center; }

	/* Kartice: ikonica, naslov i tekst na sredinu (na desktopu su levo poravnati). */
	.svc{ align-items:center; text-align:center; padding-top:9.6rem; }
	.svc__ico{ left:50%; transform:translateX(-50%); }
	.svc:hover .svc__ico{ transform:translateX(-50%) translateY(-.6rem); }

	.kontakt-kartica{ text-align:center; }
	.kontakt-kartica .dc-ico{ margin-inline:auto; }

	.usluge-lista a{ flex-direction:column; text-align:center; gap:1.6rem; }
	.usluge-lista__ico{ margin-inline:auto; }

	.feat__title{ justify-content:center; text-align:center; }
	.feat__text{ text-align:center; }
	.feat__title .elementor-heading-title{ justify-content:center; }

	/* Dugmad na sredinu ekrana — na telefonu su bila prilepljena uz levu ivicu. */
	.btnrow{ flex-wrap:wrap; gap:1.6rem; justify-content:center; }
	.svc__btn{ align-self:center; }
	.gallery__btn{ justify-self:center; }
	.forma__dugme{ justify-self:center; }
	.sidebar__cta .btn{ margin-inline:auto; }
	.mobile-menu__cta{ margin-inline:auto; }
}

/* ------------------------------------------------------ telefon: 700 i niže */
@media (max-width: 700px){
	html{ font-size:10px; }
	.container, .topbar__inner, .navbar__inner, .colophon__inner, .site-footer__inner{
		padding-inline:2rem;
	}

	.h2{ font-size:3rem; line-height:3.8rem; }
	.section-lead{ font-size:1.6rem; line-height:2.6rem; }
	body{ font-size:1.6rem; line-height:2.6rem; }

	.topbar__inner{ padding-inline:2rem; }
	.hero__title{ font-size:3.2rem; line-height:4.2rem; }
	.hero__eyebrow{ font-size:1.4rem; }
	.hero__media{ height:24rem; }

	.svc{ width:100%; }
	.svc-grid{ gap:7.2rem 0; }
	.testi__grid{ padding-inline:2rem; }
	.testi-card{ width:100%; }

	.promo-card{ width:100%; }

	.gallery{ grid-template-columns:1fr; }

	.badge, .badge2{ right:1.6rem; bottom:-2.4rem; transform:scale(.85); transform-origin:bottom right; }
	.marquee__word{ font-size:2rem; }
	.marquee{ height:7.2rem; }

	body.dc-js .reveal{ transform:translateY(2.4rem); }
}

/* ---- Elementor editor značke: OVDE VIŠE NEMA NIŠTA, i to je namerno.
   18.08. je ovde stajao hack koji je gasio `.elementor-editor-element-settings`
   sa `display:none !important` pa ga vraćao kao `display:flex !important`.
   Forsiran `flex` je polomio raspored ikonica u traci KONTEJNERA — pozadina
   ostane uža od sadržaja, strelica viri van, traka izgleda „polomljeno"
   (Aleksandar prijavio 20.08, kaže da to vidi na svim našim sajtovima).
   Problem koji je hack lečio (značke razbacane po ugnježdenim icon-box /
   akordeon redovima) nestao je sa resetom tih custom struktura — uzroka
   više nema, pa nema ni razloga da tema dira Elementorov editor UI.
   Ako se ikad vrati: reši ga na strukturi, ne sa `!important` preko Elementora. */

/* ---------------------------------------------------------------------------
 * Galerija (widget `dc_galerija`) — justified raspored kao na drsonja.rs
 * Redovi su jednake visine, slike razlicitih sirina popune red do kraja.
 * Racunicu radi main.js; ovde su samo izgled i stanje pre nego sto JS odradi
 * (bez toga bi slike na tren bile u punoj velicini pa bi stranica poskocila).
 * ------------------------------------------------------------------------ */
.dc-galerija{
	--dc-g-visina:34.6rem;
	--dc-g-razmak:4.8rem;
	--dc-g-radius:0px;
	--dc-g-zum:1.1;
	--dc-g-preliv:rgba(41,98,180,.55);
	--dc-g-trajanje:.5s;

	display:flex;
	flex-wrap:wrap;
	gap:var(--dc-g-razmak);
	align-items:flex-start;
}
.dc-galerija__item{
	display:block;
	position:relative;
	overflow:hidden;
	border-radius:var(--dc-g-radius);
	height:var(--dc-g-visina);
	flex:0 0 auto;
	/* dok JS ne izracuna red: sirina iz odnosa stranica (data-ar -> --ar u JS-u) */
	width:auto;
	background:#EEF2F8;
	cursor:pointer;
}
.dc-galerija__item img{
	display:block;
	width:100%; height:100%;
	object-fit:cover;
	transition:transform var(--dc-g-trajanje) ease;
	will-change:transform;
}
.dc-galerija__item::after{
	content:"";
	position:absolute; inset:0;
	background:var(--dc-g-preliv);
	opacity:0;
	transition:opacity var(--dc-g-trajanje) ease;
	pointer-events:none;
}
.dc-galerija__item:hover img{ transform:scale(var(--dc-g-zum)); }
.dc-galerija__item:hover::after{ opacity:1; }

/* fokus tastaturom mora da se vidi — lightbox se otvara i Enterom */
.dc-galerija__item:focus-visible{ outline:.3rem solid var(--blue); outline-offset:.3rem; }

@media (prefers-reduced-motion:reduce){
	.dc-galerija__item img{ transition:none; }
	.dc-galerija__item:hover img{ transform:none; }
}