{"id":1344,"date":"2026-09-28T12:14:11","date_gmt":"2026-09-28T12:14:11","guid":{"rendered":"https:\/\/medino.hr\/?page_id=1344"},"modified":"2026-10-21T17:51:09","modified_gmt":"2026-10-21T17:51:09","slug":"kids-corner","status":"publish","type":"page","link":"https:\/\/medino.hr\/kids-corner\/","title":{"rendered":"Kids Corner"},"content":{"rendered":"\n\n\n<div class=\"medino-kids\">\n\n  <!-- =========================================================\n       1. UVOD \u2014 MEDINO KIDS\n       ========================================================= -->\n\n  <section class=\"mk-hero\">\n\n    <div class=\"mk-hero-image\"><video data-medino-department-film muted loop playsinline preload=\"none\" poster=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/10\/medino-kids-family-preview-final.jpg\" aria-label=\"MEDINO Kids film\"><source data-src=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/10\/medino-kids-bez-zuma-proba.mp4\" type=\"video\/mp4\"><\/video><\/div>\n\n    <div class=\"mk-hero-content\">\n\n      <h1>MEDINO KIDS<\/h1>\n\n      <p>\n        Otkrij svijet malih avantura.\n      <\/p>\n\n      <div class=\"mk-hero-line\"><\/div>\n\n      <!-- \u0160TO SLIJEDI -->\n      <div class=\"mk-hero-nav\">\n        <span class=\"mk-hero-nav-active\">OTKRIJ<\/span>\n        <span class=\"mk-hero-dot\">\u00b7<\/span>\n        <span>DIJELI<\/span>\n        <span class=\"mk-hero-dot\">\u00b7<\/span>\n        <span>IGRAJ SE<\/span>\n      <\/div><button type=\"button\" class=\"mk-film-toggle\" aria-label=\"Pauziraj film\" onclick=\"var v=this.closest('.mk-hero').querySelector('video');if(v.paused){v.play();this.textContent='Pauziraj film';this.setAttribute('aria-label','Pauziraj film');}else{v.pause();this.textContent='Pokreni film';this.setAttribute('aria-label','Pokreni film');}\">Pauziraj film<\/button>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =========================================================\n       2. OTKRIJ \u2014 DJECA I BEBE\n       ========================================================= -->\n\n  <section class=\"mk-collection\">\n\n    <div class=\"mk-section-intro\">\n\n      <span class=\"mk-eyebrow mk-blue\">\n        OTKRIJ\n      <\/span>\n\n      <h2>ZA MALE AVANTURE<\/h2>\n\n      <p>\n        ODJENI SVOJU MALU AVANTURU.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"mk-category-grid\">\n\n\n      <!-- DJEVOJ\u010cICE -->\n\n      <div class=\"mk-category mk-girls\">\n\n        <div class=\"mk-category-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/09\/kids-corner-02-istrazuj.jpg\"\n            alt=\"MEDINO djevoj\u010dice\"\n          >\n        <\/div>\n\n        <div class=\"mk-category-bottom\">\n\n          <h3>DJEVOJ\u010cICE<\/h3>\n\n          <a\n            class=\"mk-explore\"\n            href=\"\/kategorija\/djevojcice\/\"\n          >\n            ISTRA\u017dI\n            <span>\u2197<\/span>\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- DJE\u010cACI -->\n\n      <div class=\"mk-category mk-boys\">\n\n        <div class=\"mk-category-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/09\/igraj-se.jpg\"\n            alt=\"MEDINO dje\u010daci\"\n          >\n        <\/div>\n\n        <div class=\"mk-category-bottom\">\n\n          <h3>DJE\u010cACI<\/h3>\n\n          <a\n            class=\"mk-explore\"\n            href=\"\/kategorija\/djecaci\/\"\n          >\n            ISTRA\u017dI\n            <span>\u2197<\/span>\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- BEBE - MALI MEDO -->\n\n      <div class=\"mk-category mk-bear\">\n\n        <div class=\"mk-category-image\">\n          <img decoding=\"async\"\n            src=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/09\/malimedo.jpg\"\n            alt=\"MEDINO Mali Medo\"\n          >\n        <\/div>\n\n        <div class=\"mk-category-bottom\">\n\n          <h3>BEBE &#8211; MALI MEDO<\/h3>\n\n          <a\n            class=\"mk-explore\"\n            href=\"\/mali-medo\/\"\n          >\n            ISTRA\u017dI\n            <span>\u2197<\/span>\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/section>\n\n\n  <!-- =========================================================\n       3. SHARE THE BEAR \u2014 DIJELI\n       ========================================================= -->\n\n  <section class=\"mk-share\">\n\n    <div class=\"mk-share-inner\">\n\n\n      <!-- LIJEVO -->\n\n      <div class=\"mk-share-main\">\n\n        <span class=\"mk-eyebrow mk-share-eyebrow\">\n          DIJELI\n        <\/span>\n\n\n        <a\n          class=\"mk-share-title\"\n          href=\"https:\/\/www.facebook.com\/profile.php?id=61594802144699\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          aria-label=\"Share the Bear\"\n        >\n\n          <img decoding=\"async\"\n            src=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/09\/share_the_bear.jpg\"\n            alt=\"Share the Bear\"\n          >\n\n        <\/a>\n\n\n        <p class=\"mk-share-text\">\n          Poka\u017ei nam svoj MEDINO trenutak\n          i podijeli svoju malu avanturu s nama.\n        <\/p>\n\n\n        <a\n          class=\"mk-share-button\"\n          href=\"https:\/\/www.facebook.com\/profile.php?id=61594802144699\"\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          POKA\u017dI NAM SVOJ MEDINO\n          <span>\u2197<\/span>\n        <\/a>\n\n      <\/div>\n\n\n      <!-- DESNO -->\n\n      <div class=\"mk-share-note\">\n\n        <div class=\"mk-tape\"><\/div>\n\n        <div class=\"mk-share-note-top\">\n\n          <span class=\"mk-share-note-small\">\n            SHARE THE BEAR\n          <\/span>\n\n          <span class=\"mk-share-note-paw\">\n            <img decoding=\"async\"\n              src=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/09\/medino_sapica.svg\"\n              alt=\"\"\n            >\n          <\/span>\n\n        <\/div>\n\n\n        <h3>\n          PODIJELI SVOJ<br>\n          MEDINO TRENUTAK\n        <\/h3>\n\n\n        <p class=\"mk-share-note-intro\">\n          Uslikaj, podijeli i ozna\u010di svoj\n          MEDINO trenutak i osvoji poseban poklon!\n        <\/p>\n\n\n        <div class=\"mk-share-steps\">\n\n\n          <!-- USLIKAJ -->\n\n          <div class=\"mk-share-step mk-step-blue\">\n\n            <div class=\"mk-step-icon\">\n\n              <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n\n                <rect\n                  x=\"8\"\n                  y=\"18\"\n                  width=\"48\"\n                  height=\"34\"\n                  rx=\"7\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                \/>\n\n                <path\n                  d=\"M20 18l5-7h14l5 7\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                  stroke-linecap=\"round\"\n                \/>\n\n                <circle\n                  cx=\"32\"\n                  cy=\"35\"\n                  r=\"10\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                \/>\n\n                <circle\n                  cx=\"47\"\n                  cy=\"25\"\n                  r=\"2.5\"\n                  fill=\"currentColor\"\n                \/>\n\n              <\/svg>\n\n            <\/div>\n\n            <div class=\"mk-step-content\">\n\n              <strong>1. USLIKAJ<\/strong>\n\n              <span>svoj trenutak<\/span>\n\n            <\/div>\n\n          <\/div>\n\n\n          <!-- PODIJELI -->\n\n          <div class=\"mk-share-step mk-step-green\">\n\n            <div class=\"mk-step-icon\">\n\n              <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n\n                <path\n                  d=\"M13 31L51 14L42 51L30 38L13 31Z\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                  stroke-linejoin=\"round\"\n                \/>\n\n                <path\n                  d=\"M30 38L51 14\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                  stroke-linecap=\"round\"\n                \/>\n\n                <path\n                  d=\"M30 38L29 50\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                  stroke-linecap=\"round\"\n                \/>\n\n              <\/svg>\n\n            <\/div>\n\n            <div class=\"mk-step-content\">\n\n              <strong>2. PODIJELI<\/strong>\n\n              <span>i ozna\u010di @medino<\/span>\n\n            <\/div>\n\n          <\/div>\n\n\n          <!-- OSVOJI -->\n\n          <div class=\"mk-share-step mk-step-red\">\n\n            <div class=\"mk-step-icon\">\n\n              <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n\n                <rect\n                  x=\"9\"\n                  y=\"25\"\n                  width=\"46\"\n                  height=\"29\"\n                  rx=\"3\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                \/>\n\n                <path\n                  d=\"M7 25h50v-8H7z\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                \/>\n\n                <path\n                  d=\"M32 17v37\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                \/>\n\n                <path\n                  d=\"M32 17\n                     C23 17 17 14 17 9\n                     C17 5 21 3 25 5\n                     C29 7 32 17 32 17Z\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                \/>\n\n                <path\n                  d=\"M32 17\n                     C41 17 47 14 47 9\n                     C47 5 43 3 39 5\n                     C35 7 32 17 32 17Z\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"4\"\n                \/>\n\n              <\/svg>\n\n            <\/div>\n\n            <div class=\"mk-step-content\">\n\n              <strong>3. OSVOJI<\/strong>\n\n              <span>svoj MEDINO poklon<\/span>\n\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"mk-share-note-bottom\">\n\n          <span>\n            Tvoj trenutak.\n          <\/span>\n\n          <strong>\n            Tvoja pri\u010da.\n          <\/strong>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <span class=\"mk-share-star mk-star-one\">\u2726<\/span>\n    <span class=\"mk-share-star mk-star-two\">\u2727<\/span>\n\n    <span class=\"mk-share-line mk-line-one\"><\/span>\n    <span class=\"mk-share-line mk-line-two\"><\/span>\n\n  <\/section>\n\n\n  <!-- =========================================================\n       4. OTVORI VRATA MA\u0160TI \u2014 IGRAJ SE\n       ========================================================= -->\n\n  <section class=\"mk-play\">\n\n    <div class=\"mk-play-intro\">\n\n      <span class=\"mk-eyebrow mk-play-eyebrow\">\n        IGRAJ SE\n      <\/span>\n\n      <h2>\n        OTVORI VRATA MA\u0160TI.\n      <\/h2>\n\n      <p>\n        SLIKAJ \u00b7 \u010cITAJ \u00b7 IGRAJ SE\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"mk-play-image\">\n\n      <img decoding=\"async\"\n        src=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/09\/1111111111.png\"\n        alt=\"MEDINO \u2014 slikaj, \u010ditaj i igraj se\"\n      >\n\n\n      <!-- NA\u0160A MEDINO \u0160APICA -->\n\n      <a\n        class=\"mk-paw-link\"\n        href=\"https:\/\/medino.hr\/igraj-se\/\"\n        aria-label=\"Otvori Igraj se\"\n      >\n\n        <img decoding=\"async\"\n          class=\"mk-paw-image\"\n          src=\"https:\/\/medino.hr\/wp-content\/uploads\/2026\/09\/medino_sapica.svg\"\n          alt=\"Otvori\"\n        >\n\n        <span class=\"mk-paw-text\">\n          OTVORI\n        <\/span>\n\n      <\/a>\n\n    <\/div>\n\n  <\/section>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   MEDINO KIDS \u2014 GLOBAL\n   ========================================================= *\/\n\n.medino-kids {\n\n  --mk-blue: #3B5573;\n  --mk-green: #48736F;\n  --mk-sand: #C5A477;\n  --mk-red: #B9786F;\n\n  --mk-dark: #171A1A;\n  --mk-cream: #F7F3EC;\n\n  width: 100%;\n  margin: 0;\n  padding: 0;\n\n  overflow: hidden;\n\n  color: var(--mk-dark);\n\n  font-family: inherit;\n}\n\n.medino-kids *,\n.medino-kids *::before,\n.medino-kids *::after {\n  box-sizing: border-box;\n}\n\n.medino-kids a {\n  text-decoration: none;\n}\n\n.medino-kids img {\n  display: block;\n  max-width: 100%;\n}\n\n\n\/* =========================================================\n   EYEBROW\n   ========================================================= *\/\n\n.mk-eyebrow {\n\n  display: inline-block;\n\n  font-size: 12px;\n  font-weight: 700;\n\n  letter-spacing: .22em;\n  line-height: 1.2;\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   1. HERO\n   ========================================================= *\/\n\n.mk-hero {\n\n  position: relative;\n\n  min-height: 720px;\n\n  display: flex;\n  align-items: stretch;\n\n  overflow: hidden;\n\n  background: var(--mk-blue);\n}\n\n\n.mk-hero-image {\n\n  position: absolute;\n\n  inset: 0;\n\n  overflow: hidden;\n}\n\n\n.mk-hero-image::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  background:\n    linear-gradient(\n      90deg,\n      rgba(59,85,115,.97) 0%,\n      rgba(59,85,115,.86) 30%,\n      rgba(59,85,115,.38) 58%,\n      rgba(59,85,115,.05) 100%\n    );\n}\n\n\n.mk-hero-image img {\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  object-position: center;\n}\n\n\n.mk-hero-content {\n\n  position: relative;\n\n  z-index: 2;\n\n  width: min(650px,88%);\n\n  margin-left: clamp(30px,8vw,130px);\n\n  padding: 110px 0;\n\n  align-self: center;\n\n  color: #fff;\n}\n\n\n.mk-hero-content h1 {\n\n  margin: 0 0 18px;\n\n  font-size: clamp(55px,7vw,105px);\n\n  line-height: .9;\n\n  font-weight: 800;\n\n  letter-spacing: -.055em;\n\n  color: #fff;\n}\n\n\n.mk-hero-content p {\n\n  margin: 0;\n\n  max-width: 500px;\n\n  font-size: clamp(21px,2.2vw,30px);\n\n  line-height: 1.25;\n\n  color: #fff;\n}\n\n\n.mk-hero-line {\n\n  width: 90px;\n  height: 3px;\n\n  margin: 30px 0 18px;\n\n  background: var(--mk-red);\n}\n\n\n\/* =========================================================\n   OTKRIJ \u00b7 DIJELI \u00b7 IGRAJ SE\n   ========================================================= *\/\n\n.mk-hero-nav {\n\n  display: flex;\n\n  align-items: center;\n\n  flex-wrap: wrap;\n\n  gap: 10px;\n\n  font-size: 12px;\n\n  font-weight: 800;\n\n  letter-spacing: .19em;\n\n  text-transform: uppercase;\n\n  color: rgba(255,255,255,.86);\n}\n\n\n.mk-hero-nav-active {\n\n  color: #fff;\n}\n\n\n.mk-hero-dot {\n\n  color: var(--mk-red);\n\n  font-size: 18px;\n\n  line-height: 1;\n}\n\n\n\/* =========================================================\n   2. OTKRIJ\n   ========================================================= *\/\n\n.mk-collection {\n\n  padding: clamp(80px,9vw,135px) 5vw;\n\n  background: var(--mk-cream);\n}\n\n\n.mk-section-intro {\n\n  max-width: 900px;\n\n  margin: 0 auto 60px;\n\n  text-align: center;\n}\n\n\n.mk-section-intro .mk-eyebrow {\n\n  color: var(--mk-blue);\n}\n\n\n.mk-section-intro h2 {\n\n  margin: 14px 0 12px;\n\n  font-size: clamp(40px,5vw,70px);\n\n  line-height: .95;\n\n  font-weight: 800;\n\n  letter-spacing: -.045em;\n\n  color: var(--mk-dark);\n}\n\n\n.mk-section-intro p {\n\n  margin: 0;\n\n  font-size: clamp(16px,1.6vw,21px);\n\n  font-weight: 600;\n\n  letter-spacing: .08em;\n\n  color: var(--mk-dark);\n}\n\n\n.mk-category-grid {\n\n  width: min(1400px,100%);\n\n  margin: 0 auto;\n\n  display: grid;\n\n  grid-template-columns: repeat(3,1fr);\n\n  gap: 24px;\n}\n\n\n.mk-category {\n\n  position: relative;\n\n  display: flex;\n\n  flex-direction: column;\n\n  min-height: 560px;\n\n  overflow: hidden;\n\n  background: #fff;\n\n  border: 1px solid rgba(23,26,26,.10);\n\n  transition:\n    transform .35s ease,\n    box-shadow .35s ease;\n}\n\n\n.mk-category:hover {\n\n  transform: translateY(-6px);\n\n  box-shadow:\n    0 22px 50px rgba(23,26,26,.12);\n}\n\n\n.mk-girls {\n  border-top: 6px solid var(--mk-blue);\n}\n\n.mk-boys {\n  border-top: 6px solid var(--mk-green);\n}\n\n.mk-bear {\n  border-top: 6px solid var(--mk-red);\n}\n\n\n.mk-category-image {\n\n  position: relative;\n\n  height: 350px;\n\n  overflow: hidden;\n}\n\n\n.mk-category-image::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n  right: 0;\n  bottom: 0;\n\n  height: 55px;\n\n  background:\n    linear-gradient(\n      to top,\n      #fff,\n      transparent\n    );\n}\n\n\n.mk-category-image img {\n\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n\n  transition:\n    transform .6s cubic-bezier(.2,.65,.25,1);\n}\n\n\n.mk-category:hover .mk-category-image img {\n\n  transform: scale(1.025);\n}\n\n\n.mk-category-bottom {\n\n  position: relative;\n\n  z-index: 4;\n\n  margin-top: auto;\n\n  padding: 0 25px 29px;\n}\n\n\n.mk-category-bottom h3 {\n\n  margin: 0 0 15px;\n\n  font-size: clamp(27px,3vw,42px);\n\n  line-height: 1;\n\n  font-weight: 800;\n\n  letter-spacing: -.035em;\n\n  color: #111;\n}\n\n\n.mk-explore {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 9px;\n\n  padding-bottom: 4px;\n\n  border-bottom: 2px solid currentColor;\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  letter-spacing: .16em;\n\n  color: var(--mk-dark);\n\n  transition:\n    gap .25s ease,\n    opacity .25s ease;\n}\n\n\n.mk-explore span {\n\n  font-size: 17px;\n\n  line-height: 1;\n}\n\n\n.mk-explore:hover {\n\n  gap: 14px;\n\n  opacity: .72;\n}\n\n\n\/* =========================================================\n   3. SHARE THE BEAR\n   ========================================================= *\/\n\n.mk-share {\n\n  position: relative;\n\n  overflow: hidden;\n\n  padding: clamp(90px,9vw,140px) 6vw;\n\n  background: var(--mk-green);\n\n  color: #fff;\n}\n\n\n.mk-share::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  top: 0;\n  left: 0;\n\n  width: 100%;\n  height: 9px;\n\n  background:\n    linear-gradient(\n      90deg,\n      var(--mk-blue) 0%,\n      var(--mk-blue) 25%,\n      var(--mk-green) 25%,\n      var(--mk-green) 50%,\n      var(--mk-sand) 50%,\n      var(--mk-sand) 75%,\n      var(--mk-red) 75%,\n      var(--mk-red) 100%\n    );\n}\n\n\n.mk-share-inner {\n\n  position: relative;\n\n  z-index: 2;\n\n  width: min(1450px,100%);\n\n  margin: 0 auto;\n\n  display: grid;\n\n  grid-template-columns: .86fr 1.14fr;\n\n  align-items: center;\n\n  gap: clamp(50px,7vw,105px);\n}\n\n\n.mk-share-main {\n\n  position: relative;\n\n  padding: 20px 0;\n}\n\n\n.mk-share-eyebrow {\n\n  color: var(--mk-red);\n\n  font-size: 14px;\n\n  letter-spacing: .25em;\n}\n\n\n.mk-share-title {\n\n  display: block;\n\n  width: min(570px,100%);\n\n  margin-top: 12px;\n\n  transform:\n    rotate(-4.5deg)\n    translateX(-8px);\n\n  transform-origin: left center;\n\n  filter:\n    drop-shadow(0 18px 22px rgba(0,0,0,.15));\n\n  transition:\n    transform .4s cubic-bezier(.2,.65,.25,1);\n}\n\n\n.mk-share-title img {\n\n  width: 100%;\n\n  height: auto;\n\n  display: block;\n\n  mix-blend-mode: multiply;\n}\n\n\n.mk-share-title:hover {\n\n  transform:\n    rotate(-7deg)\n    translate(-5px,-6px);\n}\n\n\n.mk-share-text {\n\n  max-width: 490px;\n\n  margin: 35px 0 28px;\n\n  font-size: 18px;\n\n  line-height: 1.6;\n\n  color: rgba(255,255,255,.92);\n}\n\n\n.mk-share-button {\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 17px;\n\n  min-height: 54px;\n\n  padding: 0 24px;\n\n  background: #fff;\n\n  color: var(--mk-green);\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  letter-spacing: .13em;\n\n  transition:\n    transform .3s ease;\n}\n\n\n.mk-share-button span {\n\n  font-size: 18px;\n}\n\n\n.mk-share-button:hover {\n\n  transform:\n    translateY(-3px);\n}\n\n\n\/* =========================================================\n   SHARE PAPIR\n   ========================================================= *\/\n\n.mk-share-note {\n\n  position: relative;\n\n  width: min(620px,100%);\n\n  padding: 48px 45px 40px;\n\n  background: #F7F0E3;\n\n  color: var(--mk-dark);\n\n  transform:\n    rotate(2deg);\n\n  box-shadow:\n    0 28px 60px rgba(0,0,0,.20);\n}\n\n\n.mk-share-note::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 11px;\n\n  border: 1px solid rgba(185,120,111,.30);\n\n  pointer-events: none;\n}\n\n\n.mk-tape {\n\n  position: absolute;\n\n  top: -16px;\n\n  right: 65px;\n\n  width: 105px;\n\n  height: 29px;\n\n  background:\n    rgba(185,120,111,.62);\n\n  transform:\n    rotate(4deg);\n\n  z-index: 4;\n}\n\n\n.mk-share-note-top {\n\n  position: relative;\n\n  z-index: 3;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: space-between;\n\n  margin-bottom: 24px;\n}\n\n\n.mk-share-note-small {\n\n  font-size: 10px;\n\n  font-weight: 800;\n\n  letter-spacing: .18em;\n\n  color: var(--mk-green);\n}\n\n\n.mk-share-note-paw {\n\n  width: 46px;\n  height: 46px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n}\n\n\n.mk-share-note-paw img {\n\n  width: 37px !important;\n  height: 37px !important;\n\n  object-fit: contain;\n}\n\n\n.mk-share-note h3 {\n\n  position: relative;\n\n  z-index: 3;\n\n  margin: 0 0 15px;\n\n  font-size: clamp(35px,4vw,55px);\n\n  line-height: .91;\n\n  font-weight: 800;\n\n  letter-spacing: -.045em;\n\n  color: var(--mk-blue);\n}\n\n\n.mk-share-note-intro {\n\n  position: relative;\n\n  z-index: 3;\n\n  max-width: 470px;\n\n  margin: 0 0 32px;\n\n  font-size: 17px;\n\n  line-height: 1.45;\n\n  color: var(--mk-dark);\n}\n\n\n.mk-share-steps {\n\n  position: relative;\n\n  z-index: 3;\n\n  display: grid;\n\n  grid-template-columns: repeat(3,1fr);\n\n  gap: 13px;\n\n  margin-top: 22px;\n}\n\n\n.mk-share-step {\n\n  min-height: 150px;\n\n  padding: 17px 15px 15px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  justify-content: space-between;\n\n  background: #fff;\n\n  border-top: 5px solid;\n\n  box-shadow:\n    0 5px 15px rgba(23,26,26,.05);\n}\n\n\n.mk-step-blue {\n  border-color: var(--mk-blue);\n  color: var(--mk-blue);\n}\n\n\n.mk-step-green {\n  border-color: var(--mk-green);\n  color: var(--mk-green);\n}\n\n\n.mk-step-red {\n  border-color: var(--mk-red);\n  color: var(--mk-red);\n}\n\n\n.mk-step-icon {\n\n  width: 50px;\n  height: 50px;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  border-radius: 50%;\n\n  background: var(--mk-cream);\n\n  color: currentColor;\n}\n\n\n.mk-step-icon svg {\n\n  width: 34px;\n  height: 34px;\n\n  display: block;\n}\n\n\n.mk-step-content strong {\n\n  display: block;\n\n  margin-top: 14px;\n\n  font-size: 11px;\n\n  font-weight: 800;\n\n  letter-spacing: .08em;\n\n  color: var(--mk-dark);\n}\n\n\n.mk-step-content span {\n\n  display: block;\n\n  margin-top: 4px;\n\n  font-size: 10px;\n\n  line-height: 1.3;\n\n  color: rgba(23,26,26,.65);\n}\n\n\n.mk-share-note-bottom {\n\n  position: relative;\n\n  z-index: 3;\n\n  display: flex;\n\n  gap: 8px;\n\n  flex-wrap: wrap;\n\n  margin-top: 27px;\n\n  padding-top: 17px;\n\n  border-top: 1px dashed rgba(23,26,26,.25);\n\n  font-size: 14px;\n\n  font-style: italic;\n}\n\n\n.mk-share-note-bottom strong {\n\n  color: var(--mk-red);\n}\n\n\n.mk-share-star {\n\n  position: absolute;\n\n  z-index: 1;\n\n  color: var(--mk-sand);\n\n  pointer-events: none;\n\n  opacity: .75;\n}\n\n\n.mk-star-one {\n\n  left: 3%;\n\n  bottom: 12%;\n\n  font-size: 50px;\n\n  transform:\n    rotate(-15deg);\n}\n\n\n.mk-star-two {\n\n  right: 3%;\n\n  top: 14%;\n\n  font-size: 34px;\n\n  transform:\n    rotate(15deg);\n}\n\n\n.mk-share-line {\n\n  position: absolute;\n\n  z-index: 1;\n\n  width: 80px;\n\n  height: 3px;\n\n  border-radius: 10px;\n\n  opacity: .65;\n\n  pointer-events: none;\n}\n\n\n.mk-line-one {\n\n  left: 3%;\n\n  top: 30%;\n\n  background: var(--mk-red);\n\n  transform:\n    rotate(-15deg);\n}\n\n\n.mk-line-two {\n\n  right: 4%;\n\n  bottom: 23%;\n\n  background: var(--mk-blue);\n\n  transform:\n    rotate(12deg);\n}\n\n\n\/* =========================================================\n   4. OTVORI VRATA MA\u0160TI\n   ========================================================= *\/\n\n.mk-play {\n\n  padding: clamp(85px,10vw,145px) 5vw;\n\n  background: var(--mk-sand);\n}\n\n\n.mk-play-intro {\n\n  max-width: 1000px;\n\n  margin: 0 auto 50px;\n\n  text-align: center;\n}\n\n\n.mk-play-eyebrow {\n\n  color: var(--mk-red);\n}\n\n\n.mk-play-intro h2 {\n\n  margin: 16px 0 13px;\n\n  font-size: clamp(42px,6vw,82px);\n\n  line-height: .92;\n\n  font-weight: 800;\n\n  letter-spacing: -.055em;\n\n  color: var(--mk-dark);\n}\n\n\n.mk-play-intro p {\n\n  margin: 0;\n\n  font-size: 13px;\n\n  font-weight: 800;\n\n  letter-spacing: .2em;\n\n  color: var(--mk-dark);\n}\n\n\n.mk-play-image {\n\n  position: relative;\n\n  display: block;\n\n  width: min(1500px,100%);\n\n  margin: 0 auto;\n\n  overflow: hidden;\n\n  background: #fff;\n}\n\n\n.mk-play-image > img {\n\n  width: 100%;\n\n  height: auto;\n\n  display: block;\n\n  transition:\n    transform .7s cubic-bezier(.2,.65,.25,1);\n}\n\n\n.mk-play-image:hover > img {\n\n  transform: scale(1.008);\n}\n\n\n\/* =========================================================\n   MEDINO \u0160APICA \u2014 VE\u0106A + MALO ZAROTIRANA\n   ========================================================= *\/\n\n.mk-paw-link {\n\n  position: absolute;\n\n  right: 30px;\n  bottom: 27px;\n\n  z-index: 5;\n\n  width: 116px;\n  height: 116px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 5px;\n\n  border-radius: 50%;\n\n  background: rgba(255,255,255,.97);\n\n  color: var(--mk-dark);\n\n  box-shadow:\n    0 15px 38px rgba(0,0,0,.18);\n\n  transform:\n    rotate(-7deg);\n\n  transition:\n    transform .3s ease,\n    box-shadow .3s ease;\n}\n\n\n.mk-paw-image {\n\n  width: 57px !important;\n  height: 57px !important;\n\n  object-fit: contain;\n\n  transform:\n    rotate(7deg);\n\n  transition:\n    transform .3s ease;\n}\n\n\n.mk-paw-text {\n\n  font-size: 9px;\n\n  font-weight: 800;\n\n  letter-spacing: .16em;\n\n  color: var(--mk-dark);\n}\n\n\n.mk-paw-link:hover {\n\n  transform:\n    rotate(-10deg)\n    scale(1.08);\n\n  box-shadow:\n    0 20px 48px rgba(0,0,0,.23);\n}\n\n\n.mk-paw-link:hover .mk-paw-image {\n\n  transform:\n    rotate(12deg)\n    scale(1.08);\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width:1000px) {\n\n  .mk-category-grid {\n\n    grid-template-columns: 1fr;\n\n    max-width: 620px;\n  }\n\n\n  .mk-category {\n\n    min-height: 650px;\n  }\n\n\n  .mk-share-inner {\n\n    grid-template-columns: 1fr;\n\n    gap: 70px;\n  }\n\n\n  .mk-share-main {\n\n    padding-left: 0;\n  }\n\n\n  .mk-share-title {\n\n    width: min(650px,100%);\n  }\n\n\n  .mk-share-note {\n\n    width: min(700px,100%);\n\n    margin: 0 auto;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width:700px) {\n\n  .mk-hero {\n\n    min-height: 650px;\n  }\n\n\n  .mk-hero-image::after {\n\n    background:\n      linear-gradient(\n        180deg,\n        rgba(59,85,115,.76) 0%,\n        rgba(59,85,115,.72) 45%,\n        rgba(59,85,115,.96) 100%\n      );\n  }\n\n\n  .mk-hero-content {\n\n    width: 88%;\n\n    margin: 0 auto;\n\n    padding: 70px 0;\n\n    align-self: flex-end;\n  }\n\n\n  .mk-hero-content h1 {\n\n    font-size: clamp(48px,15vw,70px);\n  }\n\n\n  .mk-hero-content p {\n\n    font-size: 21px;\n  }\n\n\n  .mk-hero-nav {\n\n    gap: 8px;\n\n    font-size: 10px;\n\n    letter-spacing: .15em;\n  }\n\n\n  .mk-collection {\n\n    padding: 75px 20px;\n  }\n\n\n  .mk-section-intro {\n\n    margin-bottom: 40px;\n  }\n\n\n  .mk-section-intro h2 {\n\n    font-size: 42px;\n  }\n\n\n  .mk-category-grid {\n\n    gap: 18px;\n  }\n\n\n  .mk-category {\n\n    min-height: 530px;\n  }\n\n\n  .mk-category-image {\n\n    height: 325px;\n  }\n\n\n  .mk-share {\n\n    padding: 78px 20px;\n  }\n\n\n  .mk-share-inner {\n\n    gap: 55px;\n  }\n\n\n  .mk-share-title {\n\n    width: 95%;\n\n    transform:\n      rotate(-4deg)\n      translateX(-3px);\n  }\n\n\n  .mk-share-text {\n\n    margin-top: 28px;\n\n    font-size: 16px;\n  }\n\n\n  .mk-share-note {\n\n    padding: 38px 22px 30px;\n\n    transform:\n      rotate(1.4deg);\n  }\n\n\n  .mk-share-note h3 {\n\n    font-size: 37px;\n  }\n\n\n  .mk-share-note-intro {\n\n    font-size: 15px;\n  }\n\n\n  .mk-share-steps {\n\n    grid-template-columns: 1fr;\n\n    gap: 10px;\n  }\n\n\n  .mk-share-step {\n\n    min-height: auto;\n\n    display: grid;\n\n    grid-template-columns: 52px 1fr;\n\n    align-items: center;\n\n    column-gap: 12px;\n\n    padding: 13px;\n  }\n\n\n  .mk-step-icon {\n\n    grid-row: span 2;\n  }\n\n\n  .mk-step-content strong {\n\n    margin-top: 0;\n  }\n\n\n  .mk-step-content span {\n\n    margin-top: 3px;\n  }\n\n\n  .mk-share-note-bottom {\n\n    font-size: 13px;\n  }\n\n\n  .mk-play {\n\n    padding: 75px 15px;\n  }\n\n\n  .mk-play-intro {\n\n    margin-bottom: 35px;\n  }\n\n\n  .mk-play-intro h2 {\n\n    font-size: 43px;\n  }\n\n\n  .mk-play-intro p {\n\n    font-size: 10px;\n\n    letter-spacing: .14em;\n  }\n\n\n  .mk-paw-link {\n\n    right: 15px;\n\n    bottom: 15px;\n\n    width: 88px;\n\n    height: 88px;\n  }\n\n\n  .mk-paw-image {\n\n    width: 45px !important;\n\n    height: 45px !important;\n  }\n\n\n  .mk-paw-text {\n\n    font-size: 7px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width:420px) {\n\n  .mk-hero {\n\n    min-height: 590px;\n  }\n\n\n  .mk-category {\n\n    min-height: 480px;\n  }\n\n\n  .mk-category-image {\n\n    height: 285px;\n  }\n\n\n  .mk-category-bottom h3 {\n\n    font-size: 30px;\n  }\n\n\n  .mk-share-note {\n\n    padding-left: 18px;\n\n    padding-right: 18px;\n  }\n\n\n  .mk-share-note h3 {\n\n    font-size: 33px;\n  }\n\n\n  .mk-paw-link {\n\n    width: 80px;\n\n    height: 80px;\n  }\n\n\n  .mk-paw-image {\n\n    width: 41px !important;\n\n    height: 41px !important;\n  }\n\n}\n\n<\/style>\n\n<style id=\"medino-paw-taptap\">\n\/* =========================================================\n   MEDINO PAW TAP-TAP\n   Samo za MK PLAY sliku.\n   Ne dira postoje\u0107u \u0161apicu\/link niti ostale klikove.\n   ========================================================= *\/\n\n.mk-play-image {\n  position: relative;\n}\n\n.medino-paw-tap {\n  position: absolute;\n  z-index: 20;\n  width: 48px;\n  height: 48px;\n  pointer-events: none;\n  user-select: none;\n  opacity: 0;\n  transform-origin: center center;\n  filter: drop-shadow(0 5px 8px rgba(0,0,0,.14));\n}\n\n.medino-paw-tap img {\n  display: block !important;\n  width: 100% !important;\n  height: 100% !important;\n  object-fit: contain !important;\n}\n\n.medino-paw-tap.is-first {\n  animation: medinoPawTapOne .72s cubic-bezier(.18,.72,.24,1) forwards;\n}\n\n.medino-paw-tap.is-second {\n  animation: medinoPawTapTwo .82s cubic-bezier(.18,.72,.24,1) forwards;\n}\n\n@keyframes medinoPawTapOne {\n  0% {\n    opacity: 0;\n    transform: translate(-50%,-50%) scale(.35) rotate(-16deg);\n  }\n\n  18% {\n    opacity: .95;\n    transform: translate(-50%,-50%) scale(1.08) rotate(-7deg);\n  }\n\n  42% {\n    opacity: .95;\n    transform: translate(-50%,-50%) scale(.92) rotate(-4deg);\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%,-50%) scale(.72) rotate(-2deg);\n  }\n}\n\n@keyframes medinoPawTapTwo {\n  0% {\n    opacity: 0;\n    transform: translate(-50%,-50%) scale(.30) rotate(12deg);\n  }\n\n  20% {\n    opacity: .9;\n    transform: translate(-50%,-50%) scale(1.05) rotate(7deg);\n  }\n\n  45% {\n    opacity: .88;\n    transform: translate(-50%,-50%) scale(.90) rotate(4deg);\n  }\n\n  100% {\n    opacity: 0;\n    transform: translate(-50%,-50%) scale(.68) rotate(2deg);\n  }\n}\n\n@media (max-width:700px) {\n  .medino-paw-tap {\n    width: 39px;\n    height: 39px;\n  }\n}\n<\/style>\n\n<script id=\"medino-paw-taptap-script\">\n(function () {\n\n  'use strict';\n\n  function medinoPawTapTap() {\n\n    var area = document.querySelector('.mk-play-image');\n\n    if (!area) {\n      return;\n    }\n\n    if (area.dataset.medinoPawTapReady === '1') {\n      return;\n    }\n\n    area.dataset.medinoPawTapReady = '1';\n\n    var pawSrc =\n      'https:\/\/medino.hr\/wp-content\/uploads\/2026\/09\/medino_sapica.svg';\n\n\n    function createPaw(x, y, className, delay) {\n\n      var paw = document.createElement('span');\n\n      paw.className =\n        'medino-paw-tap ' + className;\n\n      paw.style.left = x + 'px';\n      paw.style.top = y + 'px';\n      paw.style.animationDelay = delay + 'ms';\n\n      var img = document.createElement('img');\n\n      img.src = pawSrc;\n      img.alt = '';\n\n      paw.appendChild(img);\n\n      area.appendChild(paw);\n\n      paw.addEventListener(\n        'animationend',\n        function () {\n          paw.remove();\n        },\n        { once: true }\n      );\n\n    }\n\n\n    area.addEventListener(\n      'pointerdown',\n      function (event) {\n\n        var rect =\n          area.getBoundingClientRect();\n\n        var x =\n          event.clientX - rect.left;\n\n        var y =\n          event.clientY - rect.top;\n\n        createPaw(\n          x,\n          y,\n          'is-first',\n          0\n        );\n\n        createPaw(\n          x + 18,\n          y - 12,\n          'is-second',\n          105\n        );\n\n      },\n      { passive: true }\n    );\n\n  }\n\n\n  if (\n    document.readyState === 'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      medinoPawTapTap\n    );\n\n  } else {\n\n    medinoPawTapTap();\n\n  }\n\n})();\n<\/script>\n\n<style id=\"medino-kids-hero-text-position\">\n\/* MEDINO KIDS \u2014 tekst jo\u0161 malo gore *\/\n.mk-hero-content {\n  transform: translateY(-155px);\n}\n\n@media (max-width:700px) {\n  .mk-hero-content {\n    transform: translateY(-75px);\n  }\n}\n<\/style>\n\n<style id=\"medino-kids-single-play-entry\">\n\/* =========================================================\n   MEDINO KIDS \u2014 JEDAN ULAZ U IGRAJ SE\n   Cijela ilustracija je jedan klikabilan ulaz.\n   Nema bijelog kruga\/gumba preko slike.\n   ========================================================= *\/\n\n.mk-play-image {\n  position: relative;\n  cursor: pointer;\n}\n\n.mk-play-image .mk-paw-link {\n  position: absolute !important;\n  inset: 0 !important;\n  z-index: 15 !important;\n  display: block !important;\n  width: 100% !important;\n  height: 100% !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  background: transparent !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  box-shadow: none !important;\n  text-decoration: none !important;\n}\n\n.mk-play-image .mk-paw-link .mk-paw-image,\n.mk-play-image .mk-paw-link .mk-paw-text {\n  display: none !important;\n}\n\n\/* Suptilan hover na cijeloj slici *\/\n.mk-play-image > img {\n  transition: transform .35s ease, filter .35s ease;\n}\n\n.mk-play-image:hover > img {\n  transform: scale(1.012);\n  filter: brightness(1.025);\n}\n\n@media (max-width:700px) {\n  .mk-play-image:hover > img {\n    transform: none;\n    filter: none;\n  }\n}\n<\/style>\n\n<script id=\"medino-kids-single-play-entry-script\">\n(function () {\n  'use strict';\n\n  function medinoSinglePlayEntry() {\n    var area = document.querySelector('.mk-play-image');\n\n    if (!area || area.dataset.medinoSinglePlayReady === '1') {\n      return;\n    }\n\n    area.dataset.medinoSinglePlayReady = '1';\n\n    \/*\n     * Klik na bilo koji dio velike slike vodi na jedan jedini\n     * Kids ulaz: \/igraj-se\/\n     *\/\n    area.addEventListener('click', function (event) {\n      var link = event.target.closest\n        ? event.target.closest('.mk-paw-link')\n        : null;\n\n      if (link) {\n        return;\n      }\n\n      window.location.href = 'https:\/\/medino.hr\/igraj-se\/';\n    });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', medinoSinglePlayEntry);\n  } else {\n    medinoSinglePlayEntry();\n  }\n})();\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-1344","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/medino.hr\/wp-json\/wp\/v2\/pages\/1344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/medino.hr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/medino.hr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/medino.hr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/medino.hr\/wp-json\/wp\/v2\/comments?post=1344"}],"version-history":[{"count":23,"href":"https:\/\/medino.hr\/wp-json\/wp\/v2\/pages\/1344\/revisions"}],"predecessor-version":[{"id":3500,"href":"https:\/\/medino.hr\/wp-json\/wp\/v2\/pages\/1344\/revisions\/3500"}],"wp:attachment":[{"href":"https:\/\/medino.hr\/wp-json\/wp\/v2\/media?parent=1344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}