/* ==========================================================================
   Sekcije početne i podstranica
   ========================================================================== */

/* ---------- Hero slider ---------- */
.mt-hero { position: relative; border-radius: var(--mt-radius-xl); overflow: hidden; min-height: 520px; background: #0c0812; color: #fff; display: grid; }
.mt-hero__slide { grid-area: 1 / 1; position: relative; display: flex; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.mt-hero__slide.is-active { opacity: 1; visibility: visible; }
.mt-hero__bg, .mt-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mt-hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 6, 16, .94) 0%, rgba(10, 6, 16, .78) 34%, rgba(10, 6, 16, .1) 66%, rgba(10, 6, 16, 0) 100%); }
.mt-hero__content { position: relative; z-index: 1; padding: 64px 72px 140px; max-width: 560px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.mt-hero__title { margin: 0; font: 700 clamp(36px, 5vw, 60px)/1.02 var(--mt-font-display); letter-spacing: -.02em; color: #fff; }
.mt-hero__text { margin: 0; font-size: 17px; line-height: 1.6; color: #d9d3de; }
.mt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.mt-hero__footer { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; padding: 0 72px 40px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; pointer-events: none; }
.mt-hero__footer > * { pointer-events: auto; }
.mt-hero__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; font-size: 13px; color: var(--mt-on-dark); }
.mt-hero__trust li { display: flex; align-items: center; gap: 10px; }
.mt-hero__trust svg { color: #c9a2e0; flex: none; }
.mt-hero__trust b { display: block; color: #fff; }
.mt-hero__nav { display: flex; align-items: center; gap: 16px; }
.mt-hero__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mt-hero__arrow:hover { background: rgba(255, 255, 255, .14); }
.mt-hero__dots { display: flex; gap: 8px; align-items: center; }
.mt-hero__dot { width: 8px; height: 8px; border: 0; padding: 0; border-radius: 4px; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .2s; }
.mt-hero__dot.is-active { width: 32px; background: #fff; }

@media (max-width: 767px) {
	.mt-hero { min-height: 480px; border-radius: 20px; }
	.mt-hero__slide::after { background: linear-gradient(0deg, rgba(10, 6, 16, .96) 30%, rgba(10, 6, 16, .3) 75%); }
	.mt-hero__content { padding: 28px 22px 150px; justify-content: flex-end; max-width: none; }
	.mt-hero__text { font-size: 15px; }
	.mt-hero__footer { padding: 0 22px 22px; }
	.mt-hero__trust { display: none; }
}

/* ---------- Pločice kategorija ---------- */
.mt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.mt-tile {
	background: #fff; border: 1px solid var(--mt-line); border-radius: 16px; padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
	color: var(--mt-graphite); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.mt-tile:hover { border-color: #cdb6da; box-shadow: var(--mt-shadow); color: var(--mt-primary-dark); }
.mt-tile__media { width: 56px; height: 56px; border-radius: 50%; background: var(--mt-lilac); color: var(--mt-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mt-tile__media.has-img { border-radius: 14px; background: var(--mt-lilac-3); width: 72px; height: 64px; }
.mt-tile__media img { max-width: 86%; max-height: 86%; object-fit: contain; }
.mt-tile__sub { font-size: 12px; font-weight: 600; color: var(--mt-muted); margin-top: -4px; }
.mt-tile--all { background: var(--mt-graphite); color: #fff; border-color: var(--mt-graphite); justify-content: center; }
.mt-tile--all .mt-tile__media { background: var(--mt-primary); color: #fff; }
.mt-tile--all:hover { color: #fff; background: var(--mt-ink); }
.mt-tiles--compact { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mt-tiles--compact .mt-tile { flex-direction: row; padding: 12px 14px; text-align: left; }
.mt-tiles--compact .mt-tile__media { width: 40px; height: 40px; flex: none; }
@media (max-width: 767px) {
	.mt-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 112px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
	.mt-tiles::-webkit-scrollbar { display: none; }
	.mt-tile { scroll-snap-align: start; padding: 14px 8px; font-size: 13px; }
}

/* ---------- Promo blokovi ---------- */
.mt-promo { display: grid; grid-template-columns: 2fr 1fr 1.2fr; grid-auto-rows: minmax(200px, auto); gap: 16px; }
.mt-promo__card { position: relative; border-radius: 20px; overflow: hidden; display: flex; padding: 28px; box-sizing: border-box; min-height: 200px; }
.mt-promo__card--xl { grid-row: span 2; }
.mt-promo__card--tall { grid-row: span 2; flex-direction: column; }
.mt-promo__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 60%; }
.mt-promo__card--xl .mt-promo__body, .mt-promo__card--tall .mt-promo__body { max-width: none; }
.mt-promo__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mt-promo__title { margin: 0; font: 700 24px/1.15 var(--mt-font-display); }
.mt-promo__card--xl .mt-promo__title { font-size: 34px; }
.mt-promo__card--tall .mt-promo__title { font-size: 36px; line-height: 1.05; }
.mt-promo__text { margin: 0; font-size: 14px; line-height: 1.55; }
.mt-promo__btn { margin-top: auto; min-height: 42px; font-size: 13px; }
.mt-promo__body > .mt-promo__btn { margin-top: 8px; }
.mt-promo__media { position: absolute; z-index: 0; display: flex; align-items: center; justify-content: center; }
.mt-promo__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(40, 20, 55, .2)); }

.mt-promo__card--image { background: #120b19; color: #fff; align-items: flex-end; }
.mt-promo__card--image .mt-promo__media { inset: 0; }
.mt-promo__card--image .mt-promo__media img { object-fit: cover; filter: none; }
.mt-promo__card--image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 8, 18, .15) 30%, rgba(12, 8, 18, .92) 100%); }
.mt-promo__card--image .mt-promo__eyebrow { color: #d7b9e8; }
.mt-promo__card--image .mt-promo__text { color: #d9d3de; }

.mt-promo__card--accent { background: var(--mt-primary); color: #fff; }
.mt-promo__card--accent .mt-promo__eyebrow { color: #ebd9f5; }
.mt-promo__card--accent .mt-promo__text { color: #f1e6f8; }
.mt-promo__card--accent .mt-promo__btn { color: var(--mt-primary-dark); }
.mt-promo__card--accent .mt-promo__media, .mt-promo__card--tall .mt-promo__media { position: relative; order: 2; margin-top: auto; align-self: flex-end; width: 78%; max-width: 240px; }

.mt-promo__card--dark { background: var(--mt-dark); color: #fff; }
.mt-promo__card--dark .mt-promo__text { color: var(--mt-on-dark); }

.mt-promo__card--lilac { background: #efe7f5; color: var(--mt-ink); }
.mt-promo__card--grey { background: #e9e8ea; color: var(--mt-ink); }
.mt-promo__card--lilac .mt-promo__text, .mt-promo__card--grey .mt-promo__text { color: #5c5762; }
.mt-promo__card--lilac .mt-promo__eyebrow, .mt-promo__card--grey .mt-promo__eyebrow { color: var(--mt-primary); }
.mt-promo__card--lilac .mt-promo__media, .mt-promo__card--grey .mt-promo__media { right: 18px; top: 18px; bottom: 18px; width: 42%; }

@media (max-width: 1024px) {
	.mt-promo { grid-template-columns: 1fr 1fr; }
	.mt-promo__card--xl { grid-column: span 2; grid-row: span 1; min-height: 360px; }
	.mt-promo__card--tall { grid-row: span 2; }
}
@media (max-width: 767px) {
	.mt-promo { grid-template-columns: 1fr; }
	.mt-promo__card--xl { grid-column: auto; }
	.mt-promo__card--tall { grid-row: auto; }
	.mt-promo__card--xl .mt-promo__title, .mt-promo__card--tall .mt-promo__title { font-size: 28px; }
}

/* ---------- Kolekcije ---------- */
.mt-collections { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.mt-collection { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px; text-decoration: none; color: var(--mt-graphite); }
.mt-collection__text { display: flex; flex-direction: column; gap: 6px; }
.mt-collection__text b { font: 700 18px var(--mt-font-display); color: var(--mt-ink); }
.mt-collection__text span { font-size: 13px; color: var(--mt-muted); }
.mt-collection__text em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--mt-primary); margin-top: 6px; }
.mt-collection__img { width: 120px; height: 90px; flex: none; display: flex; align-items: center; justify-content: center; }
.mt-collection__img img { max-width: 100%; max-height: 90px; width: auto; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(40, 20, 55, .16)); }

/* ---------- Prednosti / usluge ---------- */
.mt-features__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.mt-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--mt-min, 220px), 1fr)); gap: 12px; }
.mt-feature { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--mt-line); border-radius: 16px; padding: 20px; color: inherit; text-decoration: none; }
a.mt-feature:hover { border-color: #cdb6da; }
.mt-feature__icon { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--mt-lilac); color: var(--mt-primary); display: flex; align-items: center; justify-content: center; }
.mt-feature__body { display: flex; flex-direction: column; gap: 4px; }
.mt-feature__body b { font-size: 15px; color: var(--mt-ink); }
.mt-feature__body span { font-size: 13px; line-height: 1.5; color: var(--mt-muted); }

.mt-features--cards .mt-features__grid { gap: 16px; }
.mt-features--cards .mt-feature { flex-direction: column; padding: 28px; border-radius: 20px; }
.mt-features--cards .mt-feature__icon { width: 52px; height: 52px; border-radius: 14px; }
.mt-features--cards .mt-feature__body b { font-size: 18px; }
.mt-features--cards .mt-feature__body span { font-size: 14px; line-height: 1.65; color: #5c5762; }

.mt-features--numbered { background: var(--mt-dark); color: #fff; border-radius: var(--mt-radius-xl); padding: 56px; display: flex; flex-wrap: wrap; gap: 40px; }
.mt-features--numbered .mt-features__head { flex: 1 1 280px; margin: 0; }
.mt-features--numbered .mt-eyebrow { color: #c9a2e0; }
.mt-features--numbered .mt-h2 { color: #fff; font-size: 32px; }
.mt-features--numbered .mt-features__grid { flex: 2 1 520px; gap: 28px; }
.mt-features--numbered .mt-feature { background: transparent; border: 0; padding: 0; flex-direction: column; gap: 8px; }
.mt-feature__num { font: 700 40px/1 var(--mt-font-display); color: var(--mt-primary-light); }
.mt-features--numbered .mt-feature__body b { color: #fff; font-size: 17px; }
.mt-features--numbered .mt-feature__body span { color: var(--mt-on-dark); font-size: 14px; }
@media (max-width: 767px) { .mt-features--numbered { padding: 32px 24px; } }

/* ---------- CTA + newsletter ---------- */
.mt-cta { display: flex; flex-wrap: wrap; gap: 16px; }
.mt-cta__main { flex: 3 1 460px; padding: 36px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; border-radius: 20px; }
.mt-cta__text { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mt-cta__text p { margin: 0; font-size: 15px; line-height: 1.6; color: #5c5762; }
.mt-checklist { flex: 1 1 220px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 15px; font-weight: 600; }
.mt-checklist li { display: flex; gap: 10px; align-items: center; }
.mt-checklist svg { color: var(--mt-primary); flex: none; }
.mt-cta__news { flex: 2 1 340px; background: var(--mt-primary); color: #fff; border-radius: 20px; padding: 36px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.mt-cta__news .mt-h2 { color: #fff; }
.mt-cta__news > p { margin: 0; font-size: 15px; line-height: 1.6; color: #f1e6f8; }

.mt-news { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.mt-news__row { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-news__input { flex: 1 1 200px; min-width: 0; height: 48px; border: 0; border-radius: 12px; padding: 0 16px; font: 500 14px var(--mt-font-body); color: var(--mt-graphite); background: #fff; }
.mt-news__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: #f1e6f8; cursor: pointer; }
.mt-news__consent input { margin-top: 2px; accent-color: var(--mt-graphite); }
.mt-news__consent a { color: #fff; text-decoration: underline; }
.mt-news__note { font-size: 12px; color: #e6d5f0; }
.mt-news__msg { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .15); font-size: 14px; font-weight: 700; }

/* ---------- Hero podstranice ---------- */
.mt-phero { position: relative; border-radius: var(--mt-radius-xl); overflow: hidden; background: #0c0812; color: #fff; min-height: 420px; display: flex; }
.mt-phero--sm { min-height: 280px; }
.mt-phero--lg { min-height: 520px; }
.mt-phero__bg, .mt-phero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.mt-phero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 6, 16, .95) 0%, rgba(10, 6, 16, .8) 40%, rgba(10, 6, 16, .1) 72%, rgba(10, 6, 16, 0) 100%); }
.mt-phero__content { position: relative; z-index: 1; padding: 56px 72px; max-width: 640px; display: flex; flex-direction: column; justify-content: center; gap: 18px; align-items: flex-start; }
.mt-phero__title { margin: 0; font: 700 clamp(32px, 4.5vw, 52px)/1.04 var(--mt-font-display); letter-spacing: -.02em; color: #fff; }
.mt-phero__text { margin: 0; font-size: 17px; line-height: 1.65; color: #d9d3de; }
@media (max-width: 767px) {
	.mt-phero::after { background: linear-gradient(0deg, rgba(10, 6, 16, .96) 35%, rgba(10, 6, 16, .35) 100%); }
	.mt-phero__content { padding: 32px 22px; justify-content: flex-end; }
}

/* ---------- Naslov stranice ---------- */
.mt-ptitle { display: flex; flex-direction: column; gap: 10px; }
.mt-ptitle__sub { margin: 0; font-size: 16px; color: #5c5762; max-width: 760px; }
.mt-ptitle__date { font-size: 14px; color: var(--mt-muted); }
.mt-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--mt-muted); }
.mt-crumbs a { color: var(--mt-muted); text-decoration: none; }
.mt-crumbs a:hover { color: var(--mt-primary); }
.mt-crumbs [aria-current] { color: var(--mt-ink); font-weight: 600; }

/* ---------- Podaci firme ---------- */
.mt-company { padding: 32px; display: flex; flex-direction: column; gap: 18px; border-radius: 20px; height: 100%; box-sizing: border-box; }
.mt-company__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 15px; color: var(--mt-text); }
.mt-company__list li { display: flex; gap: 12px; align-items: flex-start; }
.mt-company__list svg { color: var(--mt-primary); flex: none; margin-top: 2px; }
.mt-company__list a { color: inherit; text-decoration: none; }
.mt-company__map { height: 240px; border-radius: 16px; background: var(--mt-lilac) center / cover; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.mt-company__map iframe { width: 100%; height: 100%; border: 0; }
.mt-company__branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.mt-company__branch { background: var(--mt-lilac-3); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mt-company__branch a { color: var(--mt-ink); }
.mt-company__btn { align-self: flex-start; margin-top: auto; }