/*
Theme Name:   Globus Renta Kombi – Moderno
Theme URI:    https://rentakombi-globus.hr/
Description:  Moderna, responzivna verzija stranice Globus renta kombi. Radi
              kao podtema teme "Globus Renta Kombi" i od nje nasljeđuje sav
              sadržaj (vozni park, galeriju, recenzije, obrasce i postavke u
              Prilagodbi), a donosi novo, preglednije sučelje prilagođeno
              mobilnim uređajima.
Author:       Globus renta kombi
Template:     globus-renta-kombi
Version:      1.0
Text Domain:  globus-renta-kombi
*/

/* =====================================================================
   1. DIZAJN-SUSTAV (varijable)
   ===================================================================== */

:root {
	/* Boje brenda – narančasta je preuzeta iz originalne stranice. */
	--brand: #f15025;
	--brand-dark: #cf3f18;
	--brand-soft: #fbe9e1;

	--ink: #232830;
	--ink-soft: #4a5361;
	--muted: #6f7a8a;
	--line: #ded9d1;

	--bg: #f4f3f0;          /* podloga stranice – topla, ne bijela */
	--bg-alt: #eae8e3;      /* naizmjenične sekcije    */
	--surface: #fbfaf8;     /* kartice, paneli, obrasci */
	--surface-2: #efedE9;
	--header-bg: rgba(69, 75, 86, .96);
	--dark: #1b222c;
	--dark-soft: #262f3b;

	/* Oblik i sjene */
	--r-sm: 8px;
	--r: 14px;
	--r-lg: 22px;
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
	--shadow: 0 12px 32px -14px rgba(16, 24, 40, .22);
	--shadow-lg: 0 28px 60px -24px rgba(16, 24, 40, .32);

	/* Mjere */
	--maxw: 1160px;
	--gutter: 20px;
	--section-y: clamp(56px, 9vw, 110px);
	--header-h: 72px;

	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;

	/*
	 * Skala veličina slova.
	 * Tijelo teksta je 17 px, a sve ostalo se veže na tu mjeru kako bi
	 * omjeri ostali isti i na mobitelu i na velikom ekranu.
	 */
	--fs-2xs: 0.75rem;    /* 12 px – sitne oznake          */
	--fs-xs: 0.8125rem;   /* 13 px – napomene, datumi      */
	--fs-sm: 0.875rem;    /* 14 px – natpisi, oznake polja */
	--fs-md: 0.9375rem;   /* 15 px – popisi, recenzije     */
	--fs-base: 1.0625rem; /* 17 px – tijelo teksta         */
	--fs-lg: 1.25rem;     /* 20 px – istaknuti podnaslovi  */

	--ease: cubic-bezier(.4, 0, .2, 1);
}


/* =====================================================================
   1b. TAMNA VERZIJA
   ---------------------------------------------------------------------
   Način se postavlja na <html> atributom data-gk-mode. Vrijednost
   postavlja skripta u <head> (dodatak globus-core), prije iscrtavanja,
   pa nema treperenja. Posjetiteljev odabir pamti se u pregledniku.
   ===================================================================== */

[data-gk-mode="dark"] {
	/* Narančasta je na tamnoj podlozi malo posvijetljena radi kontrasta. */
	--brand: #ff6b3d;
	--brand-dark: #ff8a63;
	--brand-soft: #3a2018;

	--ink: #eef2f7;
	--ink-soft: #b9c3d1;
	--muted: #8b98ab;
	--line: #2b3341;

	--bg: #0e1319;
	--bg-alt: #151b23;
	--surface: #171e27;
	--surface-2: #1e2631;
	--header-bg: rgba(14, 19, 25, .92);

	--dark: #0a0e13;
	--dark-soft: #141a22;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
	--shadow: 0 12px 32px -14px rgba(0, 0, 0, .72);
	--shadow-lg: 0 28px 60px -24px rgba(0, 0, 0, .8);

	/* Govori pregledniku da su i padajući izbornici i klizači tamni. */
	color-scheme: dark;
}

