/*
Theme Name: Montaznekuce
Theme URI: https://montaznekuce.ba
Author: Montaznekuce
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.7
Text Domain: montaznekuce
*/

/* =========================================================
   DESIGN TOKENS — values transcribed 1:1 from the design source
   ========================================================= */
:root{
  --mk-bg: #f4f1ea;
  --mk-text: #1a211d;
  --mk-green: #2f5d3a;
  --mk-green-dark: #21432a;
  --mk-green-darker: #18321f;
  --mk-slate: #5b6a6d;
  --mk-header-bg: rgba(244,241,234,.92);
  --mk-header-border: #e3ded2;
  --mk-catbar-bg: #fbf9f4;
  --mk-catbar-border: #e9e4d9;
  --mk-card-bg: #fdfcf9;
  --mk-card-border: #e9e4d9;
  --mk-input-border: #d8d2c4;
  --mk-muted-1: #6a736e;
  --mk-muted-2: #9aa39d;
  --mk-muted-3: #8a9599;
  --mk-muted-4: #4a544f;
  --mk-muted-5: #48524d;
  --mk-muted-6: #2c332e;
  --mk-muted-7: #3a433e;
  --mk-line: #e3ded2;
  --mk-tag-bg: #eceadf;
  --mk-catsection-bg: #eaf1e6;
  --mk-catsection-border: #dde6d7;
  --mk-ph-a1: #dfe6dc; --mk-ph-a2: #e8ede4; /* hero / single placeholder stripes */
  --mk-ph-b1: #e2e6da; --mk-ph-b2: #ecefe6; /* card placeholder stripes */
  --mk-success-bg: #eaf0ea;
  --mk-success-border: #cbdccc;
  --mk-map-border: #cbd3cb;
  --mk-footer-bg: #1b241e;
  --mk-footer-text: #cdd6cb;
  --mk-footer-border-1: #2c4433;
  --mk-footer-border-2: #2c362e;
  --mk-footer-border-3: #33413a;
  --mk-footer-muted-1: #96a29a;
  --mk-footer-muted-2: #9db5a2;
  --mk-footer-muted-3: #6d7a70;
  --mk-footer-muted-4: #8a978e;
  --mk-footer-muted-5: #c1cbc3;
  --mk-footer-muted-6: #9aa79d;
  --mk-footer-muted-7: #7f8f82;
  --mk-footer-input-bg: #18321f;
  --mk-footer-input-border: #3a5a45;
  --mk-mint: #8fd0a2;
  --mk-mint-dark: #9fd0ac;
  --mk-rank: #cdd6cb;

  --mk-font-serif: 'Source Serif 4', Georgia, serif;
  --mk-font-sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  --mk-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --mk-radius: 4px;
  --mk-max: 1200px;
  --mk-max-narrow: 1000px; /* 404 only */
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--mk-bg);color:var(--mk-text);font-family:var(--mk-font-sans);-webkit-font-smoothing:antialiased;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--mk-green);color:#fff}

/* Accessibility utilities (not part of the visual design — invisible unless needed) */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mk-skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--mk-green);color:#fff;padding:12px 20px;border-radius:0 0 4px 0;font-weight:700;font-size:14px}
.mk-skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--mk-green);outline-offset:2px}

.lnk:hover{color:var(--mk-green)}
.cardhov{transition:transform .18s ease, box-shadow .18s ease}
.cardhov:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(26,33,29,.10)}
.imghov{overflow:hidden}
.imghov .mk-ph{transition:transform .5s ease}
.cardhov:hover .mk-ph{transform:scale(1.04)}
.btnp{transition:background .15s ease, transform .1s ease}
.btnp:active{transform:translateY(1px)}
.tab{transition:color .15s ease, border-color .15s ease}
.undl{background-image:linear-gradient(var(--mk-green),var(--mk-green));background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease}
.undl:hover{background-size:100% 2px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--mk-green)!important;box-shadow:0 0 0 3px rgba(47,93,58,.12)}

.mk-site{min-height:100vh;display:flex;flex-direction:column}
.mk-site__main{flex:1}

