/* Media Konservasi: journal style sheet Upload in Settings > Website > Appearance > Advanced > Journal style sheet. Holds the theme overrides plus every page style that used to sit in the Custom Header. */ /* ########################################################## 1. Theme overrides (original ojs3-medkon.css, two broken rules fixed) ########################################################## */ header .container { background-color: #244F26; background-image: url(https://journal.ipb.ac.id/public/site/images/media_konservasi/7-6b97af2c2b2fb5ad6f21575ccae42ce1.png); background-position: center center; background-repeat: no-repeat; background-size: cover; } .journal-description .container { max-width: 100%; } img { max-width: 100%; } .dropdown-menu { background-color: #ffffff; } ul#navigationUser li a { color: black; } .dropdown-menu > li > a { display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 1.42857143; color: #32620e; white-space: nowrap; } .pkp_block h2.title, .pkp_block .content span.title, .pkp_block span.title { color: #ffffff; } .panel-default > .panel-heading, .pkp_block .title { background-color: #0a6935; border-color: #f5f5f5; } #left > div.pkp_block.block_twitter > span { display: none; } .team-content img.ico-label { width: 18px; } div.issn span { margin-right: 20px; margin-left: -10px; font-weight: bold; color: whitesmoke; } div.issn { padding-top: 122px; } .mr-4, .mx-4 { margin-right: -0.5rem !important; } .navbar-nav { display: -ms-flexbox; display: inline-block; -ms-flex-direction: column; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #3d4923; border-color: #3d4923; } footer h4 { color: black; } footer a { color: #000000; } footer .container { background: #2A5541; color: #000000; /*background-image: url("/public/site/images/alma/background-footer-2021.png");*/ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ } a, #customblock-SidebarMenu p.menu_item a, #customblock-sidebarmenu p.menu_item a { color: #0a6935; } /* ########################################################## 2. Page styles (moved from the Custom Header) ########################################################## */ /* ========================================================== Media Konservasi – faint Padar Island & komodo backdrop for the "Journal details" card. Add this to Custom Header (inside the same style tag as your other styles) and give the card the extra class "mk-bg-komodo". The illustration is original line/silhouette art embedded as an SVG data URI, so no image upload is needed. ========================================================== */ .ojs-card.mk-bg-komodo { position: relative; overflow: hidden; isolation: isolate; /* keeps the backdrop behind the content */ } .ojs-card.mk-bg-komodo::before { content: ""; position: absolute; right: -8px; bottom: -4px; width: min(88%, 620px); aspect-ratio: 640 / 300; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 300%22%3E%3Ccircle cx=%22470%22 cy=%2270%22 r=%2226%22 fill=%22%231f6f5c%22 opacity=%22.18%22/%3E%3Crect x=%220%22 y=%22168%22 width=%22640%22 height=%22132%22 fill=%22%231f6f5c%22 opacity=%22.10%22/%3E%3Cpath d=%22M30 186 H120 M200 196 H250 M520 190 H610 M410 206 H470%22 stroke=%22%231f6f5c%22 stroke-width=%222%22 stroke-linecap=%22round%22 opacity=%22.25%22/%3E%3Cpath d=%22M0 170 C40 150 80 148 130 168 Z M540 168 C570 150 610 150 640 162 V168 Z%22 fill=%22%231f6f5c%22 opacity=%22.22%22/%3E%3Cpath d=%22M120 172 C150 128 180 100 214 94 C240 90 252 116 272 112 C300 106 312 68 346 62 C380 58 394 98 420 104 C444 110 462 90 490 100 C516 110 532 140 556 172 Z%22 fill=%22%231f6f5c%22 opacity=%22.30%22/%3E%3Cpath d=%22M0 300 V244 C40 222 104 194 170 174 L226 174 C196 204 160 246 140 300 Z%22 fill=%22%231f6f5c%22 opacity=%22.42%22/%3E%3Cpath d=%22M238 300 C252 252 280 208 306 174 L356 174 C368 212 386 256 410 300 Z%22 fill=%22%231f6f5c%22 opacity=%22.42%22/%3E%3Cpath d=%22M30 262 C80 232 140 200 196 176 M286 300 C300 250 318 206 330 176%22 fill=%22none%22 stroke=%22%231f6f5c%22 stroke-width=%222%22 stroke-linecap=%22round%22 opacity=%22.35%22/%3E%3Cpath d=%22M228 178 C248 186 272 186 302 178 M362 178 C386 188 404 188 424 178%22 fill=%22none%22 stroke=%22%231f6f5c%22 stroke-width=%223%22 stroke-linecap=%22round%22 opacity=%22.30%22/%3E%3Cpath d=%22M420 300 C450 262 500 236 560 228 C600 224 626 230 640 236 V300 Z%22 fill=%22%231f6f5c%22 opacity=%22.65%22/%3E%3Cg fill=%22%231f6f5c%22 transform=%22translate(568 232) scale(-1 1)%22%3E%3Cpath d=%22M-62 -4 C-50 -12 -34 -14 -18 -12 C-6 -10 4 -14 16 -16 C28 -18 40 -16 46 -12 C52 -8 50 -2 42 0 C30 2 20 0 8 2 C-6 4 -20 6 -34 6 C-46 6 -56 4 -62 -4 Z%22/%3E%3Cpath d=%22M40 -16 C48 -22 60 -24 72 -22 C80 -20 84 -16 82 -12 C78 -8 68 -9 58 -9 C52 -9 46 -10 42 -10 Z%22/%3E%3Cpath d=%22M-40 4 C-44 10 -50 14 -56 16 L-46 17 C-40 14 -36 10 -32 5 Z%22/%3E%3Cpath d=%22M-22 5 C-20 11 -16 15 -10 17 L-4 15 C-10 12 -14 9 -14 4 Z%22/%3E%3Cpath d=%22M18 0 C14 7 8 11 2 13 L12 14 C18 11 22 7 26 0 Z%22/%3E%3Cpath d=%22M32 -2 C36 4 42 8 48 9 L52 6 C46 4 42 1 40 -3 Z%22/%3E%3Cpath d=%22M-60 -4 C-80 -2 -104 4 -128 14 C-104 0 -82 -8 -62 -10 Z%22/%3E%3C/g%3E%3C/svg%3E") right bottom / contain no-repeat; opacity: .2; /* raise (e.g. .28) for a stronger image, lower (e.g. .12) for subtler */ pointer-events: none; z-index: -1; /* fade the image out toward the left so text there stays crisp */ -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%); mask-image: linear-gradient(to left, #000 55%, transparent 100%); } /* ===== OJS Journal Summary Modern Style ===== */ /* Notice banner */ .ojs-notice { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.75rem; } .ojs-notice-head { font-size: 11px; font-weight: 700; color: #92400e; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px 0; } .ojs-notice-body { font-size: 14px; color: #78350f; line-height: 1.65; margin: 0 0 10px 0; } .ojs-notice-body strong { display: block; margin-bottom: 4px; } .ojs-notice-link { display: inline-block; font-size: 13px; font-weight: 700; color: #92400e !important; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; padding: 6px 14px; text-decoration: none !important; } /* Stage grid */ .ojs-stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.75rem; } @media (max-width: 600px) { .ojs-stage-grid { grid-template-columns: 1fr; } .ojs-meta-grid { grid-template-columns: 1fr 1fr !important; } .ojs-feat-grid { grid-template-columns: 1fr !important; } } .ojs-stage-warn { background: #fff7ed; border-left: 3px solid #f97316; border-radius: 10px; padding: 1rem; } .ojs-stage-ok { background: #f0fdf4; border-left: 3px solid #22c55e; border-radius: 10px; padding: 1rem; } .ojs-stage-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px 0; } .ojs-stage-warn .ojs-stage-label { color: #c2410c; } .ojs-stage-ok .ojs-stage-label { color: #15803d; } .ojs-stage-body { font-size: 13px; line-height: 1.6; margin: 0; } .ojs-stage-warn .ojs-stage-body { color: #9a3412; } .ojs-stage-ok .ojs-stage-body { color: #166534; } .ojs-stage-body a { color: inherit !important; font-weight: 700; } /* ========================================================== Media Konservasi – "Our authors at a glance" (homepage, Media Konservasi) Paste into Custom Header inside a style tag. Pure CSS: no JavaScript, no external images except small country flags (flagcdn.com). Animations play once on load, or as the section scrolls into view in browsers that support scroll-driven animations; they are switched off for visitors who prefer reduced motion. All rules are scoped to .mk-st. ========================================================== */ @property --mk-n { syntax: ""; inherits: false; initial-value: 0; } @property --mk-sweep { syntax: ""; inherits: false; initial-value: 0deg; } .mk-st { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #d9e5e0; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-blue: #4f86c6; color: var(--mk-ink); font-size: 15px; line-height: 1.5; container-type: inline-size; } .mk-st *, .mk-st *::before, .mk-st *::after { box-sizing: border-box; } .mk-st p { margin: 0; } .mk-st .mk-period { font-size: 13px; color: var(--mk-muted); margin-bottom: 10px; } /* ---------- KPI counters ---------- */ .mk-st .mk-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @container (min-width: 520px) { .mk-st .mk-kpis { grid-template-columns: repeat(4, 1fr); } } .mk-st .mk-kpi { background: var(--mk-sub-deep); color: #fff; border-radius: 14px; padding: 14px 14px 12px; animation: mk-rise .6s ease-out both; } .mk-st .mk-kpi:nth-child(2) { animation-delay: .1s; } .mk-st .mk-kpi:nth-child(3) { animation-delay: .2s; } .mk-st .mk-kpi:nth-child(4) { animation-delay: .3s; background: var(--mk-pub); } .mk-st .mk-num { display: block; font-size: 0; /* the real number stays in the HTML for screen readers and as a fallback */ line-height: 1; } .mk-st .mk-num::after { counter-reset: mkn var(--mk-n); content: counter(mkn); font-size: 32px; font-weight: 800; letter-spacing: -.01em; animation: mk-count 1.6s cubic-bezier(.2,.7,.2,1) .2s both; } .mk-st .mk-num.is-pct::after { content: counter(mkn) "%"; } .mk-st .mk-n1::after { --mk-n: 122; } .mk-st .mk-n2::after { --mk-n: 424; } .mk-st .mk-n3::after { --mk-n: 12; } .mk-st .mk-n4::after { --mk-n: 19; } .mk-st .mk-kl { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.85); } @keyframes mk-count { from { --mk-n: 0; } } /* ---------- Map ---------- */ .mk-st .mk-mapcard { margin-top: 12px; border: 1.5px solid var(--mk-line); border-radius: 16px; padding: 14px 14px 10px; background: #fbfdfc; } .mk-st .mk-map { position: relative; width: 100%; aspect-ratio: 700 / 268; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 700 268%22%3E%3Cpath d=%22M101.4 2.6h0M122.2 2.6h0M143.0 2.6h0M148.2 2.6h0M153.4 2.6h0M163.8 2.6h0M169.0 2.6h0M174.2 2.6h0M179.4 2.6h0M200.2 2.6h0M205.4 2.6h0M210.6 2.6h0M215.8 2.6h0M221.0 2.6h0M226.2 2.6h0M231.4 2.6h0M236.6 2.6h0M241.8 2.6h0M247.0 2.6h0M252.2 2.6h0M257.4 2.6h0M262.6 2.6h0M267.8 2.6h0M273.0 2.6h0M278.2 2.6h0M283.4 2.6h0M288.6 2.6h0M293.8 2.6h0M475.8 2.6h0M543.4 2.6h0M548.6 2.6h0M553.8 2.6h0M559.0 2.6h0M93.6 7.8h0M98.8 7.8h0M104.0 7.8h0M150.8 7.8h0M228.8 7.8h0M234.0 7.8h0M239.2 7.8h0M244.4 7.8h0M249.6 7.8h0M254.8 7.8h0M260.0 7.8h0M265.2 7.8h0M270.4 7.8h0M275.6 7.8h0M280.8 7.8h0M286.0 7.8h0M291.2 7.8h0M296.4 7.8h0M452.4 7.8h0M514.8 7.8h0M520.0 7.8h0M525.2 7.8h0M530.4 7.8h0M535.6 7.8h0M540.8 7.8h0M546.0 7.8h0M551.2 7.8h0M556.4 7.8h0M96.2 13.0h0M106.6 13.0h0M111.8 13.0h0M117.0 13.0h0M122.2 13.0h0M127.4 13.0h0M143.0 13.0h0M153.4 13.0h0M163.8 13.0h0M169.0 13.0h0M174.2 13.0h0M179.4 13.0h0M184.6 13.0h0M189.8 13.0h0M195.0 13.0h0M236.6 13.0h0M241.8 13.0h0M247.0 13.0h0M252.2 13.0h0M257.4 13.0h0M262.6 13.0h0M267.8 13.0h0M273.0 13.0h0M278.2 13.0h0M283.4 13.0h0M288.6 13.0h0M293.8 13.0h0M444.6 13.0h0M449.8 13.0h0M475.8 13.0h0M481.0 13.0h0M496.6 13.0h0M501.8 13.0h0M507.0 13.0h0M512.2 13.0h0M517.4 13.0h0M522.6 13.0h0M527.8 13.0h0M533.0 13.0h0M538.2 13.0h0M543.4 13.0h0M548.6 13.0h0M553.8 13.0h0M559.0 13.0h0M564.2 13.0h0M569.4 13.0h0M574.6 13.0h0M579.8 13.0h0M585.0 13.0h0M590.2 13.0h0M595.4 13.0h0M605.8 13.0h0M611.0 13.0h0M616.2 13.0h0M621.4 13.0h0M626.6 13.0h0M631.8 13.0h0M637.0 13.0h0M62.4 18.2h0M67.6 18.2h0M72.8 18.2h0M78.0 18.2h0M83.2 18.2h0M88.4 18.2h0M93.6 18.2h0M98.8 18.2h0M104.0 18.2h0M114.4 18.2h0M119.6 18.2h0M135.2 18.2h0M156.0 18.2h0M161.2 18.2h0M171.6 18.2h0M176.8 18.2h0M187.2 18.2h0M192.4 18.2h0M197.6 18.2h0M202.8 18.2h0M239.2 18.2h0M244.4 18.2h0M249.6 18.2h0M254.8 18.2h0M260.0 18.2h0M265.2 18.2h0M270.4 18.2h0M275.6 18.2h0M280.8 18.2h0M286.0 18.2h0M374.4 18.2h0M379.6 18.2h0M384.8 18.2h0M390.0 18.2h0M395.2 18.2h0M400.4 18.2h0M405.6 18.2h0M410.8 18.2h0M462.8 18.2h0M468.0 18.2h0M478.4 18.2h0M483.6 18.2h0M494.0 18.2h0M499.2 18.2h0M504.4 18.2h0M509.6 18.2h0M514.8 18.2h0M520.0 18.2h0M525.2 18.2h0M530.4 18.2h0M535.6 18.2h0M540.8 18.2h0M546.0 18.2h0M551.2 18.2h0M556.4 18.2h0M561.6 18.2h0M566.8 18.2h0M572.0 18.2h0M577.2 18.2h0M582.4 18.2h0M587.6 18.2h0M592.8 18.2h0M598.0 18.2h0M603.2 18.2h0M608.4 18.2h0M613.6 18.2h0M618.8 18.2h0M624.0 18.2h0M629.2 18.2h0M634.4 18.2h0M639.6 18.2h0M644.8 18.2h0M650.0 18.2h0M655.2 18.2h0M660.4 18.2h0M665.6 18.2h0M670.8 18.2h0M676.0 18.2h0M681.2 18.2h0M686.4 18.2h0M691.6 18.2h0M696.8 18.2h0M59.8 23.4h0M65.0 23.4h0M70.2 23.4h0M75.4 23.4h0M80.6 23.4h0M85.8 23.4h0M91.0 23.4h0M96.2 23.4h0M101.4 23.4h0M106.6 23.4h0M111.8 23.4h0M117.0 23.4h0M122.2 23.4h0M127.4 23.4h0M132.6 23.4h0M137.8 23.4h0M143.0 23.4h0M148.2 23.4h0M153.4 23.4h0M158.6 23.4h0M163.8 23.4h0M195.0 23.4h0M200.2 23.4h0M210.6 23.4h0M236.6 23.4h0M241.8 23.4h0M247.0 23.4h0M252.2 23.4h0M257.4 23.4h0M262.6 23.4h0M267.8 23.4h0M293.8 23.4h0M309.4 23.4h0M366.6 23.4h0M371.8 23.4h0M377.0 23.4h0M382.2 23.4h0M387.4 23.4h0M392.6 23.4h0M397.8 23.4h0M403.0 23.4h0M413.4 23.4h0M418.6 23.4h0M423.8 23.4h0M429.0 23.4h0M434.2 23.4h0M439.4 23.4h0M444.6 23.4h0M449.8 23.4h0M455.0 23.4h0M460.2 23.4h0M465.4 23.4h0M470.6 23.4h0M475.8 23.4h0M481.0 23.4h0M486.2 23.4h0M491.4 23.4h0M496.6 23.4h0M501.8 23.4h0M507.0 23.4h0M512.2 23.4h0M517.4 23.4h0M522.6 23.4h0M527.8 23.4h0M533.0 23.4h0M538.2 23.4h0M543.4 23.4h0M548.6 23.4h0M553.8 23.4h0M559.0 23.4h0M564.2 23.4h0M569.4 23.4h0M574.6 23.4h0M579.8 23.4h0M585.0 23.4h0M590.2 23.4h0M595.4 23.4h0M600.6 23.4h0M605.8 23.4h0M611.0 23.4h0M616.2 23.4h0M621.4 23.4h0M626.6 23.4h0M631.8 23.4h0M637.0 23.4h0M642.2 23.4h0M647.4 23.4h0M652.6 23.4h0M657.8 23.4h0M663.0 23.4h0M668.2 23.4h0M673.4 23.4h0M678.6 23.4h0M683.8 23.4h0M689.0 23.4h0M694.2 23.4h0M699.4 23.4h0M62.4 28.6h0M67.6 28.6h0M72.8 28.6h0M78.0 28.6h0M83.2 28.6h0M88.4 28.6h0M93.6 28.6h0M98.8 28.6h0M104.0 28.6h0M109.2 28.6h0M114.4 28.6h0M119.6 28.6h0M124.8 28.6h0M130.0 28.6h0M135.2 28.6h0M140.4 28.6h0M145.6 28.6h0M150.8 28.6h0M156.0 28.6h0M166.4 28.6h0M171.6 28.6h0M176.8 28.6h0M197.6 28.6h0M202.8 28.6h0M208.0 28.6h0M239.2 28.6h0M244.4 28.6h0M249.6 28.6h0M254.8 28.6h0M301.6 28.6h0M358.8 28.6h0M364.0 28.6h0M369.2 28.6h0M374.4 28.6h0M379.6 28.6h0M384.8 28.6h0M390.0 28.6h0M395.2 28.6h0M400.4 28.6h0M405.6 28.6h0M410.8 28.6h0M416.0 28.6h0M421.2 28.6h0M426.4 28.6h0M431.6 28.6h0M436.8 28.6h0M442.0 28.6h0M447.2 28.6h0M452.4 28.6h0M457.6 28.6h0M462.8 28.6h0M468.0 28.6h0M473.2 28.6h0M478.4 28.6h0M483.6 28.6h0M488.8 28.6h0M494.0 28.6h0M499.2 28.6h0M504.4 28.6h0M509.6 28.6h0M514.8 28.6h0M520.0 28.6h0M525.2 28.6h0M530.4 28.6h0M535.6 28.6h0M540.8 28.6h0M546.0 28.6h0M551.2 28.6h0M556.4 28.6h0M561.6 28.6h0M566.8 28.6h0M572.0 28.6h0M577.2 28.6h0M582.4 28.6h0M587.6 28.6h0M592.8 28.6h0M598.0 28.6h0M603.2 28.6h0M608.4 28.6h0M613.6 28.6h0M618.8 28.6h0M624.0 28.6h0M629.2 28.6h0M634.4 28.6h0M639.6 28.6h0M644.8 28.6h0M650.0 28.6h0M655.2 28.6h0M660.4 28.6h0M665.6 28.6h0M670.8 28.6h0M676.0 28.6h0M681.2 28.6h0M686.4 28.6h0M691.6 28.6h0M696.8 28.6h0M59.8 33.8h0M65.0 33.8h0M70.2 33.8h0M75.4 33.8h0M80.6 33.8h0M85.8 33.8h0M91.0 33.8h0M96.2 33.8h0M101.4 33.8h0M106.6 33.8h0M111.8 33.8h0M117.0 33.8h0M122.2 33.8h0M127.4 33.8h0M132.6 33.8h0M137.8 33.8h0M143.0 33.8h0M148.2 33.8h0M184.6 33.8h0M189.8 33.8h0M195.0 33.8h0M247.0 33.8h0M252.2 33.8h0M351.0 33.8h0M356.2 33.8h0M361.4 33.8h0M366.6 33.8h0M371.8 33.8h0M387.4 33.8h0M392.6 33.8h0M397.8 33.8h0M403.0 33.8h0M408.2 33.8h0M413.4 33.8h0M418.6 33.8h0M423.8 33.8h0M429.0 33.8h0M434.2 33.8h0M439.4 33.8h0M444.6 33.8h0M449.8 33.8h0M455.0 33.8h0M460.2 33.8h0M465.4 33.8h0M470.6 33.8h0M475.8 33.8h0M481.0 33.8h0M486.2 33.8h0M491.4 33.8h0M496.6 33.8h0M501.8 33.8h0M507.0 33.8h0M512.2 33.8h0M517.4 33.8h0M522.6 33.8h0M527.8 33.8h0M533.0 33.8h0M538.2 33.8h0M543.4 33.8h0M548.6 33.8h0M553.8 33.8h0M559.0 33.8h0M564.2 33.8h0M569.4 33.8h0M574.6 33.8h0M579.8 33.8h0M585.0 33.8h0M590.2 33.8h0M595.4 33.8h0M600.6 33.8h0M605.8 33.8h0M611.0 33.8h0M616.2 33.8h0M621.4 33.8h0M626.6 33.8h0M631.8 33.8h0M637.0 33.8h0M642.2 33.8h0M647.4 33.8h0M668.2 33.8h0M673.4 33.8h0M678.6 33.8h0M683.8 33.8h0M78.0 39.0h0M83.2 39.0h0M88.4 39.0h0M93.6 39.0h0M98.8 39.0h0M104.0 39.0h0M109.2 39.0h0M114.4 39.0h0M119.6 39.0h0M124.8 39.0h0M130.0 39.0h0M135.2 39.0h0M140.4 39.0h0M145.6 39.0h0M150.8 39.0h0M187.2 39.0h0M192.4 39.0h0M197.6 39.0h0M202.8 39.0h0M208.0 39.0h0M213.2 39.0h0M353.6 39.0h0M364.0 39.0h0M369.2 39.0h0M390.0 39.0h0M395.2 39.0h0M400.4 39.0h0M405.6 39.0h0M410.8 39.0h0M416.0 39.0h0M421.2 39.0h0M426.4 39.0h0M431.6 39.0h0M436.8 39.0h0M442.0 39.0h0M447.2 39.0h0M452.4 39.0h0M457.6 39.0h0M462.8 39.0h0M468.0 39.0h0M473.2 39.0h0M478.4 39.0h0M483.6 39.0h0M488.8 39.0h0M494.0 39.0h0M499.2 39.0h0M504.4 39.0h0M509.6 39.0h0M514.8 39.0h0M520.0 39.0h0M525.2 39.0h0M530.4 39.0h0M535.6 39.0h0M540.8 39.0h0M546.0 39.0h0M551.2 39.0h0M556.4 39.0h0M561.6 39.0h0M566.8 39.0h0M572.0 39.0h0M577.2 39.0h0M582.4 39.0h0M587.6 39.0h0M592.8 39.0h0M598.0 39.0h0M603.2 39.0h0M608.4 39.0h0M613.6 39.0h0M618.8 39.0h0M660.4 39.0h0M80.6 44.2h0M85.8 44.2h0M91.0 44.2h0M96.2 44.2h0M101.4 44.2h0M106.6 44.2h0M111.8 44.2h0M117.0 44.2h0M122.2 44.2h0M127.4 44.2h0M132.6 44.2h0M137.8 44.2h0M143.0 44.2h0M148.2 44.2h0M153.4 44.2h0M158.6 44.2h0M163.8 44.2h0M189.8 44.2h0M195.0 44.2h0M200.2 44.2h0M205.4 44.2h0M210.6 44.2h0M215.8 44.2h0M366.6 44.2h0M382.2 44.2h0M387.4 44.2h0M392.6 44.2h0M397.8 44.2h0M403.0 44.2h0M408.2 44.2h0M413.4 44.2h0M418.6 44.2h0M423.8 44.2h0M429.0 44.2h0M434.2 44.2h0M439.4 44.2h0M444.6 44.2h0M449.8 44.2h0M455.0 44.2h0M460.2 44.2h0M465.4 44.2h0M470.6 44.2h0M475.8 44.2h0M481.0 44.2h0M486.2 44.2h0M491.4 44.2h0M496.6 44.2h0M501.8 44.2h0M507.0 44.2h0M512.2 44.2h0M517.4 44.2h0M522.6 44.2h0M527.8 44.2h0M533.0 44.2h0M538.2 44.2h0M543.4 44.2h0M548.6 44.2h0M553.8 44.2h0M559.0 44.2h0M564.2 44.2h0M569.4 44.2h0M574.6 44.2h0M579.8 44.2h0M585.0 44.2h0M590.2 44.2h0M595.4 44.2h0M600.6 44.2h0M605.8 44.2h0M611.0 44.2h0M652.6 44.2h0M657.8 44.2h0M663.0 44.2h0M83.2 49.4h0M88.4 49.4h0M93.6 49.4h0M98.8 49.4h0M104.0 49.4h0M109.2 49.4h0M114.4 49.4h0M119.6 49.4h0M124.8 49.4h0M130.0 49.4h0M135.2 49.4h0M140.4 49.4h0M145.6 49.4h0M150.8 49.4h0M156.0 49.4h0M161.2 49.4h0M166.4 49.4h0M171.6 49.4h0M187.2 49.4h0M192.4 49.4h0M197.6 49.4h0M202.8 49.4h0M208.0 49.4h0M213.2 49.4h0M218.4 49.4h0M223.6 49.4h0M322.4 49.4h0M327.6 49.4h0M353.6 49.4h0M369.2 49.4h0M374.4 49.4h0M379.6 49.4h0M384.8 49.4h0M390.0 49.4h0M395.2 49.4h0M400.4 49.4h0M405.6 49.4h0M410.8 49.4h0M416.0 49.4h0M421.2 49.4h0M426.4 49.4h0M431.6 49.4h0M436.8 49.4h0M442.0 49.4h0M447.2 49.4h0M452.4 49.4h0M457.6 49.4h0M462.8 49.4h0M468.0 49.4h0M473.2 49.4h0M478.4 49.4h0M483.6 49.4h0M488.8 49.4h0M494.0 49.4h0M499.2 49.4h0M504.4 49.4h0M509.6 49.4h0M514.8 49.4h0M520.0 49.4h0M525.2 49.4h0M530.4 49.4h0M535.6 49.4h0M540.8 49.4h0M546.0 49.4h0M551.2 49.4h0M556.4 49.4h0M561.6 49.4h0M566.8 49.4h0M572.0 49.4h0M577.2 49.4h0M582.4 49.4h0M592.8 49.4h0M598.0 49.4h0M603.2 49.4h0M608.4 49.4h0M613.6 49.4h0M618.8 49.4h0M624.0 49.4h0M655.2 49.4h0M91.0 54.6h0M96.2 54.6h0M101.4 54.6h0M106.6 54.6h0M111.8 54.6h0M117.0 54.6h0M122.2 54.6h0M127.4 54.6h0M132.6 54.6h0M137.8 54.6h0M143.0 54.6h0M148.2 54.6h0M153.4 54.6h0M158.6 54.6h0M163.8 54.6h0M169.0 54.6h0M174.2 54.6h0M179.4 54.6h0M184.6 54.6h0M189.8 54.6h0M195.0 54.6h0M200.2 54.6h0M205.4 54.6h0M210.6 54.6h0M215.8 54.6h0M221.0 54.6h0M226.2 54.6h0M345.8 54.6h0M351.0 54.6h0M366.6 54.6h0M371.8 54.6h0M377.0 54.6h0M382.2 54.6h0M387.4 54.6h0M392.6 54.6h0M397.8 54.6h0M403.0 54.6h0M408.2 54.6h0M413.4 54.6h0M418.6 54.6h0M423.8 54.6h0M429.0 54.6h0M434.2 54.6h0M439.4 54.6h0M444.6 54.6h0M449.8 54.6h0M455.0 54.6h0M460.2 54.6h0M465.4 54.6h0M470.6 54.6h0M475.8 54.6h0M481.0 54.6h0M486.2 54.6h0M491.4 54.6h0M496.6 54.6h0M501.8 54.6h0M507.0 54.6h0M512.2 54.6h0M517.4 54.6h0M522.6 54.6h0M527.8 54.6h0M533.0 54.6h0M538.2 54.6h0M543.4 54.6h0M548.6 54.6h0M553.8 54.6h0M559.0 54.6h0M564.2 54.6h0M569.4 54.6h0M574.6 54.6h0M595.4 54.6h0M600.6 54.6h0M605.8 54.6h0M611.0 54.6h0M616.2 54.6h0M626.6 54.6h0M161.2 59.8h0M166.4 59.8h0M171.6 59.8h0M176.8 59.8h0M182.0 59.8h0M187.2 59.8h0M192.4 59.8h0M197.6 59.8h0M202.8 59.8h0M208.0 59.8h0M223.6 59.8h0M228.8 59.8h0M234.0 59.8h0M332.8 59.8h0M338.0 59.8h0M343.2 59.8h0M348.4 59.8h0M353.6 59.8h0M369.2 59.8h0M374.4 59.8h0M379.6 59.8h0M384.8 59.8h0M390.0 59.8h0M395.2 59.8h0M400.4 59.8h0M405.6 59.8h0M410.8 59.8h0M416.0 59.8h0M421.2 59.8h0M426.4 59.8h0M431.6 59.8h0M436.8 59.8h0M442.0 59.8h0M447.2 59.8h0M452.4 59.8h0M457.6 59.8h0M462.8 59.8h0M468.0 59.8h0M473.2 59.8h0M478.4 59.8h0M483.6 59.8h0M488.8 59.8h0M494.0 59.8h0M499.2 59.8h0M504.4 59.8h0M509.6 59.8h0M520.0 59.8h0M525.2 59.8h0M530.4 59.8h0M535.6 59.8h0M540.8 59.8h0M546.0 59.8h0M551.2 59.8h0M556.4 59.8h0M561.6 59.8h0M566.8 59.8h0M603.2 59.8h0M613.6 59.8h0M618.8 59.8h0M624.0 59.8h0M179.4 65.0h0M184.6 65.0h0M189.8 65.0h0M195.0 65.0h0M205.4 65.0h0M210.6 65.0h0M215.8 65.0h0M340.6 65.0h0M345.8 65.0h0M351.0 65.0h0M356.2 65.0h0M361.4 65.0h0M371.8 65.0h0M377.0 65.0h0M382.2 65.0h0M387.4 65.0h0M392.6 65.0h0M397.8 65.0h0M408.2 65.0h0M418.6 65.0h0M423.8 65.0h0M429.0 65.0h0M434.2 65.0h0M449.8 65.0h0M455.0 65.0h0M460.2 65.0h0M465.4 65.0h0M470.6 65.0h0M475.8 65.0h0M481.0 65.0h0M486.2 65.0h0M491.4 65.0h0M496.6 65.0h0M501.8 65.0h0M522.6 65.0h0M527.8 65.0h0M533.0 65.0h0M538.2 65.0h0M543.4 65.0h0M548.6 65.0h0M553.8 65.0h0M559.0 65.0h0M564.2 65.0h0M569.4 65.0h0M611.0 65.0h0M176.8 70.2h0M182.0 70.2h0M343.2 70.2h0M358.8 70.2h0M364.0 70.2h0M379.6 70.2h0M384.8 70.2h0M390.0 70.2h0M395.2 70.2h0M426.4 70.2h0M431.6 70.2h0M447.2 70.2h0M452.4 70.2h0M457.6 70.2h0M462.8 70.2h0M468.0 70.2h0M473.2 70.2h0M478.4 70.2h0M483.6 70.2h0M488.8 70.2h0M494.0 70.2h0M499.2 70.2h0M535.6 70.2h0M540.8 70.2h0M546.0 70.2h0M551.2 70.2h0M556.4 70.2h0M325.0 75.4h0M371.8 75.4h0M382.2 75.4h0M387.4 75.4h0M392.6 75.4h0M397.8 75.4h0M403.0 75.4h0M408.2 75.4h0M413.4 75.4h0M418.6 75.4h0M423.8 75.4h0M429.0 75.4h0M434.2 75.4h0M439.4 75.4h0M449.8 75.4h0M455.0 75.4h0M460.2 75.4h0M465.4 75.4h0M470.6 75.4h0M475.8 75.4h0M481.0 75.4h0M486.2 75.4h0M590.2 75.4h0M595.4 75.4h0M369.2 80.6h0M384.8 80.6h0M395.2 80.6h0M400.4 80.6h0M405.6 80.6h0M410.8 80.6h0M416.0 80.6h0M421.2 80.6h0M426.4 80.6h0M457.6 80.6h0M462.8 80.6h0M468.0 80.6h0M473.2 80.6h0M478.4 80.6h0M483.6 80.6h0M488.8 80.6h0M592.8 80.6h0M598.0 80.6h0M330.2 85.8h0M335.4 85.8h0M340.6 85.8h0M345.8 85.8h0M351.0 85.8h0M356.2 85.8h0M361.4 85.8h0M413.4 85.8h0M418.6 85.8h0M465.4 85.8h0M470.6 85.8h0M475.8 85.8h0M481.0 85.8h0M486.2 85.8h0M491.4 85.8h0M595.4 85.8h0M109.2 91.0h0M322.4 91.0h0M327.6 91.0h0M332.8 91.0h0M338.0 91.0h0M343.2 91.0h0M348.4 91.0h0M353.6 91.0h0M358.8 91.0h0M364.0 91.0h0M384.8 91.0h0M410.8 91.0h0M416.0 91.0h0M462.8 91.0h0M468.0 91.0h0M473.2 91.0h0M478.4 91.0h0M483.6 91.0h0M488.8 91.0h0M494.0 91.0h0M117.0 96.2h0M122.2 96.2h0M127.4 96.2h0M325.0 96.2h0M330.2 96.2h0M335.4 96.2h0M340.6 96.2h0M345.8 96.2h0M351.0 96.2h0M356.2 96.2h0M361.4 96.2h0M366.6 96.2h0M371.8 96.2h0M377.0 96.2h0M382.2 96.2h0M387.4 96.2h0M392.6 96.2h0M397.8 96.2h0M403.0 96.2h0M408.2 96.2h0M413.4 96.2h0M418.6 96.2h0M423.8 96.2h0M465.4 96.2h0M470.6 96.2h0M475.8 96.2h0M481.0 96.2h0M486.2 96.2h0M491.4 96.2h0M496.6 96.2h0M501.8 96.2h0M114.4 101.4h0M119.6 101.4h0M124.8 101.4h0M130.0 101.4h0M135.2 101.4h0M140.4 101.4h0M317.2 101.4h0M322.4 101.4h0M327.6 101.4h0M332.8 101.4h0M338.0 101.4h0M343.2 101.4h0M348.4 101.4h0M353.6 101.4h0M358.8 101.4h0M364.0 101.4h0M369.2 101.4h0M374.4 101.4h0M379.6 101.4h0M384.8 101.4h0M390.0 101.4h0M395.2 101.4h0M400.4 101.4h0M405.6 101.4h0M416.0 101.4h0M421.2 101.4h0M426.4 101.4h0M431.6 101.4h0M436.8 101.4h0M468.0 101.4h0M473.2 101.4h0M478.4 101.4h0M483.6 101.4h0M488.8 101.4h0M494.0 101.4h0M499.2 101.4h0M504.4 101.4h0M509.6 101.4h0M514.8 101.4h0M520.0 101.4h0M525.2 101.4h0M530.4 101.4h0M535.6 101.4h0M117.0 106.6h0M127.4 106.6h0M132.6 106.6h0M137.8 106.6h0M143.0 106.6h0M184.6 106.6h0M314.6 106.6h0M319.8 106.6h0M325.0 106.6h0M330.2 106.6h0M335.4 106.6h0M340.6 106.6h0M345.8 106.6h0M351.0 106.6h0M356.2 106.6h0M361.4 106.6h0M366.6 106.6h0M371.8 106.6h0M377.0 106.6h0M382.2 106.6h0M387.4 106.6h0M392.6 106.6h0M397.8 106.6h0M403.0 106.6h0M408.2 106.6h0M418.6 106.6h0M423.8 106.6h0M429.0 106.6h0M434.2 106.6h0M439.4 106.6h0M449.8 106.6h0M475.8 106.6h0M481.0 106.6h0M486.2 106.6h0M491.4 106.6h0M496.6 106.6h0M501.8 106.6h0M507.0 106.6h0M512.2 106.6h0M517.4 106.6h0M522.6 106.6h0M527.8 106.6h0M533.0 106.6h0M130.0 111.8h0M135.2 111.8h0M140.4 111.8h0M171.6 111.8h0M182.0 111.8h0M306.8 111.8h0M312.0 111.8h0M317.2 111.8h0M322.4 111.8h0M327.6 111.8h0M332.8 111.8h0M338.0 111.8h0M343.2 111.8h0M348.4 111.8h0M353.6 111.8h0M358.8 111.8h0M364.0 111.8h0M369.2 111.8h0M374.4 111.8h0M379.6 111.8h0M384.8 111.8h0M390.0 111.8h0M395.2 111.8h0M400.4 111.8h0M405.6 111.8h0M410.8 111.8h0M421.2 111.8h0M426.4 111.8h0M431.6 111.8h0M436.8 111.8h0M442.0 111.8h0M447.2 111.8h0M452.4 111.8h0M457.6 111.8h0M478.4 111.8h0M483.6 111.8h0M488.8 111.8h0M494.0 111.8h0M499.2 111.8h0M504.4 111.8h0M509.6 111.8h0M514.8 111.8h0M520.0 111.8h0M525.2 111.8h0M530.4 111.8h0M535.6 111.8h0M546.0 111.8h0M551.2 111.8h0M132.6 117.0h0M137.8 117.0h0M143.0 117.0h0M163.8 117.0h0M195.0 117.0h0M200.2 117.0h0M309.4 117.0h0M314.6 117.0h0M319.8 117.0h0M325.0 117.0h0M330.2 117.0h0M335.4 117.0h0M340.6 117.0h0M345.8 117.0h0M351.0 117.0h0M356.2 117.0h0M361.4 117.0h0M366.6 117.0h0M371.8 117.0h0M377.0 117.0h0M382.2 117.0h0M387.4 117.0h0M392.6 117.0h0M397.8 117.0h0M403.0 117.0h0M408.2 117.0h0M413.4 117.0h0M423.8 117.0h0M429.0 117.0h0M434.2 117.0h0M439.4 117.0h0M444.6 117.0h0M449.8 117.0h0M455.0 117.0h0M486.2 117.0h0M491.4 117.0h0M496.6 117.0h0M501.8 117.0h0M507.0 117.0h0M527.8 117.0h0M533.0 117.0h0M543.4 117.0h0M548.6 117.0h0M140.4 122.2h0M145.6 122.2h0M150.8 122.2h0M156.0 122.2h0M161.2 122.2h0M312.0 122.2h0M317.2 122.2h0M322.4 122.2h0M327.6 122.2h0M332.8 122.2h0M338.0 122.2h0M343.2 122.2h0M348.4 122.2h0M353.6 122.2h0M358.8 122.2h0M364.0 122.2h0M369.2 122.2h0M374.4 122.2h0M379.6 122.2h0M384.8 122.2h0M390.0 122.2h0M395.2 122.2h0M400.4 122.2h0M405.6 122.2h0M410.8 122.2h0M416.0 122.2h0M426.4 122.2h0M431.6 122.2h0M436.8 122.2h0M442.0 122.2h0M447.2 122.2h0M488.8 122.2h0M494.0 122.2h0M499.2 122.2h0M530.4 122.2h0M535.6 122.2h0M551.2 122.2h0M158.6 127.4h0M163.8 127.4h0M169.0 127.4h0M309.4 127.4h0M314.6 127.4h0M319.8 127.4h0M325.0 127.4h0M330.2 127.4h0M335.4 127.4h0M340.6 127.4h0M345.8 127.4h0M351.0 127.4h0M356.2 127.4h0M361.4 127.4h0M366.6 127.4h0M371.8 127.4h0M377.0 127.4h0M382.2 127.4h0M387.4 127.4h0M392.6 127.4h0M397.8 127.4h0M403.0 127.4h0M408.2 127.4h0M413.4 127.4h0M418.6 127.4h0M429.0 127.4h0M434.2 127.4h0M491.4 127.4h0M496.6 127.4h0M171.6 132.6h0M312.0 132.6h0M317.2 132.6h0M322.4 132.6h0M327.6 132.6h0M332.8 132.6h0M338.0 132.6h0M343.2 132.6h0M348.4 132.6h0M353.6 132.6h0M358.8 132.6h0M364.0 132.6h0M369.2 132.6h0M374.4 132.6h0M379.6 132.6h0M384.8 132.6h0M390.0 132.6h0M395.2 132.6h0M400.4 132.6h0M405.6 132.6h0M410.8 132.6h0M416.0 132.6h0M421.2 132.6h0M442.0 132.6h0M494.0 132.6h0M499.2 132.6h0M556.4 132.6h0M174.2 137.8h0M179.4 137.8h0M189.8 137.8h0M195.0 137.8h0M200.2 137.8h0M205.4 137.8h0M210.6 137.8h0M215.8 137.8h0M314.6 137.8h0M319.8 137.8h0M325.0 137.8h0M330.2 137.8h0M335.4 137.8h0M340.6 137.8h0M345.8 137.8h0M351.0 137.8h0M356.2 137.8h0M361.4 137.8h0M366.6 137.8h0M371.8 137.8h0M377.0 137.8h0M382.2 137.8h0M387.4 137.8h0M392.6 137.8h0M397.8 137.8h0M403.0 137.8h0M408.2 137.8h0M413.4 137.8h0M418.6 137.8h0M423.8 137.8h0M429.0 137.8h0M434.2 137.8h0M439.4 137.8h0M496.6 137.8h0M187.2 143.0h0M192.4 143.0h0M197.6 143.0h0M202.8 143.0h0M208.0 143.0h0M213.2 143.0h0M218.4 143.0h0M223.6 143.0h0M322.4 143.0h0M327.6 143.0h0M332.8 143.0h0M338.0 143.0h0M343.2 143.0h0M348.4 143.0h0M353.6 143.0h0M358.8 143.0h0M364.0 143.0h0M369.2 143.0h0M374.4 143.0h0M379.6 143.0h0M384.8 143.0h0M390.0 143.0h0M395.2 143.0h0M400.4 143.0h0M405.6 143.0h0M410.8 143.0h0M416.0 143.0h0M421.2 143.0h0M426.4 143.0h0M431.6 143.0h0M436.8 143.0h0M189.8 148.2h0M195.0 148.2h0M200.2 148.2h0M205.4 148.2h0M210.6 148.2h0M215.8 148.2h0M221.0 148.2h0M226.2 148.2h0M231.4 148.2h0M236.6 148.2h0M361.4 148.2h0M366.6 148.2h0M371.8 148.2h0M377.0 148.2h0M382.2 148.2h0M387.4 148.2h0M392.6 148.2h0M397.8 148.2h0M403.0 148.2h0M408.2 148.2h0M413.4 148.2h0M418.6 148.2h0M423.8 148.2h0M429.0 148.2h0M434.2 148.2h0M187.2 153.4h0M192.4 153.4h0M197.6 153.4h0M202.8 153.4h0M208.0 153.4h0M213.2 153.4h0M218.4 153.4h0M223.6 153.4h0M228.8 153.4h0M234.0 153.4h0M239.2 153.4h0M358.8 153.4h0M364.0 153.4h0M369.2 153.4h0M374.4 153.4h0M379.6 153.4h0M384.8 153.4h0M390.0 153.4h0M395.2 153.4h0M400.4 153.4h0M405.6 153.4h0M410.8 153.4h0M416.0 153.4h0M421.2 153.4h0M426.4 153.4h0M179.4 158.6h0M184.6 158.6h0M189.8 158.6h0M195.0 158.6h0M200.2 158.6h0M205.4 158.6h0M210.6 158.6h0M215.8 158.6h0M221.0 158.6h0M226.2 158.6h0M231.4 158.6h0M236.6 158.6h0M241.8 158.6h0M247.0 158.6h0M361.4 158.6h0M366.6 158.6h0M371.8 158.6h0M377.0 158.6h0M382.2 158.6h0M387.4 158.6h0M392.6 158.6h0M397.8 158.6h0M403.0 158.6h0M408.2 158.6h0M413.4 158.6h0M418.6 158.6h0M182.0 163.8h0M187.2 163.8h0M192.4 163.8h0M197.6 163.8h0M202.8 163.8h0M208.0 163.8h0M213.2 163.8h0M218.4 163.8h0M223.6 163.8h0M228.8 163.8h0M234.0 163.8h0M239.2 163.8h0M244.4 163.8h0M249.6 163.8h0M254.8 163.8h0M260.0 163.8h0M364.0 163.8h0M369.2 163.8h0M374.4 163.8h0M379.6 163.8h0M384.8 163.8h0M390.0 163.8h0M395.2 163.8h0M400.4 163.8h0M405.6 163.8h0M410.8 163.8h0M416.0 163.8h0M624.0 163.8h0M629.2 163.8h0M179.4 169.0h0M184.6 169.0h0M189.8 169.0h0M195.0 169.0h0M200.2 169.0h0M205.4 169.0h0M210.6 169.0h0M215.8 169.0h0M221.0 169.0h0M226.2 169.0h0M231.4 169.0h0M236.6 169.0h0M241.8 169.0h0M247.0 169.0h0M252.2 169.0h0M257.4 169.0h0M262.6 169.0h0M267.8 169.0h0M366.6 169.0h0M371.8 169.0h0M377.0 169.0h0M382.2 169.0h0M387.4 169.0h0M392.6 169.0h0M397.8 169.0h0M403.0 169.0h0M408.2 169.0h0M413.4 169.0h0M626.6 169.0h0M631.8 169.0h0M187.2 174.2h0M192.4 174.2h0M197.6 174.2h0M202.8 174.2h0M208.0 174.2h0M213.2 174.2h0M218.4 174.2h0M223.6 174.2h0M228.8 174.2h0M234.0 174.2h0M239.2 174.2h0M244.4 174.2h0M249.6 174.2h0M254.8 174.2h0M260.0 174.2h0M265.2 174.2h0M369.2 174.2h0M374.4 174.2h0M379.6 174.2h0M384.8 174.2h0M390.0 174.2h0M395.2 174.2h0M400.4 174.2h0M405.6 174.2h0M410.8 174.2h0M416.0 174.2h0M624.0 174.2h0M634.4 174.2h0M189.8 179.4h0M195.0 179.4h0M200.2 179.4h0M205.4 179.4h0M210.6 179.4h0M215.8 179.4h0M221.0 179.4h0M226.2 179.4h0M231.4 179.4h0M236.6 179.4h0M241.8 179.4h0M247.0 179.4h0M252.2 179.4h0M257.4 179.4h0M262.6 179.4h0M371.8 179.4h0M377.0 179.4h0M382.2 179.4h0M387.4 179.4h0M392.6 179.4h0M397.8 179.4h0M403.0 179.4h0M408.2 179.4h0M413.4 179.4h0M418.6 179.4h0M605.8 179.4h0M192.4 184.6h0M197.6 184.6h0M202.8 184.6h0M208.0 184.6h0M213.2 184.6h0M218.4 184.6h0M223.6 184.6h0M228.8 184.6h0M234.0 184.6h0M239.2 184.6h0M244.4 184.6h0M249.6 184.6h0M254.8 184.6h0M260.0 184.6h0M369.2 184.6h0M374.4 184.6h0M379.6 184.6h0M384.8 184.6h0M390.0 184.6h0M395.2 184.6h0M400.4 184.6h0M405.6 184.6h0M410.8 184.6h0M416.0 184.6h0M421.2 184.6h0M436.8 184.6h0M592.8 184.6h0M603.2 184.6h0M608.4 184.6h0M624.0 184.6h0M629.2 184.6h0M200.2 189.8h0M205.4 189.8h0M210.6 189.8h0M215.8 189.8h0M221.0 189.8h0M226.2 189.8h0M231.4 189.8h0M236.6 189.8h0M241.8 189.8h0M247.0 189.8h0M252.2 189.8h0M257.4 189.8h0M366.6 189.8h0M371.8 189.8h0M377.0 189.8h0M382.2 189.8h0M387.4 189.8h0M392.6 189.8h0M397.8 189.8h0M403.0 189.8h0M408.2 189.8h0M413.4 189.8h0M429.0 189.8h0M434.2 189.8h0M439.4 189.8h0M590.2 189.8h0M595.4 189.8h0M600.6 189.8h0M605.8 189.8h0M611.0 189.8h0M616.2 189.8h0M626.6 189.8h0M202.8 195.0h0M208.0 195.0h0M213.2 195.0h0M218.4 195.0h0M223.6 195.0h0M228.8 195.0h0M234.0 195.0h0M239.2 195.0h0M244.4 195.0h0M249.6 195.0h0M254.8 195.0h0M260.0 195.0h0M369.2 195.0h0M374.4 195.0h0M379.6 195.0h0M384.8 195.0h0M390.0 195.0h0M395.2 195.0h0M400.4 195.0h0M405.6 195.0h0M431.6 195.0h0M436.8 195.0h0M582.4 195.0h0M587.6 195.0h0M592.8 195.0h0M598.0 195.0h0M603.2 195.0h0M608.4 195.0h0M613.6 195.0h0M618.8 195.0h0M624.0 195.0h0M629.2 195.0h0M634.4 195.0h0M200.2 200.2h0M205.4 200.2h0M210.6 200.2h0M215.8 200.2h0M221.0 200.2h0M226.2 200.2h0M231.4 200.2h0M236.6 200.2h0M241.8 200.2h0M247.0 200.2h0M252.2 200.2h0M257.4 200.2h0M371.8 200.2h0M377.0 200.2h0M382.2 200.2h0M387.4 200.2h0M392.6 200.2h0M397.8 200.2h0M403.0 200.2h0M408.2 200.2h0M429.0 200.2h0M434.2 200.2h0M569.4 200.2h0M574.6 200.2h0M579.8 200.2h0M585.0 200.2h0M590.2 200.2h0M595.4 200.2h0M600.6 200.2h0M605.8 200.2h0M611.0 200.2h0M616.2 200.2h0M621.4 200.2h0M626.6 200.2h0M631.8 200.2h0M637.0 200.2h0M673.4 200.2h0M202.8 205.4h0M208.0 205.4h0M213.2 205.4h0M218.4 205.4h0M223.6 205.4h0M228.8 205.4h0M234.0 205.4h0M239.2 205.4h0M244.4 205.4h0M369.2 205.4h0M374.4 205.4h0M379.6 205.4h0M384.8 205.4h0M390.0 205.4h0M395.2 205.4h0M400.4 205.4h0M405.6 205.4h0M431.6 205.4h0M572.0 205.4h0M577.2 205.4h0M582.4 205.4h0M587.6 205.4h0M592.8 205.4h0M598.0 205.4h0M603.2 205.4h0M608.4 205.4h0M613.6 205.4h0M618.8 205.4h0M624.0 205.4h0M629.2 205.4h0M634.4 205.4h0M639.6 205.4h0M200.2 210.6h0M205.4 210.6h0M210.6 210.6h0M215.8 210.6h0M221.0 210.6h0M226.2 210.6h0M231.4 210.6h0M236.6 210.6h0M241.8 210.6h0M371.8 210.6h0M377.0 210.6h0M382.2 210.6h0M387.4 210.6h0M392.6 210.6h0M397.8 210.6h0M403.0 210.6h0M569.4 210.6h0M574.6 210.6h0M579.8 210.6h0M585.0 210.6h0M590.2 210.6h0M595.4 210.6h0M600.6 210.6h0M605.8 210.6h0M611.0 210.6h0M616.2 210.6h0M621.4 210.6h0M626.6 210.6h0M631.8 210.6h0M637.0 210.6h0M642.2 210.6h0M197.6 215.8h0M202.8 215.8h0M208.0 215.8h0M213.2 215.8h0M218.4 215.8h0M223.6 215.8h0M228.8 215.8h0M234.0 215.8h0M239.2 215.8h0M374.4 215.8h0M379.6 215.8h0M384.8 215.8h0M390.0 215.8h0M395.2 215.8h0M400.4 215.8h0M572.0 215.8h0M577.2 215.8h0M582.4 215.8h0M587.6 215.8h0M592.8 215.8h0M598.0 215.8h0M603.2 215.8h0M608.4 215.8h0M613.6 215.8h0M618.8 215.8h0M624.0 215.8h0M629.2 215.8h0M634.4 215.8h0M639.6 215.8h0M644.8 215.8h0M200.2 221.0h0M205.4 221.0h0M210.6 221.0h0M215.8 221.0h0M221.0 221.0h0M226.2 221.0h0M231.4 221.0h0M377.0 221.0h0M382.2 221.0h0M387.4 221.0h0M392.6 221.0h0M574.6 221.0h0M579.8 221.0h0M585.0 221.0h0M590.2 221.0h0M611.0 221.0h0M616.2 221.0h0M621.4 221.0h0M626.6 221.0h0M631.8 221.0h0M637.0 221.0h0M642.2 221.0h0M197.6 226.2h0M202.8 226.2h0M208.0 226.2h0M213.2 226.2h0M218.4 226.2h0M223.6 226.2h0M618.8 226.2h0M624.0 226.2h0M629.2 226.2h0M634.4 226.2h0M639.6 226.2h0M686.4 226.2h0M195.0 231.4h0M200.2 231.4h0M205.4 231.4h0M210.6 231.4h0M215.8 231.4h0M221.0 231.4h0M621.4 231.4h0M626.6 231.4h0M631.8 231.4h0M637.0 231.4h0M197.6 236.6h0M202.8 236.6h0M208.0 236.6h0M213.2 236.6h0M691.6 236.6h0M195.0 241.8h0M200.2 241.8h0M205.4 241.8h0M210.6 241.8h0M631.8 241.8h0M683.8 241.8h0M192.4 247.0h0M197.6 247.0h0M202.8 247.0h0M676.0 247.0h0M681.2 247.0h0M189.8 252.2h0M195.0 252.2h0M200.2 252.2h0M205.4 252.2h0M192.4 257.4h0M197.6 257.4h0M195.0 262.6h0M200.2 262.6h0M10.4 18.2h0M15.6 18.2h0M20.8 18.2h0M26.0 18.2h0M31.2 18.2h0M36.4 18.2h0M41.6 18.2h0M46.8 18.2h0M52.0 18.2h0M57.2 18.2h0M18.2 23.4h0M23.4 23.4h0M28.6 23.4h0M33.8 23.4h0M39.0 23.4h0M44.2 23.4h0M49.4 23.4h0M54.6 23.4h0M20.8 28.6h0M26.0 28.6h0M31.2 28.6h0M36.4 28.6h0M41.6 28.6h0M46.8 28.6h0M52.0 28.6h0M57.2 28.6h0M13.0 33.8h0M18.2 33.8h0M23.4 33.8h0M28.6 33.8h0M33.8 33.8h0M44.2 33.8h0M49.4 33.8h0M54.6 33.8h0M26.0 39.0h0M31.2 39.0h0M67.6 39.0h0M72.8 39.0h0M332.8 39.0h0M18.2 44.2h0M330.2 44.2h0M335.4 44.2h0M332.8 49.4h0M338.0 49.4h0M358.8 49.4h0M364.0 49.4h0M587.6 49.4h0M330.2 54.6h0M335.4 54.6h0M356.2 54.6h0M361.4 54.6h0M579.8 54.6h0M585.0 54.6h0M590.2 54.6h0M98.8 59.8h0M104.0 59.8h0M109.2 59.8h0M114.4 59.8h0M119.6 59.8h0M124.8 59.8h0M130.0 59.8h0M135.2 59.8h0M140.4 59.8h0M145.6 59.8h0M150.8 59.8h0M156.0 59.8h0M358.8 59.8h0M364.0 59.8h0M514.8 59.8h0M572.0 59.8h0M577.2 59.8h0M582.4 59.8h0M587.6 59.8h0M592.8 59.8h0M598.0 59.8h0M608.4 59.8h0M96.2 65.0h0M101.4 65.0h0M106.6 65.0h0M111.8 65.0h0M117.0 65.0h0M122.2 65.0h0M127.4 65.0h0M132.6 65.0h0M137.8 65.0h0M143.0 65.0h0M148.2 65.0h0M153.4 65.0h0M158.6 65.0h0M163.8 65.0h0M169.0 65.0h0M174.2 65.0h0M200.2 65.0h0M507.0 65.0h0M512.2 65.0h0M517.4 65.0h0M574.6 65.0h0M579.8 65.0h0M585.0 65.0h0M590.2 65.0h0M595.4 65.0h0M600.6 65.0h0M605.8 65.0h0M93.6 70.2h0M98.8 70.2h0M104.0 70.2h0M109.2 70.2h0M114.4 70.2h0M119.6 70.2h0M124.8 70.2h0M130.0 70.2h0M135.2 70.2h0M140.4 70.2h0M145.6 70.2h0M150.8 70.2h0M156.0 70.2h0M161.2 70.2h0M166.4 70.2h0M171.6 70.2h0M187.2 70.2h0M192.4 70.2h0M197.6 70.2h0M322.4 70.2h0M327.6 70.2h0M332.8 70.2h0M338.0 70.2h0M504.4 70.2h0M509.6 70.2h0M514.8 70.2h0M520.0 70.2h0M525.2 70.2h0M530.4 70.2h0M561.6 70.2h0M566.8 70.2h0M572.0 70.2h0M577.2 70.2h0M582.4 70.2h0M587.6 70.2h0M592.8 70.2h0M598.0 70.2h0M624.0 70.2h0M96.2 75.4h0M101.4 75.4h0M106.6 75.4h0M111.8 75.4h0M117.0 75.4h0M122.2 75.4h0M127.4 75.4h0M132.6 75.4h0M137.8 75.4h0M143.0 75.4h0M148.2 75.4h0M153.4 75.4h0M158.6 75.4h0M163.8 75.4h0M169.0 75.4h0M174.2 75.4h0M179.4 75.4h0M184.6 75.4h0M189.8 75.4h0M330.2 75.4h0M335.4 75.4h0M340.6 75.4h0M491.4 75.4h0M496.6 75.4h0M501.8 75.4h0M507.0 75.4h0M512.2 75.4h0M517.4 75.4h0M522.6 75.4h0M527.8 75.4h0M533.0 75.4h0M538.2 75.4h0M543.4 75.4h0M548.6 75.4h0M553.8 75.4h0M559.0 75.4h0M564.2 75.4h0M569.4 75.4h0M574.6 75.4h0M579.8 75.4h0M585.0 75.4h0M621.4 75.4h0M98.8 80.6h0M104.0 80.6h0M109.2 80.6h0M114.4 80.6h0M119.6 80.6h0M124.8 80.6h0M130.0 80.6h0M135.2 80.6h0M140.4 80.6h0M145.6 80.6h0M150.8 80.6h0M156.0 80.6h0M161.2 80.6h0M166.4 80.6h0M171.6 80.6h0M176.8 80.6h0M182.0 80.6h0M187.2 80.6h0M327.6 80.6h0M332.8 80.6h0M338.0 80.6h0M431.6 80.6h0M436.8 80.6h0M452.4 80.6h0M494.0 80.6h0M499.2 80.6h0M504.4 80.6h0M509.6 80.6h0M514.8 80.6h0M520.0 80.6h0M525.2 80.6h0M530.4 80.6h0M535.6 80.6h0M540.8 80.6h0M546.0 80.6h0M551.2 80.6h0M556.4 80.6h0M561.6 80.6h0M566.8 80.6h0M572.0 80.6h0M577.2 80.6h0M582.4 80.6h0M618.8 80.6h0M101.4 85.8h0M106.6 85.8h0M111.8 85.8h0M117.0 85.8h0M122.2 85.8h0M127.4 85.8h0M132.6 85.8h0M137.8 85.8h0M143.0 85.8h0M148.2 85.8h0M153.4 85.8h0M158.6 85.8h0M163.8 85.8h0M169.0 85.8h0M174.2 85.8h0M179.4 85.8h0M184.6 85.8h0M423.8 85.8h0M429.0 85.8h0M434.2 85.8h0M439.4 85.8h0M444.6 85.8h0M449.8 85.8h0M455.0 85.8h0M460.2 85.8h0M496.6 85.8h0M501.8 85.8h0M507.0 85.8h0M512.2 85.8h0M517.4 85.8h0M522.6 85.8h0M527.8 85.8h0M533.0 85.8h0M538.2 85.8h0M543.4 85.8h0M548.6 85.8h0M553.8 85.8h0M559.0 85.8h0M564.2 85.8h0M569.4 85.8h0M574.6 85.8h0M605.8 85.8h0M611.0 85.8h0M616.2 85.8h0M114.4 91.0h0M119.6 91.0h0M124.8 91.0h0M130.0 91.0h0M135.2 91.0h0M140.4 91.0h0M145.6 91.0h0M150.8 91.0h0M156.0 91.0h0M161.2 91.0h0M166.4 91.0h0M171.6 91.0h0M176.8 91.0h0M421.2 91.0h0M426.4 91.0h0M431.6 91.0h0M436.8 91.0h0M442.0 91.0h0M447.2 91.0h0M452.4 91.0h0M457.6 91.0h0M499.2 91.0h0M504.4 91.0h0M509.6 91.0h0M514.8 91.0h0M520.0 91.0h0M525.2 91.0h0M530.4 91.0h0M535.6 91.0h0M540.8 91.0h0M546.0 91.0h0M551.2 91.0h0M556.4 91.0h0M561.6 91.0h0M566.8 91.0h0M572.0 91.0h0M577.2 91.0h0M582.4 91.0h0M603.2 91.0h0M132.6 96.2h0M137.8 96.2h0M143.0 96.2h0M148.2 96.2h0M153.4 96.2h0M158.6 96.2h0M169.0 96.2h0M174.2 96.2h0M429.0 96.2h0M434.2 96.2h0M444.6 96.2h0M449.8 96.2h0M455.0 96.2h0M460.2 96.2h0M507.0 96.2h0M512.2 96.2h0M517.4 96.2h0M522.6 96.2h0M527.8 96.2h0M533.0 96.2h0M538.2 96.2h0M543.4 96.2h0M548.6 96.2h0M553.8 96.2h0M559.0 96.2h0M564.2 96.2h0M569.4 96.2h0M574.6 96.2h0M579.8 96.2h0M176.8 101.4h0M447.2 101.4h0M452.4 101.4h0M457.6 101.4h0M462.8 101.4h0M540.8 101.4h0M546.0 101.4h0M551.2 101.4h0M556.4 101.4h0M561.6 101.4h0M566.8 101.4h0M572.0 101.4h0M577.2 101.4h0M538.2 106.6h0M543.4 106.6h0M548.6 106.6h0M553.8 106.6h0M559.0 106.6h0M564.2 106.6h0M569.4 106.6h0M574.6 106.6h0M20.8 111.8h0M540.8 111.8h0M556.4 111.8h0M561.6 111.8h0M28.6 117.0h0M538.2 117.0h0M559.0 117.0h0M540.8 122.2h0M546.0 122.2h0M582.4 122.2h0M538.2 127.4h0M543.4 127.4h0M548.6 127.4h0M553.8 127.4h0M546.0 132.6h0M551.2 132.6h0M501.8 137.8h0M538.2 137.8h0M540.8 143.0h0M533.0 148.2h0M543.4 148.2h0M569.4 148.2h0M574.6 148.2h0M540.8 153.4h0M561.6 153.4h0M566.8 153.4h0M572.0 153.4h0M543.4 158.6h0M548.6 158.6h0M564.2 158.6h0M569.4 158.6h0M579.8 158.6h0M585.0 158.6h0M605.8 158.6h0M546.0 163.8h0M551.2 163.8h0M613.6 163.8h0M618.8 163.8h0M553.8 169.0h0M621.4 169.0h0M591.7 173.6h0%22 stroke=%22%23cfdcd7%22 stroke-width=%223.4%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .mk-st .mk-pin { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--mk-pub); box-shadow: 0 0 0 2px #fff; font-size: 0; line-height: 0; overflow: visible; cursor: default; animation: mk-pop .5s cubic-bezier(.3,1.6,.5,1) both; } .mk-st .mk-pin::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--mk-pub); opacity: 0; animation: mk-pulse 2.6s ease-out infinite; } .mk-st .mk-pin.is-s { width: 8px; height: 8px; margin: -4px 0 0 -4px; } .mk-st .mk-pin.is-m { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; } .mk-st .mk-pin.is-l { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; } .mk-st .mk-pin.is-xl { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: var(--mk-sub); } .mk-st .mk-pin.is-xl::after { border-color: var(--mk-sub); } .mk-st .mk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: 12px; color: var(--mk-muted); } .mk-st .mk-lg { display: inline-block; border-radius: 50%; background: var(--mk-pub); font-size: 0; vertical-align: middle; margin-right: 2px; } .mk-st .mk-lg.is-xl { width: 14px; height: 14px; background: var(--mk-sub); } .mk-st .mk-lg.is-l { width: 11px; height: 11px; } .mk-st .mk-lg.is-m { width: 8px; height: 8px; } .mk-st .mk-lg.is-s { width: 6px; height: 6px; } @keyframes mk-pop { from { transform: scale(0); opacity: 0; } } @keyframes mk-pulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* ---------- Two panels ---------- */ .mk-st .mk-two { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; } @container (min-width: 560px) { .mk-st .mk-two { grid-template-columns: 1.15fr 1fr; } } .mk-st .mk-two > * { min-width: 0; } .mk-st .mk-panel { border: 1.5px solid var(--mk-line); border-radius: 16px; padding: 14px 16px; background: #fff; } .mk-st .mk-ph { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-sub-deep); margin-bottom: 10px; } .mk-st img.mk-flag { display: inline-block; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.12); background: #eef0ef; font-size: 0; vertical-align: middle; flex: 0 0 auto; } /* Indonesia headline row */ .mk-st .mk-home { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 10px 12px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-st .mk-home .mk-bn { font-weight: 700; flex: 1; } .mk-st .mk-home b { font-size: 22px; line-height: 1; } .mk-st .mk-home .mk-hs { font-size: 12px; color: var(--mk-muted); } .mk-st .mk-sub { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--mk-ink); } .mk-st .mk-subn { font-weight: 400; color: var(--mk-muted); } /* Bars */ .mk-st .mk-bars { list-style: none; margin: 0; padding: 0; } .mk-st .mk-bars > li { display: grid; grid-template-columns: 20px minmax(80px, 34%) 1fr 22px; align-items: center; gap: 8px; margin: 0; padding: 3px 0; font-size: 13px; } .mk-st .mk-bars .mk-bn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mk-ink); } .mk-st .mk-bars i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--mk-pub), #d48a45); width: var(--w, 0%); font-size: 0; transform-origin: left center; animation: mk-grow .9s cubic-bezier(.2,.7,.2,1) both; } .mk-st .mk-bars b { text-align: right; font-size: 13px; color: var(--mk-pub); } @keyframes mk-grow { from { transform: scaleX(0); } } /* Donut */ .mk-st .mk-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; } .mk-st .mk-donut { position: relative; flex: 0 0 140px; width: 140px; height: 140px; border-radius: 50%; background: conic-gradient(var(--mk-sub) 0 286.2deg, var(--mk-blue) 286.2deg 309.8deg, var(--mk-pub) 309.8deg 354.1deg, #c4ccc9 354.1deg 360deg); -webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 59%), conic-gradient(#000 var(--mk-sweep), transparent 0); -webkit-mask-composite: source-in; mask: radial-gradient(farthest-side, transparent 58%, #000 59%) intersect, conic-gradient(#000 var(--mk-sweep), transparent 0); --mk-sweep: 360deg; animation: mk-sweep 1.4s cubic-bezier(.3,.7,.2,1) .3s both; } @keyframes mk-sweep { from { --mk-sweep: 0deg; } } .mk-st .mk-dc { display: none; } .mk-st .mk-dl { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; min-width: 0; } .mk-st .mk-dl > li { position: relative; margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--mk-muted); } .mk-st .mk-dl > li::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 3px; } .mk-st .mk-dl > li.is-1::before { background: var(--mk-sub); } .mk-st .mk-dl > li.is-2::before { background: var(--mk-blue); } .mk-st .mk-dl > li.is-3::before { background: var(--mk-pub); } .mk-st .mk-dl > li.is-4::before { background: #c4ccc9; } .mk-st .mk-dl b { display: block; font-size: 18px; line-height: 1.1; color: var(--mk-ink); } /* Topics */ .mk-st .mk-topics-panel { margin-top: 12px; } .mk-st .mk-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .mk-st .mk-topic { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); font-size: 13px; font-weight: 600; animation: mk-rise .5s ease-out both; } .mk-st .mk-topic.is-3 { font-size: 16px; font-weight: 800; background: var(--mk-sub); color: #fff; } .mk-st .mk-topic.is-2 { font-size: 14px; font-weight: 700; background: #cfe6dd; } .mk-st .mk-topic:nth-child(2n) { animation-delay: .08s; } .mk-st .mk-topic:nth-child(3n) { animation-delay: .16s; } .mk-st .mk-src { margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: #7b8c87; } .mk-st .mk-credit { margin-top: 4px; font-size: 11px; line-height: 1.4; color: #66766f; } .mk-st .mk-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(102,118,111,.45); text-underline-offset: 2px; } .mk-st .mk-credit a:hover { color: var(--mk-ink); } @keyframes mk-rise { from { opacity: 0; transform: translateY(8px); } } /* Play the entrance animations when the section scrolls into view (Chromium-based browsers) */ @supports (animation-timeline: view()) { .mk-st .mk-kpi, .mk-st .mk-num::after, .mk-st .mk-pin, .mk-st .mk-bars i, .mk-st .mk-donut, .mk-st .mk-topic { animation-timeline: view(); animation-range: entry 10% entry 100%; animation-delay: 0s; } .mk-st .mk-pin::after { animation-timeline: auto; } } /* Respect visitors who prefer less motion */ @media (prefers-reduced-motion: reduce) { .mk-st *, .mk-st *::before, .mk-st *::after { animation: none !important; } } /* ---------- Marker positions (equirectangular, lon -170..180, lat -56..78) ---------- */ .mk-st .mk-pin.mk-c-id { left: 82.0%; top: 59.7%; animation-delay: 0.15s; } .mk-st .mk-pin.mk-c-id::after { animation-delay: 0.60s; } .mk-st .mk-pin.mk-c-my { left: 77.71%; top: 55.22%; animation-delay: 0.27s; } .mk-st .mk-pin.mk-c-my::after { animation-delay: 0.85s; } .mk-st .mk-pin.mk-c-ph { left: 83.43%; top: 49.25%; animation-delay: 0.39s; } .mk-st .mk-pin.mk-c-ph::after { animation-delay: 1.10s; } .mk-st .mk-pin.mk-c-gb { left: 48.0%; top: 18.66%; animation-delay: 0.51s; } .mk-st .mk-pin.mk-c-gb::after { animation-delay: 1.35s; } .mk-st .mk-pin.mk-c-jp { left: 88.0%; top: 31.34%; animation-delay: 0.63s; } .mk-st .mk-pin.mk-c-jp::after { animation-delay: 1.60s; } .mk-st .mk-pin.mk-c-cn { left: 78.29%; top: 32.84%; animation-delay: 0.75s; } .mk-st .mk-pin.mk-c-cn::after { animation-delay: 1.85s; } .mk-st .mk-pin.mk-c-lk { left: 71.62%; top: 52.34%; animation-delay: 0.87s; } .mk-st .mk-pin.mk-c-lk::after { animation-delay: 2.10s; } .mk-st .mk-pin.mk-c-th { left: 77.62%; top: 48.48%; animation-delay: 0.99s; } .mk-st .mk-pin.mk-c-th::after { animation-delay: 2.35s; } .mk-st .mk-pin.mk-c-us { left: 20.57%; top: 29.1%; animation-delay: 1.11s; } .mk-st .mk-pin.mk-c-us::after { animation-delay: 2.60s; } .mk-st .mk-pin.mk-c-de { left: 51.55%; top: 19.83%; animation-delay: 1.23s; } .mk-st .mk-pin.mk-c-de::after { animation-delay: 2.85s; } .mk-st .mk-pin.mk-c-kh { left: 78.57%; top: 48.61%; animation-delay: 1.35s; } .mk-st .mk-pin.mk-c-kh::after { animation-delay: 3.10s; } .mk-st .mk-pin.mk-c-tl { left: 84.57%; top: 64.78%; animation-delay: 1.47s; } .mk-st .mk-pin.mk-c-tl::after { animation-delay: 3.35s; } /* ---------- Bar widths ---------- */ .mk-st .mk-b-my > i { --w: 100.0%; animation-delay: 0.20s; } .mk-st .mk-b-ph > i { --w: 57.1%; animation-delay: 0.27s; } .mk-st .mk-b-gb > i { --w: 42.9%; animation-delay: 0.34s; } .mk-st .mk-b-jp > i { --w: 42.9%; animation-delay: 0.41s; } .mk-st .mk-b-cn > i { --w: 28.6%; animation-delay: 0.48s; } .mk-st .mk-b-lk > i { --w: 28.6%; animation-delay: 0.55s; } .mk-st .mk-b-th > i { --w: 28.6%; animation-delay: 0.62s; } .mk-st .mk-b-us > i { --w: 14.3%; animation-delay: 0.69s; } .mk-st .mk-b-de > i { --w: 14.3%; animation-delay: 0.76s; } .mk-st .mk-b-kh > i { --w: 14.3%; animation-delay: 0.83s; } .mk-st .mk-b-tl > i { --w: 14.3%; animation-delay: 0.90s; } /* Journal header */ .ojs-jhead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e5e5e5; } .ojs-jhead h2 { font-size: 22px !important; font-weight: 700 !important; color: #111 !important; letter-spacing: -.02em; margin: 0 !important; border: none !important; padding: 0 !important; } .ojs-jhead-abbr { font-size: 13px; color: #888; } .ojs-badge { display: inline-block; font-size: 12px; font-weight: 700; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 99px; padding: 3px 10px; } /* Section label */ .ojs-label { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px 0; } /* Card */ .ojs-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } /* Meta grid */ .ojs-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .ojs-meta-key { display: block; font-size: 11px; color: #999; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; } .ojs-meta-val { font-size: 13px; font-weight: 600; color: #111; } /* Divider */ .ojs-hr { border: none; border-top: 1px solid #f0f0f0; margin: 1rem 0; } /* Pill row */ .ojs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .ojs-pill { font-size: 12px; background: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 99px; padding: 4px 12px; color: #555; } .ojs-pill-green { font-size: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 99px; padding: 4px 12px; color: #15803d; } /* Prose */ .ojs-prose { font-size: 14px; color: #555; line-height: 1.75; margin: 0 0 1rem 0; } .ojs-prose:last-child { margin-bottom: 0; } /* Feature grid */ .ojs-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 1.25rem; } .ojs-feat { background: #f9f9f7; border: 1px solid #ebebeb; border-radius: 10px; padding: 1rem 1.1rem; } .ojs-feat-icon { font-size: 20px; margin-bottom: 8px; } .ojs-feat-title { font-size: 13px; font-weight: 700; color: #111; margin: 0 0 4px 0; } .ojs-feat-desc { font-size: 12px; color: #777; line-height: 1.55; margin: 0; } /* ===== EDITOR'S CHOICE ===== */ .ojs-editors-choice { background: linear-gradient(135deg, #1c3e24 0%, #2d6a3f 100%); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.25rem; position: relative; overflow: hidden; } .ojs-editors-choice::before { content: '★'; position: absolute; right: -10px; top: -20px; font-size: 100px; color: rgba(255,255,255,0.05); line-height: 1; } .ojs-editors-choice-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #86efac; margin-bottom: 12px; } .ojs-editors-choice-title { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0 0 10px 0; } .ojs-editors-choice-title a { color: #ffffff !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,0.3) !important; padding-bottom: 1px; transition: border-color 0.2s; } .ojs-editors-choice-title a:hover { border-bottom-color: #fff !important; } .ojs-editors-choice-authors { font-size: 13px; color: #bbf7d0; margin: 0 0 14px 0; line-height: 1.5; } .ojs-editors-choice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: space-between; } .ojs-editors-choice-meta-pills { display: flex; flex-wrap: wrap; gap: 6px; } .ojs-editors-choice-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #1c3e24 !important; background: #86efac; border: none; border-radius: 8px; padding: 6px 14px; text-decoration: none !important; white-space: nowrap; transition: background 0.2s; } .ojs-editors-choice-btn:hover { background: #bbf7d0 !important; color: #1c3e24 !important; } .ojs-pill-white { font-size: 12px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 99px; padding: 4px 12px; color: #fff; } .ojs-pill-lime { font-size: 12px; background: rgba(134,239,172,0.15); border: 1px solid #86efac; border-radius: 99px; padding: 4px 12px; color: #86efac; } /* ===== NAVBAR CENTER ===== */ .pkp_navigation_primary_wrapper { display: flex; justify-content: center; } #navigationPrimary { display: flex; justify-content: center; flex-wrap: wrap; } /* ========================================================== Media Konservasi – Author Guidelines page Paste into Custom Header inside a style tag (can sit in the same style tag as mk-peer-review.css). All rules are scoped to .mk-ag. ========================================================== */ .mk-ag { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-bg-soft: #f7faf9; color: var(--mk-ink); font-size: 15px; line-height: 1.6; } .mk-ag *, .mk-ag *::before, .mk-ag *::after { box-sizing: border-box; } .mk-ag p { margin: 0 0 12px; } .mk-ag a { color: var(--mk-sub); font-weight: 600; word-break: break-word; } .mk-ag em { font-style: italic; } /* ---------- Hero ---------- */ .mk-ag .mk-hero { background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 26px 26px 22px; margin-bottom: 18px; } .mk-ag .mk-hero h3 { color: #fff; margin: 0 0 6px; font-size: 22px; line-height: 1.25; } .mk-ag .mk-hero p { color: #d6ebe4; margin: 0 0 18px; font-size: 15px; } .mk-ag .mk-actions { display: flex; flex-wrap: wrap; gap: 10px; } .mk-ag .mk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: transparent; } .mk-ag .mk-btn:hover { background: rgba(255,255,255,.12); color: #fff; } .mk-ag .mk-btn.is-primary { background: #fff; color: var(--mk-sub-deep); border-color: #fff; } .mk-ag .mk-btn.is-primary:hover { background: var(--mk-sub-soft); color: var(--mk-sub-deep); } /* ---------- Quick facts ---------- */ .mk-ag .mk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 28px; } .mk-ag .mk-fact { background: var(--mk-sub-soft); border-radius: 12px; padding: 12px 14px; } .mk-ag .mk-fact strong { display: block; font-size: 20px; line-height: 1.2; color: var(--mk-sub-deep); } .mk-ag .mk-fact span { font-size: 13px; color: var(--mk-muted); } /* ---------- Section heading ---------- */ .mk-ag .mk-h { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-ag .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-ag .mk-lead { color: var(--mk-muted); } /* ---------- Checklist ---------- */ .mk-ag .mk-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .mk-ag .mk-check li { position: relative; margin: 0; padding: 10px 14px 10px 42px; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 10px; font-size: 14px; } .mk-ag .mk-check li::before { content: "\2713"; position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--mk-sub); color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; } /* ---------- Chips (article types) ---------- */ .mk-ag .mk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; } .mk-ag .mk-chip { font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1.5px solid #9cc9bb; color: var(--mk-sub-deep); } /* ---------- Manuscript anatomy ---------- */ .mk-ag .mk-anatomy { list-style: none; margin: 0; padding: 0; counter-reset: mkpart; } .mk-ag .mk-part { counter-increment: mkpart; position: relative; margin: 0 0 10px; padding: 14px 16px 14px 62px; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; } .mk-ag .mk-part::before { content: counter(mkpart, decimal-leading-zero); position: absolute; left: 16px; top: 14px; font-size: 18px; font-weight: 800; color: var(--mk-sub); } .mk-ag .mk-part h5 { margin: 0 0 4px; font-size: 16px; color: var(--mk-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .mk-ag .mk-part p { margin: 0; font-size: 14px; color: var(--mk-muted); } .mk-ag .mk-part ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--mk-muted); } .mk-ag .mk-limit { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-ag .mk-limit.is-opt { background: #eef0ef; color: var(--mk-muted); } .mk-ag .mk-tip { margin-top: 8px; font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); } /* ---------- Rules with examples ---------- */ .mk-ag .mk-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mk-ag .mk-rule { background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px 16px; } .mk-ag .mk-rule h5 { margin: 0 0 4px; font-size: 15px; color: var(--mk-ink); } .mk-ag .mk-rule p { margin: 0 0 8px; font-size: 14px; color: var(--mk-muted); } .mk-ag .mk-eg { font-size: 14px; background: var(--mk-bg-soft); border-left: 3px solid var(--mk-sub); border-radius: 0 8px 8px 0; padding: 8px 12px; margin: 0; } /* ---------- References ---------- */ .mk-ag .mk-style { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--mk-sub-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; } .mk-ag .mk-style strong { font-size: 18px; color: var(--mk-sub-deep); } .mk-ag .mk-style .mk-sp { flex: 1; font-size: 14px; color: var(--mk-muted); min-width: 200px; } .mk-ag .mk-style a.mk-mini { font-size: 13px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1.5px solid #9cc9bb; text-decoration: none; } .mk-ag .mk-refs { display: grid; gap: 8px; } .mk-ag .mk-ref { background: #fff; border: 1.5px solid var(--mk-line); border-radius: 10px; padding: 10px 14px; } .mk-ag .mk-ref b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-sub); margin-bottom: 4px; } .mk-ag .mk-ref code { display: block; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.55; color: var(--mk-ink); background: none; padding: 0; white-space: normal; word-break: break-word; } .mk-ag .mk-ref code + code { margin-top: 6px; } .mk-ag .mk-ref small { display: block; margin-top: 6px; font-size: 13px; color: var(--mk-muted); } /* ---------- Graphical abstract ---------- */ .mk-ag .mk-ga { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; } .mk-ag .mk-ga figure { margin: 0; } .mk-ag .mk-ga img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1.5px solid var(--mk-line); } .mk-ag .mk-ga figcaption { font-size: 13px; color: var(--mk-muted); margin-top: 6px; } .mk-ag .mk-spec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } /* ---------- Closing CTA ---------- */ .mk-ag .mk-cta { margin-top: 34px; background: var(--mk-pub-soft); border: 1.5px solid #efd0ae; border-radius: 16px; padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .mk-ag .mk-cta p { flex: 1; margin: 0; min-width: 220px; color: var(--mk-pub-deep); font-size: 15px; } .mk-ag .mk-cta .mk-btn { background: var(--mk-pub); border-color: var(--mk-pub); color: #fff; } .mk-ag .mk-cta .mk-btn:hover { background: var(--mk-pub-deep); } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .mk-ag .mk-facts { grid-template-columns: 1fr 1fr; } .mk-ag .mk-rules, .mk-ag .mk-ga { grid-template-columns: 1fr; } .mk-ag .mk-hero { padding: 20px 18px; } .mk-ag .mk-btn { flex: 1 1 100%; justify-content: center; } } /* ========================================================== Media Konservasi – Peer Review Process page Paste into: Settings > Website > Appearance > Advanced > Custom Header (wrapped in a style tag), or upload it as a custom stylesheet. All rules are scoped to .mk-pr to avoid theme conflicts. ========================================================== */ .mk-pr { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); line-height: 1.6; font-size: 15px; } .mk-pr *, .mk-pr *::before, .mk-pr *::after { box-sizing: border-box; } .mk-pr p { margin: 0 0 12px; } .mk-pr a { color: var(--mk-sub); font-weight: 600; word-break: break-word; } /* Intro + key figure */ .mk-pr .mk-intro { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; } .mk-pr .mk-intro-text { flex: 1; } .mk-pr .mk-stat { flex: 0 0 auto; text-align: center; background: var(--mk-sub-soft); border-radius: 14px; padding: 14px 20px; } .mk-pr .mk-stat strong { display: block; font-size: 34px; line-height: 1; color: var(--mk-sub); } .mk-pr .mk-stat span { font-size: 13px; color: var(--mk-muted); } /* Two systems */ .mk-pr .mk-systems { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 12px; } .mk-pr .mk-system { border-radius: 14px; padding: 16px 18px; border: 1.5px solid; } .mk-pr .mk-system h4 { margin: 0 0 6px; font-size: 17px; } .mk-pr .mk-system p { margin: 0 0 8px; font-size: 14px; color: var(--mk-muted); } .mk-pr .mk-system a { display: inline-block; font-size: 13px; padding: 4px 12px; border-radius: 999px; background: #fff; text-decoration: none; } .mk-pr .mk-system.is-sub { background: var(--mk-sub-soft); border-color: #b9d9cf; } .mk-pr .mk-system.is-sub h4 { color: var(--mk-sub-deep); } .mk-pr .mk-system.is-sub a { color: var(--mk-sub-deep); border: 1.5px solid #9cc9bb; } .mk-pr .mk-system.is-pub { background: var(--mk-pub-soft); border-color: #efd0ae; } .mk-pr .mk-system.is-pub h4 { color: var(--mk-pub-deep); } .mk-pr .mk-system.is-pub a { color: var(--mk-pub-deep); border: 1.5px solid #e6bb8c; } .mk-pr .mk-note { font-size: 14px; background: #fff; border: 1.5px dashed var(--mk-line); border-radius: 10px; padding: 10px 14px; color: var(--mk-muted); margin-bottom: 28px; } /* Section headings */ .mk-pr .mk-phase { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .mk-pr .mk-phase::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-pr .mk-phase.is-sub { color: var(--mk-sub-deep); } .mk-pr .mk-phase.is-pub { color: var(--mk-pub-deep); } /* Steps */ .mk-pr .mk-steps { list-style: none; margin: 0; padding: 0; position: relative; } .mk-pr .mk-steps::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; background: var(--mk-line); } .mk-pr .mk-step { position: relative; display: flex; gap: 14px; margin: 0 0 12px; padding: 0; } .mk-pr .mk-num { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--mk-sub); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .mk-pr .mk-steps.is-pub .mk-num { background: var(--mk-pub); } .mk-pr .mk-card { flex: 1; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 12px 16px; } .mk-pr .mk-card h5 { margin: 0 0 4px; font-size: 16px; color: var(--mk-ink); } .mk-pr .mk-card p { margin: 0; font-size: 14px; color: var(--mk-muted); } .mk-pr .mk-card ul { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--mk-muted); } .mk-pr .mk-time { display: inline-block; margin: 8px 6px 0 0; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-pr .mk-alert { margin-top: 10px; font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--mk-rej-soft); border: 1.5px dashed #d79a9a; color: #6b2323; } .mk-pr .mk-alert b { color: var(--mk-rej); } .mk-pr .mk-info { margin-top: 10px; font-size: 13px; padding: 8px 12px; border-radius: 8px; background: #f7faf9; border: 1.5px dashed var(--mk-line); } .mk-pr .mk-final .mk-card { background: var(--mk-pub); border-color: var(--mk-pub); } .mk-pr .mk-final .mk-card h5, .mk-pr .mk-final .mk-card p { color: #fff; } .mk-pr .mk-final .mk-card a { color: #fff; } .mk-pr .mk-transfer { text-align: center; margin: 18px 0 4px; } .mk-pr .mk-transfer span { display: inline-block; background: var(--mk-ink); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 16px; border-radius: 999px; } .mk-pr .mk-foot { margin-top: 20px; font-size: 13px; color: var(--mk-muted); font-style: italic; } /* Mobile */ @media (max-width: 640px) { .mk-pr .mk-intro { flex-direction: column; align-items: stretch; } .mk-pr .mk-systems { grid-template-columns: 1fr; } } /* Single-step list: no connector line */ .mk-pr .mk-steps.is-pub::before { display: none; } /* ========================================================== Media Konservasi – About the Journal page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-ab. ========================================================== */ .mk-ab { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; color: var(--mk-ink); font-size: 15px; line-height: 1.6; } .mk-ab *, .mk-ab *::before, .mk-ab *::after { box-sizing: border-box; } .mk-ab p { margin: 0 0 12px; } .mk-ab a { color: var(--mk-sub); font-weight: 600; } /* ---------- Hero: vision & mission ---------- */ .mk-ab .mk-vm { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border-radius: 18px; overflow: hidden; margin-bottom: 26px; } .mk-ab .mk-vm > div { padding: 24px 24px 22px; } .mk-ab .mk-vision { background: var(--mk-sub-deep); color: #fff; } .mk-ab .mk-mission { background: var(--mk-sub-soft); } .mk-ab .mk-label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; } .mk-ab .mk-vision .mk-label { color: #9fd3c2; } .mk-ab .mk-mission .mk-label { color: var(--mk-sub); } .mk-ab .mk-vision p { color: #fff; font-size: 19px; line-height: 1.45; font-weight: 600; margin: 0; } .mk-ab .mk-mission p { color: var(--mk-ink); font-size: 15px; margin: 0; } /* ---------- Section heading ---------- */ .mk-ab .mk-h { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-ab .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-ab .mk-lead { color: var(--mk-muted); } /* ---------- Publisher ---------- */ .mk-ab .mk-pubrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mk-ab .mk-org { background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px 16px; } .mk-ab .mk-org small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-sub); margin-bottom: 4px; } .mk-ab .mk-org strong { display: block; font-size: 15px; line-height: 1.4; } .mk-ab .mk-org span { font-size: 13px; color: var(--mk-muted); } /* ---------- Scope ---------- */ .mk-ab .mk-region { display: inline-block; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); margin-bottom: 12px; } .mk-ab .mk-chips { display: flex; flex-wrap: wrap; gap: 8px; } .mk-ab .mk-chip { font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1.5px solid #9cc9bb; color: var(--mk-sub-deep); } /* ---------- Article types ---------- */ .mk-ab .mk-common { background: var(--mk-sub-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; font-size: 14px; } .mk-ab .mk-common b { display: block; margin-bottom: 8px; color: var(--mk-sub-deep); } .mk-ab .mk-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .mk-ab .mk-flow span { font-size: 13px; padding: 4px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--mk-line); } .mk-ab .mk-flow span.is-body { background: var(--mk-sub); color: #fff; border-color: var(--mk-sub); font-weight: 700; } .mk-ab .mk-flow i { font-style: normal; color: var(--mk-muted); font-size: 12px; } .mk-ab .mk-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mk-ab .mk-type { background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; } .mk-ab .mk-type.is-wide { grid-column: 1 / -1; } .mk-ab .mk-type h5 { margin: 0 0 4px; font-size: 16px; color: var(--mk-ink); } .mk-ab .mk-type p { font-size: 14px; color: var(--mk-muted); margin: 0 0 10px; flex: 1; } .mk-ab .mk-meta { display: flex; flex-wrap: wrap; gap: 6px; } .mk-ab .mk-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-ab .mk-tag.is-body { background: var(--mk-sub); color: #fff; } /* ---------- Publication schedule ---------- */ .mk-ab .mk-sched { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .mk-ab .mk-month { text-align: center; background: var(--mk-sub-soft); border-radius: 12px; padding: 14px 8px; } .mk-ab .mk-month strong { display: block; font-size: 22px; line-height: 1.1; color: var(--mk-sub-deep); } .mk-ab .mk-month span { font-size: 12px; color: var(--mk-muted); } .mk-ab .mk-special { display: block; width: 100%; margin-top: 10px; background: var(--mk-pub-soft); border: 1.5px dashed #e6bb8c; border-radius: 12px; padding: 12px 16px; } .mk-ab .mk-special strong { display: block; font-size: 15px; line-height: 1.3; color: var(--mk-pub-deep); } .mk-ab .mk-special span { display: block; font-size: 13px; color: var(--mk-pub-deep); } .mk-ab .mk-small { font-size: 13px; color: var(--mk-muted); margin-top: 8px; } /* ---------- Authorship criteria ---------- */ .mk-ab .mk-criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: mkc; margin: 0 0 10px; padding: 0; list-style: none; } .mk-ab .mk-criteria li { counter-increment: mkc; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px 16px; margin: 0; font-size: 14px; } .mk-ab .mk-criteria li::before { content: counter(mkc); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mk-sub); color: #fff; font-weight: 800; font-size: 14px; margin-bottom: 8px; } .mk-ab .mk-callout { font-size: 14px; padding: 10px 14px; border-radius: 10px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } /* ---------- Policy list ---------- */ .mk-ab .mk-policy { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .mk-ab .mk-policy li { position: relative; margin: 0; padding: 10px 14px 10px 40px; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 10px; font-size: 14px; } .mk-ab .mk-policy li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 10px; height: 10px; border-radius: 3px; background: var(--mk-sub); } .mk-ab .mk-policy strong { color: var(--mk-ink); } .mk-ab .mk-stat-inline { display: inline-block; font-weight: 800; color: var(--mk-pub-deep); background: var(--mk-pub-soft); border-radius: 6px; padding: 0 6px; } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .mk-ab .mk-vm, .mk-ab .mk-pubrow, .mk-ab .mk-types, .mk-ab .mk-criteria { grid-template-columns: 1fr; } .mk-ab .mk-sched { grid-template-columns: repeat(2, 1fr); } .mk-ab .mk-vision p { font-size: 17px; } .mk-ab .mk-month strong { font-size: 17px; } } /* ========================================================== Media Konservasi – Editorial Team page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-et. ========================================================== */ .mk-et { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; color: var(--mk-ink); font-size: 15px; line-height: 1.5; } .mk-et *, .mk-et *::before, .mk-et *::after { box-sizing: border-box; } .mk-et p { margin: 0; } /* ---------- Stats ---------- */ .mk-et .mk-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; background: var(--mk-sub-deep); color: #fff; border-radius: 16px; padding: 18px 22px; margin-bottom: 8px; } .mk-et .mk-stats > div { display: flex; align-items: baseline; gap: 8px; } .mk-et .mk-stats strong { font-size: 30px; line-height: 1; color: #fff; } .mk-et .mk-stats span { font-size: 14px; color: #bfe0d6; } .mk-et .mk-stats .mk-cl { flex: 1; min-width: 220px; } .mk-et .mk-stats .mk-cl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .mk-et .mk-stats img.mk-flag { width: 28px; height: 21px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); } /* ---------- Section heading ---------- */ .mk-et .mk-h { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-et .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } /* ---------- Person card ---------- */ .mk-et .mk-person, .mk-et .mk-staff { display: flex; gap: 14px; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 14px; padding: 14px; align-items: flex-start; } .mk-et .mk-av { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--mk-sub-soft); border: 2px solid var(--mk-sub-soft); display: block; font-size: 0; /* hide alt text if a photo fails to load */ color: transparent; overflow: hidden; } .mk-et .mk-av.is-init { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: var(--mk-sub-deep); } .mk-et .mk-info { flex: 1; min-width: 0; } .mk-et .mk-info h5 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; color: var(--mk-ink); } .mk-et .mk-info p { font-size: 13px; color: var(--mk-muted); } .mk-et .mk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .mk-et .mk-meta .mk-ids { margin-top: 0; } .mk-et img.mk-flag { display: block; width: 24px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.12); font-size: 0; color: transparent; overflow: hidden; background: #eef0ef; } /* ---------- Profile links ---------- */ .mk-et .mk-ids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mk-et a.mk-id { font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 6px; text-decoration: none; border: 1.5px solid; background: #fff; } .mk-et a.mk-id:hover { color: #fff; } .mk-et a.mk-id.is-orcid { color: #5b7f1a; border-color: #a6ce39; } .mk-et a.mk-id.is-orcid:hover { background: #7aa01f; border-color: #7aa01f; } .mk-et a.mk-id.is-gs { color: #2f5db5; border-color: #9db8ea; } .mk-et a.mk-id.is-gs:hover { background: #3f6fd1; border-color: #3f6fd1; } .mk-et a.mk-id.is-scopus { color: #b34f12; border-color: #f0b48a; } .mk-et a.mk-id.is-scopus:hover { background: #d9661f; border-color: #d9661f; } /* ---------- Editor-in-Chief ---------- */ .mk-et .mk-eic { background: var(--mk-sub-soft); border-color: #b9d9cf; padding: 20px; gap: 20px; align-items: center; } .mk-et .mk-eic .mk-av { flex-basis: 110px; width: 110px; height: 110px; border: 3px solid #fff; } .mk-et .mk-eic .mk-info h5 { font-size: 21px; color: var(--mk-sub-deep); } .mk-et .mk-eic .mk-info p { font-size: 14px; } /* ---------- Grids ---------- */ .mk-et .mk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mk-et .mk-office { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mk-et .mk-staff .mk-av { flex-basis: 52px; width: 52px; height: 52px; } .mk-et .mk-staff .mk-av.is-init { font-size: 17px; } .mk-et .mk-role { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-sub); margin-bottom: 2px; } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .mk-et .mk-grid, .mk-et .mk-office { grid-template-columns: 1fr; } .mk-et .mk-eic { flex-direction: column; text-align: center; } .mk-et .mk-eic .mk-meta { justify-content: center; } } /* ========================================================== Media Konservasi – Publication Ethics page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-pe. Icons are embedded below as SVG data URIs (Lucide icon set, ISC licence), so the page HTML only needs class names. ========================================================== */ .mk-pe { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.6; } .mk-pe *, .mk-pe *::before, .mk-pe *::after { box-sizing: border-box; } .mk-pe p { margin: 0 0 10px; } .mk-pe p:last-child { margin-bottom: 0; } .mk-pe a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-pe .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-pe .mk-i-shield { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-users { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22/%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-eyeoff { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.88 9.88a3 3 0 1 0 4.24 4.24%22/%3E%3Cpath d=%22M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68%22/%3E%3Cpath d=%22M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61%22/%3E%3Cpath d=%22M2 2l20 20%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-gavel { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m14 13-7.5 7.5a2.12 2.12 0 0 1-3-3L11 10%22/%3E%3Cpath d=%22m16 16 6-6%22/%3E%3Cpath d=%22m8 8 6-6%22/%3E%3Cpath d=%22m9 7 8 8%22/%3E%3Cpath d=%22m21 11-8-8%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-scale { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z%22/%3E%3Cpath d=%22m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z%22/%3E%3Cpath d=%22M7 21h10%22/%3E%3Cpath d=%22M12 3v18%22/%3E%3Cpath d=%22M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-lock { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-pen { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20h9%22/%3E%3Cpath d=%22M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-clipboard { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%228%22 height=%224%22 x=%228%22 y=%222%22 rx=%221%22/%3E%3Cpath d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22/%3E%3Cpath d=%22m9 14 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-alert { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-message { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-x { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-arrow { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-filex { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22/%3E%3Cpath d=%22m14.5 12.5-5 5%22/%3E%3Cpath d=%22m9.5 12.5 5 5%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-fileminus { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22/%3E%3Cpath d=%22M9 15h6%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-trash { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6%22/%3E%3Cpath d=%22M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-refresh { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3Cpath d=%22M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16%22/%3E%3Cpath d=%22M8 16H3v5%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-bell { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9%22/%3E%3Cpath d=%22M10.3 21a1.94 1.94 0 0 0 3.4 0%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-copy { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-ban { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m4.9 4.9 14.2 14.2%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-mail { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%2216%22 x=%222%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-info { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E"); } .mk-pe .mk-i-plus { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3C/svg%3E"); } /* ---------- Hero ---------- */ .mk-pe .mk-hero { display: flex; gap: 18px; align-items: flex-start; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 24px; } .mk-pe .mk-hero > .mk-ic { width: 44px; height: 44px; color: #9fd3c2; } .mk-pe .mk-hero p { color: #e3f1ec; } .mk-pe .mk-hero strong { color: #fff; } .mk-pe .mk-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); text-decoration: none; } .mk-pe .mk-badge:hover { background: rgba(255,255,255,.2); color: #fff; } .mk-pe .mk-badge .mk-ic { width: 15px; height: 15px; vertical-align: 0; } /* ---------- Jump nav ---------- */ .mk-pe .mk-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; } .mk-pe .mk-nav a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--mk-line); background: #fff; color: var(--mk-sub-deep); text-decoration: none; } .mk-pe .mk-nav a:hover { border-color: var(--mk-sub); background: var(--mk-sub-soft); } .mk-pe .mk-nav .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: var(--mk-sub); } /* ---------- Sections ---------- */ .mk-pe .mk-sec { display: flex; gap: 16px; margin-top: 26px; scroll-margin-top: 20px; } .mk-pe .mk-sec-icon { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub); display: flex; align-items: center; justify-content: center; } .mk-pe .mk-sec-icon .mk-ic { width: 22px; height: 22px; } .mk-pe .mk-sec-icon.is-warn { background: var(--mk-pub-soft); color: var(--mk-pub); } .mk-pe .mk-sec-body { flex: 1; min-width: 0; padding-bottom: 22px; border-bottom: 1.5px solid var(--mk-line); } .mk-pe .mk-sec:last-of-type .mk-sec-body { border-bottom: 0; } .mk-pe .mk-sec h4 { margin: 8px 0 8px; font-size: 19px; line-height: 1.3; color: var(--mk-ink); } .mk-pe .mk-sub-h { margin: 16px 0 8px; font-size: 15px; font-weight: 700; color: var(--mk-sub-deep); } /* ---------- Numbered cards ---------- */ .mk-pe .mk-num-grid { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: mkn; } .mk-pe .mk-num-grid.is-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .mk-pe .mk-num-grid li { counter-increment: mkn; margin: 0; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; } .mk-pe .mk-num-grid li::before { content: counter(mkn); flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--mk-sub); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; } /* ---------- Authorship change timeline ---------- */ .mk-pe .mk-loa { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 10px 0; } .mk-pe .mk-loa > div { border-radius: 12px; padding: 14px 16px; font-size: 14px; } .mk-pe .mk-loa .is-before { background: var(--mk-sub-soft); } .mk-pe .mk-loa .is-after { background: var(--mk-pub-soft); } .mk-pe .mk-loa b { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; } .mk-pe .mk-loa .is-before b { color: var(--mk-sub-deep); } .mk-pe .mk-loa .is-after b { color: var(--mk-pub-deep); } .mk-pe .mk-loa .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-pe .mk-loa ul { margin: 6px 0 0; padding-left: 18px; } .mk-pe .mk-loa li { margin-bottom: 4px; } /* ---------- Fact chips ---------- */ .mk-pe .mk-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; } .mk-pe .mk-fact { line-height: 1.3; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-pe .mk-fact .mk-ic { width: 15px; height: 15px; vertical-align: 0; } /* Factors never considered */ .mk-pe .mk-never { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; } .mk-pe .mk-never > span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1.5px dashed var(--mk-line); color: var(--mk-muted); } .mk-pe .mk-never .mk-ic { width: 13px; height: 13px; vertical-align: 0; color: var(--mk-rej); } /* ---------- Checklist ---------- */ .mk-pe .mk-check { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; } .mk-pe .mk-check li { display: flex; gap: 10px; margin: 0; font-size: 14px; } .mk-pe .mk-check .mk-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--mk-sub); } /* ---------- Alert box ---------- */ .mk-pe .mk-alert { display: flex; gap: 12px; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--mk-rej-soft); border: 1.5px solid #e2b4b4; color: #6b2323; } .mk-pe .mk-alert .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-rej); } .mk-pe .mk-alert strong { color: var(--mk-rej); } /* ---------- Link buttons ---------- */ .mk-pe .mk-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mk-pe .mk-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 8px 14px; border-radius: 999px; text-decoration: none; background: var(--mk-sub); color: #fff; } .mk-pe .mk-link:hover { background: var(--mk-sub-deep); color: #fff; } .mk-pe .mk-link.is-ghost { background: #fff; color: var(--mk-sub-deep); border: 1.5px solid #9cc9bb; } .mk-pe .mk-link.is-ghost:hover { background: var(--mk-sub-soft); } .mk-pe .mk-link .mk-ic { width: 15px; height: 15px; vertical-align: 0; } /* Let grid and flex children shrink inside narrow theme columns */ .mk-pe .mk-num-grid > *, .mk-pe .mk-loa > *, .mk-pe .mk-check li > .mk-t { min-width: 0; } .mk-pe .mk-t { display: inline; } .mk-pe .mk-check li > .mk-t { display: block; flex: 1; } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .mk-pe .mk-hero { flex-direction: column; padding: 20px; } .mk-pe .mk-sec { gap: 12px; } .mk-pe .mk-sec-icon { flex-basis: 36px; height: 36px; border-radius: 10px; } .mk-pe .mk-sec-icon .mk-ic { width: 18px; height: 18px; } .mk-pe .mk-sec h4 { margin-top: 4px; font-size: 17px; } } /* ========================================================== Retraction, Withdrawal & Correction page – extra components (uses the same .mk-pe wrapper, icons and tokens as above) ========================================================== */ /* Overview cards */ .mk-pe .mk-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 16px 0 6px; } .mk-pe a.mk-ov { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--mk-ink); font-weight: 400; } .mk-pe a.mk-ov > .mk-t { display: block; flex: 1; min-width: 0; } .mk-pe .mk-overview > *, .mk-pe .mk-cards > *, .mk-pe .mk-split > * { min-width: 0; } .mk-pe .mk-split > div > .mk-t { display: block; flex: 1; min-width: 0; } .mk-pe .mk-hflow > div { min-width: 0; } .mk-pe a.mk-ov.is-wide { grid-column: 1 / -1; } .mk-pe a.mk-ov:hover { border-color: var(--mk-sub); background: var(--mk-sub-soft); } .mk-pe a.mk-ov > .mk-ic { width: 22px; height: 22px; margin-top: 1px; color: var(--mk-sub); } .mk-pe a.mk-ov strong { display: block; font-size: 15px; color: var(--mk-sub-deep); } .mk-pe a.mk-ov small { display: block; font-size: 13px; line-height: 1.4; color: var(--mk-muted); } /* Grounds / type cards */ .mk-pe .mk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 12px; } .mk-pe .mk-cards.is-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .mk-pe .mk-card { background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; } .mk-pe .mk-card > .mk-ic { width: 22px; height: 22px; color: var(--mk-sub); margin-bottom: 6px; display: block; } .mk-pe .mk-card h5 { margin: 0 0 4px; font-size: 15px; color: var(--mk-ink); } .mk-pe .mk-card p { color: var(--mk-muted); } .mk-pe .mk-card .mk-by { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-pe .mk-card .mk-by.is-pub { background: var(--mk-pub-soft); color: var(--mk-pub-deep); } /* Vertical stepper */ .mk-pe .mk-stepper { list-style: none; margin: 10px 0 14px; padding: 0; counter-reset: mks; position: relative; } .mk-pe .mk-stepper::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--mk-line); } .mk-pe .mk-stepper li { counter-increment: mks; position: relative; margin: 0 0 12px; padding-left: 42px; font-size: 14px; } .mk-pe .mk-stepper li:last-child { margin-bottom: 0; } .mk-pe .mk-stepper li::before { content: counter(mks); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--mk-sub); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; } .mk-pe .mk-stepper strong { display: block; color: var(--mk-ink); } .mk-pe .mk-stepper span { color: var(--mk-muted); } /* Neutral info note */ .mk-pe .mk-note { display: flex; gap: 12px; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); margin-top: 12px; } .mk-pe .mk-note > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-sub); } .mk-pe .mk-alert + .mk-note, .mk-pe .mk-note + .mk-alert { margin-top: 10px; } /* Kept vs replaced (removal) */ .mk-pe .mk-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; } .mk-pe .mk-split > div { display: flex; gap: 10px; border-radius: 12px; padding: 12px 14px; font-size: 14px; } .mk-pe .mk-split .is-keep { background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-pe .mk-split .is-gone { background: var(--mk-rej-soft); color: #6b2323; } .mk-pe .mk-split .mk-ic { width: 18px; height: 18px; margin-top: 2px; } .mk-pe .mk-split .is-gone .mk-ic { color: var(--mk-rej); } /* Horizontal flow (replacement) */ .mk-pe .mk-hflow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 10px 0; } .mk-pe .mk-hflow > div { flex: 1 1 140px; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 12px; font-size: 13px; text-align: center; color: var(--mk-muted); } .mk-pe .mk-hflow > div .mk-ic { width: 22px; height: 22px; display: block; margin: 0 auto 6px; color: var(--mk-sub); } .mk-pe .mk-hflow > div strong { display: block; font-size: 14px; color: var(--mk-ink); } .mk-pe .mk-hflow > .mk-ic { align-self: center; width: 18px; height: 18px; color: var(--mk-muted); } @media (max-width: 640px) { .mk-pe .mk-hflow { flex-direction: column; } .mk-pe .mk-hflow > .mk-ic { transform: rotate(90deg); } } .mk-pe .mk-check + .mk-alert { margin-top: 12px; } .mk-pe .mk-stepper + .mk-cards { margin-top: 14px; } .mk-pe .mk-alert a { color: var(--mk-rej); } /* ========================================================== Media Konservasi – Indexing page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-ix. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-ix { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; color: var(--mk-ink); font-size: 15px; line-height: 1.55; } .mk-ix *, .mk-ix *::before, .mk-ix *::after { box-sizing: border-box; } .mk-ix p { margin: 0; } /* ---------- Icon engine ---------- */ .mk-ix .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-ix .mk-i-badge { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-award { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%226%22/%3E%3Cpath d=%22M15.477 12.89 17 22l-5-3-5 3 1.523-9.11%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-unlock { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 9.9-1%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-leaf { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z%22/%3E%3Cpath d=%22M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-library { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 6 4 14%22/%3E%3Cpath d=%22M12 6v14%22/%3E%3Cpath d=%22M8 8v12%22/%3E%3Cpath d=%22M4 4v16%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-cap { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 10v6M2 10l10-5 10 5-10 5z%22/%3E%3Cpath d=%22M6 12v5c3 3 9 3 12 0v-5%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-landmark { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 22h18%22/%3E%3Cpath d=%22M6 18v-7%22/%3E%3Cpath d=%22M10 18v-7%22/%3E%3Cpath d=%22M14 18v-7%22/%3E%3Cpath d=%22M18 18v-7%22/%3E%3Cpath d=%22M12 2 20 7H4z%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-external { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22/%3E%3Cpath d=%22M10 14 21 3%22/%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-globe { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-flag { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z%22/%3E%3Cpath d=%22M4 22v-7%22/%3E%3C/svg%3E"); } .mk-ix .mk-i-barcode { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 5v14%22/%3E%3Cpath d=%22M8 5v14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3Cpath d=%22M17 5v14%22/%3E%3Cpath d=%22M21 5v14%22/%3E%3C/svg%3E"); } /* ---------- Hero ---------- */ .mk-ix .mk-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 22px 24px; } .mk-ix .mk-hero > .mk-ic { width: 44px; height: 44px; color: #9fd3c2; } .mk-ix .mk-hero-text { flex: 1 1 260px; min-width: 0; } .mk-ix .mk-hero-text strong { display: block; font-size: 20px; line-height: 1.3; color: #fff; } .mk-ix .mk-hero-text .mk-sm { display: block; margin-top: 4px; font-size: 14px; color: #cfe7df; } .mk-ix .mk-issn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .mk-ix .mk-issn .mk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; } .mk-ix .mk-issn .mk-ic { width: 14px; height: 14px; vertical-align: 0; color: #9fd3c2; } .mk-ix .mk-count { flex: 0 0 auto; text-align: center; background: rgba(255,255,255,.1); border-radius: 14px; padding: 10px 18px; } .mk-ix .mk-count strong { display: block; font-size: 34px; line-height: 1; color: #fff; } .mk-ix .mk-count .mk-sm { font-size: 12px; color: #cfe7df; } /* ---------- Section heading ---------- */ .mk-ix .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-ix .mk-h .mk-ic { width: 16px; height: 16px; vertical-align: 0; color: var(--mk-sub); } .mk-ix .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } /* ---------- Index cards ---------- */ .mk-ix .mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .mk-ix .mk-grid > * { min-width: 0; } .mk-ix .mk-grid.is-fill { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .mk-ix a.mk-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 14px; padding: 16px; text-decoration: none; color: var(--mk-ink); font-weight: 400; transition: border-color .15s, box-shadow .15s, transform .15s; } .mk-ix a.mk-card:hover { border-color: var(--mk-sub); box-shadow: 0 6px 18px rgba(18, 74, 61, .12); transform: translateY(-2px); color: var(--mk-ink); } .mk-ix .mk-card-top { display: flex; align-items: center; gap: 12px; } .mk-ix .mk-badge { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub); display: flex; align-items: center; justify-content: center; } .mk-ix .mk-badge .mk-ic { width: 22px; height: 22px; } .mk-ix .mk-name { flex: 1; min-width: 0; } .mk-ix .mk-name strong { display: block; font-size: 17px; line-height: 1.25; color: var(--mk-ink); } .mk-ix .mk-name .mk-sm { display: block; font-size: 12px; color: var(--mk-muted); } .mk-ix .mk-desc { font-size: 14px; color: var(--mk-muted); flex: 1; } .mk-ix .mk-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mk-sub); } .mk-ix .mk-go .mk-ic { width: 14px; height: 14px; vertical-align: 0; } /* Featured (Scopus) */ .mk-ix a.mk-card.is-featured { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 18px; background: var(--mk-pub-soft); border-color: #efd0ae; } .mk-ix a.mk-card.is-featured:hover { border-color: var(--mk-pub); box-shadow: 0 6px 18px rgba(122, 64, 15, .12); } .mk-ix .is-featured .mk-card-top { flex: 1 1 220px; } .mk-ix .is-featured .mk-badge { flex-basis: 52px; height: 52px; background: #fff; color: var(--mk-pub); } .mk-ix .is-featured .mk-badge .mk-ic { width: 26px; height: 26px; } .mk-ix .is-featured .mk-name strong { font-size: 20px; color: var(--mk-pub-deep); } .mk-ix .is-featured .mk-desc { flex: 2 1 260px; color: var(--mk-pub-deep); } .mk-ix .is-featured .mk-go { color: #fff; background: var(--mk-pub); padding: 8px 14px; border-radius: 999px; } .mk-ix .mk-foot { margin-top: 20px; font-size: 13px; color: var(--mk-muted); } /* ========================================================== Media Konservasi – Plagiarism Screening page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-pl. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-pl { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; } .mk-pl *, .mk-pl *::before, .mk-pl *::after { box-sizing: border-box; } .mk-pl p { margin: 0 0 10px; } .mk-pl p:last-child { margin-bottom: 0; } .mk-pl a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-pl .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-pl .mk-i-scan { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7V5a2 2 0 0 1 2-2h2%22/%3E%3Cpath d=%22M17 3h2a2 2 0 0 1 2 2v2%22/%3E%3Cpath d=%22M21 17v2a2 2 0 0 1-2 2h-2%22/%3E%3Cpath d=%22M7 21H5a2 2 0 0 1-2-2v-2%22/%3E%3Cpath d=%22M7 8h8%22/%3E%3Cpath d=%22M7 12h10%22/%3E%3Cpath d=%22M7 16h6%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-upload { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m17 8-5-5-5 5%22/%3E%3Cpath d=%22M12 3v12%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-search { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-users { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22/%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-book { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z%22/%3E%3Cpath d=%22M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-undo { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 14 4 9l5-5%22/%3E%3Cpath d=%22M4 9h10.5a5.5 5.5 0 0 1 0 11H11%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-quote { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z%22/%3E%3Cpath d=%22M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-spark { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-copy { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-alert { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); } .mk-pl .mk-i-arrow { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E"); } /* ---------- Hero ---------- */ .mk-pl .mk-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 22px 24px; } .mk-pl .mk-hero > .mk-ic { width: 44px; height: 44px; color: #9fd3c2; } .mk-pl .mk-hero-text { flex: 1 1 260px; min-width: 0; } .mk-pl .mk-hero-text p { color: #e3f1ec; } .mk-pl .mk-hero-text strong { color: #fff; } .mk-pl .mk-stat { flex: 0 0 auto; text-align: center; background: rgba(255,255,255,.1); border-radius: 14px; padding: 10px 18px; } .mk-pl .mk-stat strong { display: block; font-size: 34px; line-height: 1; color: #fff; } .mk-pl .mk-stat .mk-sm { font-size: 12px; color: #cfe7df; } .mk-pl .mk-tool { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; } .mk-pl .mk-tool .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: #9fd3c2; } /* ---------- Section heading ---------- */ .mk-pl .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-pl .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } /* ---------- Workflow ---------- */ .mk-pl .mk-flow { list-style: none; margin: 0; padding: 0; position: relative; } .mk-pl .mk-flow::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--mk-line); } .mk-pl .mk-flow li { position: relative; display: flex; gap: 14px; margin: 0 0 12px; padding: 0; } .mk-pl .mk-flow li:last-child { margin-bottom: 0; } .mk-pl .mk-node { position: relative; z-index: 1; flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--mk-line); color: var(--mk-muted); } .mk-pl .mk-node .mk-ic { width: 20px; height: 20px; } .mk-pl .mk-step { flex: 1; min-width: 0; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 11px 14px; font-size: 14px; color: var(--mk-muted); } .mk-pl .mk-step strong { display: block; font-size: 15px; color: var(--mk-ink); } /* Checkpoints stand out */ .mk-pl .mk-flow li.is-check .mk-node { background: var(--mk-sub); border-color: var(--mk-sub); color: #fff; } .mk-pl .mk-flow li.is-check .mk-step { background: var(--mk-sub-soft); border-color: #b9d9cf; color: var(--mk-sub-deep); } .mk-pl .mk-flow li.is-check .mk-step strong { color: var(--mk-sub-deep); } .mk-pl .mk-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--mk-sub); color: #fff; vertical-align: 2px; } .mk-pl .mk-ret { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--mk-rej); } .mk-pl .mk-ret .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-pl .mk-flow li.is-end .mk-node { background: var(--mk-pub); border-color: var(--mk-pub); color: #fff; } /* ---------- Tips ---------- */ .mk-pl .mk-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .mk-pl .mk-tips > * { min-width: 0; } .mk-pl .mk-tip { background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--mk-muted); } .mk-pl .mk-tip > .mk-ic { display: block; width: 22px; height: 22px; margin-bottom: 6px; color: var(--mk-sub); } .mk-pl .mk-tip strong { display: block; font-size: 15px; color: var(--mk-ink); margin-bottom: 2px; } /* ---------- Warning ---------- */ .mk-pl .mk-alert { display: flex; gap: 12px; margin-top: 14px; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--mk-rej-soft); border: 1.5px solid #e2b4b4; color: #6b2323; } .mk-pl .mk-alert > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-rej); } .mk-pl .mk-alert strong { color: var(--mk-rej); } .mk-pl .mk-alert a { color: var(--mk-rej); } /* ========================================================== Media Konservasi – Article Processing Charges page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-apc. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-apc { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; container-type: inline-size; } .mk-apc *, .mk-apc *::before, .mk-apc *::after { box-sizing: border-box; } .mk-apc p { margin: 0 0 10px; } .mk-apc p:last-child { margin-bottom: 0; } .mk-apc a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-apc .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-apc .mk-i-wallet { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1%22/%3E%3Cpath d=%22M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-calendar { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22M16 2v4%22/%3E%3Cpath d=%22M8 2v4%22/%3E%3Cpath d=%22M3 10h18%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-badgecheck { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-receipt { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z%22/%3E%3Cpath d=%22M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8%22/%3E%3Cpath d=%22M12 17.5v-11%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-message { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-card { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%2214%22 x=%222%22 y=%225%22 rx=%222%22/%3E%3Cpath d=%22M2 10h20%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-landmark { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 22h18%22/%3E%3Cpath d=%22M6 18v-7%22/%3E%3Cpath d=%22M10 18v-7%22/%3E%3Cpath d=%22M14 18v-7%22/%3E%3Cpath d=%22M18 18v-7%22/%3E%3Cpath d=%22M12 2 20 7H4z%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-globe { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-gift { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%228%22 width=%2218%22 height=%224%22 rx=%221%22/%3E%3Cpath d=%22M12 8v13%22/%3E%3Cpath d=%22M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7%22/%3E%3Cpath d=%22M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-heart { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-shield { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10%22/%3E%3Cpath d=%22M12 8v4%22/%3E%3Cpath d=%22M12 16h.01%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-info { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E"); } .mk-apc .mk-i-arrow { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E"); } /* ---------- Price cards ---------- */ .mk-apc .mk-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .mk-apc .mk-prices > * { min-width: 0; } .mk-apc .mk-price { border-radius: 18px; padding: 20px 22px; border: 1.5px solid var(--mk-line); background: #fff; } .mk-apc .mk-price.is-current { background: var(--mk-sub-deep); border-color: var(--mk-sub-deep); color: #fff; } .mk-apc .mk-plabel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-muted); } .mk-apc .mk-plabel .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-apc .is-current .mk-plabel { color: #9fd3c2; } .mk-apc .mk-amount { display: block; margin: 8px 0 6px; font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; color: var(--mk-muted); } .mk-apc .mk-amount .mk-cur { font-size: 16px; font-weight: 700; margin-right: 4px; vertical-align: 10px; } .mk-apc .is-current .mk-amount { color: #fff; } .mk-apc .mk-when { display: block; font-size: 14px; color: var(--mk-muted); } .mk-apc .is-current .mk-when { color: #d6ebe4; } .mk-apc .mk-assure { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); font-size: 14px; } .mk-apc .mk-assure .mk-ic { width: 22px; height: 22px; color: var(--mk-sub); } /* ---------- Section heading ---------- */ .mk-apc .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-apc .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } /* ---------- Payment steps ---------- */ .mk-apc .mk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; counter-reset: mks; } .mk-apc .mk-steps > li { counter-increment: mks; position: relative; margin: 0; min-width: 0; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--mk-muted); } .mk-apc .mk-steps > li::after { content: counter(mks); position: absolute; top: 12px; right: 14px; font-size: 13px; font-weight: 800; color: var(--mk-line); } .mk-apc .mk-steps > li > .mk-ic { display: block; width: 22px; height: 22px; margin-bottom: 8px; color: var(--mk-sub); } .mk-apc .mk-steps strong { display: block; font-size: 15px; color: var(--mk-ink); margin-bottom: 2px; } /* ---------- Payment methods ---------- */ .mk-apc .mk-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; } .mk-apc .mk-methods > * { min-width: 0; } .mk-apc .mk-method { display: flex; gap: 12px; border-radius: 12px; padding: 14px; background: #fff; border: 1.5px solid var(--mk-line); font-size: 14px; color: var(--mk-muted); } .mk-apc .mk-mic { flex: 0 0 40px; height: 40px; border-radius: 10px; background: var(--mk-sub-soft); color: var(--mk-sub); display: flex; align-items: center; justify-content: center; } .mk-apc .mk-mbody { flex: 1; min-width: 0; } .mk-apc .mk-method strong { display: block; font-size: 15px; color: var(--mk-ink); } .mk-apc .mk-fee { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); } /* ---------- Discount & waiver ---------- */ .mk-apc .mk-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .mk-apc .mk-perks > * { min-width: 0; } .mk-apc .mk-perk { border-radius: 12px; padding: 16px; background: var(--mk-pub-soft); border: 1.5px solid #efd0ae; font-size: 14px; color: var(--mk-pub-deep); } .mk-apc .mk-perk > .mk-ic { display: block; width: 24px; height: 24px; margin-bottom: 8px; color: var(--mk-pub); } .mk-apc .mk-perk strong { display: block; font-size: 16px; margin-bottom: 2px; } /* ---------- Alert ---------- */ .mk-apc .mk-alert { display: flex; gap: 12px; margin-top: 14px; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--mk-rej-soft); border: 1.5px solid #e2b4b4; color: #6b2323; } .mk-apc .mk-alert > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-rej); } .mk-apc .mk-alert strong { color: var(--mk-rej); } /* ---------- Link buttons ---------- */ .mk-apc .mk-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .mk-apc a.mk-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; background: var(--mk-sub); color: #fff; } .mk-apc a.mk-link:hover { background: var(--mk-sub-deep); color: #fff; } .mk-apc a.mk-link.is-ghost { background: #fff; color: var(--mk-sub-deep); border: 1.5px solid #9cc9bb; } .mk-apc a.mk-link.is-ghost:hover { background: var(--mk-sub-soft); } .mk-apc a.mk-link .mk-ic { width: 15px; height: 15px; vertical-align: 0; } /* Text blocks beside an icon */ .mk-apc .mk-t { flex: 1; min-width: 0; } /* Four steps in one row when the content column is wide enough */ @container (min-width: 520px) { .mk-apc .mk-steps { grid-template-columns: repeat(4, 1fr); } } /* ========================================================== Media Konservasi – APC Discount & Waivers page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-dw. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-dw { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; container-type: inline-size; } .mk-dw *, .mk-dw *::before, .mk-dw *::after { box-sizing: border-box; } .mk-dw p { margin: 0 0 10px; } .mk-dw p:last-child { margin-bottom: 0; } .mk-dw a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-dw .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-dw .mk-i-ticket { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z%22/%3E%3Cpath d=%22M13 5v2%22/%3E%3Cpath d=%22M13 17v2%22/%3E%3Cpath d=%22M13 11v2%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-award { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%226%22/%3E%3Cpath d=%22M15.477 12.89 17 22l-5-3-5 3 1.523-9.11%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-clipboard { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%228%22 height=%224%22 x=%228%22 y=%222%22 rx=%221%22/%3E%3Cpath d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22/%3E%3Cpath d=%22m9 14 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-one { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%223%22 rx=%222%22/%3E%3Cpath d=%22M10 9l2-2v10%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-layers { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 2 10 5-10 5L2 7z%22/%3E%3Cpath d=%22m2 17 10 5 10-5%22/%3E%3Cpath d=%22m2 12 10 5 10-5%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-calendar { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22M16 2v4%22/%3E%3Cpath d=%22M8 2v4%22/%3E%3Cpath d=%22M3 10h18%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-clock { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 6v6l4 2%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-share { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2218%22 cy=%225%22 r=%223%22/%3E%3Ccircle cx=%226%22 cy=%2212%22 r=%223%22/%3E%3Ccircle cx=%2218%22 cy=%2219%22 r=%223%22/%3E%3Cpath d=%22m8.59 13.51 6.83 3.98%22/%3E%3Cpath d=%22m15.41 6.51-6.82 3.98%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-message { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-globe { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-heart { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-mail { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%2216%22 x=%222%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-dw .mk-i-arrow { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E"); } /* ---------- Section heading ---------- */ .mk-dw .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-dw .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } /* ---------- Intro ---------- */ .mk-dw .mk-lead { color: var(--mk-muted); } /* ---------- Voucher cards ---------- */ .mk-dw .mk-vouchers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .mk-dw .mk-vouchers > * { min-width: 0; } .mk-dw .mk-voucher { position: relative; border-radius: 16px; padding: 18px 18px 16px; background: #fff; border: 1.5px dashed #9cc9bb; font-size: 14px; color: var(--mk-muted); } .mk-dw .mk-vhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .mk-dw .mk-vicon { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub); display: flex; align-items: center; justify-content: center; } .mk-dw .mk-vicon .mk-ic { width: 22px; height: 22px; } .mk-dw .mk-vtitle { flex: 1; min-width: 0; } .mk-dw .mk-vtitle strong { display: block; font-size: 16px; line-height: 1.3; color: var(--mk-ink); } .mk-dw .mk-vtitle .mk-sm { display: block; font-size: 12px; color: var(--mk-muted); } .mk-dw .mk-off { flex: 0 0 auto; text-align: center; font-size: 22px; font-weight: 800; line-height: 1; color: var(--mk-sub); } .mk-dw .mk-off .mk-sm { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-muted); } /* Combine highlight */ .mk-dw .mk-combo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 12px 0; padding: 14px 16px; border-radius: 14px; background: var(--mk-sub-deep); color: #fff; font-size: 14px; } .mk-dw .mk-combo .mk-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px dashed rgba(255,255,255,.45); } .mk-dw .mk-combo .mk-pill .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: #9fd3c2; } .mk-dw .mk-combo .mk-op { font-size: 18px; font-weight: 800; color: #9fd3c2; } .mk-dw .mk-combo .mk-res { font-size: 18px; font-weight: 800; } /* Rules */ .mk-dw .mk-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; } .mk-dw .mk-rules > li { display: flex; gap: 10px; margin: 0; min-width: 0; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1.5px solid var(--mk-line); font-size: 14px; color: var(--mk-muted); } .mk-dw .mk-rules > li > .mk-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--mk-sub); } .mk-dw .mk-rules strong { color: var(--mk-ink); } .mk-dw .mk-howto { display: flex; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); font-size: 14px; } .mk-dw .mk-howto > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-sub); } /* ---------- Waiver tiers ---------- */ .mk-dw .mk-tier { border-radius: 16px; border: 1.5px solid var(--mk-line); background: #fff; overflow: hidden; margin-bottom: 12px; } .mk-dw .mk-tier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; } .mk-dw .mk-tier.is-full .mk-tier-head { background: var(--mk-sub-deep); color: #fff; } .mk-dw .mk-tier.is-half .mk-tier-head { background: var(--mk-pub-soft); color: var(--mk-pub-deep); } .mk-dw .mk-tier-amt { font-size: 30px; font-weight: 800; line-height: 1; } .mk-dw .mk-tier-amt .mk-sm { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-top: 3px; } .mk-dw .mk-tier-txt { flex: 1 1 200px; min-width: 0; font-size: 14px; } .mk-dw .mk-tier-txt strong { display: block; font-size: 16px; } .mk-dw .mk-tier.is-full .mk-tier-txt .mk-sm { color: #cfe7df; } .mk-dw .mk-count { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); } .mk-dw .mk-tier.is-half .mk-count { background: #fff; } .mk-dw .mk-countries { list-style: none; margin: 0; padding: 14px 18px 16px; columns: 3 150px; column-gap: 16px; font-size: 14px; } .mk-dw .mk-countries li { break-inside: avoid; margin: 0; padding: 3px 0 3px 14px; position: relative; color: var(--mk-ink); } .mk-dw .mk-countries li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-sub); } .mk-dw .is-half .mk-countries li::before { background: var(--mk-pub); } /* ---------- Alert ---------- */ .mk-dw .mk-alert { display: flex; gap: 12px; margin-top: 14px; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--mk-rej-soft); border: 1.5px solid #e2b4b4; color: #6b2323; } .mk-dw .mk-alert > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-rej); } .mk-dw .mk-alert strong { color: var(--mk-rej); } /* ---------- Link buttons ---------- */ .mk-dw .mk-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .mk-dw a.mk-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; background: var(--mk-sub); color: #fff; } .mk-dw a.mk-link:hover { background: var(--mk-sub-deep); color: #fff; } .mk-dw a.mk-link.is-ghost { background: #fff; color: var(--mk-sub-deep); border: 1.5px solid #9cc9bb; } .mk-dw a.mk-link.is-ghost:hover { background: var(--mk-sub-soft); } .mk-dw a.mk-link .mk-ic { width: 15px; height: 15px; vertical-align: 0; } /* Text blocks beside an icon */ .mk-dw .mk-t { flex: 1; min-width: 0; } /* Text blocks beside an icon */ .mk-dw .mk-t { flex: 1; min-width: 0; } .mk-dw .mk-tier-txt .mk-sm { display: block; font-size: 13px; } .mk-dw .mk-combo .mk-combo-note { flex-basis: 100%; text-align: center; font-size: 13px; color: #cfe7df; } /* ---------- How to redeem ---------- */ .mk-dw .mk-redeem { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-dw .mk-redeem-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; } .mk-dw .mk-redeem-title .mk-ic { width: 16px; height: 16px; vertical-align: 0; color: var(--mk-sub); } .mk-dw .mk-redeem-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; counter-reset: mkr; } .mk-dw .mk-redeem-steps > li { counter-increment: mkr; position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; padding: 12px; border-radius: 10px; background: #fff; font-size: 14px; color: var(--mk-muted); } .mk-dw .mk-redeem-steps > li::after { content: counter(mkr); position: absolute; top: 10px; right: 12px; font-size: 13px; font-weight: 800; color: var(--mk-line); } .mk-dw .mk-redeem-steps > li > .mk-ic { width: 20px; height: 20px; color: var(--mk-sub); } .mk-dw .mk-redeem-steps strong { display: block; color: var(--mk-ink); } /* ========================================================== Media Konservasi – Payment Channel page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-pc. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-pc { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; container-type: inline-size; } .mk-pc *, .mk-pc *::before, .mk-pc *::after { box-sizing: border-box; } .mk-pc p { margin: 0 0 10px; } .mk-pc p:last-child { margin-bottom: 0; } .mk-pc a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-pc .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-pc .mk-i-shield { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10%22/%3E%3Cpath d=%22M12 8v4%22/%3E%3Cpath d=%22M12 16h.01%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-landmark { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 22h18%22/%3E%3Cpath d=%22M6 18v-7%22/%3E%3Cpath d=%22M10 18v-7%22/%3E%3Cpath d=%22M14 18v-7%22/%3E%3Cpath d=%22M18 18v-7%22/%3E%3Cpath d=%22M12 2 20 7H4z%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-globe { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-user { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%225%22/%3E%3Cpath d=%22M20 21a8 8 0 0 0-16 0%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-hash { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 9h16%22/%3E%3Cpath d=%22M4 15h16%22/%3E%3Cpath d=%22M10 3 8 21%22/%3E%3Cpath d=%22m16 3-2 18%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-route { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%226%22 cy=%2219%22 r=%223%22/%3E%3Cpath d=%22M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15%22/%3E%3Ccircle cx=%2218%22 cy=%225%22 r=%223%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-link { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-mail { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%2216%22 x=%222%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-receipt { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z%22/%3E%3Cpath d=%22M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8%22/%3E%3Cpath d=%22M12 17.5v-11%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-pin { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-pause { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2214%22 y=%224%22 width=%224%22 height=%2216%22 rx=%221%22/%3E%3Crect x=%226%22 y=%224%22 width=%224%22 height=%2216%22 rx=%221%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-info { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E"); } .mk-pc .mk-i-external { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22/%3E%3Cpath d=%22M10 14 21 3%22/%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3%22/%3E%3C/svg%3E"); } /* ---------- Section heading ---------- */ .mk-pc .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-pc .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-pc .mk-t { flex: 1; min-width: 0; } .mk-pc .mk-lead { color: var(--mk-muted); } /* ---------- Warning ---------- */ .mk-pc .mk-warn { display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--mk-rej-soft); border: 1.5px solid #e2b4b4; color: #6b2323; font-size: 14px; margin-bottom: 6px; } .mk-pc .mk-warn > .mk-ic { width: 28px; height: 28px; color: var(--mk-rej); } .mk-pc .mk-warn strong { display: block; font-size: 16px; color: var(--mk-rej); margin-bottom: 2px; } /* ---------- Method cards ---------- */ .mk-pc .mk-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .mk-pc .mk-methods > * { min-width: 0; } .mk-pc .mk-method { border-radius: 16px; border: 1.5px solid var(--mk-line); background: #fff; overflow: hidden; display: flex; flex-direction: column; } .mk-pc .mk-mhead { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--mk-sub-deep); color: #fff; } .mk-pc .mk-method.is-usd .mk-mhead { background: var(--mk-pub); } .mk-pc .mk-micon { flex: 0 0 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; } .mk-pc .mk-micon .mk-ic { width: 22px; height: 22px; color: #fff; } .mk-pc .mk-mtitle { flex: 1; min-width: 0; } .mk-pc .mk-mtitle strong { display: block; font-size: 17px; line-height: 1.25; color: #fff; } .mk-pc .mk-mtitle .mk-sm { display: block; font-size: 13px; color: rgba(255,255,255,.8); } .mk-pc .mk-cur { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--mk-sub-deep); } .mk-pc .is-usd .mk-cur { color: var(--mk-pub-deep); } /* Detail rows */ .mk-pc .mk-details { list-style: none; margin: 0; padding: 6px 18px; } .mk-pc .mk-details > li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 11px 0; border-bottom: 1px solid #e3ece8; } .mk-pc .mk-details > li:last-child { border-bottom: 0; } .mk-pc .mk-details > li > .mk-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--mk-muted); } .mk-pc .mk-details .mk-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-muted); } .mk-pc .mk-details .mk-v { display: block; font-size: 16px; font-weight: 600; color: var(--mk-ink); word-break: break-word; } .mk-pc .mk-mono { font-family: Consolas, "Courier New", monospace; font-size: 17px; letter-spacing: .04em; background: var(--mk-sub-soft); padding: 1px 8px; border-radius: 6px; user-select: all; } .mk-pc .is-usd .mk-mono { background: var(--mk-pub-soft); } /* Steps */ .mk-pc .mk-steps-wrap { padding: 4px 18px 18px; } .mk-pc .mk-steps-label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-pub-deep); margin: 4px 0 8px; } .mk-pc .mk-steps { list-style: none; margin: 0; padding: 0; counter-reset: mks; } .mk-pc .mk-steps > li { counter-increment: mks; position: relative; margin: 0 0 8px; padding-left: 34px; font-size: 14px; color: var(--mk-muted); } .mk-pc .mk-steps > li:last-child { margin-bottom: 0; } .mk-pc .mk-steps > li::before { content: counter(mks); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--mk-pub); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .mk-pc .mk-steps strong { color: var(--mk-ink); } .mk-pc .mk-mfoot { margin-top: auto; padding: 0 18px 18px; } .mk-pc a.mk-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; background: var(--mk-pub); color: #fff; } .mk-pc a.mk-btn:hover { background: var(--mk-pub-deep); color: #fff; } .mk-pc a.mk-btn .mk-ic { width: 15px; height: 15px; vertical-align: 0; } /* ---------- Contact ---------- */ .mk-pc .mk-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); font-size: 14px; } .mk-pc .mk-contact > .mk-ic { width: 24px; height: 24px; color: var(--mk-sub); } .mk-pc .mk-contact .mk-t { flex: 1 1 220px; } .mk-pc a.mk-mail { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 8px 14px; border-radius: 999px; text-decoration: none; background: var(--mk-sub); color: #fff; word-break: break-all; } .mk-pc a.mk-mail:hover { background: var(--mk-sub-deep); color: #fff; } .mk-pc a.mk-mail .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-pc .mk-details .mk-v a[href^="mailto:"] { font-size: 13px; } /* ---------- Bank-transfer-only notice ---------- */ .mk-pc .mk-notice { display: flex; gap: 12px; margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; background: var(--mk-pub-soft); border: 1.5px solid #efd0ae; color: var(--mk-pub-deep); font-size: 14px; } .mk-pc .mk-notice > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-pub); } .mk-pc .mk-notice strong { color: var(--mk-pub-deep); } /* ---------- Suspended channel ---------- */ .mk-pc .mk-method.is-off { background: #f6f7f7; border-style: dashed; } .mk-pc .mk-method.is-off .mk-mhead { background: #8a9592; } .mk-pc .mk-method.is-off .mk-cur { color: #5f6b68; } .mk-pc .mk-off-body { padding: 16px 18px 18px; font-size: 14px; color: var(--mk-muted); } .mk-pc .mk-off-body p { margin: 0 0 8px; } .mk-pc .mk-off-body p:last-child { margin-bottom: 0; } .mk-pc .mk-off-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--mk-rej-soft); color: var(--mk-rej); } .mk-pc .mk-off-badge .mk-ic { width: 13px; height: 13px; vertical-align: 0; } .mk-pc .mk-off-body .mk-mono { font-size: 14px; background: var(--mk-sub-soft); } .mk-pc .mk-off-note { font-size: 13px; font-style: italic; } /* ========================================================== Media Konservasi – Generative AI Policy page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-ai. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-ai { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; container-type: inline-size; } .mk-ai *, .mk-ai *::before, .mk-ai *::after { box-sizing: border-box; } .mk-ai p { margin: 0 0 10px; } .mk-ai p:last-child { margin-bottom: 0; } .mk-ai a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-ai .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-ai .mk-i-sparkles { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z%22/%3E%3Cpath d=%22M20 3v4%22/%3E%3Cpath d=%22M22 5h-4%22/%3E%3Cpath d=%22M4 17v2%22/%3E%3Cpath d=%22M5 18H3%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-userx { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22m17 8 5 5%22/%3E%3Cpath d=%22m22 8-5 5%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-usercheck { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22m16 11 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-x { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-file { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22/%3E%3Cpath d=%22M10 13H8%22/%3E%3Cpath d=%22M16 17H8%22/%3E%3Cpath d=%22M16 13h-2%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-image { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%223%22 rx=%222%22/%3E%3Ccircle cx=%229%22 cy=%229%22 r=%222%22/%3E%3Cpath d=%22m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-code { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 18 6-6-6-6%22/%3E%3Cpath d=%22m8 6-6 6 6 6%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-database { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2212%22 cy=%225%22 rx=%229%22 ry=%223%22/%3E%3Cpath d=%22M3 5V19A9 3 0 0 0 21 19V5%22/%3E%3Cpath d=%22M3 12A9 3 0 0 0 21 12%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-alert { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-search { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-lock { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 10 0v4%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-shield { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-upload { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m17 8-5-5-5 5%22/%3E%3Cpath d=%22M12 3v12%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-pen { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20h9%22/%3E%3Cpath d=%22M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-down { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14%22/%3E%3Cpath d=%22m19 12-7 7-7-7%22/%3E%3C/svg%3E"); } .mk-ai .mk-i-copy { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E"); } /* ---------- Section heading ---------- */ .mk-ai .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-ai .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-ai .mk-t { flex: 1; min-width: 0; } .mk-ai .mk-lead { color: var(--mk-muted); } /* ---------- Hero ---------- */ .mk-ai .mk-hero { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 22px 24px; } .mk-ai .mk-hero > .mk-ic { width: 42px; height: 42px; color: #9fd3c2; } .mk-ai .mk-hero .mk-t { flex: 1 1 260px; } .mk-ai .mk-hero strong.mk-title { display: block; font-size: 19px; line-height: 1.3; color: #fff; margin-bottom: 6px; } .mk-ai .mk-hero p { color: #e3f1ec; } .mk-ai .mk-req { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; } .mk-ai .mk-req .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: #9fd3c2; } /* Section number in heading */ .mk-ai .mk-h .mk-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--mk-sub); color: #fff; font-size: 12px; letter-spacing: 0; } /* ---------- Principle cards ---------- */ .mk-ai .mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .mk-ai .mk-grid > * { min-width: 0; } .mk-ai .mk-card { display: flex; gap: 12px; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--mk-muted); } .mk-ai .mk-cicon { flex: 0 0 40px; height: 40px; border-radius: 10px; background: var(--mk-sub-soft); color: var(--mk-sub); display: flex; align-items: center; justify-content: center; } .mk-ai .mk-cicon .mk-ic { width: 20px; height: 20px; } .mk-ai .mk-card strong { display: block; font-size: 15px; color: var(--mk-ink); margin-bottom: 2px; } .mk-ai .mk-card ul { margin: 6px 0 0; padding-left: 18px; } .mk-ai .mk-card li { margin: 0 0 3px; } /* ---------- Allowed vs not allowed ---------- */ .mk-ai .mk-dodont { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; } .mk-ai .mk-dodont > * { min-width: 0; } .mk-ai .mk-col { border-radius: 14px; padding: 14px 16px; font-size: 14px; } .mk-ai .mk-col.is-yes { background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-ai .mk-col.is-no { background: var(--mk-rej-soft); color: #6b2323; } .mk-ai .mk-col-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } .mk-ai .mk-col-title .mk-ic { width: 18px; height: 18px; vertical-align: 0; } .mk-ai .is-yes .mk-col-title .mk-ic { color: var(--mk-sub); } .mk-ai .is-no .mk-col-title { color: var(--mk-rej); } .mk-ai .mk-list { list-style: none; margin: 0; padding: 0; } .mk-ai .mk-list > li { display: flex; gap: 8px; margin: 0 0 6px; } .mk-ai .mk-list > li:last-child { margin-bottom: 0; } .mk-ai .mk-list > li > .mk-ic { width: 16px; height: 16px; margin-top: 3px; } .mk-ai .is-yes .mk-list .mk-ic { color: var(--mk-sub); } .mk-ai .is-no .mk-list .mk-ic { color: var(--mk-rej); } /* ---------- Placement diagram ---------- */ .mk-ai .mk-place { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 12px 0 14px; max-width: 420px; } .mk-ai .mk-place > .mk-box { padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--mk-line); background: #fff; font-size: 14px; color: var(--mk-muted); text-align: center; } .mk-ai .mk-place > .mk-box.is-here { border: 2px solid var(--mk-pub); background: var(--mk-pub-soft); color: var(--mk-pub-deep); font-weight: 800; } .mk-ai .mk-place > .mk-ic { align-self: center; width: 16px; height: 16px; color: var(--mk-line); } /* ---------- Statement templates ---------- */ .mk-ai .mk-tpl { margin: 10px 0 12px; border-radius: 14px; border: 1.5px solid var(--mk-line); background: #fff; overflow: hidden; } .mk-ai .mk-tpl-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px; font-weight: 700; color: var(--mk-ink); background: #f4f7f6; border-bottom: 1.5px solid var(--mk-line); } .mk-ai .mk-tpl-head .mk-ic { width: 18px; height: 18px; vertical-align: 0; color: var(--mk-sub); } .mk-ai .mk-tpl-head .mk-when { margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-ai .mk-tpl-body { padding: 14px 16px; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.7; color: var(--mk-ink); border-left: 4px solid var(--mk-sub); margin: 12px 14px; background: #fbfcfc; border-radius: 0 8px 8px 0; user-select: all; } .mk-ai .mk-slot { font-family: Consolas, "Courier New", monospace; font-size: 13px; padding: 1px 6px; border-radius: 5px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); border: 1px dashed #e6bb8c; } .mk-ai .mk-tpl-foot { padding: 0 16px 12px; font-size: 13px; color: var(--mk-muted); } /* ---------- Alert ---------- */ .mk-ai .mk-alert { display: flex; gap: 12px; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--mk-rej-soft); border: 1.5px solid #e2b4b4; color: #6b2323; margin-bottom: 10px; } .mk-ai .mk-alert > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-rej); } .mk-ai .mk-alert strong { color: var(--mk-rej); } /* Three cards: one column when narrow, three in a row when there is room */ .mk-ai .mk-grid.is-3 { grid-template-columns: 1fr; } @container (min-width: 480px) { .mk-ai .mk-grid.is-3 { grid-template-columns: repeat(3, 1fr); } .mk-ai .mk-grid.is-3 .mk-card { flex-direction: column; } .mk-ai .mk-grid.is-3 .mk-cicon { flex: 0 0 40px; width: 40px; align-self: flex-start; } } /* ========================================================== Media Konservasi – Reviewers page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-rv. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-rv { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; container-type: inline-size; } .mk-rv *, .mk-rv *::before, .mk-rv *::after { box-sizing: border-box; } .mk-rv p { margin: 0 0 10px; } .mk-rv p:last-child { margin-bottom: 0; } .mk-rv a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-rv .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-rv .mk-i-paw { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%224%22 r=%222%22/%3E%3Ccircle cx=%2218%22 cy=%228%22 r=%222%22/%3E%3Ccircle cx=%2220%22 cy=%2216%22 r=%222%22/%3E%3Cpath d=%22M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-mountain { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m8 3 4 8 5-5 5 15H2L8 3z%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-shield { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-chart { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v16a2 2 0 0 0 2 2h16%22/%3E%3Cpath d=%22m19 9-5 5-4-4-3 3%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-flask { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 2v7.31%22/%3E%3Cpath d=%22M14 9.3V1.99%22/%3E%3Cpath d=%22M8.5 2h7%22/%3E%3Cpath d=%22M14 9.3a6.5 6.5 0 1 1-4 0%22/%3E%3Cpath d=%22M5.52 16h12.96%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-trees { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z%22/%3E%3Cpath d=%22M7 16v6%22/%3E%3Cpath d=%22M13 19v3%22/%3E%3Cpath d=%22M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-users { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22/%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22/%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-drops { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z%22/%3E%3Cpath d=%22M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-map { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z%22/%3E%3Cpath d=%22M15 5.764v15%22/%3E%3Cpath d=%22M9 3.236v15%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-thermo { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-clipboard { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%228%22 height=%224%22 x=%228%22 y=%222%22 rx=%221%22/%3E%3Cpath d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22/%3E%3Cpath d=%22m9 14 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-rv .mk-i-heart { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z%22/%3E%3C/svg%3E"); } /* ---------- Section heading ---------- */ .mk-rv .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-rv .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-rv .mk-t { flex: 1; min-width: 0; } /* ---------- Hero ---------- */ .mk-rv .mk-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 22px 24px; } .mk-rv .mk-hero > .mk-ic { width: 42px; height: 42px; color: #9fd3c2; } .mk-rv .mk-hero .mk-t { flex: 1 1 240px; } .mk-rv .mk-title { display: block; font-size: 20px; color: #fff; margin-bottom: 4px; } .mk-rv .mk-hero p { color: #e3f1ec; margin: 0; font-size: 14px; } .mk-rv .mk-stats { display: flex; gap: 8px; } .mk-rv .mk-stat { text-align: center; background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 14px; } .mk-rv .mk-stat strong { display: block; font-size: 26px; line-height: 1; color: #fff; } .mk-rv .mk-stat .mk-sm { font-size: 12px; color: #cfe7df; } /* ---------- Jump nav ---------- */ .mk-rv .mk-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin: 16px 0 4px; } .mk-rv .mk-nav > * { min-width: 0; } .mk-rv .mk-nav a { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--mk-line); background: #fff; color: var(--mk-sub-deep); text-decoration: none; font-weight: 600; } .mk-rv .mk-nav a:hover { border-color: var(--mk-sub); background: var(--mk-sub-soft); } .mk-rv .mk-nav .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: var(--mk-sub); } .mk-rv .mk-nav .mk-nlabel { flex: 1; min-width: 0; } .mk-rv .mk-nav .mk-ncount { flex: 0 0 auto; font-size: 11px; font-weight: 800; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } /* ---------- Field ---------- */ .mk-rv .mk-field { margin-top: 26px; scroll-margin-top: 20px; } .mk-rv .mk-fhead { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--mk-line); } .mk-rv .mk-ficon { flex: 0 0 40px; height: 40px; border-radius: 10px; background: var(--mk-sub-soft); color: var(--mk-sub); display: flex; align-items: center; justify-content: center; } .mk-rv .mk-ficon .mk-ic { width: 20px; height: 20px; } .mk-rv .mk-ftitle { flex: 1; min-width: 0; } .mk-rv .mk-fnum { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-sub); } .mk-rv .mk-ftitle strong { display: block; font-size: 17px; line-height: 1.3; color: var(--mk-ink); } .mk-rv .mk-fcount { flex: 0 0 auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); } /* ---------- Reviewer cards ---------- */ .mk-rv .mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; } .mk-rv .mk-grid > * { min-width: 0; } .mk-rv .mk-person { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 10px 12px; } .mk-rv .mk-av { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--mk-sub-soft); color: var(--mk-sub-deep); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .mk-rv .mk-info { flex: 1; min-width: 0; display: block; } .mk-rv .mk-info strong { display: block; font-size: 15px; line-height: 1.3; color: var(--mk-ink); } .mk-rv .mk-aff { display: block; font-size: 13px; line-height: 1.4; color: var(--mk-muted); margin-top: 1px; } .mk-rv .mk-ids { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .mk-rv a.mk-id { font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 6px; text-decoration: none; border: 1.5px solid; background: #fff; } .mk-rv a.mk-id:hover { color: #fff; } .mk-rv a.mk-id.is-scopus { color: #b34f12; border-color: #f0b48a; } .mk-rv a.mk-id.is-scopus:hover { background: #d9661f; border-color: #d9661f; } .mk-rv a.mk-id.is-gs { color: #2f5db5; border-color: #9db8ea; } .mk-rv a.mk-id.is-gs:hover { background: #3f6fd1; border-color: #3f6fd1; } /* ---------- Thanks ---------- */ .mk-rv .mk-thanks { display: flex; gap: 12px; align-items: center; margin-top: 26px; padding: 14px 16px; border-radius: 14px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); font-size: 14px; } .mk-rv .mk-thanks > .mk-ic { width: 22px; height: 22px; color: var(--mk-pub); } /* ========================================================== Media Konservasi – Archiving page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-ar. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-ar { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; } .mk-ar *, .mk-ar *::before, .mk-ar *::after { box-sizing: border-box; } .mk-ar p { margin: 0 0 10px; } .mk-ar p:last-child { margin-bottom: 0; } .mk-ar a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-ar .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-ar .mk-i-archive { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%225%22 x=%222%22 y=%223%22 rx=%221%22/%3E%3Cpath d=%22M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8%22/%3E%3Cpath d=%22M10 12h4%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-shield { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-copies { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-book { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z%22/%3E%3Cpath d=%22M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-download { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5%22/%3E%3Cpath d=%22M12 15V3%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-server { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%228%22 x=%222%22 y=%222%22 rx=%222%22/%3E%3Crect width=%2220%22 height=%228%22 x=%222%22 y=%2214%22 rx=%222%22/%3E%3Cpath d=%22M6 6h.01%22/%3E%3Cpath d=%22M6 18h.01%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-unlock { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 9.9-1%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-layers { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 2 10 5-10 5L2 7z%22/%3E%3Cpath d=%22m2 17 10 5 10-5%22/%3E%3Cpath d=%22m2 12 10 5 10-5%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-file { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22/%3E%3Cpath d=%22M10 13H8%22/%3E%3Cpath d=%22M16 17H8%22/%3E%3Cpath d=%22M16 13h-2%22/%3E%3C/svg%3E"); } .mk-ar .mk-i-external { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22/%3E%3Cpath d=%22M10 14 21 3%22/%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3%22/%3E%3C/svg%3E"); } /* ---------- Hero ---------- */ .mk-ar .mk-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 22px 24px; } .mk-ar .mk-hero > .mk-ic { width: 44px; height: 44px; color: #9fd3c2; } .mk-ar .mk-hero-text { flex: 1 1 260px; min-width: 0; } .mk-ar .mk-hero-text p { color: #e3f1ec; } .mk-ar .mk-hero-text strong { color: #fff; } .mk-ar .mk-stat { flex: 0 0 auto; text-align: center; background: rgba(255,255,255,.1); border-radius: 14px; padding: 10px 18px; } .mk-ar .mk-stat strong { display: block; font-size: 34px; line-height: 1; color: #fff; } .mk-ar .mk-stat .mk-sm { font-size: 12px; color: #cfe7df; } .mk-ar .mk-tool { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; } .mk-ar .mk-tool .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: #9fd3c2; } /* ---------- Section heading ---------- */ .mk-ar .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-ar .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } /* ---------- Workflow ---------- */ .mk-ar .mk-flow { list-style: none; margin: 0; padding: 0; position: relative; } .mk-ar .mk-flow::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--mk-line); } .mk-ar .mk-flow li { position: relative; display: flex; gap: 14px; margin: 0 0 12px; padding: 0; } .mk-ar .mk-flow li:last-child { margin-bottom: 0; } .mk-ar .mk-node { position: relative; z-index: 1; flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--mk-line); color: var(--mk-muted); } .mk-ar .mk-node .mk-ic { width: 20px; height: 20px; } .mk-ar .mk-step { flex: 1; min-width: 0; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 11px 14px; font-size: 14px; color: var(--mk-muted); } .mk-ar .mk-step strong { display: block; font-size: 15px; color: var(--mk-ink); } /* Checkpoints stand out */ .mk-ar .mk-flow li.is-check .mk-node { background: var(--mk-sub); border-color: var(--mk-sub); color: #fff; } .mk-ar .mk-flow li.is-check .mk-step { background: var(--mk-sub-soft); border-color: #b9d9cf; color: var(--mk-sub-deep); } .mk-ar .mk-flow li.is-check .mk-step strong { color: var(--mk-sub-deep); } .mk-ar .mk-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--mk-sub); color: #fff; vertical-align: 2px; } .mk-ar .mk-ret { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--mk-rej); } .mk-ar .mk-ret .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-ar .mk-flow li.is-end .mk-node { background: var(--mk-pub); border-color: var(--mk-pub); color: #fff; } /* ---------- Tips ---------- */ .mk-ar .mk-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .mk-ar .mk-tips > * { min-width: 0; } .mk-ar .mk-tip { background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--mk-muted); } .mk-ar .mk-tip > .mk-ic { display: block; width: 22px; height: 22px; margin-bottom: 6px; color: var(--mk-sub); } .mk-ar .mk-tip strong { display: block; font-size: 15px; color: var(--mk-ink); margin-bottom: 2px; } /* ---------- Warning ---------- */ .mk-ar .mk-alert { display: flex; gap: 12px; margin-top: 14px; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--mk-rej-soft); border: 1.5px solid #e2b4b4; color: #6b2323; } .mk-ar .mk-alert > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-rej); } .mk-ar .mk-alert strong { color: var(--mk-rej); } .mk-ar .mk-alert a { color: var(--mk-rej); } .mk-ar .mk-t { flex: 1; min-width: 0; } /* ---------- Note & links ---------- */ .mk-ar .mk-note { display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); font-size: 14px; } .mk-ar .mk-note > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-sub); } .mk-ar .mk-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .mk-ar a.mk-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; background: var(--mk-sub); color: #fff; } .mk-ar a.mk-link:hover { background: var(--mk-sub-deep); color: #fff; } .mk-ar a.mk-link.is-ghost { background: #fff; color: var(--mk-sub-deep); border: 1.5px solid #9cc9bb; } .mk-ar a.mk-link.is-ghost:hover { background: var(--mk-sub-soft); } .mk-ar a.mk-link .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-ar .mk-tool a { color: #fff; } .mk-ar .mk-stat strong .mk-ic { width: 30px; height: 30px; vertical-align: 0; color: #9fd3c2; margin-bottom: 4px; } /* ========================================================== Media Konservasi – Crossmark Policy page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-cm. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-cm { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; container-type: inline-size; } .mk-cm *, .mk-cm *::before, .mk-cm *::after { box-sizing: border-box; } .mk-cm p { margin: 0 0 10px; } .mk-cm p:last-child { margin-bottom: 0; } .mk-cm a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-cm .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-cm .mk-i-shield { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-badge { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-calendar { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22M16 2v4%22/%3E%3Cpath d=%22M8 2v4%22/%3E%3Cpath d=%22M3 10h18%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-search { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-pointer { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 14a8 8 0 0 1-8 8%22/%3E%3Cpath d=%22M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2%22/%3E%3Cpath d=%22M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1%22/%3E%3Cpath d=%22M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10%22/%3E%3Cpath d=%22M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-coins { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226%22/%3E%3Cpath d=%22M18.09 10.37A6 6 0 1 1 10.34 18%22/%3E%3Cpath d=%22M7 6h1v4%22/%3E%3Cpath d=%22m16.71 13.88.7.71-2.82 2.82%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-scale { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z%22/%3E%3Cpath d=%22m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z%22/%3E%3Cpath d=%22M7 21h10%22/%3E%3Cpath d=%22M12 3v18%22/%3E%3Cpath d=%22M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-history { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8%22/%3E%3Cpath d=%22M3 3v5h5%22/%3E%3Cpath d=%22M12 7v5l4 2%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-pen { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20h9%22/%3E%3Cpath d=%22M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-layers { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m12 2 10 5-10 5L2 7z%22/%3E%3Cpath d=%22m2 17 10 5 10-5%22/%3E%3Cpath d=%22m2 12 10 5 10-5%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-alert { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-info { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-arrow { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E"); } .mk-cm .mk-i-external { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22/%3E%3Cpath d=%22M10 14 21 3%22/%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3%22/%3E%3C/svg%3E"); } /* ---------- Section heading ---------- */ .mk-cm .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-cm .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-cm .mk-t { flex: 1; min-width: 0; } /* ---------- Hero ---------- */ .mk-cm .mk-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 22px 24px; } .mk-cm .mk-hero > .mk-ic { width: 42px; height: 42px; color: #9fd3c2; } .mk-cm .mk-hero .mk-t { flex: 1 1 260px; } .mk-cm .mk-hero p { color: #e3f1ec; margin: 0 0 10px; } .mk-cm .mk-hero strong { color: #fff; } .mk-cm .mk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; margin: 0 6px 6px 0; } .mk-cm .mk-chip .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: #9fd3c2; } /* ---------- What is Crossmark ---------- */ .mk-cm .mk-about { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; border: 1.5px solid var(--mk-line); border-radius: 16px; padding: 18px 20px; background: #fff; } .mk-cm .mk-about .mk-t { flex: 1 1 280px; font-size: 14px; color: var(--mk-muted); } .mk-cm .mk-about .mk-t p { margin: 0 0 8px; } .mk-cm .mk-about .mk-t p:last-child { margin: 0; } .mk-cm .mk-btnbox { flex: 0 0 auto; text-align: center; background: #f6f8f7; border-radius: 12px; padding: 14px 18px; } .mk-cm .mk-btnbox img { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 auto 6px; } .mk-cm .mk-btnbox .mk-sm { font-size: 12px; color: var(--mk-muted); } /* ---------- How it works ---------- */ .mk-cm .mk-steps { list-style: none; margin: 0; padding: 0; counter-reset: mks; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .mk-cm .mk-steps > li { counter-increment: mks; position: relative; margin: 0; min-width: 0; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--mk-muted); } .mk-cm .mk-steps > li::after { content: counter(mks); position: absolute; top: 12px; right: 14px; font-size: 13px; font-weight: 800; color: var(--mk-line); } .mk-cm .mk-steps > li > .mk-ic { display: block; width: 22px; height: 22px; margin-bottom: 8px; color: var(--mk-sub); } .mk-cm .mk-steps strong { display: block; font-size: 15px; color: var(--mk-ink); margin-bottom: 2px; } .mk-cm .mk-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--mk-muted); } .mk-cm .mk-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-cm .mk-tag .mk-ic { width: 14px; height: 14px; vertical-align: 0; } /* ---------- Update types ---------- */ .mk-cm .mk-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; } .mk-cm .mk-groups > * { min-width: 0; } .mk-cm .mk-group { border-radius: 14px; border: 1.5px solid var(--mk-line); background: #fff; overflow: hidden; } .mk-cm .mk-ghead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 15px; font-weight: 800; } .mk-cm .mk-ghead .mk-ic { width: 20px; height: 20px; } .mk-cm .mk-group.is-fix .mk-ghead { background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-cm .mk-group.is-ver .mk-ghead { background: #eef1fb; color: #2f4a8a; } .mk-cm .mk-group.is-ret .mk-ghead { background: var(--mk-rej-soft); color: var(--mk-rej); } .mk-cm .mk-types { list-style: none; margin: 0; padding: 4px 14px 12px; } .mk-cm .mk-types > li { margin: 0; padding: 8px 0; border-bottom: 1px solid #e8eeec; font-size: 13px; color: var(--mk-muted); } .mk-cm .mk-types > li:last-child { border-bottom: 0; } .mk-cm .mk-types strong { display: block; font-size: 14px; color: var(--mk-ink); } .mk-cm .mk-group.is-wide { grid-column: 1 / -1; } .mk-cm .mk-group.is-wide .mk-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 16px; } .mk-cm .mk-group.is-wide .mk-types > li { border-bottom: 1px solid #e8eeec; } /* ---------- Note & footer ---------- */ .mk-cm .mk-note { display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); font-size: 14px; } .mk-cm .mk-note > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-pub); } .mk-cm .mk-note a { color: var(--mk-pub-deep); } .mk-cm .mk-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .mk-cm a.mk-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; background: var(--mk-sub); color: #fff; } .mk-cm a.mk-link:hover { background: var(--mk-sub-deep); color: #fff; } .mk-cm a.mk-link.is-ghost { background: #fff; color: var(--mk-sub-deep); border: 1.5px solid #9cc9bb; } .mk-cm a.mk-link.is-ghost:hover { background: var(--mk-sub-soft); } .mk-cm a.mk-link .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-cm .mk-doi { margin-top: 18px; font-size: 13px; color: var(--mk-muted); } .mk-cm .mk-doi a { font-family: Consolas, "Courier New", monospace; } /* ========================================================== Media Konservasi – Repository Policy page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-rep. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-rep { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; container-type: inline-size; } .mk-rep *, .mk-rep *::before, .mk-rep *::after { box-sizing: border-box; } .mk-rep p { margin: 0 0 10px; } .mk-rep p:last-child { margin-bottom: 0; } .mk-rep a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-rep .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-rep .mk-i-share { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2218%22 cy=%225%22 r=%223%22/%3E%3Ccircle cx=%226%22 cy=%2212%22 r=%223%22/%3E%3Ccircle cx=%2218%22 cy=%2219%22 r=%223%22/%3E%3Cpath d=%22m8.59 13.51 6.83 3.98%22/%3E%3Cpath d=%22m15.41 6.51-6.82 3.98%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-file { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22/%3E%3Cpath d=%22M10 13H8%22/%3E%3Cpath d=%22M16 17H8%22/%3E%3Cpath d=%22M16 13h-2%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-filecheck { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22/%3E%3Cpath d=%22m9 15 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-book { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z%22/%3E%3Cpath d=%22M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-building { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 22h18%22/%3E%3Cpath d=%22M6 18v-7%22/%3E%3Cpath d=%22M10 18v-7%22/%3E%3Cpath d=%22M14 18v-7%22/%3E%3Cpath d=%22M18 18v-7%22/%3E%3Cpath d=%22M12 2 20 7H4z%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-link { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-eye { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-unlock { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 9.9-1%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-badge { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-rep .mk-i-info { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E"); } /* ---------- Section heading ---------- */ .mk-rep .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-rep .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-rep .mk-t { flex: 1; min-width: 0; } /* ---------- Hero ---------- */ .mk-rep .mk-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 22px 24px; } .mk-rep .mk-hero > .mk-ic { width: 42px; height: 42px; color: #9fd3c2; } .mk-rep .mk-hero .mk-t { flex: 1 1 260px; } .mk-rep .mk-hero p { color: #e3f1ec; margin: 0 0 10px; } .mk-rep .mk-hero strong { color: #fff; } .mk-rep .mk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; margin: 0 6px 6px 0; } .mk-rep .mk-chip .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: #9fd3c2; } /* ---------- What is Crossmark ---------- */ .mk-rep .mk-about { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; border: 1.5px solid var(--mk-line); border-radius: 16px; padding: 18px 20px; background: #fff; } .mk-rep .mk-about .mk-t { flex: 1 1 280px; font-size: 14px; color: var(--mk-muted); } .mk-rep .mk-about .mk-t p { margin: 0 0 8px; } .mk-rep .mk-about .mk-t p:last-child { margin: 0; } .mk-rep .mk-btnbox { flex: 0 0 auto; text-align: center; background: #f6f8f7; border-radius: 12px; padding: 14px 18px; } .mk-rep .mk-btnbox img { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 auto 6px; } .mk-rep .mk-btnbox .mk-sm { font-size: 12px; color: var(--mk-muted); } /* ---------- How it works ---------- */ .mk-rep .mk-steps { list-style: none; margin: 0; padding: 0; counter-reset: mks; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .mk-rep .mk-steps > li { counter-increment: mks; position: relative; margin: 0; min-width: 0; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--mk-muted); } .mk-rep .mk-steps > li::after { content: counter(mks); position: absolute; top: 12px; right: 14px; font-size: 13px; font-weight: 800; color: var(--mk-line); } .mk-rep .mk-steps > li > .mk-ic { display: block; width: 22px; height: 22px; margin-bottom: 8px; color: var(--mk-sub); } .mk-rep .mk-steps strong { display: block; font-size: 15px; color: var(--mk-ink); margin-bottom: 2px; } .mk-rep .mk-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--mk-muted); } .mk-rep .mk-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-rep .mk-tag .mk-ic { width: 14px; height: 14px; vertical-align: 0; } /* ---------- Update types ---------- */ .mk-rep .mk-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; } .mk-rep .mk-groups > * { min-width: 0; } .mk-rep .mk-group { border-radius: 14px; border: 1.5px solid var(--mk-line); background: #fff; overflow: hidden; } .mk-rep .mk-ghead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 15px; font-weight: 800; } .mk-rep .mk-ghead .mk-ic { width: 20px; height: 20px; } .mk-rep .mk-group.is-fix .mk-ghead { background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-rep .mk-group.is-ver .mk-ghead { background: #eef1fb; color: #2f4a8a; } .mk-rep .mk-group.is-ret .mk-ghead { background: var(--mk-rej-soft); color: var(--mk-rej); } .mk-rep .mk-types { list-style: none; margin: 0; padding: 4px 14px 12px; } .mk-rep .mk-types > li { margin: 0; padding: 8px 0; border-bottom: 1px solid #e8eeec; font-size: 13px; color: var(--mk-muted); } .mk-rep .mk-types > li:last-child { border-bottom: 0; } .mk-rep .mk-types strong { display: block; font-size: 14px; color: var(--mk-ink); } .mk-rep .mk-group.is-wide { grid-column: 1 / -1; } .mk-rep .mk-group.is-wide .mk-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 16px; } .mk-rep .mk-group.is-wide .mk-types > li { border-bottom: 1px solid #e8eeec; } /* ---------- Note & footer ---------- */ .mk-rep .mk-note { display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); font-size: 14px; } .mk-rep .mk-note > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-pub); } .mk-rep .mk-note a { color: var(--mk-pub-deep); } .mk-rep .mk-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .mk-rep a.mk-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; background: var(--mk-sub); color: #fff; } .mk-rep a.mk-link:hover { background: var(--mk-sub-deep); color: #fff; } .mk-rep a.mk-link.is-ghost { background: #fff; color: var(--mk-sub-deep); border: 1.5px solid #9cc9bb; } .mk-rep a.mk-link.is-ghost:hover { background: var(--mk-sub-soft); } .mk-rep a.mk-link .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-rep .mk-doi { margin-top: 18px; font-size: 13px; color: var(--mk-muted); } .mk-rep .mk-doi a { font-family: Consolas, "Courier New", monospace; } /* ---------- Version cards ---------- */ .mk-rep .mk-vers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .mk-rep .mk-vers > * { min-width: 0; } .mk-rep .mk-ver { position: relative; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--mk-muted); } .mk-rep .mk-ver > .mk-ic { display: block; width: 22px; height: 22px; margin-bottom: 8px; color: var(--mk-sub); } .mk-rep .mk-ver strong { display: block; font-size: 15px; color: var(--mk-ink); } .mk-rep .mk-ver .mk-ok { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-rep .mk-ver .mk-ok .mk-ic { width: 11px; height: 11px; vertical-align: 0; } /* ---------- Conditions ---------- */ .mk-rep .mk-conds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .mk-rep .mk-conds > * { min-width: 0; } .mk-rep .mk-cond { display: flex; gap: 12px; border-radius: 12px; padding: 14px; font-size: 14px; background: var(--mk-pub-soft); border: 1.5px solid #efd0ae; color: var(--mk-pub-deep); } .mk-rep .mk-cond > .mk-ic { width: 22px; height: 22px; color: var(--mk-pub); } .mk-rep .mk-cond strong { display: block; font-size: 15px; } /* ---------- Citation template ---------- */ .mk-rep .mk-tpl { margin-top: 12px; border-radius: 12px; border: 1.5px solid var(--mk-line); background: #fff; overflow: hidden; } .mk-rep .mk-tpl-head { padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--mk-ink); background: #f4f7f6; border-bottom: 1.5px solid var(--mk-line); } .mk-rep .mk-tpl-body { margin: 12px 14px; padding: 10px 14px; border-left: 4px solid var(--mk-sub); border-radius: 0 8px 8px 0; background: #fbfcfc; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.65; color: var(--mk-ink); user-select: all; } .mk-rep .mk-slot { font-family: Consolas, "Courier New", monospace; font-size: 13px; padding: 1px 6px; border-radius: 5px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); border: 1px dashed #e6bb8c; } /* ---------- Benefits ---------- */ .mk-rep .mk-bens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .mk-rep .mk-bens > li { margin: 0; min-width: 0; padding: 14px; border-radius: 12px; background: var(--mk-sub-soft); font-size: 14px; color: var(--mk-sub-deep); } .mk-rep .mk-bens > li > .mk-ic { display: block; width: 22px; height: 22px; margin-bottom: 6px; color: var(--mk-sub); } .mk-rep .mk-bens strong { display: block; font-size: 15px; } /* note in green for this page */ .mk-rep .mk-note.is-info { background: #f4f7f6; color: var(--mk-muted); border: 1.5px dashed var(--mk-line); } .mk-rep .mk-note.is-info > .mk-ic { color: var(--mk-sub); } .mk-rep .mk-note.is-info a { color: var(--mk-sub); } /* ========================================================== Media Konservasi – Open Access & Copyright page Paste into Custom Header inside a style tag (can share the same style tag as the other mk-*.css files). All rules are scoped to .mk-oa. Icons: Lucide (ISC licence), embedded as SVG data URIs. ========================================================== */ .mk-oa { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #c9d9d3; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; --mk-pub: #b5651d; --mk-pub-soft: #fbefe2; --mk-pub-deep: #7a400f; --mk-rej: #a33a3a; --mk-rej-soft: #f8e7e7; color: var(--mk-ink); font-size: 15px; line-height: 1.55; container-type: inline-size; } .mk-oa *, .mk-oa *::before, .mk-oa *::after { box-sizing: border-box; } .mk-oa p { margin: 0 0 10px; } .mk-oa p:last-child { margin-bottom: 0; } .mk-oa a { color: var(--mk-sub); font-weight: 600; } /* ---------- Icon engine ---------- */ .mk-oa .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; vertical-align: -4px; font-size: 0; /* icons carry a   so TinyMCE keeps them */ line-height: 0; overflow: hidden; } .mk-oa .mk-i-unlock { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2211%22 x=%223%22 y=%2211%22 rx=%222%22/%3E%3Cpath d=%22M7 11V7a5 5 0 0 1 9.9-1%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-check { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-badge { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-user { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%225%22/%3E%3Cpath d=%22M20 21a8 8 0 0 0-16 0%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-calendar { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22M16 2v4%22/%3E%3Cpath d=%22M8 2v4%22/%3E%3Cpath d=%22M3 10h18%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-book { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z%22/%3E%3Cpath d=%22M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-download { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5%22/%3E%3Cpath d=%22M12 15V3%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-copy { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-share { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2218%22 cy=%225%22 r=%223%22/%3E%3Ccircle cx=%226%22 cy=%2212%22 r=%223%22/%3E%3Ccircle cx=%2218%22 cy=%2219%22 r=%223%22/%3E%3Cpath d=%22m8.59 13.51 6.83 3.98%22/%3E%3Cpath d=%22m15.41 6.51-6.82 3.98%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-printer { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2%22/%3E%3Cpath d=%22M6 9V3h12v6%22/%3E%3Crect x=%226%22 y=%2214%22 width=%2212%22 height=%228%22 rx=%221%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-search { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-link { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-pen { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20h9%22/%3E%3Cpath d=%22M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-globe { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-info { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-external { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22/%3E%3Cpath d=%22M10 14 21 3%22/%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3%22/%3E%3C/svg%3E"); } .mk-oa .mk-i-arrow { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22m12 5 7 7-7 7%22/%3E%3C/svg%3E"); } /* ---------- Section heading ---------- */ .mk-oa .mk-h { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-sub-deep); } .mk-oa .mk-h::after { content: ""; flex: 1; height: 2px; background: var(--mk-line); } .mk-oa .mk-t { flex: 1; min-width: 0; } /* ---------- Hero ---------- */ .mk-oa .mk-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; background: var(--mk-sub-deep); color: #fff; border-radius: 18px; padding: 22px 24px; } .mk-oa .mk-hero > .mk-ic { width: 42px; height: 42px; color: #9fd3c2; } .mk-oa .mk-hero .mk-t { flex: 1 1 260px; } .mk-oa .mk-hero p { color: #e3f1ec; margin: 0 0 10px; } .mk-oa .mk-hero strong { color: #fff; } .mk-oa .mk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; margin: 0 6px 6px 0; } .mk-oa .mk-chip .mk-ic { width: 15px; height: 15px; vertical-align: 0; color: #9fd3c2; } /* ---------- What is Crossmark ---------- */ .mk-oa .mk-about { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; border: 1.5px solid var(--mk-line); border-radius: 16px; padding: 18px 20px; background: #fff; } .mk-oa .mk-about .mk-t { flex: 1 1 280px; font-size: 14px; color: var(--mk-muted); } .mk-oa .mk-about .mk-t p { margin: 0 0 8px; } .mk-oa .mk-about .mk-t p:last-child { margin: 0; } .mk-oa .mk-btnbox { flex: 0 0 auto; text-align: center; background: #f6f8f7; border-radius: 12px; padding: 14px 18px; } .mk-oa .mk-btnbox img { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 auto 6px; } .mk-oa .mk-btnbox .mk-sm { font-size: 12px; color: var(--mk-muted); } /* ---------- How it works ---------- */ .mk-oa .mk-steps { list-style: none; margin: 0; padding: 0; counter-reset: mks; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .mk-oa .mk-steps > li { counter-increment: mks; position: relative; margin: 0; min-width: 0; background: #fff; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--mk-muted); } .mk-oa .mk-steps > li::after { content: counter(mks); position: absolute; top: 12px; right: 14px; font-size: 13px; font-weight: 800; color: var(--mk-line); } .mk-oa .mk-steps > li > .mk-ic { display: block; width: 22px; height: 22px; margin-bottom: 8px; color: var(--mk-sub); } .mk-oa .mk-steps strong { display: block; font-size: 15px; color: var(--mk-ink); margin-bottom: 2px; } .mk-oa .mk-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--mk-muted); } .mk-oa .mk-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-oa .mk-tag .mk-ic { width: 14px; height: 14px; vertical-align: 0; } /* ---------- Update types ---------- */ .mk-oa .mk-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; } .mk-oa .mk-groups > * { min-width: 0; } .mk-oa .mk-group { border-radius: 14px; border: 1.5px solid var(--mk-line); background: #fff; overflow: hidden; } .mk-oa .mk-ghead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 15px; font-weight: 800; } .mk-oa .mk-ghead .mk-ic { width: 20px; height: 20px; } .mk-oa .mk-group.is-fix .mk-ghead { background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-oa .mk-group.is-ver .mk-ghead { background: #eef1fb; color: #2f4a8a; } .mk-oa .mk-group.is-ret .mk-ghead { background: var(--mk-rej-soft); color: var(--mk-rej); } .mk-oa .mk-types { list-style: none; margin: 0; padding: 4px 14px 12px; } .mk-oa .mk-types > li { margin: 0; padding: 8px 0; border-bottom: 1px solid #e8eeec; font-size: 13px; color: var(--mk-muted); } .mk-oa .mk-types > li:last-child { border-bottom: 0; } .mk-oa .mk-types strong { display: block; font-size: 14px; color: var(--mk-ink); } .mk-oa .mk-group.is-wide { grid-column: 1 / -1; } .mk-oa .mk-group.is-wide .mk-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 16px; } .mk-oa .mk-group.is-wide .mk-types > li { border-bottom: 1px solid #e8eeec; } /* ---------- Note & footer ---------- */ .mk-oa .mk-note { display: flex; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); font-size: 14px; } .mk-oa .mk-note > .mk-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--mk-pub); } .mk-oa .mk-note a { color: var(--mk-pub-deep); } .mk-oa .mk-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .mk-oa a.mk-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; background: var(--mk-sub); color: #fff; } .mk-oa a.mk-link:hover { background: var(--mk-sub-deep); color: #fff; } .mk-oa a.mk-link.is-ghost { background: #fff; color: var(--mk-sub-deep); border: 1.5px solid #9cc9bb; } .mk-oa a.mk-link.is-ghost:hover { background: var(--mk-sub-soft); } .mk-oa a.mk-link .mk-ic { width: 15px; height: 15px; vertical-align: 0; } .mk-oa .mk-doi { margin-top: 18px; font-size: 13px; color: var(--mk-muted); } .mk-oa .mk-doi a { font-family: Consolas, "Courier New", monospace; } /* ---------- Reader rights ---------- */ .mk-oa .mk-rights { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } .mk-oa .mk-rights > * { min-width: 0; } .mk-oa .mk-right { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 8px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); font-size: 13px; font-weight: 700; } .mk-oa .mk-right .mk-ic { width: 22px; height: 22px; color: var(--mk-sub); } .mk-oa .mk-free { margin-top: 10px; font-size: 14px; color: var(--mk-muted); } /* ---------- License card ---------- */ .mk-oa .mk-lic { border: 1.5px solid var(--mk-line); border-radius: 16px; background: #fff; overflow: hidden; } .mk-oa .mk-lic-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; background: #f6f8f7; border-bottom: 1.5px solid var(--mk-line); } .mk-oa .mk-lic-head img { display: block; width: 88px; height: 31px; font-size: 0; color: transparent; overflow: hidden; background: #e9eeec; border-radius: 3px; } .mk-oa .mk-lic-head .mk-t a { display: inline-block; margin-top: 2px; } .mk-oa .mk-lic-head .mk-t strong { display: block; font-size: 16px; color: var(--mk-ink); } .mk-oa .mk-lic-head .mk-t a { font-size: 13px; } .mk-oa .mk-lic-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; } .mk-oa .mk-lic-body > * { min-width: 0; } .mk-oa .mk-lcol { padding: 14px 18px; font-size: 14px; color: var(--mk-muted); } .mk-oa .mk-lcol + .mk-lcol { border-left: 1.5px solid var(--mk-line); } .mk-oa .mk-ltitle { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; } .mk-oa .mk-ltitle .mk-ic { width: 18px; height: 18px; vertical-align: 0; } .mk-oa .is-free .mk-ltitle { color: var(--mk-sub-deep); } .mk-oa .is-free .mk-ltitle .mk-ic { color: var(--mk-sub); } .mk-oa .is-cond .mk-ltitle { color: var(--mk-pub-deep); } .mk-oa .is-cond .mk-ltitle .mk-ic { color: var(--mk-pub); } .mk-oa .mk-lcol ul { list-style: none; margin: 0; padding: 0; } .mk-oa .mk-lcol li { margin: 0 0 6px; } .mk-oa .mk-lcol li:last-child { margin: 0; } .mk-oa .mk-lcol strong { color: var(--mk-ink); } @container (max-width: 440px) { .mk-oa .mk-lcol + .mk-lcol { border-left: 0; border-top: 1.5px solid var(--mk-line); } } /* ---------- Copyright split ---------- */ .mk-oa .mk-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .mk-oa .mk-who > * { min-width: 0; } .mk-oa .mk-wcard { border-radius: 14px; padding: 14px 16px; font-size: 14px; } .mk-oa .mk-wcard.is-auth { background: var(--mk-sub-deep); color: #e3f1ec; } .mk-oa .mk-wcard.is-auth strong { color: #fff; } .mk-oa .mk-wcard.is-pub { background: #fff; border: 1.5px solid var(--mk-line); color: var(--mk-muted); } .mk-oa .mk-wcard > .mk-ic { display: block; width: 24px; height: 24px; margin-bottom: 8px; } .mk-oa .mk-wcard.is-auth > .mk-ic { color: #9fd3c2; } .mk-oa .mk-wcard.is-pub > .mk-ic { color: var(--mk-sub); } .mk-oa .mk-wcard strong { display: block; font-size: 16px; margin-bottom: 4px; color: var(--mk-ink); } /* ---------- Attribution template ---------- */ .mk-oa .mk-tpl { margin-top: 4px; border-radius: 12px; border: 1.5px solid var(--mk-line); background: #fff; overflow: hidden; } .mk-oa .mk-tpl-head { padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--mk-ink); background: #f4f7f6; border-bottom: 1.5px solid var(--mk-line); } .mk-oa .mk-tpl-body { margin: 12px 14px; padding: 10px 14px; border-left: 4px solid var(--mk-sub); border-radius: 0 8px 8px 0; background: #fbfcfc; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.65; color: var(--mk-ink); user-select: all; } .mk-oa .mk-slot { font-family: Consolas, "Courier New", monospace; font-size: 13px; padding: 1px 6px; border-radius: 5px; background: var(--mk-pub-soft); color: var(--mk-pub-deep); border: 1px dashed #e6bb8c; } .mk-oa .mk-tpl-foot { padding: 0 16px 12px; font-size: 13px; color: var(--mk-muted); } .mk-oa .mk-note.is-green { background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-oa .mk-note.is-green > .mk-ic { color: var(--mk-sub); } .mk-oa .mk-note.is-green a { color: var(--mk-sub-deep); } /* ========================================================== Media Konservasi: grouped sidebar menu Paste into the Custom Header. All rules are scoped to .mk-sb. ========================================================== */ .mk-sb { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #d9e5e0; --mk-sub: #1f6f5c; --mk-sub-deep: #124a3d; --mk-sub-soft: #e6f2ee; font-size: 14px; line-height: 1.35; } .mk-sb, .mk-sb * { box-sizing: border-box; } .mk-sb .mk-sb-g { padding: 10px 0; border-top: 1px solid var(--mk-line); } .mk-sb .mk-sb-g:first-child { padding-top: 0; border-top: 0; } .mk-sb p.mk-sb-h { margin: 0 0 4px; padding: 0 8px; font-size: 12.5px; font-weight: 700; color: var(--mk-sub-deep); } .mk-sb p.menu_item, #customblock-sidebarmenu .mk-sb p.menu_item, #customblock-SidebarMenu .mk-sb p.menu_item { margin: 0; padding: 0; border: 0; font-size: inherit; } /* The theme adds a shift, shadow and gradient on hover to sidebar items; the group layout uses its own hover instead. */ #customblock-sidebarmenu .mk-sb p.menu_item:hover, #customblock-SidebarMenu .mk-sb p.menu_item:hover { margin: 0; box-shadow: none; background: none; } .mk-sb p.menu_item a { display: flex; align-items: flex-start; gap: 9px; min-height: 34px; padding: 7px 8px; border-radius: 7px; color: var(--mk-ink); text-decoration: none; } .mk-sb p.menu_item a:hover { background: var(--mk-sub-soft); color: var(--mk-sub-deep); } .mk-sb p.menu_item a:focus-visible { outline: 2px solid var(--mk-sub); outline-offset: 1px; } .mk-sb p.menu_item a .fa { flex: 0 0 16px; width: 16px; margin-top: 2px; text-align: center; font-size: 14px; color: var(--mk-sub); } .mk-sb .mk-sb-t { flex: 1; min-width: 0; overflow-wrap: anywhere; } .mk-sb p.mk-sb-stat { padding-top: 8px; border-top: 1px solid var(--mk-line); } .mk-sb p.mk-sb-stat a { color: var(--mk-muted); font-size: 13px; } @media (hover: none) { .mk-sb p.menu_item a { min-height: 44px; align-items: center; } .mk-sb p.menu_item a .fa { margin-top: 0; } } /* ========================================================== Media Konservasi homepage: section order OJS prints the homepage as Journal Summary, Additional Content, Announcements, Current Issue. This shows the current issue right after the journal details instead. ========================================================== */ .page_index_journal { display: flex; flex-direction: column; } .page_index_journal > * { min-width: 0; } .page_index_journal > .journal-description { order: 1; } .page_index_journal > .issue_tab { order: 2; margin-top: 8px; margin-bottom: 8px; } .page_index_journal > .additional_content { order: 3; } .page_index_journal > .cmp_announcements { order: 4; } /* "Read more" link under the short About text */ .ojs-card p.ojs-prose { text-align: left; } .ojs-card p.ojs-more { margin: 10px 0 0; font-size: 14px; font-weight: 600; } .ojs-card p.ojs-more a { text-decoration: underline; text-underline-offset: 2px; } /* ########################################################## 3. Article page (pairs with the article script in the Custom Header) ########################################################## */ /* ========================================================== Media Konservasi: article page (/article/view/) Works with the script mk-article.js (also in the Custom Header). The script moves the theme's own elements and adds the class body.mka-art; every rule below is scoped to that class, so the theme's default page stays intact if the script does not run. Layout: full-width hero (title, authors, DOI, Crossmark, dates), then main column (graphical abstract, abstract, keywords, cited by, related articles) | sidebar (share, download, read PDF / Mendeley, how to cite, metrics, license). ========================================================== */ :root { --mka-primary: #1f6f5c; --mka-ink: #124a3d; --mka-text: #16302b; --mka-body: #33463f; --mka-muted: #4f6660; --mka-accent: #b5651d; --mka-soft: #e6f2ee; --mka-line: #dfe9e5; --mka-link: #1f6f5c; --mka-link-hover: #124a3d; --mka-head: #124a3d; --mka-meta: #4f6660; --mka-font: inherit; --mka-heading: inherit; --mka-fa: 'FontAwesome'; } @font-face { font-family: 'MKA FA6 Brands'; src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; } body.mka-art { --mka-art-side: 32%; --mka-orcid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 8 496 496'%3E%3Cpath fill='%23a6ce39' d='M294.75 188.19h-45.92V342h47.47c67.62 0 83.12-51.34 83.12-76.91 0-41.64-26.54-76.9-84.67-76.9zM256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm-80.79 360.76h-29.84v-207.5h29.84zm-14.92-231.14a19.57 19.57 0 1 1 19.57-19.57 19.64 19.64 0 0 1-19.57 19.57zM300 369h-81V161.26h80.6c76.73 0 110.44 54.83 110.44 103.85C410 318.39 368.38 369 300 369z'/%3E%3C/svg%3E"); } /* ---------- Dasar (berlaku juga bila skrip tidak berjalan) ---------- Dipindah dari Custom Header: logo Crossref kecil rata kiri, logo per sitasi disembunyikan, judul "Artikel Terkait" di atas keterangannya. */ .citations-count { text-align: left !important; } .citations-count img { width: 80px !important; max-width: 80px !important; height: auto !important; } .citations-count-crossref[style*="block"] { display: flex !important; align-items: center; gap: 6px; } .citations-list .cite-img { display: none !important; } #related_articles { display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 30px !important; } #related_articles .title { order: 1; } #related_articles .pull-right { order: 2; float: none !important; margin-top: 0; } #related_articles .pull-right small { font-size: 13px !important; color: var(--mka-muted) !important; } /* ---------- Kerangka: hero di atas, lalu konten | sidebar ---------- */ .mka-art .mka-art-top { padding: 0 15px 28px 20px; } @media (min-width: 992px) { .mka-art .mka-art-top { clear: both; } .mka-art .pkp_structure_content > main.pkp_structure_main { width: calc(100% - var(--mka-art-side)); } .mka-art .pkp_structure_content > aside#right { width: var(--mka-art-side); padding-left: 32px !important; padding-right: 15px !important; } } .mka-art .mka-art-top .cmp_breadcrumbs { margin: 0 0 14px; } .mka-art .mka-art-top .breadcrumb { margin: 0; padding: 0; background: none; font-size: 14px; } /* Animasi bawaan tema (animated fadeInUp) menggeser elemen yang dipindah: matikan */ .mka-art .mka-hero .animated, .mka-art .page_article .animated { opacity: 1 !important; transform: none !important; animation: none !important; visibility: visible !important; } /* ---------- Hero ---------- */ .mka-art .mka-hero { position: relative; padding: 26px 28px 24px; border-radius: 14px; background: var(--mka-soft); } .mka-art .jh-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0 0 12px; font-size: 14px; color: var(--mka-body); } .mka-art .jh-eyebrow > *:not(:last-child)::after { content: "·"; margin: 0 9px; color: #9db8ae; font-weight: 400; } .mka-art .jh-eyebrow .jh-type { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mka-primary); } .mka-art .jh-eyebrow .jh-oa { display: inline-flex; align-items: center; font-weight: 700; color: var(--mka-ink); } .mka-art .jh-eyebrow .jh-oa::before { content: ""; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--mka-accent); } .mka-art .jh-eyebrow a { color: var(--mka-body); } .mka-art .jh-eyebrow a:hover { color: var(--mka-link); } /* Judul & penulis: kolom bawaan tema dibuat selebar penuh */ .mka-art .mka-hero header, .mka-art .mka-hero header .article_title, .mka-art .mka-hero .author_section { border: 0 !important; } .mka-art .mka-hero header .article_title { margin: 0; padding: 0 !important; display: block; } .mka-art .mka-hero header .article_title > div, .mka-art .mka-hero header .article_title > div > div { width: 100%; max-width: 100%; flex: none; float: none; padding: 0; } .mka-art .mka-hero h1.page-header { margin: 0 0 14px; padding: 0; border: 0; max-width: 920px; font-family: var(--mka-heading); font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; color: var(--mka-text); text-align: left !important; animation: none; opacity: 1; } .mka-art .mka-hero .author_section { margin: 0 !important; } .mka-art .mka-hero .author_section > .item:first-child { display: flex; flex-wrap: wrap; gap: 6px 18px; } .mka-art .mka-hero span.author { display: inline-flex; align-items: center; gap: 0; margin: 0 !important; font-size: 17px; color: var(--mka-text); } .mka-art .mka-hero span.author sup { top: -0.45em; margin-left: 1px; font-size: 11px; color: var(--mka-primary); } /* ORCID (logo resmi) & email penulis korespondensi: lingkaran 20 px sejajar */ .mka-art .mka-hero a.orcid_link, .mka-art .mka-hero a.mka-au-mail { display: inline-block; flex: none; width: 20px; height: 20px; margin-left: 6px; border-radius: 50%; vertical-align: middle; font-size: 0; line-height: 20px; text-align: center; text-decoration: none; } .mka-art .mka-hero a.orcid_link { background: var(--mka-orcid) center / 100% 100% no-repeat !important; } .mka-art .mka-hero a.orcid_link::before, .mka-art .mka-hero a.orcid_link::after { display: none !important; } .mka-art .mka-hero a.mka-au-mail { background: var(--mka-primary); color: #ffffff; } .mka-art .mka-hero a.mka-au-mail::before { content: "\f0e0"; font-family: var(--mka-fa); font-size: 10px; } .mka-art .mka-hero a.mka-au-mail:hover { background: var(--mka-ink); } .mka-art .mka-hero .author_section > .item.mt-2 { margin-top: 8px !important; font-style: normal !important; font-size: 15px !important; color: var(--mka-body) !important; } .mka-art .mka-hero .doi_dimension, .mka-art .mka-hero .crossmark { display: none; } /* Baris bawah: DOI + Crossmark | tanggal */ .mka-art .jh-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-top: 16px; } .mka-art .jh-ids { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .mka-art .jh-doi { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: #ffffff; color: var(--mka-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; } .mka-art .jh-doi:hover { background: var(--mka-primary); color: #ffffff !important; } .mka-art .jh-ids .crossmark_button { margin: 0 !important; line-height: 0; } .mka-art .jh-ids .crossmark_button img { width: 150px; height: auto; } .mka-art .jh-foot .date-list { display: flex; flex-wrap: wrap; width: auto; max-width: 100%; float: none; margin: 0; padding: 0 !important; } .mka-art .jh-foot .date-list .detail { width: auto; float: none !important; padding: 0 18px; border-left: 1px solid #c6dbd2; } .mka-art .jh-foot .date-list .detail:first-child { padding-left: 0; border-left: 0; } .mka-art .jh-foot .date-list .detail:last-child { padding-right: 0; } .mka-art .jh-foot .date-list br { display: none; } .mka-art .jh-foot .date-list strong { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mka-muted); } .mka-art .jh-foot .date-list .date { display: block; font-family: var(--mka-heading); font-size: 17px; font-weight: 600; line-height: 1.35; white-space: nowrap; color: var(--mka-ink); } /* ---------- Kolom utama ---------- */ .mka-art .article-details > .article_content { display: flex; flex-direction: column; margin: 0; } .mka-art .article-details > .article_content > * { width: 100%; float: none; padding-left: 0; padding-right: 0; } .mka-art .article_content > .tabbed_section { order: 1; margin: 0; } .mka-art .article-details, .mka-art .article-details > .article_content, .mka-art .tabbed_section, .mka-art .tab-content { border: 0 !important; box-shadow: none !important; } .mka-art .article_content > .article-sidebar { order: 2; } .mka-art .article_content > .col-md-12 { order: 3; } /* Abstrak tanpa tab */ .mka-art .tabbed_section .article_content, .mka-art .tabbable-panel, .mka-art .tabbable-line { width: 100%; margin: 0 !important; padding: 0 !important; } .mka-art .tabbable-line > .nav-tabs, .mka-art .tab-content > .tab-pane:not(#abstract) { display: none !important; } .mka-art .tab-content > #abstract { display: block !important; opacity: 1 !important; } .mka-art #abstract h2 { margin: 0 0 12px; font-family: var(--mka-heading); font-size: 21px; font-weight: 600; color: var(--mka-text); animation: none; opacity: 1; } .mka-art .article-abstract, .mka-art .article-abstract p, .mka-art .article-abstract em { font-size: 17.5px; font-style: normal; line-height: 1.75; color: var(--mka-body); text-align: left !important; } /* Kata kunci */ .mka-art .article-sidebar { margin-top: 24px; } .mka-art .article-sidebar .list-group { width: 100%; padding: 0 !important; } .mka-art .article-sidebar .row.mb-4, .mka-art .article-sidebar .download { display: none; } .mka-art .article-sidebar .keywords { padding-top: 0 !important; } .mka-art .article-sidebar .keywords > strong { font-size: 0; } .mka-art .article-sidebar .keywords > strong::before { content: "Keywords"; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mka-muted); } .mka-art ul.list_of_keyword { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 !important; padding: 0 !important; list-style: none; } .mka-art ul.list_of_keyword > li { margin: 0; padding: 0; border: 0; background: none; } .mka-art ul.list_of_keyword > li > a { display: inline-flex; padding: 6px 13px; border-radius: 999px; background: var(--mka-soft); color: var(--mka-ink) !important; font-size: 14.5px; font-weight: 600; text-decoration: none !important; } .mka-art ul.list_of_keyword > li > a:hover { background: var(--mka-primary); color: #ffffff !important; } /* Cited by (Crossref): logo & angka pindah ke Metrics */ .mka-art .article-more-details { margin-top: 32px; } .mka-art #citation-plugin { max-height: none !important; overflow: visible !important; } .mka-art #citation-plugin .citations-count { display: none; } /* Judul seksi skema C: teal tua, 24px, label kecil di atasnya */ .mka-art .mka-citedby-title, .mka-art #related_articles .title, .mka-art #articlesBySameAuthorList h3, .mka-art #abstract h2 { margin: 0 0 4px; font-family: var(--mka-heading); font-size: 24px !important; font-weight: 600; line-height: 1.3; color: var(--mka-head) !important; } .mka-art .mka-citedby-title::before, .mka-art #related_articles .title::before, .mka-art #articlesBySameAuthorList h3::before { display: block; margin-bottom: 2px; font-family: var(--mka-font); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mka-muted); } .mka-art .mka-citedby-title::before { content: "Citations"; } .mka-art #related_articles .title::before { content: "Further reading"; } .mka-art #articlesBySameAuthorList h3::before { content: "Same authors"; } .mka-art .mka-citedby-title span { font-size: 15px; font-weight: 500; color: var(--mka-muted); } .mka-art #citation-plugin.mka-cite-empty { display: none; } /* Progressive loading: hanya bagian bergantung Crossref/Dimensions yang menunggu */ .mka-art .mka-skel { display: none; } .mka-art #citation-plugin.mka-cite-loading .mka-skel { display: block; } .mka-art #citation-plugin.mka-cite-loading .citations-list { display: none; } .mka-art .mka-skel-status { margin: 4px 0 6px; font-size: 14px; color: var(--mka-muted); } .mka-art .mka-skel .sk-item { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--mka-line); } .mka-art .sk, .mka-art .mka-metrics-grid .jm.is-loading > b::before { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #e1ece7 0%, #f3f8f6 40%, #e1ece7 80%); background-size: 200% 100%; animation: mka-shimmer 1.4s linear infinite; } .mka-art .sk-t { width: 92%; height: 16px; } .mka-art .sk-t2 { width: 64%; height: 16px; } .mka-art .sk-m { width: 40%; } .mka-art .mka-metrics-grid .jm.is-loading > b::before { content: ""; width: 44px; height: 20px; margin: 1px 0; } @keyframes mka-shimmer { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .mka-art .sk, .mka-art .mka-metrics-grid .jm.is-loading > b::before { animation: none; } } .mka-art #citation-plugin #citations-loader { display: none !important; } .mka-art .citations-list .cite-itm:not(.cite-prototype) { display: flex !important; /* plugin menulis display:block inline */ flex-direction: column; gap: 4px; margin: 0; padding: 16px 0; border-top: 1px solid var(--mka-line); } .mka-art .citations-list .cite-itm .cite-img { display: none; } .mka-art .citations-list .cite-itm > div { display: flex; flex-direction: column; gap: 4px; } .mka-art .citations-list .cite-title strong { font-family: var(--mka-heading); font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--mka-text); } .mka-art .citations-list .cite-author, .mka-art .citations-list .cite-date, .mka-art .citations-list .cite-info { font-size: 15px; color: var(--mka-muted); } .mka-art .citations-list .cite-itm > div:first-of-type { order: 2; flex-direction: row; flex-wrap: wrap; gap: 0 6px; } .mka-art .citations-list .cite-itm > div:nth-of-type(2) { order: 1; } .mka-art .citations-list .cite-doi { order: 3; font-size: 14px; } /* Lebih dari 3 sitasi: tampilkan 3, sisanya lewat tombol */ .mka-art #citation-plugin.mka-cite-many:not(.mka-cite-open) .cite-itm:not(.cite-prototype):nth-of-type(n+5) { display: none; } .mka-art .mka-cite-more { display: none; } .mka-art #citation-plugin.mka-cite-many .mka-cite-more { display: inline-flex; margin-top: 8px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--mka-soft); color: var(--mka-ink); font-size: 14px; font-weight: 700; cursor: pointer; } /* Artikel terkait & artikel lain penulis */ .mka-art #related_articles { margin: 40px 0 4px !important; } .mka-art #related_articles span { position: static; animation: none; opacity: 1; float: none !important; } .mka-art #related_articles small { font-family: var(--mka-font); font-size: 13px; color: var(--mka-muted); } .mka-art .article-summary.media { margin: 0; padding: 16px 0; border-top: 1px solid var(--mka-line); } .mka-art .article-summary .media-heading { text-align: left !important; } .mka-art .article-summary .media-heading a { font-family: var(--mka-heading); font-size: 16.5px; font-weight: 600; line-height: 1.45; color: var(--mka-link) !important; } .mka-art .article-summary .media-heading a:hover { color: var(--mka-link-hover) !important; } .mka-art #articlesBySameAuthorList { margin-top: 40px; } /* Most read by the same author(s): penulis abu, judul tebal bergaris lime, terbitan teal kecil */ #articlesBySameAuthorList ul { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 0; padding-left: 18px; } #articlesBySameAuthorList li { font-size: 15.5px; line-height: 1.6; color: var(--mka-meta); } #articlesBySameAuthorList li > a:first-of-type { font-weight: 600; color: var(--mka-link) !important; } #articlesBySameAuthorList li > a:hover { color: var(--mka-link-hover) !important; } #articlesBySameAuthorList li > a:last-of-type:not(:first-of-type) { font-size: 14.5px; font-weight: 400; color: var(--mka-meta) !important; } /* Topic and region categories above the title */ .mka-art .mka-hero small.categories { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .mka-art .mka-hero small.categories a { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #ffffff !important; color: var(--mka-ink) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; } .mka-art .mka-hero small.categories a:hover { background: var(--mka-primary) !important; color: #ffffff !important; } /* Graphical abstract (cover image) sits between the abstract and the keywords */ .mka-art .article-sidebar .cover-image { margin: 28px 0 8px; } .mka-art .article-sidebar .cover-image::before { content: "Graphical abstract"; display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--mka-muted); } .mka-art .article-sidebar .cover-image img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--mka-line); } /* ---------- Sidebar ---------- */ .mka-art aside#right > .article_sidebar_stat, .mka-art aside#right > #share_article { display: none; } .mka-art .mka-side { display: flex; flex-direction: column; gap: 16px; } .mka-art .mka-side-a { margin-bottom: 16px; } .mka-art .mka-side-b { margin-bottom: 28px; } .mka-art .mka-lbl { margin: 0; font-family: var(--mka-heading); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--mka-muted); } .mka-art .mka-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 12px; background: #f5faf8; } /* Share */ /* Satu baris (label kiri, ikon kanan); turun ke dua baris hanya bila ruang tidak cukup */ .mka-art .mka-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; } .mka-art .mka-share-icons { display: flex; flex-wrap: wrap; gap: 4px; } .mka-art .mka-sh { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; background: var(--mka-soft); color: var(--mka-primary) !important; font-size: 14px; line-height: 1; text-decoration: none !important; } .mka-art .mka-sh::before { font-family: 'MKA FA6 Brands'; font-weight: 400; } .mka-art .mka-sh-email::before { font-family: var(--mka-fa); content: "\f003"; } .mka-art .mka-sh-whatsapp::before { content: "\f232"; } .mka-art .mka-sh-facebook::before { content: "\f39e"; } .mka-art .mka-sh-x::before { content: "\e61b"; } .mka-art .mka-sh-linkedin::before { content: "\f0e1"; } .mka-art .mka-sh-telegram::before { content: "\f2c6"; } .mka-art .mka-sh-reddit::before { content: "\f281"; } .mka-art .mka-sh-threads::before { content: "\e618"; } .mka-art .mka-sh:hover { background: var(--mka-primary); color: #ffffff !important; } /* Download · Read PDF · Mendeley */ .mka-art .mka-actions { display: flex; flex-direction: column; gap: 8px; } .mka-art .mka-actions-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mka-art .mka-actions a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border-radius: 10px; background: var(--mka-soft); color: var(--mka-ink) !important; font-family: var(--mka-heading); font-size: 14.5px; font-weight: 600; text-align: center; text-decoration: none !important; } .mka-art .mka-actions a.mka-btn-dl { min-height: 52px; background: var(--mka-primary); color: #ffffff !important; font-size: 16px; } .mka-art .mka-actions a::before { font-family: var(--mka-fa); font-weight: normal; } .mka-art .mka-actions a.mka-btn-dl::before { content: "\f019"; } .mka-art .mka-actions a.mka-btn-read::before { content: "\f02d"; } .mka-art .mka-actions a.mka-btn-mendeley::before { font-family: 'MKA FA6 Brands'; content: "\f7b3"; color: #a50f15; font-size: 17px; } .mka-art .mka-actions a:hover { background: var(--mka-ink); color: #ffffff !important; } .mka-art .mka-actions a:hover::before { color: inherit; } /* How to cite: format sitasi sebagai chip */ .mka-art .mka-cite .how-to-cite { margin: 0; border: 0; box-shadow: none; background: none; } .mka-art .mka-cite .panel-body { padding: 0; } .mka-art .mka-cite #citationOutput, .mka-art .mka-cite .csl-bib-body { font-size: 15px; line-height: 1.55; color: var(--mka-body); text-align: left !important; overflow-wrap: anywhere; } .mka-art .mka-cite .csl-entry { padding: 0; margin: 0; text-indent: 0 !important; } .mka-art .mka-cite .citation_display { display: block; float: none; margin-top: 12px; } .mka-art .mka-cite .citation_display > .dropdown-toggle { display: none; } .mka-art .mka-cite .citation_display > .dropdown-menu { position: static; display: flex !important; flex-wrap: wrap; gap: 6px; float: none; min-width: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: none; } .mka-art .mka-cite .citation_display > .dropdown-menu > li > a, .mka-art .mka-cite .download_citation a { display: inline-flex; padding: 4px 10px; border-radius: 6px; background: #ffffff; color: var(--mka-ink) !important; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none !important; } .mka-art .mka-cite .citation_display > .dropdown-menu > li > a:hover, .mka-art .mka-cite .citation_display > .dropdown-menu > li > a:focus, .mka-art .mka-cite .download_citation a:hover, .mka-art .mka-cite .download_citation a:focus { background: var(--mka-primary) !important; color: #ffffff !important; } /* Format terpilih: tetap menyala (bawaan IEEE). Bootstrap memberi warna teks gelap pada :focus/:active di Chrome: ditimpa agar teks selalu putih. */ .mka-art .mka-cite .citation_display > .dropdown-menu > li > a.mka-on, .mka-art .mka-cite .citation_display > .dropdown-menu > li > a.mka-on:hover, .mka-art .mka-cite .citation_display > .dropdown-menu > li > a.mka-on:focus, .mka-art .mka-cite .citation_display > .dropdown-menu > li > a:active { background: var(--mka-ink) !important; color: #ffffff !important; outline: none; } .mka-art .mka-cite .citation_display > .dropdown-menu > li > a:focus-visible { outline: 2px solid var(--mka-accent); outline-offset: 2px; } .mka-art .mka-cite #citationOutput { transition: opacity .15s; } .mka-art .mka-cite .csl-left-margin { display: inline; margin-right: 4px; } .mka-art .mka-cite .csl-right-inline { display: inline; } .mka-art .mka-cite .download_citation { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mka-line); } .mka-art .mka-cite .citation_download { margin: 0 !important; font-size: 13px; color: var(--mka-muted); } .mka-art .mka-cite .citation_download svg { display: none; } /* Metrics 2×2 */ .mka-art .mka-metrics { padding: 0; background: none; } .mka-art .mka-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mka-art .mka-metrics-grid .jm { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 66px; padding: 12px; border-radius: 10px; background: var(--mka-soft); text-decoration: none !important; } .mka-art .mka-metrics-grid .jm > b { font-family: var(--mka-heading); font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--mka-ink); } .mka-art .mka-metrics-grid .jm > span { font-size: 13px; color: var(--mka-muted); } .mka-art .mka-metrics-grid .jm-logo img { display: block; width: 64px; height: auto; } .mka-art .mka-metrics-grid .jm-dim-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--mka-body) !important; } .mka-art .mka-metrics-grid .jm-dim-label::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#ee6c4d 0 25%, #f2c14e 0 50%, #59a96a 0 75%, #3d84c6 0); -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4.5px); mask: radial-gradient(circle, transparent 3.5px, #000 4.5px); } /* Lencana asli Dimensions tetap dimuat (sumber angka) tetapi disembunyikan */ .mka-art .mka-metrics-grid .__dimensions_badge_embed__ { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* License */ .mka-art .mka-license p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mka-body); text-align: left !important; } .mka-art .mka-license .mka-rights { font-weight: 700; color: var(--mka-text); } .mka-art .mka-license .mka-cc { align-self: flex-start; line-height: 0; } /* Publication Facts: label standar PKP dibiarkan apa adanya */ .mka-art .mka-side .pflPlugin { margin: 0; } /* ---------- Ponsel & tablet ---------- */ @media (max-width: 991px) { /* Medkon has no flex layout here: let the sidebar's two groups join the page flow, so Share and Download come right after the hero and the rest after the article. */ .mka-art .pkp_structure_content { display: flex !important; flex-direction: column; } .mka-art .pkp_structure_content > * { width: 100%; float: none; } .mka-art .pkp_structure_content > aside#right { display: contents; } .mka-art .pkp_structure_content > aside#right > * { order: 5; } .mka-art .pkp_structure_content > aside#right > .mka-side-a { order: 1; } .mka-art .pkp_structure_content > aside#right > .mka-side-b { order: 4; } .mka-art .pkp_structure_content.container { padding-left: 16px !important; padding-right: 16px !important; } .mka-art .mka-art-top { order: 0; padding: 0 0 20px; } .mka-art .mka-side-a { order: 1; margin-bottom: 24px; } .mka-art .pkp_structure_content > main.pkp_structure_main { order: 3; } .mka-art .mka-side-b { order: 4; } .mka-art .mka-hero { padding: 20px 18px; } .mka-art .mka-hero h1.page-header { font-size: 23px; } .mka-art .mka-hero span.author { font-size: 16px; } .mka-art .jh-foot .date-list .detail { padding: 0 12px; } .mka-art .jh-foot .date-list .date { font-size: 15px; } } /* ########################################################## 4. Sidebar block titles ########################################################## */ /* ========================================================== Media Konservasi: sidebar block titles (option A) Titles stay inside the white block as dark green text with a small pin and a thin rule, instead of a solid green band. The pin repeats the marker shape used on the homepage map. Covers both kinds of titles the theme prints: - plugin blocks:

or - custom blocks:

inside .content Screen-reader-only titles (.pkp_screen_reader) are left hidden. ========================================================== */ .pkp_structure_content .pkp_block > h2.title:not(.pkp_screen_reader), .pkp_structure_content .pkp_block > span.title, .pkp_structure_content .pkp_block > .content > p > span.title { display: flex !important; align-items: center; gap: 9px; padding: 14px 15px 10px !important; border: 0 !important; border-bottom: 1px solid #dfe9e5 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #124a3d !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: none !important; } .pkp_structure_content .pkp_block > h2.title:not(.pkp_screen_reader)::before, .pkp_structure_content .pkp_block > span.title::before, .pkp_structure_content .pkp_block > .content > p > span.title::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #1f6f5c; box-shadow: 0 0 0 3px #e6f2ee; } .pkp_structure_content .pkp_block .title a { color: inherit !important; } /* ########################################################## 5. Contact page ########################################################## */ /* ========================================================== Media Konservasi: Contact page (/contact-us) All rules are scoped to .mk-ct. Icons are SVG data URIs (Lucide icon set, ISC licence); icons carry a   so the OJS editor (TinyMCE) keeps them. ========================================================== */ .mk-ct { --mk-ink: #16302b; --mk-muted: #4f6660; --mk-line: #d5e3dd; --mk-sub: #1f6f5c; --mk-sub-soft: #e6f2ee; --mk-sub-deep: #124a3d; color: var(--mk-ink); font-size: 15px; line-height: 1.6; text-align: left; container-type: inline-size; } .mk-ct *, .mk-ct *::before, .mk-ct *::after { box-sizing: border-box; } .mk-ct p { margin: 0; text-align: left; } .mk-ct a { color: var(--mk-sub); font-weight: 600; overflow-wrap: anywhere; } .mk-ct a:hover { color: var(--mk-sub-deep); } .mk-ct .mk-t { display: block; min-width: 0; } /* Icons */ .mk-ct .mk-ic { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; font-size: 0; line-height: 0; overflow: hidden; } .mk-ct .mk-i-mail { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect width=%2220%22 height=%2216%22 x=%222%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22/%3E%3C/svg%3E"); } .mk-ct .mk-i-phone { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z%22/%3E%3C/svg%3E"); } .mk-ct .mk-i-send { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m22 2-7 20-4-9-9-4Z%22/%3E%3Cpath d=%22M22 2 11 13%22/%3E%3C/svg%3E"); } .mk-ct .mk-i-pin { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E"); } .mk-ct .mk-i-building { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z%22/%3E%3Cpath d=%22M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2%22/%3E%3Cpath d=%22M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2%22/%3E%3Cpath d=%22M10 6h4%22/%3E%3Cpath d=%22M10 10h4%22/%3E%3Cpath d=%22M10 14h4%22/%3E%3Cpath d=%22M10 18h4%22/%3E%3C/svg%3E"); } .mk-ct .mk-i-user { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E"); } .mk-ct .mk-i-info { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E"); } .mk-ct .mk-i-book { --mk-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20%22/%3E%3C/svg%3E"); } /* Intro */ .mk-ct .mk-lead { max-width: 62ch; margin-bottom: 16px; color: var(--mk-muted); font-size: 16px; } /* Quick contact: three ways to reach the office */ .mk-ct .mk-quick { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; } @container (min-width: 760px) { .mk-ct .mk-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mk-ct .mk-quick > a { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff; color: var(--mk-ink); font-weight: 400; text-decoration: none; } .mk-ct .mk-quick > a:hover { border-color: var(--mk-sub); background: var(--mk-sub-soft); } .mk-ct .mk-quick > a:focus-visible { outline: 2px solid var(--mk-sub); outline-offset: 2px; } .mk-ct .mk-quick .mk-ic { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background-color: var(--mk-sub-soft); -webkit-mask: none; mask: none; position: relative; } .mk-ct .mk-quick .mk-ic::after { content: ""; position: absolute; inset: 9px; background-color: var(--mk-sub); -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat; } .mk-ct .mk-quick strong { display: block; font-size: 15px; color: var(--mk-sub-deep); } .mk-ct .mk-quick .mk-val { display: block; font-weight: 600; color: var(--mk-sub); overflow-wrap: anywhere; } .mk-ct .mk-quick small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--mk-muted); } /* Office and people */ .mk-ct .mk-cols { display: grid; grid-template-columns: 1fr; gap: 12px; } @container (min-width: 560px) { .mk-ct .mk-cols { grid-template-columns: 1.2fr 1fr; } } .mk-ct .mk-card { min-width: 0; padding: 16px 18px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff; } .mk-ct .mk-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mk-muted); } .mk-ct .mk-card h3 .mk-ic { width: 16px; height: 16px; color: var(--mk-sub); } .mk-ct .mk-name { font-size: 16px; font-weight: 700; color: var(--mk-ink); } .mk-ct .mk-role { margin-top: 2px; color: var(--mk-muted); font-size: 14px; } .mk-ct .mk-lines { margin-top: 12px; display: grid; gap: 8px; } .mk-ct .mk-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .mk-ct .mk-line .mk-ic { width: 17px; height: 17px; margin-top: 3px; color: var(--mk-sub); } /* Note */ .mk-ct .mk-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--mk-sub-soft); color: var(--mk-sub-deep); font-size: 14.5px; } .mk-ct .mk-note .mk-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--mk-sub); } /* ########################################################## 6. Current issue cover on the homepage ########################################################## */ /* ========================================================== Media Konservasi: current issue cover on the homepage Shared base (.mk-cv) plus three layouts: .is-masthead cover beside the journal name on a tropical backdrop (replaces .ojs-jhead) .is-banner soft green strip just before the Current Issue list .is-inside cover as a column inside the Journal details card ========================================================== */ .mk-cv { --cv-ink: #16302b; --cv-muted: #4f6660; --cv-line: #dfe9e5; --cv-sub: #1f6f5c; --cv-deep: #124a3d; --cv-soft: #e6f2ee; color: var(--cv-ink); text-align: left; } .mk-cv *, .mk-cv *::before, .mk-cv *::after { box-sizing: border-box; } .mk-cv p { margin: 0; text-align: left; } .mk-cv .mk-cv-img { display: block; flex: 0 0 auto; line-height: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 8px 20px -10px rgba(18,74,61,.45); transition: transform .2s; } .mk-cv .mk-cv-img:hover { transform: translateY(-2px); } .mk-cv .mk-cv-img img { display: block; width: 100%; height: auto; max-width: none; } .mk-cv .mk-cv-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .mk-cv .mk-cv-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cv-muted); } .mk-cv .mk-cv-issue { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--cv-deep); } .mk-cv .mk-cv-meta { font-size: 14px; color: var(--cv-muted); } .mk-cv .mk-cv-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .mk-cv a.mk-cv-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--cv-sub); color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; } .mk-cv a.mk-cv-btn:hover { background: var(--cv-deep); } .mk-cv a.mk-cv-btn.is-ghost { background: #fff; color: var(--cv-deep) !important; box-shadow: inset 0 0 0 1.5px var(--cv-line); } .mk-cv a.mk-cv-btn.is-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cv-sub); } .mk-cv a:focus-visible { outline: 2px solid var(--cv-sub); outline-offset: 2px; } /* A. Masthead: cover + journal name, badges and current issue, (the backdrop moves gently: fronds sway, mist drifts, a bird crosses; visitors who ask for reduced motion get the still version) on a tropical backdrop (layered forest hills, palm fronds and monstera leaves, drawn as one SVG). The art sits on the right and fades out towards the left, so the text always stays on a light ground. */ .mk-cv.is-masthead { display: flex; gap: 22px; align-items: center; margin-bottom: 1.5rem; padding: 20px 22px; border: 1px solid #d6e8de; border-radius: 16px; background: #f4faf6 var(--cv-tropic) right bottom / auto 100% no-repeat; --cv-tropic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 300%22 preserveAspectRatio=%22xMaxYMax meet%22%3E%3Cstyle%3E%0A.sw%7Btransform-box:view-box%3Banimation:sw 7s ease-in-out infinite alternate%7D%0A.f1%7Banimation-duration:8s%7D.f2%7Banimation-duration:6.5s%3Banimation-delay:-2s%7D.f3%7Banimation-duration:7.5s%3Banimation-delay:-4s%7D%0A.b1%7Banimation-duration:9s%3Banimation-delay:-1s%7D.b2%7Banimation-duration:7s%3Banimation-delay:-3s%7D.b3%7Banimation-duration:10s%3Banimation-delay:-5s%7D.f4%7Banimation-duration:6s%3Banimation-delay:-1.5s%7D%0A%40keyframes sw%7Bfrom%7Btransform:rotate(-2.2deg)%7Dto%7Btransform:rotate(2.2deg)%7D%7D%0A.sun%7Banimation:glow 9s ease-in-out infinite alternate%3Btransform-box:view-box%3Btransform-origin:540px 80px%7D%0A%40keyframes glow%7Bfrom%7Bopacity:.45%3Btransform:scale(.96)%7Dto%7Bopacity:.75%3Btransform:scale(1.04)%7D%7D%0A.mist%7Banimation:drift 26s linear infinite%7D%0A%40keyframes drift%7Bfrom%7Btransform:translateX(0)%7Dto%7Btransform:translateX(-320px)%7D%7D%0A.bird%7Banimation:fly 30s linear infinite%7D%0A%40keyframes fly%7B0%25%7Btransform:translate(700px,60px)%7D100%25%7Btransform:translate(280px,20px)%7D%7D%0A.bird path%7Banimation:flap .9s ease-in-out infinite alternate%3Btransform-box:fill-box%3Btransform-origin:center%7D%0A%40keyframes flap%7Bfrom%7Btransform:scaleY(1)%7Dto%7Btransform:scaleY(.45)%7D%7D%0A%40media (prefers-reduced-motion:reduce)%7B.sw,.sun,.mist,.bird,.bird path%7Banimation:none%7D.bird%7Bdisplay:none%7D%7D%0A%3C/style%3E%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23f4faf6%22/%3E%3Cstop offset=%22.42%22 stop-color=%22%23f4faf6%22 stop-opacity=%22.9%22/%3E%3Cstop offset=%22.62%22 stop-color=%22%23f4faf6%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22m%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle class=%22sun%22 cx=%22540%22 cy=%2280%22 r=%2248%22 fill=%22%23fbf1d2%22 opacity=%22.6%22/%3E%3Cg class=%22bird%22%3E%3Cpath d=%22M0 6 Q6 0 12 6 Q18 0 24 6%22 stroke=%22%235f8f78%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cpath d=%22M0 300 L0 215 C90 200 150 212 220 192 C310 168 370 196 440 176 C510 156 570 172 640 150 L640 300Z%22 fill=%22%23d7ecdf%22/%3E%3Cg class=%22mist%22%3E%3Crect x=%22320%22 y=%22196%22 width=%22320%22 height=%2226%22 rx=%2213%22 fill=%22url(%23m)%22/%3E%3Crect x=%22640%22 y=%22196%22 width=%22320%22 height=%2226%22 rx=%2213%22 fill=%22url(%23m)%22/%3E%3C/g%3E%3Cpath d=%22M0 300 L0 246 C90 232 170 244 250 228 C340 210 420 234 500 214 C560 200 600 206 640 196 L640 300Z%22 fill=%22%23bfe0cb%22/%3E%3Cpath d=%22M300 300 C370 270 440 276 500 256 C560 238 610 242 640 234 L640 300Z%22 fill=%22%23a3d0b4%22/%3E%3Cg class=%22sw f1%22 style=%22transform-origin:585px 300px%22%3E%3Cpath d=%22M585.0 300.0 Q574.5 216.5 564.1 101.1%22 stroke=%22%236aae8a%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22598.5%22 cy=%22268.3%22 rx=%2220.3%22 ry=%226.1%22 transform=%22rotate(-38.9 598.5 268.3)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22564.3%22 cy=%22272.4%22 rx=%2220.3%22 ry=%226.1%22 transform=%22rotate(-154.9 564.3 272.4)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22597.1%22 cy=%22258.8%22 rx=%2220.0%22 ry=%226.0%22 transform=%22rotate(-38.7 597.1 258.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22563.4%22 cy=%22262.7%22 rx=%2220.0%22 ry=%226.0%22 transform=%22rotate(-154.7 563.4 262.7)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22596.5%22 cy=%22248.4%22 rx=%2220.7%22 ry=%226.2%22 transform=%22rotate(-38.6 596.5 248.4)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22561.7%22 cy=%22252.5%22 rx=%2220.7%22 ry=%226.2%22 transform=%22rotate(-154.6 561.7 252.5)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22593.5%22 cy=%22239.8%22 rx=%2218.2%22 ry=%225.5%22 transform=%22rotate(-38.5 593.5 239.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22562.8%22 cy=%22243.3%22 rx=%2218.2%22 ry=%225.5%22 transform=%22rotate(-154.5 562.8 243.3)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22591.9%22 cy=%22229.9%22 rx=%2217.6%22 ry=%225.3%22 transform=%22rotate(-38.3 591.9 229.9)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22562.1%22 cy=%22233.2%22 rx=%2217.6%22 ry=%225.3%22 transform=%22rotate(-154.3 562.1 233.2)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22590.4%22 cy=%22219.6%22 rx=%2217.2%22 ry=%225.1%22 transform=%22rotate(-38.2 590.4 219.6)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22561.4%22 cy=%22222.8%22 rx=%2217.2%22 ry=%225.1%22 transform=%22rotate(-154.2 561.4 222.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22587.6%22 cy=%22210.2%22 rx=%2215.1%22 ry=%224.5%22 transform=%22rotate(-38.1 587.6 210.2)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22562.1%22 cy=%22212.9%22 rx=%2215.1%22 ry=%224.5%22 transform=%22rotate(-154.1 562.1 212.9)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22586.7%22 cy=%22199.0%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-38.0 586.7 199.0)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22560.7%22 cy=%22201.8%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-154.0 560.7 201.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22585.3%22 cy=%22188.2%22 rx=%2215.0%22 ry=%224.5%22 transform=%22rotate(-37.9 585.3 188.2)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22559.9%22 cy=%22190.8%22 rx=%2215.0%22 ry=%224.5%22 transform=%22rotate(-153.9 559.9 190.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22583.9%22 cy=%22177.0%22 rx=%2214.7%22 ry=%224.4%22 transform=%22rotate(-37.8 583.9 177.0)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22559.0%22 cy=%22179.5%22 rx=%2214.7%22 ry=%224.4%22 transform=%22rotate(-153.8 559.0 179.5)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22580.7%22 cy=%22167.1%22 rx=%2212.1%22 ry=%223.6%22 transform=%22rotate(-37.7 580.7 167.1)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22560.2%22 cy=%22169.1%22 rx=%2212.1%22 ry=%223.6%22 transform=%22rotate(-153.7 560.2 169.1)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22579.4%22 cy=%22155.5%22 rx=%2212.0%22 ry=%223.6%22 transform=%22rotate(-37.6 579.4 155.5)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22559.2%22 cy=%22157.4%22 rx=%2212.0%22 ry=%223.6%22 transform=%22rotate(-153.6 559.2 157.4)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22577.3%22 cy=%22144.3%22 rx=%2210.8%22 ry=%223.2%22 transform=%22rotate(-37.5 577.3 144.3)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22559.1%22 cy=%22146.0%22 rx=%2210.8%22 ry=%223.2%22 transform=%22rotate(-153.5 559.1 146.0)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22576.9%22 cy=%22131.6%22 rx=%2211.7%22 ry=%223.5%22 transform=%22rotate(-37.4 576.9 131.6)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22557.1%22 cy=%22133.5%22 rx=%2211.7%22 ry=%223.5%22 transform=%22rotate(-153.4 557.1 133.5)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22574.9%22 cy=%22119.9%22 rx=%2210.7%22 ry=%223.2%22 transform=%22rotate(-37.3 574.9 119.9)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22556.9%22 cy=%22121.6%22 rx=%2210.7%22 ry=%223.2%22 transform=%22rotate(-153.3 556.9 121.6)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22572.1%22 cy=%22108.6%22 rx=%228.7%22 ry=%222.6%22 transform=%22rotate(-37.3 572.1 108.6)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22557.5%22 cy=%22109.9%22 rx=%228.7%22 ry=%222.6%22 transform=%22rotate(-153.3 557.5 109.9)%22 fill=%22%236aae8a%22/%3E%3C/g%3E%3Cg class=%22sw f2%22 style=%22transform-origin:585px 300px%22%3E%3Cpath d=%22M585.0 300.0 Q622.3 250.8 659.5 147.2%22 stroke=%22%237bb997%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22615.6%22 cy=%22287.5%22 rx=%2221.3%22 ry=%226.4%22 transform=%22rotate(1.6 615.6 287.5)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22585.5%22 cy=%22267.4%22 rx=%2221.3%22 ry=%226.4%22 transform=%22rotate(-114.4 585.5 267.4)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22619.3%22 cy=%22279.7%22 rx=%2220.4%22 ry=%226.1%22 transform=%22rotate(0.1 619.3 279.7)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22590.1%22 cy=%22261.3%22 rx=%2220.4%22 ry=%226.1%22 transform=%22rotate(-115.9 590.1 261.3)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22622.0%22 cy=%22271.6%22 rx=%2218.4%22 ry=%225.5%22 transform=%22rotate(-1.3 622.0 271.6)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22595.2%22 cy=%22255.7%22 rx=%2218.4%22 ry=%225.5%22 transform=%22rotate(-117.3 595.2 255.7)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22625.7%22 cy=%22263.1%22 rx=%2217.5%22 ry=%225.2%22 transform=%22rotate(-2.6 625.7 263.1)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22599.9%22 cy=%22248.6%22 rx=%2217.5%22 ry=%225.2%22 transform=%22rotate(-118.6 599.9 248.6)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22628.1%22 cy=%22254.4%22 rx=%2215.2%22 ry=%224.5%22 transform=%22rotate(-3.8 628.1 254.4)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22605.4%22 cy=%22242.3%22 rx=%2215.2%22 ry=%224.5%22 transform=%22rotate(-119.8 605.4 242.3)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22631.5%22 cy=%22245.3%22 rx=%2214.0%22 ry=%224.2%22 transform=%22rotate(-5.0 631.5 245.3)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22610.4%22 cy=%22234.5%22 rx=%2214.0%22 ry=%224.2%22 transform=%22rotate(-121.0 610.4 234.5)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22637.0%22 cy=%22235.7%22 rx=%2214.8%22 ry=%224.4%22 transform=%22rotate(-6.0 637.0 235.7)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22614.4%22 cy=%22224.7%22 rx=%2214.8%22 ry=%224.4%22 transform=%22rotate(-122.0 614.4 224.7)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22639.5%22 cy=%22225.9%22 rx=%2212.7%22 ry=%223.8%22 transform=%22rotate(-7.0 639.5 225.9)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22620.0%22 cy=%22216.8%22 rx=%2212.7%22 ry=%223.8%22 transform=%22rotate(-123.0 620.0 216.8)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22643.8%22 cy=%22215.6%22 rx=%2212.3%22 ry=%223.7%22 transform=%22rotate(-7.9 643.8 215.6)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22624.7%22 cy=%22207.0%22 rx=%2212.3%22 ry=%223.7%22 transform=%22rotate(-123.9 624.7 207.0)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22647.8%22 cy=%22204.9%22 rx=%2211.7%22 ry=%223.5%22 transform=%22rotate(-8.7 647.8 204.9)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22629.6%22 cy=%22197.0%22 rx=%2211.7%22 ry=%223.5%22 transform=%22rotate(-124.7 629.6 197.0)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22651.2%22 cy=%22193.9%22 rx=%2210.5%22 ry=%223.1%22 transform=%22rotate(-9.5 651.2 193.9)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22634.8%22 cy=%22187.1%22 rx=%2210.5%22 ry=%223.1%22 transform=%22rotate(-125.5 634.8 187.1)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22656.1%22 cy=%22182.2%22 rx=%2210.7%22 ry=%223.2%22 transform=%22rotate(-10.3 656.1 182.2)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22639.2%22 cy=%22175.5%22 rx=%2210.7%22 ry=%223.2%22 transform=%22rotate(-126.3 639.2 175.5)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22659.9%22 cy=%22170.4%22 rx=%229.9%22 ry=%223.0%22 transform=%22rotate(-10.9 659.9 170.4)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22644.3%22 cy=%22164.4%22 rx=%229.9%22 ry=%223.0%22 transform=%22rotate(-126.9 644.3 164.4)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22664.5%22 cy=%22158.0%22 rx=%229.8%22 ry=%222.9%22 transform=%22rotate(-11.6 664.5 158.0)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22648.9%22 cy=%22152.2%22 rx=%229.8%22 ry=%222.9%22 transform=%22rotate(-127.6 648.9 152.2)%22 fill=%22%237bb997%22/%3E%3C/g%3E%3Cg class=%22sw f3%22 style=%22transform-origin:585px 300px%22%3E%3Cpath d=%22M585.0 300.0 Q538.9 258.0 492.7 163.2%22 stroke=%22%2386c2a1%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22578.1%22 cy=%22270.7%22 rx=%2218.6%22 ry=%225.6%22 transform=%22rotate(-75.5 578.1 270.7)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22555.3%22 cy=%22292.4%22 rx=%2218.6%22 ry=%225.6%22 transform=%22rotate(-191.5 555.3 292.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22572.8%22 cy=%22264.9%22 rx=%2218.2%22 ry=%225.5%22 transform=%22rotate(-73.6 572.8 264.9)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22549.7%22 cy=%22285.4%22 rx=%2218.2%22 ry=%225.5%22 transform=%22rotate(-189.6 549.7 285.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22567.2%22 cy=%22259.5%22 rx=%2217.0%22 ry=%225.1%22 transform=%22rotate(-71.9 567.2 259.5)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22545.1%22 cy=%22278.0%22 rx=%2217.0%22 ry=%225.1%22 transform=%22rotate(-187.9 545.1 278.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22561.8%22 cy=%22252.8%22 rx=%2216.8%22 ry=%225.0%22 transform=%22rotate(-70.3 561.8 252.8)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22539.5%22 cy=%22270.4%22 rx=%2216.8%22 ry=%225.0%22 transform=%22rotate(-186.3 539.5 270.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22556.0%22 cy=%22246.8%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-68.7 556.0 246.8)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22535.1%22 cy=%22262.3%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-184.7 535.1 262.3)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22550.1%22 cy=%22240.1%22 rx=%2214.1%22 ry=%224.2%22 transform=%22rotate(-67.3 550.1 240.1)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22530.6%22 cy=%22254.0%22 rx=%2214.1%22 ry=%224.2%22 transform=%22rotate(-183.3 530.6 254.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22545.1%22 cy=%22230.7%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-66.0 545.1 230.7)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22523.5%22 cy=%22245.3%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-182.0 523.5 245.3)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22539.3%22 cy=%22222.9%22 rx=%2214.6%22 ry=%224.4%22 transform=%22rotate(-64.8 539.3 222.9)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22518.5%22 cy=%22236.2%22 rx=%2214.6%22 ry=%224.4%22 transform=%22rotate(-180.8 518.5 236.2)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22533.3%22 cy=%22214.9%22 rx=%2213.4%22 ry=%224.0%22 transform=%22rotate(-63.6 533.3 214.9)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22514.0%22 cy=%22226.8%22 rx=%2213.4%22 ry=%224.0%22 transform=%22rotate(-179.6 514.0 226.8)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22527.2%22 cy=%22206.4%22 rx=%2212.2%22 ry=%223.7%22 transform=%22rotate(-62.5 527.2 206.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22509.3%22 cy=%22217.0%22 rx=%2212.2%22 ry=%223.7%22 transform=%22rotate(-178.5 509.3 217.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22520.9%22 cy=%22198.0%22 rx=%2210.6%22 ry=%223.2%22 transform=%22rotate(-61.5 520.9 198.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22505.2%22 cy=%22206.8%22 rx=%2210.6%22 ry=%223.2%22 transform=%22rotate(-177.5 505.2 206.8)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22514.8%22 cy=%22188.5%22 rx=%229.7%22 ry=%222.9%22 transform=%22rotate(-60.5 514.8 188.5)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22500.4%22 cy=%22196.3%22 rx=%229.7%22 ry=%222.9%22 transform=%22rotate(-176.5 500.4 196.3)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22508.9%22 cy=%22178.2%22 rx=%229.1%22 ry=%222.7%22 transform=%22rotate(-59.6 508.9 178.2)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22495.2%22 cy=%22185.4%22 rx=%229.1%22 ry=%222.7%22 transform=%22rotate(-175.6 495.2 185.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22502.6%22 cy=%22168.0%22 rx=%228.0%22 ry=%222.4%22 transform=%22rotate(-58.8 502.6 168.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22490.5%22 cy=%22174.1%22 rx=%228.0%22 ry=%222.4%22 transform=%22rotate(-174.8 490.5 174.1)%22 fill=%22%2386c2a1%22/%3E%3C/g%3E%3Cg class=%22sw b1%22 style=%22transform-origin:500px 306px%22%3E%3Cg transform=%22translate(500 306) rotate(-24)%22%3E%3Cpath d=%22M0 0 C30 -45.0 24.0 -112.5 0 -150 C-24.0 -112.5 -30 -45.0 0 0Z%22 fill=%22%235a9f7d%22/%3E%3Cpath d=%22M0 -4 L0 -144%22 stroke=%22%23a3d0b4%22 stroke-width=%221.6%22 opacity=%22.7%22/%3E%3C/g%3E%3C/g%3E%3Cg class=%22sw b2%22 style=%22transform-origin:528px 306px%22%3E%3Cg transform=%22translate(528 306) rotate(-6)%22%3E%3Cpath d=%22M0 0 C26 -36.0 20.8 -90.0 0 -120 C-20.8 -90.0 -26 -36.0 0 0Z%22 fill=%22%234c9170%22/%3E%3Cpath d=%22M0 -4 L0 -114%22 stroke=%22%23a3d0b4%22 stroke-width=%221.6%22 opacity=%22.7%22/%3E%3C/g%3E%3C/g%3E%3Cg class=%22sw b3%22 style=%22transform-origin:628px 306px%22%3E%3Cg transform=%22translate(628 306) rotate(16)%22%3E%3Cpath d=%22M0 0 C34 -51.0 27.200000000000003 -127.5 0 -170 C-27.200000000000003 -127.5 -34 -51.0 0 0Z%22 fill=%22%233f8564%22/%3E%3Cpath d=%22M0 -4 L0 -164%22 stroke=%22%2386c2a1%22 stroke-width=%221.6%22 opacity=%22.7%22/%3E%3C/g%3E%3C/g%3E%3Cg class=%22sw f4%22 style=%22transform-origin:430px 300px%22%3E%3Cpath d=%22M430.0 300.0 Q447.0 267.5 464.0 195.4%22 stroke=%22%2399cdb0%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22448.2%22 cy=%22288.0%22 rx=%2213.5%22 ry=%224.0%22 transform=%22rotate(-8.0 448.2 288.0)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22427.3%22 cy=%22278.7%22 rx=%2213.5%22 ry=%224.0%22 transform=%22rotate(-124.0 427.3 278.7)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22449.1%22 cy=%22282.3%22 rx=%2212.0%22 ry=%223.6%22 transform=%22rotate(-9.5 449.1 282.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22430.3%22 cy=%22274.5%22 rx=%2212.0%22 ry=%223.6%22 transform=%22rotate(-125.5 430.3 274.5)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22451.9%22 cy=%22275.9%22 rx=%2212.4%22 ry=%223.7%22 transform=%22rotate(-10.8 451.9 275.9)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22432.3%22 cy=%22268.3%22 rx=%2212.4%22 ry=%223.7%22 transform=%22rotate(-126.8 432.3 268.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22452.7%22 cy=%22269.5%22 rx=%2210.8%22 ry=%223.2%22 transform=%22rotate(-12.0 452.7 269.5)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22435.5%22 cy=%22263.3%22 rx=%2210.8%22 ry=%223.2%22 transform=%22rotate(-128.0 435.5 263.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22455.6%22 cy=%22262.3%22 rx=%2211.4%22 ry=%223.4%22 transform=%22rotate(-13.0 455.6 262.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22437.4%22 cy=%22256.0%22 rx=%2211.4%22 ry=%223.4%22 transform=%22rotate(-129.0 437.4 256.0)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22457.2%22 cy=%22255.1%22 rx=%2210.5%22 ry=%223.1%22 transform=%22rotate(-14.0 457.2 255.1)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22440.3%22 cy=%22249.6%22 rx=%2210.5%22 ry=%223.1%22 transform=%22rotate(-130.0 440.3 249.6)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22457.4%22 cy=%22247.8%22 rx=%228.3%22 ry=%222.5%22 transform=%22rotate(-14.9 457.4 247.8)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22444.0%22 cy=%22243.7%22 rx=%228.3%22 ry=%222.5%22 transform=%22rotate(-130.9 444.0 243.7)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22459.7%22 cy=%22239.7%22 rx=%228.1%22 ry=%222.4%22 transform=%22rotate(-15.7 459.7 239.7)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22446.5%22 cy=%22235.8%22 rx=%228.1%22 ry=%222.4%22 transform=%22rotate(-131.7 446.5 235.8)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22462.6%22 cy=%22230.9%22 rx=%228.7%22 ry=%222.6%22 transform=%22rotate(-16.4 462.6 230.9)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22448.4%22 cy=%22227.0%22 rx=%228.7%22 ry=%222.6%22 transform=%22rotate(-132.4 448.4 227.0)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22463.7%22 cy=%22222.3%22 rx=%227.4%22 ry=%222.2%22 transform=%22rotate(-17.0 463.7 222.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22451.7%22 cy=%22219.1%22 rx=%227.4%22 ry=%222.2%22 transform=%22rotate(-133.0 451.7 219.1)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22466.2%22 cy=%22212.9%22 rx=%227.5%22 ry=%222.2%22 transform=%22rotate(-17.7 466.2 212.9)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22454.0%22 cy=%22209.8%22 rx=%227.5%22 ry=%222.2%22 transform=%22rotate(-133.7 454.0 209.8)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22467.3%22 cy=%22203.6%22 rx=%226.1%22 ry=%221.8%22 transform=%22rotate(-18.2 467.3 203.6)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22457.3%22 cy=%22201.1%22 rx=%226.1%22 ry=%221.8%22 transform=%22rotate(-134.2 457.3 201.1)%22 fill=%22%2399cdb0%22/%3E%3C/g%3E%3Crect width=%22640%22 height=%22300%22 fill=%22url(%23f)%22/%3E%3C/svg%3E"); --cv-tropic-still: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 300%22 preserveAspectRatio=%22xMaxYMax meet%22%3E%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23f4faf6%22/%3E%3Cstop offset=%22.42%22 stop-color=%22%23f4faf6%22 stop-opacity=%22.9%22/%3E%3Cstop offset=%22.62%22 stop-color=%22%23f4faf6%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx=%22540%22 cy=%2280%22 r=%2248%22 fill=%22%23fbf1d2%22 opacity=%22.6%22/%3E%3Cpath d=%22M0 300 L0 215 C90 200 150 212 220 192 C310 168 370 196 440 176 C510 156 570 172 640 150 L640 300Z%22 fill=%22%23d7ecdf%22/%3E%3Cpath d=%22M0 300 L0 246 C90 232 170 244 250 228 C340 210 420 234 500 214 C560 200 600 206 640 196 L640 300Z%22 fill=%22%23bfe0cb%22/%3E%3Cpath d=%22M300 300 C370 270 440 276 500 256 C560 238 610 242 640 234 L640 300Z%22 fill=%22%23a3d0b4%22/%3E%3Cpath d=%22M585.0 300.0 Q574.5 216.5 564.1 101.1%22 stroke=%22%236aae8a%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22598.5%22 cy=%22268.3%22 rx=%2220.3%22 ry=%226.1%22 transform=%22rotate(-38.9 598.5 268.3)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22564.3%22 cy=%22272.4%22 rx=%2220.3%22 ry=%226.1%22 transform=%22rotate(-154.9 564.3 272.4)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22597.1%22 cy=%22258.8%22 rx=%2220.0%22 ry=%226.0%22 transform=%22rotate(-38.7 597.1 258.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22563.4%22 cy=%22262.7%22 rx=%2220.0%22 ry=%226.0%22 transform=%22rotate(-154.7 563.4 262.7)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22596.5%22 cy=%22248.4%22 rx=%2220.7%22 ry=%226.2%22 transform=%22rotate(-38.6 596.5 248.4)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22561.7%22 cy=%22252.5%22 rx=%2220.7%22 ry=%226.2%22 transform=%22rotate(-154.6 561.7 252.5)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22593.5%22 cy=%22239.8%22 rx=%2218.2%22 ry=%225.5%22 transform=%22rotate(-38.5 593.5 239.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22562.8%22 cy=%22243.3%22 rx=%2218.2%22 ry=%225.5%22 transform=%22rotate(-154.5 562.8 243.3)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22591.9%22 cy=%22229.9%22 rx=%2217.6%22 ry=%225.3%22 transform=%22rotate(-38.3 591.9 229.9)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22562.1%22 cy=%22233.2%22 rx=%2217.6%22 ry=%225.3%22 transform=%22rotate(-154.3 562.1 233.2)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22590.4%22 cy=%22219.6%22 rx=%2217.2%22 ry=%225.1%22 transform=%22rotate(-38.2 590.4 219.6)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22561.4%22 cy=%22222.8%22 rx=%2217.2%22 ry=%225.1%22 transform=%22rotate(-154.2 561.4 222.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22587.6%22 cy=%22210.2%22 rx=%2215.1%22 ry=%224.5%22 transform=%22rotate(-38.1 587.6 210.2)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22562.1%22 cy=%22212.9%22 rx=%2215.1%22 ry=%224.5%22 transform=%22rotate(-154.1 562.1 212.9)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22586.7%22 cy=%22199.0%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-38.0 586.7 199.0)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22560.7%22 cy=%22201.8%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-154.0 560.7 201.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22585.3%22 cy=%22188.2%22 rx=%2215.0%22 ry=%224.5%22 transform=%22rotate(-37.9 585.3 188.2)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22559.9%22 cy=%22190.8%22 rx=%2215.0%22 ry=%224.5%22 transform=%22rotate(-153.9 559.9 190.8)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22583.9%22 cy=%22177.0%22 rx=%2214.7%22 ry=%224.4%22 transform=%22rotate(-37.8 583.9 177.0)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22559.0%22 cy=%22179.5%22 rx=%2214.7%22 ry=%224.4%22 transform=%22rotate(-153.8 559.0 179.5)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22580.7%22 cy=%22167.1%22 rx=%2212.1%22 ry=%223.6%22 transform=%22rotate(-37.7 580.7 167.1)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22560.2%22 cy=%22169.1%22 rx=%2212.1%22 ry=%223.6%22 transform=%22rotate(-153.7 560.2 169.1)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22579.4%22 cy=%22155.5%22 rx=%2212.0%22 ry=%223.6%22 transform=%22rotate(-37.6 579.4 155.5)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22559.2%22 cy=%22157.4%22 rx=%2212.0%22 ry=%223.6%22 transform=%22rotate(-153.6 559.2 157.4)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22577.3%22 cy=%22144.3%22 rx=%2210.8%22 ry=%223.2%22 transform=%22rotate(-37.5 577.3 144.3)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22559.1%22 cy=%22146.0%22 rx=%2210.8%22 ry=%223.2%22 transform=%22rotate(-153.5 559.1 146.0)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22576.9%22 cy=%22131.6%22 rx=%2211.7%22 ry=%223.5%22 transform=%22rotate(-37.4 576.9 131.6)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22557.1%22 cy=%22133.5%22 rx=%2211.7%22 ry=%223.5%22 transform=%22rotate(-153.4 557.1 133.5)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22574.9%22 cy=%22119.9%22 rx=%2210.7%22 ry=%223.2%22 transform=%22rotate(-37.3 574.9 119.9)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22556.9%22 cy=%22121.6%22 rx=%2210.7%22 ry=%223.2%22 transform=%22rotate(-153.3 556.9 121.6)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22572.1%22 cy=%22108.6%22 rx=%228.7%22 ry=%222.6%22 transform=%22rotate(-37.3 572.1 108.6)%22 fill=%22%236aae8a%22/%3E%3Cellipse cx=%22557.5%22 cy=%22109.9%22 rx=%228.7%22 ry=%222.6%22 transform=%22rotate(-153.3 557.5 109.9)%22 fill=%22%236aae8a%22/%3E%3Cpath d=%22M585.0 300.0 Q622.3 250.8 659.5 147.2%22 stroke=%22%237bb997%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22615.6%22 cy=%22287.5%22 rx=%2221.3%22 ry=%226.4%22 transform=%22rotate(1.6 615.6 287.5)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22585.5%22 cy=%22267.4%22 rx=%2221.3%22 ry=%226.4%22 transform=%22rotate(-114.4 585.5 267.4)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22619.3%22 cy=%22279.7%22 rx=%2220.4%22 ry=%226.1%22 transform=%22rotate(0.1 619.3 279.7)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22590.1%22 cy=%22261.3%22 rx=%2220.4%22 ry=%226.1%22 transform=%22rotate(-115.9 590.1 261.3)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22622.0%22 cy=%22271.6%22 rx=%2218.4%22 ry=%225.5%22 transform=%22rotate(-1.3 622.0 271.6)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22595.2%22 cy=%22255.7%22 rx=%2218.4%22 ry=%225.5%22 transform=%22rotate(-117.3 595.2 255.7)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22625.7%22 cy=%22263.1%22 rx=%2217.5%22 ry=%225.2%22 transform=%22rotate(-2.6 625.7 263.1)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22599.9%22 cy=%22248.6%22 rx=%2217.5%22 ry=%225.2%22 transform=%22rotate(-118.6 599.9 248.6)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22628.1%22 cy=%22254.4%22 rx=%2215.2%22 ry=%224.5%22 transform=%22rotate(-3.8 628.1 254.4)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22605.4%22 cy=%22242.3%22 rx=%2215.2%22 ry=%224.5%22 transform=%22rotate(-119.8 605.4 242.3)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22631.5%22 cy=%22245.3%22 rx=%2214.0%22 ry=%224.2%22 transform=%22rotate(-5.0 631.5 245.3)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22610.4%22 cy=%22234.5%22 rx=%2214.0%22 ry=%224.2%22 transform=%22rotate(-121.0 610.4 234.5)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22637.0%22 cy=%22235.7%22 rx=%2214.8%22 ry=%224.4%22 transform=%22rotate(-6.0 637.0 235.7)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22614.4%22 cy=%22224.7%22 rx=%2214.8%22 ry=%224.4%22 transform=%22rotate(-122.0 614.4 224.7)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22639.5%22 cy=%22225.9%22 rx=%2212.7%22 ry=%223.8%22 transform=%22rotate(-7.0 639.5 225.9)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22620.0%22 cy=%22216.8%22 rx=%2212.7%22 ry=%223.8%22 transform=%22rotate(-123.0 620.0 216.8)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22643.8%22 cy=%22215.6%22 rx=%2212.3%22 ry=%223.7%22 transform=%22rotate(-7.9 643.8 215.6)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22624.7%22 cy=%22207.0%22 rx=%2212.3%22 ry=%223.7%22 transform=%22rotate(-123.9 624.7 207.0)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22647.8%22 cy=%22204.9%22 rx=%2211.7%22 ry=%223.5%22 transform=%22rotate(-8.7 647.8 204.9)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22629.6%22 cy=%22197.0%22 rx=%2211.7%22 ry=%223.5%22 transform=%22rotate(-124.7 629.6 197.0)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22651.2%22 cy=%22193.9%22 rx=%2210.5%22 ry=%223.1%22 transform=%22rotate(-9.5 651.2 193.9)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22634.8%22 cy=%22187.1%22 rx=%2210.5%22 ry=%223.1%22 transform=%22rotate(-125.5 634.8 187.1)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22656.1%22 cy=%22182.2%22 rx=%2210.7%22 ry=%223.2%22 transform=%22rotate(-10.3 656.1 182.2)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22639.2%22 cy=%22175.5%22 rx=%2210.7%22 ry=%223.2%22 transform=%22rotate(-126.3 639.2 175.5)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22659.9%22 cy=%22170.4%22 rx=%229.9%22 ry=%223.0%22 transform=%22rotate(-10.9 659.9 170.4)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22644.3%22 cy=%22164.4%22 rx=%229.9%22 ry=%223.0%22 transform=%22rotate(-126.9 644.3 164.4)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22664.5%22 cy=%22158.0%22 rx=%229.8%22 ry=%222.9%22 transform=%22rotate(-11.6 664.5 158.0)%22 fill=%22%237bb997%22/%3E%3Cellipse cx=%22648.9%22 cy=%22152.2%22 rx=%229.8%22 ry=%222.9%22 transform=%22rotate(-127.6 648.9 152.2)%22 fill=%22%237bb997%22/%3E%3Cpath d=%22M585.0 300.0 Q538.9 258.0 492.7 163.2%22 stroke=%22%2386c2a1%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22578.1%22 cy=%22270.7%22 rx=%2218.6%22 ry=%225.6%22 transform=%22rotate(-75.5 578.1 270.7)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22555.3%22 cy=%22292.4%22 rx=%2218.6%22 ry=%225.6%22 transform=%22rotate(-191.5 555.3 292.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22572.8%22 cy=%22264.9%22 rx=%2218.2%22 ry=%225.5%22 transform=%22rotate(-73.6 572.8 264.9)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22549.7%22 cy=%22285.4%22 rx=%2218.2%22 ry=%225.5%22 transform=%22rotate(-189.6 549.7 285.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22567.2%22 cy=%22259.5%22 rx=%2217.0%22 ry=%225.1%22 transform=%22rotate(-71.9 567.2 259.5)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22545.1%22 cy=%22278.0%22 rx=%2217.0%22 ry=%225.1%22 transform=%22rotate(-187.9 545.1 278.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22561.8%22 cy=%22252.8%22 rx=%2216.8%22 ry=%225.0%22 transform=%22rotate(-70.3 561.8 252.8)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22539.5%22 cy=%22270.4%22 rx=%2216.8%22 ry=%225.0%22 transform=%22rotate(-186.3 539.5 270.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22556.0%22 cy=%22246.8%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-68.7 556.0 246.8)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22535.1%22 cy=%22262.3%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-184.7 535.1 262.3)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22550.1%22 cy=%22240.1%22 rx=%2214.1%22 ry=%224.2%22 transform=%22rotate(-67.3 550.1 240.1)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22530.6%22 cy=%22254.0%22 rx=%2214.1%22 ry=%224.2%22 transform=%22rotate(-183.3 530.6 254.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22545.1%22 cy=%22230.7%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-66.0 545.1 230.7)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22523.5%22 cy=%22245.3%22 rx=%2215.4%22 ry=%224.6%22 transform=%22rotate(-182.0 523.5 245.3)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22539.3%22 cy=%22222.9%22 rx=%2214.6%22 ry=%224.4%22 transform=%22rotate(-64.8 539.3 222.9)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22518.5%22 cy=%22236.2%22 rx=%2214.6%22 ry=%224.4%22 transform=%22rotate(-180.8 518.5 236.2)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22533.3%22 cy=%22214.9%22 rx=%2213.4%22 ry=%224.0%22 transform=%22rotate(-63.6 533.3 214.9)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22514.0%22 cy=%22226.8%22 rx=%2213.4%22 ry=%224.0%22 transform=%22rotate(-179.6 514.0 226.8)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22527.2%22 cy=%22206.4%22 rx=%2212.2%22 ry=%223.7%22 transform=%22rotate(-62.5 527.2 206.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22509.3%22 cy=%22217.0%22 rx=%2212.2%22 ry=%223.7%22 transform=%22rotate(-178.5 509.3 217.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22520.9%22 cy=%22198.0%22 rx=%2210.6%22 ry=%223.2%22 transform=%22rotate(-61.5 520.9 198.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22505.2%22 cy=%22206.8%22 rx=%2210.6%22 ry=%223.2%22 transform=%22rotate(-177.5 505.2 206.8)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22514.8%22 cy=%22188.5%22 rx=%229.7%22 ry=%222.9%22 transform=%22rotate(-60.5 514.8 188.5)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22500.4%22 cy=%22196.3%22 rx=%229.7%22 ry=%222.9%22 transform=%22rotate(-176.5 500.4 196.3)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22508.9%22 cy=%22178.2%22 rx=%229.1%22 ry=%222.7%22 transform=%22rotate(-59.6 508.9 178.2)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22495.2%22 cy=%22185.4%22 rx=%229.1%22 ry=%222.7%22 transform=%22rotate(-175.6 495.2 185.4)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22502.6%22 cy=%22168.0%22 rx=%228.0%22 ry=%222.4%22 transform=%22rotate(-58.8 502.6 168.0)%22 fill=%22%2386c2a1%22/%3E%3Cellipse cx=%22490.5%22 cy=%22174.1%22 rx=%228.0%22 ry=%222.4%22 transform=%22rotate(-174.8 490.5 174.1)%22 fill=%22%2386c2a1%22/%3E%3Cg transform=%22translate(500 306) rotate(-24)%22%3E%3Cpath d=%22M0 0 C30 -45.0 24.0 -112.5 0 -150 C-24.0 -112.5 -30 -45.0 0 0Z%22 fill=%22%235a9f7d%22/%3E%3Cpath d=%22M0 -4 L0 -144%22 stroke=%22%23a3d0b4%22 stroke-width=%221.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(528 306) rotate(-6)%22%3E%3Cpath d=%22M0 0 C26 -36.0 20.8 -90.0 0 -120 C-20.8 -90.0 -26 -36.0 0 0Z%22 fill=%22%234c9170%22/%3E%3Cpath d=%22M0 -4 L0 -114%22 stroke=%22%23a3d0b4%22 stroke-width=%221.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cg transform=%22translate(628 306) rotate(16)%22%3E%3Cpath d=%22M0 0 C34 -51.0 27.200000000000003 -127.5 0 -170 C-27.200000000000003 -127.5 -34 -51.0 0 0Z%22 fill=%22%233f8564%22/%3E%3Cpath d=%22M0 -4 L0 -164%22 stroke=%22%2386c2a1%22 stroke-width=%221.6%22 opacity=%22.7%22/%3E%3C/g%3E%3Cpath d=%22M430.0 300.0 Q447.0 267.5 464.0 195.4%22 stroke=%22%2399cdb0%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cellipse cx=%22448.2%22 cy=%22288.0%22 rx=%2213.5%22 ry=%224.0%22 transform=%22rotate(-8.0 448.2 288.0)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22427.3%22 cy=%22278.7%22 rx=%2213.5%22 ry=%224.0%22 transform=%22rotate(-124.0 427.3 278.7)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22449.1%22 cy=%22282.3%22 rx=%2212.0%22 ry=%223.6%22 transform=%22rotate(-9.5 449.1 282.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22430.3%22 cy=%22274.5%22 rx=%2212.0%22 ry=%223.6%22 transform=%22rotate(-125.5 430.3 274.5)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22451.9%22 cy=%22275.9%22 rx=%2212.4%22 ry=%223.7%22 transform=%22rotate(-10.8 451.9 275.9)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22432.3%22 cy=%22268.3%22 rx=%2212.4%22 ry=%223.7%22 transform=%22rotate(-126.8 432.3 268.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22452.7%22 cy=%22269.5%22 rx=%2210.8%22 ry=%223.2%22 transform=%22rotate(-12.0 452.7 269.5)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22435.5%22 cy=%22263.3%22 rx=%2210.8%22 ry=%223.2%22 transform=%22rotate(-128.0 435.5 263.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22455.6%22 cy=%22262.3%22 rx=%2211.4%22 ry=%223.4%22 transform=%22rotate(-13.0 455.6 262.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22437.4%22 cy=%22256.0%22 rx=%2211.4%22 ry=%223.4%22 transform=%22rotate(-129.0 437.4 256.0)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22457.2%22 cy=%22255.1%22 rx=%2210.5%22 ry=%223.1%22 transform=%22rotate(-14.0 457.2 255.1)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22440.3%22 cy=%22249.6%22 rx=%2210.5%22 ry=%223.1%22 transform=%22rotate(-130.0 440.3 249.6)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22457.4%22 cy=%22247.8%22 rx=%228.3%22 ry=%222.5%22 transform=%22rotate(-14.9 457.4 247.8)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22444.0%22 cy=%22243.7%22 rx=%228.3%22 ry=%222.5%22 transform=%22rotate(-130.9 444.0 243.7)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22459.7%22 cy=%22239.7%22 rx=%228.1%22 ry=%222.4%22 transform=%22rotate(-15.7 459.7 239.7)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22446.5%22 cy=%22235.8%22 rx=%228.1%22 ry=%222.4%22 transform=%22rotate(-131.7 446.5 235.8)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22462.6%22 cy=%22230.9%22 rx=%228.7%22 ry=%222.6%22 transform=%22rotate(-16.4 462.6 230.9)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22448.4%22 cy=%22227.0%22 rx=%228.7%22 ry=%222.6%22 transform=%22rotate(-132.4 448.4 227.0)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22463.7%22 cy=%22222.3%22 rx=%227.4%22 ry=%222.2%22 transform=%22rotate(-17.0 463.7 222.3)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22451.7%22 cy=%22219.1%22 rx=%227.4%22 ry=%222.2%22 transform=%22rotate(-133.0 451.7 219.1)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22466.2%22 cy=%22212.9%22 rx=%227.5%22 ry=%222.2%22 transform=%22rotate(-17.7 466.2 212.9)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22454.0%22 cy=%22209.8%22 rx=%227.5%22 ry=%222.2%22 transform=%22rotate(-133.7 454.0 209.8)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22467.3%22 cy=%22203.6%22 rx=%226.1%22 ry=%221.8%22 transform=%22rotate(-18.2 467.3 203.6)%22 fill=%22%2399cdb0%22/%3E%3Cellipse cx=%22457.3%22 cy=%22201.1%22 rx=%226.1%22 ry=%221.8%22 transform=%22rotate(-134.2 457.3 201.1)%22 fill=%22%2399cdb0%22/%3E%3Crect width=%22640%22 height=%22300%22 fill=%22url(%23f)%22/%3E%3C/svg%3E"); } .mk-cv.is-masthead .mk-cv-img { width: 132px; } .mk-cv.is-masthead .mk-cv-body { flex: 0 1 auto; } .mk-cv.is-masthead h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.02em; color: #111 !important; } .mk-cv.is-masthead .mk-cv-abbr { margin-left: 6px; font-size: 13px; font-weight: 400; color: #5f6f69; letter-spacing: 0; } .mk-cv.is-masthead .mk-cv-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .mk-cv.is-masthead .ojs-badge { background: #ffffff; } .mk-cv.is-masthead .mk-cv-issue-box { margin-top: 4px; padding-top: 12px; border-top: 1px dashed #c9dfd2; } @media (max-width: 520px) { .mk-cv.is-masthead { flex-direction: column; align-items: center; text-align: center; padding: 20px 16px 22px; /* On a phone the text runs over the whole card: keep the forest as a faint wash so every line stays readable */ background-image: linear-gradient(rgba(244,250,246,.9), rgba(244,250,246,.9)), var(--cv-tropic); background-position: center, right bottom; background-size: auto, auto 55%; } .mk-cv.is-masthead .mk-cv-img { width: 150px; } .mk-cv.is-masthead .mk-cv-body, .mk-cv.is-masthead p { align-items: center; text-align: center; } .mk-cv.is-masthead .mk-cv-badges, .mk-cv.is-masthead .mk-cv-btns { justify-content: center; } } /* B. Banner just before the Current Issue list */ .mk-cv.is-banner { display: flex; gap: 18px; align-items: center; margin: 0 0 1.25rem; padding: 16px 18px; border-radius: 14px; background: var(--cv-soft); } .mk-cv.is-banner .mk-cv-img { width: 92px; } @media (max-width: 520px) { .mk-cv.is-banner { align-items: flex-start; } .mk-cv.is-banner .mk-cv-img { width: 76px; } } /* C. Cover as a column inside the Journal details card */ .ojs-card.mk-cv-split { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 0 22px; align-items: start; } .ojs-card.mk-cv-split > .mk-cv { grid-column: 2; grid-row: 1 / span 7; display: flex; flex-direction: column; align-items: center; gap: 10px; } .ojs-card.mk-cv-split > :not(.mk-cv) { grid-column: 1; } .ojs-card.mk-cv-split > .mk-cv .mk-cv-img { width: 150px; } .ojs-card.mk-cv-split > .mk-cv .mk-cv-btn { width: 100%; justify-content: center; } .ojs-card.mk-cv-split .ojs-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } @media (max-width: 640px) { .ojs-card.mk-cv-split { grid-template-columns: minmax(0, 1fr); } .ojs-card.mk-cv-split > .mk-cv { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 14px; } } @media (prefers-reduced-motion: reduce) { .mk-cv .mk-cv-img { transition: none; } .mk-cv.is-masthead { --cv-tropic: var(--cv-tropic-still); } }