/* =====================================================================
   2. OSNOVA
   ===================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: 1.7;
	color: var(--ink-soft);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--brand);
	text-decoration: none;
	transition: color .2s var(--ease);
}

a:hover {
	color: var(--brand-dark);
}

/*
 * Naslovi.
 *
 * Redoslijed veličina je jasan i jednak na svim ekranima:
 *   h1 (naslovnica) > h2 (naslovi sekcija) > h3 (kartice i paneli)
 *
 * Najveći naslov je najdeblji (800), ostali su 700 – dovoljno istaknuto,
 * ali bez prevelikog šuma u odnosu na tijelo teksta.
 */
h1, h2, h3, h4 {
	margin: 0 0 .5em;
	color: var(--ink);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 700;
}

h1 {
	font-size: clamp(2.1rem, 5.4vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -.03em;
}

h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.25rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 0;
}

/* Vidljiv fokus samo kod tipkovnice – pristupačnost. */
:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 3px;
	border-radius: 4px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
   3. RASPORED
   ===================================================================== */

.gk-container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.gk-section {
	padding-block: var(--section-y);
}

.gk-section--alt { background: var(--bg-alt); }
.gk-section--dark {
	background: var(--dark);
	color: #c3cbd6;
}

.gk-section--dark h2,
.gk-section--dark h3 { color: #fff; }

.gk-head {
	max-width: 660px;
	margin: 0 auto clamp(32px, 5vw, 56px);
	text-align: center;
}

.gk-head p {
	color: var(--muted);
	font-size: var(--fs-base);
	margin: 0;
}

.gk-eyebrow {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: .7rem;
}

.gk-section--dark .gk-eyebrow { color: #ff8c66; }

/* Mreža kartica koja se sama prilagođava širini */
.gk-grid {
	display: grid;
	gap: clamp(16px, 2.6vw, 26px);
	grid-template-columns: 1fr;
}

/* =====================================================================
   4. GUMBI
   ===================================================================== */

.gk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 50px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
	box-shadow: 0 10px 24px -12px rgba(241, 80, 37, .8);
}

.gk-btn:hover {
	background: var(--brand-dark);
	color: #fff;
	transform: translateY(-2px);
}

.gk-btn:active { transform: translateY(0); }

.gk-btn--ghost {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--line);
}

.gk-btn--ghost:hover {
	background: var(--ink);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--ink);
}

.gk-btn--light {
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow);
}

.gk-btn--light:hover { background: var(--surface); color: var(--brand); }

/* Gumbe na tamnoj podlozi (naslovnica) treba posvijetliti. */
.gk-btn--onDark {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}

.gk-btn--onDark:hover {
	background: var(--surface); /* MARKER PROLAZNO_ON_DARK */
	color: var(--ink);
	box-shadow: inset 0 0 0 2px #fff;
}

.gk-btn--block { width: 100%; }

/* =====================================================================
   5. ZAGLAVLJE I NAVIGACIJA
   ===================================================================== */

.gk-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 90;
	height: var(--header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition: background .3s var(--ease), box-shadow .3s var(--ease);
}

/* Dok smo na vrhu stranice zaglavlje je prozirno nad naslovnicom. */
.gk-header.is-stuck {
	background: var(--header-bg);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	box-shadow: 0 1px 0 var(--line), 0 8px 24px -18px rgba(16, 24, 40, .5);
}

.gk-header__inner {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	gap: 18px;
}

.gk-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: auto;
}

.gk-logo img {
	height: 40px;
	width: auto;
}

/* Na prozirnom zaglavlju logo je bijel (preko tamne fotografije). */
.gk-nav {
	display: none;
}

.gk-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
}

.gk-nav a {
	display: block;
	padding: 10px 14px;
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	font-size: var(--fs-md);
	transition: background .18s var(--ease), color .18s var(--ease);
}