/* Width/centering only — deliberately no padding here. Padding is always
   owned by each section's own class (its full shorthand would otherwise
   silently fight this one depending on stylesheet order). Combine e.g.
   class="mk-hero mk-container". */
.mk-container{width:100%;max-width:var(--mk-max);margin:0 auto;box-sizing:border-box}
.mk-container--narrow{max-width:var(--mk-max-narrow)} /* 404 only, now that Kontakt/O nama/Oglašavanje/pages are full-width */

/* =========================================================
   PLACEHOLDER PHOTO (design's diagonal-hatch mock image)
   ========================================================= */
.mk-ph{position:relative;display:flex;background-size:cover;background-position:center}
.mk-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-ph__label{position:relative;z-index:1;font-family:var(--mk-font-mono);background:rgba(255,255,255,.85);padding:5px 9px;border-radius:var(--mk-radius);color:var(--mk-muted-4);font-size:11px}
.mk-ph--hero{aspect-ratio:21/9;background-image:repeating-linear-gradient(135deg,var(--mk-ph-a1),var(--mk-ph-a1) 16px,var(--mk-ph-a2) 16px,var(--mk-ph-a2) 32px);align-items:flex-start;justify-content:flex-end;padding:16px;border-radius:var(--mk-radius)}
.mk-ph--card{aspect-ratio:16/10;background-image:repeating-linear-gradient(135deg,var(--mk-ph-b1),var(--mk-ph-b1) 12px,var(--mk-ph-b2) 12px,var(--mk-ph-b2) 24px);align-items:flex-end;padding:12px}
.mk-ph--card .mk-ph__label{font-size:10px;padding:4px 8px}
.mk-ph--single{aspect-ratio:16/9;background-image:repeating-linear-gradient(135deg,var(--mk-ph-a1),var(--mk-ph-a1) 15px,var(--mk-ph-a2) 15px,var(--mk-ph-a2) 30px);align-items:flex-end;padding:16px;border-radius:var(--mk-radius);margin-bottom:34px}
.mk-ph--related{aspect-ratio:16/10;background-image:repeating-linear-gradient(135deg,var(--mk-ph-b1),var(--mk-ph-b1) 11px,var(--mk-ph-b2) 11px,var(--mk-ph-b2) 22px)}

/* =========================================================
   HEADER
   ========================================================= */