/*
 * Zaglavlje je uvijek tamno (i nad naslovnicom i zalijepljeno), pa su
 * logotip i tekst uvijek svijetli – nema potrebe mijenjati ih po stanju.
 */
.gk-nav a:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.gk-header__cta {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
}

.gk-phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	color: #fff;
	font-size: var(--fs-md);
	white-space: nowrap;
}

.gk-phone svg { width: 18px; height: 18px; fill: var(--brand); flex: 0 0 auto; }

.gk-lang {
	margin-left: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	transition: background .18s var(--ease), transform .18s var(--ease);
}

.gk-lang:hover { transform: scale(1.08); background: var(--brand-soft); }

.gk-lang img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
}

/*
 * Prekidač svjetle i tamne verzije – obična sklopka.
 * Isključena = svjetla verzija, uključena = tamna.
 * Boju podloge i klizača mijenja atribut data-gk-mode na <html>.
 */
.gk-mode {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	font-size: var(--fs-sm);
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
}

.gk-mode__track {
	position: relative;
	display: block;
	width: 44px;
	height: 24px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: #cfcac2;
	transition: background .22s var(--ease);
}

.gk-mode__knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .35);
	transition: transform .22s var(--ease);
}

[data-gk-mode="dark"] .gk-mode__track { background: var(--brand); }
[data-gk-mode="dark"] .gk-mode__knob { transform: translateX(20px); }

.gk-mode:hover .gk-mode__track { background: #b9b3a9; }
[data-gk-mode="dark"] .gk-mode:hover .gk-mode__track { background: var(--brand-dark); }

/* Nad prozirnim zaglavljem sklopka je svjetlija. */
.gk-mode { color: #fff; }
.gk-mode__track { background: rgba(255, 255, 255, .32); }
.gk-mode:hover .gk-mode__track { background: rgba(255, 255, 255, .5); }


/*
 * Dok je zaglavlje prozirno nad naslovnicom, ispod njega ide blagi
 * tamni preljev.
 *
 * Bez toga bijeli logotip i tekst nestaju preko svjetlih dijelova
 * fotografije (npr. staklo zgrade), jer je naslovna slika na nekim
 * mjestima gotovo bijela.
 */
.gk-header:not(.is-stuck)::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(10, 14, 19, .62) 0%,
		rgba(10, 14, 19, .38) 55%,
		rgba(10, 14, 19, 0) 100%
	);
}

/*
 * Ikona pokazuje u kojoj je verziji stranica: sunce (svjetla) ili
 * mjesec (tamna). Sklopka je lijevo u svjetloj, desno u tamnoj.
 */
.gk-mode__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.gk-mode__icon svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gk-mode__moon { display: none; }
[data-gk-mode="dark"] .gk-mode__sun { display: none; }
[data-gk-mode="dark"] .gk-mode__moon { display: block; }

/* Inačica u mobilnom izborniku – preko cijele širine. */
.gk-mode--wide {
	width: 100%;
	justify-content: center;
	padding: 15px 0;
	border-radius: var(--r-sm);
	box-shadow: inset 0 0 0 1.5px var(--line);
}

.gk-mode--wide:hover { background: var(--bg-alt); }

.gk-drawer__mode { margin-top: 4px; }

/* Hamburger */
.gk-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-left: auto;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .16);
	cursor: pointer;
	flex: 0 0 auto;
}

.gk-burger { background: rgba(255, 255, 255, .16); }

.gk-burger span {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--surface);
	transition: background .2s var(--ease);
}

.gk-burger span { background: #fff; }

.gk-burger span::before,
.gk-burger span::after {
	content: '';
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: inherit;
	transition: transform .25s var(--ease), top .25s var(--ease);
}

.gk-burger span::before { top: -6px; }
.gk-burger span::after  { top: 6px; }

body.gk-menu-open .gk-burger span { background: transparent; }
body.gk-menu-open .gk-burger span::before { top: 0; transform: rotate(45deg); background: var(--ink); }
body.gk-menu-open .gk-burger span::after  { top: 0; transform: rotate(-45deg); background: var(--ink); }

/* Mobilni izbornik */
.gk-drawer {
	position: fixed;
	inset: var(--header-h) 0 0;
	z-index: 85;
	background: var(--surface);
	padding: 24px var(--gutter) 40px;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .32s var(--ease), visibility .32s;
}

body.gk-menu-open .gk-drawer {
	transform: translateX(0);
	visibility: visible;
}

body.gk-menu-open { overflow: hidden; }

.gk-drawer ul { border-top: 1px solid var(--line); }

.gk-drawer li { border-bottom: 1px solid var(--line); }

.gk-drawer a {
	display: block;
	padding: 16px 4px;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--ink);
}

.gk-drawer a:hover { color: var(--brand); }

.gk-drawer__foot {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* =====================================================================
   6. NASLOVNICA (hero)
   ===================================================================== */

.gk-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(88svh, 820px);
	padding-block: calc(var(--header-h) + 48px) 64px;
	background: var(--dark);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.gk-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	/* Bez "fixed" – na iOS-u to ne radi i stvara trzaje. */
	transform: scale(1.04);
}

.gk-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(15, 20, 28, .88) 0%,
		rgba(15, 20, 28, .62) 45%,
		rgba(15, 20, 28, .35) 100%
	);
}

.gk-hero__inner {
	max-width: 720px;
}

.gk-hero h1 {
	color: #fff;
	margin-bottom: .35em;
}

.gk-hero__sub {
	font-size: clamp(1.1rem, 1.9vw, 1.3rem);
	color: #d6dde7;
	margin-bottom: .35em;
}

.gk-hero__sub strong { color: #fff; }

.gk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.gk-hero__scroll {
	display: none;
}

/* =====================================================================
   7. INFO TRAKA (telefon, e-mail, Facebook)
   ===================================================================== */

.gk-info {
	background: var(--brand);
	color: #fff;
	padding-block: 6px;
}

.gk-info__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
}

.gk-info__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 4px;
	color: #fff;
	font-weight: 600;
	border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.gk-info__item:last-child { border-bottom: 0; }

.gk-info__item:hover { color: #fff; opacity: .88; }

.gk-info__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
}

.gk-info__icon svg { width: 18px; height: 18px; fill: #fff; }

.gk-info__label {
	display: block;
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .8;
}

/* =====================================================================
   8. O NAMA
   ===================================================================== */

.gk-about {
	display: grid;
	gap: clamp(28px, 5vw, 56px);
	align-items: center;
}

.gk-about__media {
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 3;
}

.gk-about__media img { width: 100%; height: 100%; object-fit: cover; }

.gk-about__body p { font-size: var(--fs-base); }

/* =====================================================================
   9. VOZNI PARK
   ===================================================================== */

.gk-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
	display: flex;
	flex-direction: column;
}

.gk-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: transparent;
}

.gk-card__media {
	aspect-ratio: 16 / 10;
	background: var(--bg-alt);
	overflow: hidden;
}

.gk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}

.gk-card:hover .gk-card__media img { transform: scale(1.06); }

.gk-card__body { padding: 22px; flex: 1; }

.gk-card__body h3 { margin-bottom: .7em; }

.gk-specs { display: grid; gap: 9px; }

.gk-specs li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--fs-md);
	color: var(--ink-soft);
}

.gk-specs li::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	border-radius: 50%;
	background: var(--brand-soft)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f15025' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / 11px no-repeat;
}

/* =====================================================================
   10. RADNO VRIJEME, UVJETI, CJENIK
   ===================================================================== */

.gk-panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: clamp(22px, 3.4vw, 34px);
	box-shadow: var(--shadow-sm);
}