.mk-header{position:sticky;top:0;z-index:50;background:var(--mk-header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--mk-header-border)}
.mk-header__bar{padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mk-header__logo{display:flex;align-items:center;gap:12px;cursor:pointer}
.mk-header__wordmark{font-family:var(--mk-font-sans);font-weight:700;font-size:20px;letter-spacing:-.01em;line-height:1}
.mk-header__wordmark em{font-style:normal;color:var(--mk-green)}
.mk-header__wordmark span{color:var(--mk-slate)}
/* !important + absolute px: the_custom_logo() always renders the image
   at its full native pixel size (WP intentionally ignores the theme's
   add_theme_support height/width hints for output, only for the upload
   cropper), with width/height HTML attributes and a srcset/sizes pair
   WordPress adds itself — any of those can out-specificity a plain
   max-height. !important removes the ambiguity entirely. */
.mk-header__custom-logo,.mk-header__custom-logo a{display:flex;align-items:center}
.mk-header__custom-logo img{max-height:53.2px!important;height:auto!important;width:auto!important;max-width:none!important}
.mk-footer__custom-logo,.mk-footer__custom-logo a{display:flex;align-items:center}
.mk-footer__custom-logo img{max-height:43.6px!important;height:auto!important;width:auto!important;max-width:none!important}

.mk-nav{display:flex;align-items:center;gap:22px}
.mk-nav__link{font-size:14px;font-weight:600;cursor:pointer}
.mk-nav__divider{width:1px;height:16px;background:var(--mk-input-border)}
.mk-nav__cta{font-size:14px;font-weight:700;color:#fff;background:var(--mk-green);padding:9px 18px;border-radius:var(--mk-radius);cursor:pointer}

.mk-header__toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--mk-input-border);background:#fff;border-radius:var(--mk-radius);cursor:pointer}

.mk-catbar{border-top:1px solid var(--mk-catbar-border);background:var(--mk-catbar-bg);overflow:hidden}
.mk-catbar__inner{overflow:hidden} /* combined with .mk-container: a plain block box, centering decoupled from the scrolling flex list inside it */
.mk-catbar__list{display:flex;flex-wrap:nowrap;align-items:stretch;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 32px;list-style:none;margin:0;width:100%;box-sizing:border-box}
.mk-catbar__list li{flex-shrink:0}
.mk-catbar__link{white-space:nowrap;font-size:13px;font-weight:600;color:var(--mk-muted-4);padding:12px 14px;border-bottom:2px solid transparent;cursor:pointer;display:inline-block}
.mk-catbar__link[aria-current="page"]{color:var(--mk-green);border-bottom-color:var(--mk-green)}

/* =========================================================
   MOBILE MENU (off-canvas)
   ========================================================= */
.mk-mobilemenu{position:fixed;inset:0;z-index:60;background:rgba(26,33,29,.4);display:none}
.mk-mobilemenu.is-open{display:block}
.mk-mobilemenu__panel{position:absolute;top:0;right:0;bottom:0;width:82%;max-width:340px;background:var(--mk-bg);padding:22px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.mk-mobilemenu__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mk-mobilemenu__label{font-family:var(--mk-font-mono);font-size:11px;letter-spacing:.12em;color:var(--mk-muted-3)}
.mk-mobilemenu__close{width:36px;height:36px;border:1px solid var(--mk-input-border);background:#fff;border-radius:var(--mk-radius);font-size:18px;cursor:pointer;line-height:1}
.mk-mobilemenu__link{padding:12px 6px;font-weight:700;font-size:16px;border-bottom:1px solid var(--mk-line);cursor:pointer}
.mk-mobilemenu__catlink{padding:11px 6px;font-weight:600;font-size:15px;color:var(--mk-muted-4);border-bottom:1px solid var(--mk-line);cursor:pointer}
.mk-mobilemenu__cta{margin-top:14px;text-align:center;padding:13px;font-weight:700;color:#fff;background:var(--mk-green);border-radius:var(--mk-radius);cursor:pointer}

/* =========================================================
   HERO (Naslovna)
   ========================================================= */
.mk-hero{padding:26px 32px 50px}
.mk-hero__wrap{position:relative}
.mk-hero__imagelink{cursor:pointer;border-radius:var(--mk-radius);overflow:hidden;display:block}
.mk-hero__card{position:absolute;left:40px;bottom:-28px;max-width:560px;background:#fbf9f4;border:1px solid var(--mk-card-border);border-radius:var(--mk-radius);box-shadow:0 16px 40px rgba(26,33,29,.14);padding:26px 28px}
.mk-hero__kicker{font-family:var(--mk-font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--mk-green);text-transform:uppercase}
.mk-hero__title{font-family:var(--mk-font-serif);font-weight:600;font-size:34px;line-height:1.1;letter-spacing:-.02em;margin:11px 0 12px;text-wrap:balance}
.mk-hero__excerpt{font-size:15px;line-height:1.55;color:var(--mk-muted-5);margin:0 0 14px}
.mk-hero__meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mk-muted-3)}
.mk-hero__meta strong{font-weight:600;color:var(--mk-muted-4)}

/* =========================================================
   SECTIONS / GRIDS / CARDS
   ========================================================= */
.mk-section{padding:44px 32px 8px} /* Najnovije */
.mk-section--tight{padding-bottom:20px} /* Izbor uredništva: 44px 32px 20px */
.mk-section--banner{padding:38px 32px 4px} /* home promo banner wrapper */
.mk-section--categories{padding:44px 32px} /* Popularno po kategorijama, inside tinted bg */
.mk-section--novosti{padding:34px 32px 24px} /* Novosti / kategorija list */
.mk-section--page{padding:34px 32px 40px} /* Kontakt / O nama / Oglašavanje / generic pages */
.mk-section__head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--mk-text);padding-bottom:10px;margin-bottom:26px}
.mk-section__title{font-family:var(--mk-font-serif);font-weight:600;font-size:26px;margin:0;letter-spacing:-.01em}
.mk-section__more{font-size:13px;font-weight:600;cursor:pointer;color:var(--mk-green)}

.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mk-grid--cats{gap:16px}
.mk-grid--related{gap:20px}

.mk-card{cursor:pointer;display:flex;flex-direction:column;background:var(--mk-card-bg);border:1px solid var(--mk-card-border);border-radius:var(--mk-radius);overflow:hidden}
.mk-card__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.mk-card__kicker{font-family:var(--mk-font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--mk-green);text-transform:uppercase}
.mk-card__title{font-family:var(--mk-font-serif);font-weight:600;font-size:19px;line-height:1.2;margin:0;letter-spacing:-.01em}
.mk-card__excerpt{font-size:13.5px;line-height:1.55;color:var(--mk-muted-1);margin:0;flex:1}
.mk-card__meta{font-size:12px;color:var(--mk-muted-2);margin-top:2px}

.mk-card--related .mk-card__body{padding:12px 13px 15px}
.mk-card--related .mk-card__kicker{font-size:9px}
.mk-card--related .mk-card__title{font-size:15px;line-height:1.25;margin:6px 0 0}

/* =========================================================
   PROMO BANNER (Promotion CPT: home / category placements)
   ========================================================= */
.mk-banner{cursor:pointer;display:block;border-radius:var(--mk-radius);overflow:hidden}
.mk-banner__inner{padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;color:#fff}
.mk-banner--home .mk-banner__inner{background:linear-gradient(120deg,var(--mk-green-dark),#357045)}
.mk-banner--category .mk-banner__inner{background:linear-gradient(120deg,#2c3438,#4a545a)}
.mk-banner__flag{position:absolute;top:12px;right:16px;font-family:var(--mk-font-mono);font-size:9px;letter-spacing:.14em;opacity:.6}
.mk-banner__copy{max-width:660px}
.mk-banner__brand{font-family:var(--mk-font-mono);font-size:11px;letter-spacing:.1em;margin-bottom:9px}
.mk-banner--home .mk-banner__brand{color:var(--mk-mint-dark)}
.mk-banner--category .mk-banner__brand{color:#b7c1c4}
.mk-banner__tagline{font-family:var(--mk-font-serif);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.01em}
.mk-banner__cta{flex:none;font-size:14px;font-weight:700;background:#fff;padding:12px 24px;border-radius:var(--mk-radius)}
.mk-banner--home .mk-banner__cta{color:var(--mk-green-dark)}
.mk-banner--category .mk-banner__cta{color:#2c3438}

/* =========================================================
   CATEGORY SECTION (tinted, home)
   ========================================================= */
.mk-catsection{background:var(--mk-catsection-bg);border-top:1px solid var(--mk-catsection-border);border-bottom:1px solid var(--mk-catsection-border);margin-top:34px}
.mk-catcard{cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:18px;border:1px solid var(--mk-card-border);border-radius:var(--mk-radius);padding:20px;min-height:132px}
.mk-catcard__count{font-family:var(--mk-font-mono);font-size:11px;margin-bottom:8px}
.mk-catcard__name{font-family:var(--mk-font-serif);font-weight:600;font-size:20px;margin:0;line-height:1.15;letter-spacing:-.01em}
.mk-catcard__link{font-size:13px;font-weight:600}

/* =========================================================
   EDITOR'S PICKS
   ========================================================= */
.mk-picks{display:flex;flex-direction:column}
.mk-picks__item{cursor:pointer;display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--mk-line)}
.mk-picks__rank{font-family:var(--mk-font-serif);font-weight:600;font-size:34px;color:var(--mk-rank);line-height:1}
.mk-picks__kicker{font-family:var(--mk-font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--mk-green);text-transform:uppercase}
.mk-picks__title{font-family:var(--mk-font-serif);font-weight:600;font-size:20px;margin:5px 0 0;line-height:1.2;letter-spacing:-.01em}
.mk-picks__time{font-size:12px;color:var(--mk-muted-2);white-space:nowrap}

/* =========================================================
   PAGE HEAD (Novosti / Kontakt / O nama / Oglašavanje)
   ========================================================= */
.mk-pagehead{border-bottom:2px solid var(--mk-text);padding-bottom:16px;margin-bottom:26px}
.mk-pagehead__kicker{font-family:var(--mk-font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--mk-green);text-transform:uppercase}
.mk-pagehead__title{font-family:var(--mk-font-serif);font-weight:600;font-size:38px;margin:8px 0 6px;letter-spacing:-.02em}
.mk-pagehead__desc{font-size:15px;color:var(--mk-muted-1);margin:0;max-width:640px}
.mk-pagehead--wide{margin-bottom:30px}

/* =========================================================
   CATEGORY FILTER CHIPS
   ========================================================= */
.mk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.mk-chip{cursor:pointer;font-size:13px;font-weight:600;padding:8px 15px;border-radius:var(--mk-radius);white-space:nowrap;background:#fff;color:var(--mk-muted-4);border:1px solid var(--mk-line);display:inline-block}
.mk-chip.is-active{background:var(--mk-green);color:#fff;border-color:var(--mk-green)}

/* =========================================================
   SINGLE POST
   ========================================================= */
.mk-single{padding:26px 32px 40px}
.mk-breadcrumb{font-size:12px;color:var(--mk-muted-2);margin-bottom:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;list-style:none;padding:0}
.mk-breadcrumb__current{color:#c0bbae}
.mk-single__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}

.mk-article__kicker{font-family:var(--mk-font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--mk-green);text-transform:uppercase}
.mk-article__title{font-family:var(--mk-font-serif);font-weight:700;font-size:42px;line-height:1.08;letter-spacing:-.02em;margin:12px 0 16px;text-wrap:balance}
.mk-article__lead{font-size:19px;line-height:1.55;color:var(--mk-muted-5);margin:0 0 22px}
.mk-article__meta{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--mk-line);border-bottom:1px solid var(--mk-line);margin-bottom:26px}
.mk-article__avatar{width:42px;height:42px;border-radius:var(--mk-radius);background:var(--mk-green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none}
.mk-article__byline{flex:1}
.mk-article__author{font-size:14px;font-weight:700}
.mk-article__when{font-size:12px;color:var(--mk-muted-2)}
.mk-article__social{display:flex;gap:8px}
.mk-share{width:34px;height:34px;border:1px solid var(--mk-input-border);border-radius:var(--mk-radius);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--mk-muted-1);font-weight:700;background:#fff;cursor:pointer;position:relative;font-family:inherit}
.mk-share--linkedin{font-size:11px}
.mk-share--copy svg{width:14px;height:14px}
.mk-share--copy.is-copied{border-color:var(--mk-green);color:var(--mk-green)}
.mk-share--copy::after{content:attr(data-copied-label);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;background:var(--mk-text);color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:var(--mk-radius);opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease}
.mk-share--copy.is-copied::after{opacity:1;transform:translateX(-50%) translateY(0)}

.mk-article__body{font-size:17px;line-height:1.75;color:var(--mk-muted-6)}
.mk-article__body p{margin:0 0 20px}
.mk-article__body h2{font-family:var(--mk-font-serif);font-weight:600;font-size:26px;letter-spacing:-.01em;margin:34px 0 14px}
.mk-article__body blockquote{margin:30px 0;padding:4px 0 4px 24px;border-left:4px solid var(--mk-green);font-family:var(--mk-font-serif);font-weight:500;font-size:23px;line-height:1.4;color:var(--mk-green-dark)}
.mk-article__body blockquote p{margin:0}
.mk-article__body blockquote cite{display:block;font-style:normal;font-family:var(--mk-font-sans);font-size:13px;font-weight:600;color:var(--mk-muted-3);margin-top:10px}
.mk-article__body blockquote cite::before{content:"— "}

.mk-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 8px;list-style:none;padding:0}
.mk-tags a{font-size:12px;font-weight:600;color:var(--mk-muted-4);background:var(--mk-tag-bg);padding:6px 12px;border-radius:var(--mk-radius);display:inline-block}

.mk-related{margin-top:40px;border-top:2px solid var(--mk-text);padding-top:22px}
.mk-related__title{font-family:var(--mk-font-serif);font-weight:600;font-size:22px;margin:0 0 20px}

.mk-sidebar{position:sticky;top:130px;display:flex;flex-direction:column;gap:20px}
.mk-sidebar__head{display:flex;align-items:center;justify-content:space-between}
.mk-sidebar__label{font-family:var(--mk-font-mono);font-size:10px;letter-spacing:.14em;color:var(--mk-muted-2)}
.mk-sidebar__sponsored{font-size:10px;color:#c0bbae}

.mk-ad{cursor:pointer;display:block;border:1px solid var(--mk-line);border-radius:var(--mk-radius);overflow:hidden;background:#fff}
.mk-ad__inner{flex-direction:column;justify-content:space-between;padding:18px}
.mk-ad__top{display:flex;justify-content:space-between;align-items:flex-start}
.mk-ad__flag{font-family:var(--mk-font-mono);font-size:9px;letter-spacing:.1em;opacity:.7}
.mk-ad__dim{font-size:10px;opacity:.6}
.mk-ad__brand{font-family:var(--mk-font-serif);font-weight:700;font-size:22px;line-height:1.1;letter-spacing:-.01em}
.mk-ad__tagline{font-size:13px;opacity:.85;margin-top:6px;line-height:1.4}
.mk-ad__cta{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;border:1.5px solid currentColor;padding:7px 14px;border-radius:var(--mk-radius)}
.mk-ad--ratio-34{aspect-ratio:3/4}
.mk-ad--ratio-11{aspect-ratio:1/1}

.mk-adslot{border:1px dashed var(--mk-map-border);border-radius:var(--mk-radius);padding:20px;text-align:center}
.mk-adslot__label{font-family:var(--mk-font-mono);font-size:11px;color:var(--mk-muted-2);margin-bottom:6px}
.mk-adslot__link{font-size:13px;font-weight:700;color:var(--mk-green)}

/* =========================================================
   KONTAKT
   ========================================================= */
.mk-contact-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:start}
.mk-success{background:var(--mk-success-bg);border:1px solid var(--mk-success-border);border-radius:var(--mk-radius);padding:26px;display:flex;gap:14px;align-items:flex-start}
.mk-success__icon{width:36px;height:36px;border-radius:var(--mk-radius);background:var(--mk-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.mk-success__title{margin:0 0 4px;font-family:var(--mk-font-serif);font-size:19px}
.mk-success__text{margin:0;font-size:14px;color:var(--mk-muted-4)}

.mk-form{display:flex;flex-direction:column;gap:16px}
.mk-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mk-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--mk-muted-4)}
.mk-form input,.mk-form textarea,.mk-form select{font-family:inherit;font-size:14px;padding:12px 14px;border:1px solid var(--mk-input-border);border-radius:var(--mk-radius);background:#fff}
.mk-form textarea{resize:vertical}
.mk-form__submit{align-self:flex-start;font-weight:700;font-size:14px;color:#fff;background:var(--mk-green);border:none;padding:13px 28px;border-radius:var(--mk-radius);cursor:pointer}
.mk-form__error{background:#fbeceb;border:1px solid #e3b9b6;border-radius:var(--mk-radius);padding:14px 16px;font-size:13.5px;color:#7a2e28;margin:0 0 16px}

.mk-aside{display:flex;flex-direction:column;gap:14px}
.mk-aside-box{background:var(--mk-card-bg);border:1px solid var(--mk-card-border);border-radius:var(--mk-radius);padding:20px}
.mk-aside-box__label{font-family:var(--mk-font-mono);font-size:10px;letter-spacing:.1em;color:var(--mk-muted-2);margin-bottom:10px}
.mk-aside-box__body{font-size:14px;line-height:1.9;color:var(--mk-muted-7)}
.mk-aside-box--dark{background:var(--mk-green-dark);color:#fff}
.mk-aside-box--dark .mk-aside-box__label{color:var(--mk-footer-muted-2)}
.mk-aside-box--dark .mk-aside-box__body{font-size:14px;line-height:1.7;color:#fff}

/* =========================================================
   O NAMA
   ========================================================= */
.mk-prose{font-size:17px;line-height:1.75;color:var(--mk-muted-6);max-width:680px}
.mk-prose p{margin:0 0 20px}
.mk-prose h2{font-family:var(--mk-font-serif);font-weight:600;font-size:26px;letter-spacing:-.01em;margin:34px 0 14px}
.mk-values{margin-top:8px}
.mk-value{background:var(--mk-card-bg);border:1px solid var(--mk-card-border);border-radius:var(--mk-radius);padding:20px}
.mk-value__n{font-family:var(--mk-font-serif);font-weight:700;font-size:30px;color:var(--mk-rank);line-height:1;margin-bottom:10px}
.mk-value__title{font-family:var(--mk-font-serif);font-weight:600;font-size:18px;margin:0 0 6px;letter-spacing:-.01em}
.mk-value__text{font-size:13.5px;line-height:1.55;color:var(--mk-muted-1);margin:0}

/* =========================================================
   OGLAŠAVANJE
   ========================================================= */
.mk-adformat{background:var(--mk-card-bg);border:1px solid var(--mk-card-border);border-radius:var(--mk-radius);padding:22px;display:flex;flex-direction:column;gap:6px}
.mk-adformat__dim{font-family:var(--mk-font-mono);font-size:10px;letter-spacing:.1em;color:var(--mk-muted-2)}
.mk-adformat__name{font-family:var(--mk-font-serif);font-weight:600;font-size:20px;margin:2px 0 0;letter-spacing:-.01em}
.mk-adformat__text{font-size:13.5px;line-height:1.55;color:var(--mk-muted-1);margin:0;flex:1}
.mk-adformat__price{font-family:var(--mk-font-serif);font-weight:700;font-size:22px;color:var(--mk-green);margin-top:8px}

.mk-cta-banner{background:var(--mk-green-dark);color:#fff;border-radius:var(--mk-radius);padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mk-cta-banner__title{font-family:var(--mk-font-serif);font-weight:600;font-size:24px;letter-spacing:-.01em}
.mk-cta-banner__sub{font-size:14px;color:var(--mk-footer-muted-2);margin-top:6px}
.mk-cta-banner__link{flex:none;font-size:14px;font-weight:700;color:var(--mk-green-dark);background:var(--mk-mint);padding:13px 26px;border-radius:var(--mk-radius);cursor:pointer}

/* =========================================================
   FOOTER
   ========================================================= */
.mk-footer{background:var(--mk-footer-bg);color:var(--mk-footer-text);margin-top:20px}
.mk-footer__cta{background:var(--mk-green-dark);border-bottom:1px solid var(--mk-footer-border-1)}
.mk-footer__cta-inner{padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mk-footer__cta-title{font-family:var(--mk-font-serif);font-weight:600;font-size:22px;color:#fff;letter-spacing:-.01em}
.mk-footer__cta-sub{font-size:13.5px;color:var(--mk-footer-muted-2);margin-top:5px}
.mk-footer__form{display:flex;gap:8px;flex-wrap:wrap}
.mk-footer__form input{font-family:inherit;font-size:14px;padding:11px 14px;border:1px solid var(--mk-footer-input-border);border-radius:var(--mk-radius);background:var(--mk-footer-input-bg);color:#fff;min-width:220px}
.mk-footer__form button{font-weight:700;font-size:14px;color:var(--mk-green-dark);background:var(--mk-mint);border:none;padding:11px 22px;border-radius:var(--mk-radius);cursor:pointer;white-space:nowrap}
.mk-footer__form-note{width:100%;font-size:12px;color:var(--mk-footer-muted-2);margin-top:2px}

.mk-footer__grid{padding:44px 32px 30px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.mk-footer__brandrow{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.mk-footer__wordmark{font-weight:700;font-size:18px}
.mk-footer__wordmark em{font-style:normal;color:var(--mk-mint)}
.mk-footer__wordmark span{color:var(--mk-footer-muted-6)}
.mk-footer__blurb{font-size:13.5px;line-height:1.65;color:var(--mk-footer-muted-1);max-width:320px;margin:0 0 16px}
.mk-footer__social{display:flex;gap:9px;list-style:none;padding:0;margin:0}
.mk-footer__social a{width:34px;height:34px;border:1px solid var(--mk-footer-border-3);border-radius:var(--mk-radius);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--mk-footer-muted-2);font-weight:700}
.mk-footer__label{font-family:var(--mk-font-mono);font-size:10px;letter-spacing:.12em;color:var(--mk-footer-muted-3);margin-bottom:14px}
.mk-footer__links{display:flex;flex-direction:column;gap:9px;list-style:none;padding:0;margin:0}
.mk-footer__links a{font-size:13.5px;color:var(--mk-footer-muted-5)}
.mk-footer__contact{font-size:13px;color:var(--mk-footer-muted-4);margin-top:4px}

.mk-footer__bottom{padding:18px 32px;border-top:1px solid var(--mk-footer-border-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--mk-footer-muted-3)}

/* =========================================================
   PAGINATION (not explicit in the design's static mock data, but a real
   multi-page archive needs it to keep older posts reachable — styled to
   match the existing chip/pill language rather than inventing new UI)
   ========================================================= */
.mk-pagination{margin-top:36px}
.mk-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mk-pagination .page-numbers{cursor:pointer;font-size:13px;font-weight:600;padding:8px 15px;border-radius:var(--mk-radius);background:#fff;color:var(--mk-muted-4);border:1px solid var(--mk-line);display:inline-block}
.mk-pagination .page-numbers.current{background:var(--mk-green);color:#fff;border-color:var(--mk-green)}
.mk-pagination .page-numbers.dots{border-color:transparent;background:transparent}

/* =========================================================
   404 / SEARCH
   ========================================================= */
.mk-empty{padding:80px 32px;text-align:center}
.mk-empty__title{font-family:var(--mk-font-serif);font-weight:600;font-size:32px;margin:0 0 12px}
.mk-empty__text{font-size:15px;color:var(--mk-muted-1);margin:0 0 24px}
.mk-empty .mk-searchform{max-width:420px;margin:0 auto 28px;display:flex;gap:8px}
.mk-empty .mk-searchform input{flex:1;font-family:inherit;font-size:14px;padding:12px 14px;border:1px solid var(--mk-input-border);border-radius:var(--mk-radius)}
.mk-empty .mk-searchform button{font-weight:700;font-size:14px;color:#fff;background:var(--mk-green);border:none;padding:12px 18px;border-radius:var(--mk-radius);cursor:pointer}

/* =========================================================
   RESPONSIVE — breakpoints copied verbatim from the design
   ========================================================= */
@media(max-width:900px){
  .desknav{display:none!important}
  .mk-header__toggle{display:flex!important}
  .mk-single__grid{grid-template-columns:1fr!important}
  .mk-footer__grid{grid-template-columns:1fr 1fr!important;gap:28px!important}
}
@media(max-width:640px){
  .mk-grid{grid-template-columns:1fr!important}
  .mk-contact-grid{grid-template-columns:1fr!important}
  .mk-form__row{grid-template-columns:1fr!important}
  .mk-container,.mk-catbar__list{padding-left:18px!important;padding-right:18px!important}
  .mk-hero__card{position:static!important;left:auto!important;bottom:auto!important;max-width:none!important;margin-top:-20px;box-shadow:0 8px 24px rgba(26,33,29,.12)!important}
  .mk-hero{padding-bottom:16px!important}
}