.gk-panel h3 {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gk-panel h3 svg { width: 22px; height: 22px; fill: var(--brand); flex: 0 0 auto; }

.gk-panel ul.gk-list { display: grid; gap: 10px; }

.gk-panel ul.gk-list li {
	position: relative;
	padding-left: 20px;
	font-size: var(--fs-md);
}

.gk-panel ul.gk-list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand);
}

/* Cjenik – istaknuta kartica */
.gk-price {
	background: var(--dark);
	border-color: var(--dark);
	color: #cfd7e2;
}

.gk-price h3 { color: #fff; flex-wrap: wrap; }
.gk-price h3 svg { fill: #ff8c66; }

.gk-price__note {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: #8b97a8;
	text-transform: none;
	letter-spacing: 0;
}

.gk-price ul.gk-list { gap: 0; }

.gk-price ul.gk-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.gk-price ul.gk-list li::before { display: none; }

.gk-price ul.gk-list li:last-child { border-bottom: 0; }

.gk-price__label { color: #9aa6b6; }

/*
 * Vrijednost nije podebljana – podebljan je samo iznos unutar nje
 * (u tekstu je označen zvjezdicama), pa cijena iskoči, a opis ostane
 * čitljiv.
 */
.gk-price__val {
	color: #fff;
	font-weight: 400;
	text-align: right;
}

/* Na uskom ekranu naziv i cijena idu jedno pod drugo. */
@media (max-width: 599px) {
	.gk-price ul.gk-list li { display: block; }
	.gk-price__val { display: block; text-align: left; margin-top: 4px; }
}

/* Dva panela jedan uz drugi (radno vrijeme + uvjeti) */
.gk-panels {
	display: grid;
	gap: clamp(16px, 2.6vw, 26px);
}

/* Uvodni tekst sekcije "O nama" */
.gk-prose {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
	font-size: var(--fs-base);
}

.gk-note {
	margin-top: 28px;
	text-align: center;
	font-size: var(--fs-md);
	color: var(--muted);
}

/* =====================================================================
   11. GALERIJA
   ===================================================================== */

.gk-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.gk-gallery__item {
	position: relative;
	display: block;
	border-radius: var(--r-sm);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--bg-alt);
	cursor: zoom-in;
	padding: 0;
	border: 0;
	width: 100%;
}

.gk-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}

.gk-gallery__item:hover img { transform: scale(1.07); }

.gk-gallery__cap {
	position: absolute;
	inset: auto 0 0;
	padding: 26px 14px 12px;
	background: linear-gradient(transparent, rgba(10, 14, 20, .85));
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 600;
	text-align: left;
	transform: translateY(101%);
	transition: transform .3s var(--ease);
}

.gk-gallery__item:hover .gk-gallery__cap,
.gk-gallery__item:focus-visible .gk-gallery__cap { transform: translateY(0); }

/* Na dodirnim uređajima natpis je uvijek vidljiv jer nema hovera. */
@media (hover: none) {
	.gk-gallery__cap { transform: translateY(0); }
}

/* Lightbox */
.gk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(8, 11, 16, .93);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.gk-lightbox.is-open { display: flex; }

.gk-lightbox img {
	max-width: 100%;
	max-height: 86svh;
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-lg);
}

.gk-lightbox__close,
.gk-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background .18s var(--ease);
}

.gk-lightbox__close:hover,
.gk-lightbox__nav:hover { background: rgba(255, 255, 255, .28); }

.gk-lightbox__close { top: 18px; right: 18px; font-size: 26px; line-height: 1; }
.gk-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 30px; line-height: 1; }
.gk-lightbox__nav--prev { left: 14px; }
.gk-lightbox__nav--next { right: 14px; }

.gk-lightbox__count {
	position: absolute;
	bottom: 20px;
	color: rgba(255, 255, 255, .75);
	font-size: .9rem;
	font-weight: 600;
}

/* =====================================================================
   12. RECENZIJE
   ===================================================================== */

/* Mobitel: vodoravni "swipe" s magnetskim zaustavljanjem. */
.gk-reviews {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 84%;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 6px;
	/* Izlazi iz paddinga kontejnera da kartice idu do ruba ekrana. */
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
}

.gk-reviews::-webkit-scrollbar { display: none; }

.gk-review {
	scroll-snap-align: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gk-review__top {
	display: flex;
	align-items: center;
	gap: 14px;
}

.gk-review__avatar {
	width: 58px;
	height: 58px;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg-alt);
}

.gk-review__name {
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
	font-size: var(--fs-base);
}

.gk-review__meta {
	font-size: var(--fs-xs);
	color: var(--muted);
}

.gk-review__text {
	font-size: var(--fs-md);
	margin: 0;
	color: var(--ink-soft);
}

.gk-stars {
	display: inline-flex;
	gap: 2px;
	margin-top: 2px;
}

.gk-stars span { color: var(--line); font-size: 1rem; line-height: 1; }
.gk-stars span.is-on { color: #ffb020; }

.gk-reviews__hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
	font-size: var(--fs-xs);
	color: var(--muted);
}

/* =====================================================================
   13. KONTAKT
   ===================================================================== */

.gk-contact {
	display: grid;
	gap: clamp(26px, 4vw, 44px);
}

.gk-contact__info {
	display: grid;
	gap: 16px;
	align-content: start;
}

.gk-contact__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.gk-contact__row svg {
	width: 20px;
	height: 20px;
	fill: var(--brand);
	flex: 0 0 auto;
	margin-top: 4px;
}

.gk-contact__row strong { display: block; color: var(--ink); font-size: 1rem; }

.gk-contact__row a { font-weight: 600; }

.gk-map {
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--line);
	line-height: 0;
	aspect-ratio: 16 / 11;
}

.gk-map iframe { width: 100%; height: 100%; border: 0; }

/* Obrazac */
.gk-form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: clamp(22px, 3.6vw, 34px);
	box-shadow: var(--shadow);
	display: grid;
	gap: 18px;
}

.gk-field { display: grid; gap: 7px; }

.gk-field label {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--ink);
}

.gk-field input,
.gk-field textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	font: inherit;
	font-size: 1rem; /* 16px – sprječava automatsko zumiranje na iOS-u. */
	color: var(--ink);
	background: var(--surface);
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.gk-field textarea { min-height: 140px; resize: vertical; }

.gk-field input:focus,
.gk-field textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 4px var(--brand-soft);
}

.gk-field input::placeholder,
.gk-field textarea::placeholder { color: var(--muted); }

.gk-field.has-error input,
.gk-field.has-error textarea { border-color: #d92d20; }

.gk-field__error {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: #d92d20;
}

/* Zamka za robote – skriveno, ali ne display:none (roboti to prepoznaju). */
.gk-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gk-form__note {
	font-size: var(--fs-xs);
	color: var(--muted);
	text-align: center;
	margin: 0;
}

.gk-alert {
	padding: 14px 18px;
	border-radius: var(--r-sm);
	font-weight: 600;
	font-size: .95rem;
}

.gk-alert--ok {
	background: #e8f6ee;
	color: #10683a;
	border: 1px solid #b7e4cb;
}

.gk-alert--err {
	background: #fdeceb;
	color: #a02018;
	border: 1px solid #f6c8c4;
}

.gk-btn.is-busy { opacity: .7; pointer-events: none; }

/* =====================================================================
   14. PODNOŽJE
   ===================================================================== */

.gk-footer {
	background: var(--dark);
	color: #98a3b3;
	padding-block: clamp(44px, 6vw, 72px) 0;
	font-size: .95rem;
}

.gk-footer__grid {
	display: grid;
	gap: 32px;
}

.gk-footer h4 {
	color: #fff;
	font-size: 1rem;
	letter-spacing: .02em;
	margin-bottom: 1em;
}

.gk-footer a { color: #c3cbd6; }
.gk-footer a:hover { color: #fff; }

.gk-footer__logo img {
	height: 38px;
	width: auto;
	filter: brightness(0) invert(1);
	margin-bottom: 16px;
}

.gk-footer ul { display: grid; gap: 9px; }

.gk-footer__bottom {
	margin-top: clamp(32px, 5vw, 52px);
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	font-size: .87rem;
	color: #7b8798;
}

/* =====================================================================
   15. JEDNOSTAVNE STRANICE (uvjeti poslovanja)
   ===================================================================== */

.gk-page {
	padding-block: calc(var(--header-h) + 40px) var(--section-y);
}

.gk-page__head {
	background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
	padding-block: calc(var(--header-h) + 44px) 40px;
	margin-bottom: var(--section-y);
}

.gk-page__body {
	max-width: 780px;
	margin-inline: auto;
}

.gk-page__body h6 {
	margin: 2.2rem 0 .6rem;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--ink);
}

.gk-page__body h6:first-child { margin-top: 0; }

.gk-page__body p { color: var(--ink-soft); }

/* =====================================================================
   16. ANIMACIJE
   ===================================================================== */

.gk-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.gk-reveal.is-in { opacity: 1; transform: none; }

/* =====================================================================
   17. RESPONZIVNE TOČKE PRELOMA
   ===================================================================== */

@media (min-width: 600px) {
	.gk-info__grid { grid-template-columns: repeat(2, 1fr); }
	.gk-info__item { border-bottom: 0; }

	.gk-gallery { grid-template-columns: repeat(3, 1fr); gap: 14px; }

	.gk-reviews { grid-auto-columns: 46%; }

	.gk-form__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 18px;
	}
}

@media (min-width: 900px) {
	:root { --gutter: 28px; }

	.gk-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.gk-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.gk-grid--4 { grid-template-columns: repeat(4, 1fr); }

	.gk-info__grid { grid-template-columns: repeat(3, 1fr); }

	.gk-about { grid-template-columns: 1fr 1fr; }

	.gk-panels--split {
		grid-template-columns: 1fr 1.45fr;
		align-items: start;
	}

	.gk-contact { grid-template-columns: 1.05fr .95fr; }

	.gk-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }

	/* Recenzije prelaze u mrežu – na velikom ekranu nema potrebe za
	   vodoravnim klizanjem. */
	.gk-reviews {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, 1fr);
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}

	.gk-reviews__hint { display: none; }
}

/*
 * Navigacija se prikazuje od 1200 px.
 * Ispod te širine u zaglavlju jednostavno nema mjesta za logotip, pet
 * stavki izbornika, telefon, zastavicu i prekidač – sve to tada ide u
 * mobilni izbornik.
 */
/*
 * Ispod 1200px telefona i zastavica sele u sklopivi izbornik, ali
 * prekidač svjetle/tamne verzije OSTAJE u zaglavlju. On je najčešće
 * korišten i ne smije se izgubiti – bez ovoga se na svakom ekranu užem
 * od 1200 px potpuno izgubio.
 */
@media (max-width: 1199px) {
	.gk-header__cta { display: flex; padding-left: 0; }
	.gk-header__cta .gk-phone,
	.gk-header__cta .gk-lang { display: none; }
}

@media (min-width: 1200px) {
	.gk-nav { display: block; }
	.gk-header__cta { display: flex; }
	.gk-burger { display: none; }
	.gk-drawer { display: none; }
}

@media (min-width: 1100px) {
	.gk-gallery { grid-template-columns: repeat(4, 1fr); }
	.gk-hero__inner { max-width: 780px; }
}

/* =====================================================================
   18. PRISTUPAČNOST – smanjena animacija
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.gk-reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   19. ISPIS
   ===================================================================== */

@media print {
	.gk-header,
	.gk-drawer,
	.gk-hero__scroll,
	.gk-reviews__hint,
	.gk-map { display: none !important; }

	body { color: #000; font-size: 12pt; }
	.gk-section { padding-block: 16pt; }
}

/* =====================================================================
   LOGOTIP U ZAGLAVLJU
   ---------------------------------------------------------------------
   Logotip je bijel i takav ostaje u obje verzije. Umjesto da ga
   prilagođavamo podlozi, podloga zaglavlja je uvijek dovoljno tamna –
   u svjetloj verziji mekša (topli tamnosivi ton), u tamnoj gotovo crna.
   ===================================================================== */

/* =====================================================================
   ADMINISTRATORSKA TRAKA (WordPress)
   ---------------------------------------------------------------------
   Prijavljenima WordPress prikaže traku na vrhu i pomakne stranicu preko
   `html { margin-top: 32px !important }`. Fiksni elementi s `top: 0` to
   ne osjete, pa bi zaglavlje završilo ispod trake. Zato ih ovdje
   pomičemo za visinu trake.

   WordPress stavlja klasu `admin-bar` samo na <body>, a `scroll-padding`
   vrijedi na <html>, zato je za sidrenje potreban `:has()`. Stariji
   preglednici taj dio ignoriraju – ostane samo manji pomak pri sidrenju.
   ===================================================================== */

body.admin-bar .gk-header {
	top: 32px;
}

body.admin-bar .gk-drawer {
	top: calc(32px + var(--header-h));
}

html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--header-h) + 44px);
}

/* Ispod 783 px WordPress traka je viša (46 px) i nije fiksna. */
@media screen and (max-width: 782px) {
	body.admin-bar .gk-header {
		top: 46px;
	}

	body.admin-bar .gk-drawer {
		top: calc(46px + var(--header-h));
	}

	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--header-h) + 58px);
	}
}

/* =====================================================================
   POJEDINAČNO VOZILO I POPIS VOZILA
   ---------------------------------------------------------------------
   Vozila su javne stranice (npr. /vozila/kombi-vozila/) kako bi se
   pojedino vozilo moglo pronaći u pretraživanju. Popis je na
   /vozni-park/.
   ===================================================================== */

.gk-vozilo__lead {
	max-width: 62ch;
	margin: 14px auto 0;
	color: var(--ink-soft);
	font-size: var(--fs-base);
	text-align: center;
}

.gk-vozilo__grid {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
	margin-top: clamp(28px, 4vw, 44px);
}

.gk-vozilo__slika {
	margin: 0;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--bg-alt);
}

.gk-vozilo__slika img {
	display: block;
	width: 100%;
	height: auto;
}

.gk-vozilo__info h2 {
	margin: 0 0 1em;
	font-size: var(--fs-lg);
}

.gk-vozilo__tekst {
	margin-top: 26px;
}

.gk-vozilo__tekst p:first-child { margin-top: 0; }

.gk-vozilo__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.gk-vozilo__natrag {
	margin: 44px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-weight: 600;
}

/* Popis vozila */

.gk-vozila-mreza {
	display: grid;
	gap: 24px;
	margin-top: clamp(28px, 4vw, 44px);
}

.gk-vozila-mreza .gk-card__body h2 {
	margin-bottom: .6em;
	font-size: var(--fs-lg);
}

.gk-vozila-mreza__vise {
	margin: 18px 0 0;
	font-weight: 600;
}

@media (min-width: 800px) {
	.gk-vozilo__grid { grid-template-columns: 1.15fr 1fr; align-items: start; }
	.gk-vozila-mreza { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
	.gk-vozila-mreza { grid-template-columns: repeat(3, 1fr); }
}

/* Poveznica na kraju kartice vozila */
.gk-card__vise {
	margin: 18px 0 0;
	font-weight: 600;
	font-size: var(--fs-md);
}