/* Career Map baru: the few rules the assembled page (index.html) needs on top
   of the live page's CSS and career-map-v2.css. */

/* The canvas fills #map. v1 painted #map beige before its tiles arrived; the
   canvas starts on the sea colour instead, so there is no light flash. */
#map{position:relative;background:#053a52 !important}
#peta{position:absolute;inset:0}
#peta .maplibregl-ctrl-attrib{display:none}

/* Qatar partner pin (v1 addPartnerPin, drawn as a MapLibre marker). */
#peta .partner-pin{cursor:pointer}

/* Country buttons for keyboard and screen readers (adaptor.js). Hidden until
   one takes focus; the focused one shows as a small chip in the map's top
   left corner while the canvas highlights the country. */
#gk-negara-tombol button{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#gk-negara-tombol button:focus-visible{
  clip:auto;width:auto;height:auto;margin:0;overflow:visible;z-index:2400;left:16px;top:16px;
  display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  background:rgba(255,252,244,.97);color:#12191e;font:700 13px/1.2 'DM Sans',sans-serif;
  box-shadow:0 8px 22px rgba(3,31,42,.3);outline:2px solid #ffd36e;outline-offset:2px
}

/* Passport stamp on the country card (permainan.js). Multiply makes the ink
   sit on the photo and the card like a real stamp; it is pressed in once,
   the first time the country is opened. */
.gk-cap{position:absolute;right:18px;width:72px;height:72px;z-index:3;pointer-events:none;
  transform:rotate(-11deg);mix-blend-mode:multiply;opacity:.92}
.gk-cap canvas{display:block;width:100%;height:100%}
.gk-cap.baru{animation:gk-cap-tekan .52s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes gk-cap-tekan{
  0%{opacity:0;transform:rotate(-11deg) scale(1.8)}
  55%{opacity:.95;transform:rotate(-11deg) scale(.93)}
  100%{opacity:.92;transform:rotate(-11deg) scale(1)}
}
body.gk-v2-motion-off .gk-cap.baru{animation:none}
/* the theme's particles splashing out of a NEW stamp (permainan.js percik) */
.gk-percik{position:absolute;inset:0;pointer-events:none;z-index:4}
.gk-percik i{position:absolute;display:block;margin:-10px 0 0 -10px;background:no-repeat center/contain;opacity:0;
  animation:gk-percik .95s cubic-bezier(.2,.7,.3,1) both;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.gk-percik i.gk-p-lembar{background-size:calc(var(--s) * 8) 100%;background-position:0 0;animation-name:gk-percik,gk-kepak;
  animation-duration:.95s,.4s;animation-timing-function:cubic-bezier(.2,.7,.3,1),steps(8);animation-iteration-count:1,3;animation-fill-mode:both,none}
@keyframes gk-percik{
  0%{translate:0 0;opacity:0;scale:.4}
  15%{opacity:1}
  45%{translate:calc(var(--dx) * .8) calc(var(--dy) * .9);opacity:1;scale:1}
  100%{translate:var(--dx) calc(var(--dy) + 38px);opacity:0;scale:.85}
}
body.gk-v2-motion-off .gk-percik{display:none}
@media(max-width:760px){.gk-cap{width:68px;height:68px;right:14px}}

/* "N dari 37 negara dijelajahi": v2's toast look, but at the top of the map
   (under the search row) so the phone card cannot cover it. */
#gk-jelajah-toast{position:absolute;bottom:auto;z-index:2750}


/* Monthly theme (sentuhan.js sets body[data-sentuhan] and adds the layers).
   The mood changes, the map gets no extra icons (Rivaldy, 29 Sep). */

/* Frame on the map viewport, under the page's floating controls. */
.gk-bingkai{position:absolute;inset:0;pointer-events:none;z-index:4;transition:opacity .6s ease}
/* the theme switch fades the frame instead of cutting it (sentuhan.js setNyala) */
.gk-bingkai.padam{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
/* Hari Batik: a 9-slice frame cut from the CODEX sheets (potong-suasana.py).
   The edges repeat (seamless tiles), the corner ornaments sit over their
   ends; the bottom and right edges are the top and left ones mirrored. On a
   phone only the corners and the top edge, so the frame never eats the map. */
.gk-bingkai-batik{--bt:22px;--bs:86px;box-shadow:inset 0 0 26px rgba(40,20,0,.3)}
.gk-bt-tepi,.gk-bt-sudut{position:absolute;display:block}
.gk-bt-atas,.gk-bt-bawah{left:0;right:0;height:var(--bt);background:url("/career-map-baru/sentuhan/batik-tepi-datar.webp") repeat-x 0 0/auto 100%}
.gk-bt-atas{top:0}
.gk-bt-bawah{bottom:0;transform:scaleY(-1)}
.gk-bt-kiri,.gk-bt-kanan{top:0;bottom:0;width:var(--bt);background:url("/career-map-baru/sentuhan/batik-tepi-tegak.webp") repeat-y 0 0/100% auto}
.gk-bt-kiri{left:0}
.gk-bt-kanan{right:0;transform:scaleX(-1)}
.gk-bt-sudut{width:var(--bs);height:var(--bs);background:no-repeat center/contain;filter:drop-shadow(0 2px 3px rgba(40,20,0,.35))}
.gk-bt-kiri-atas{left:0;top:0;background-image:url("/career-map-baru/sentuhan/batik-sudut-kiri-atas.webp")}
.gk-bt-kanan-atas{right:0;top:0;background-image:url("/career-map-baru/sentuhan/batik-sudut-kanan-atas.webp")}
.gk-bt-kiri-bawah{left:0;bottom:0;background-image:url("/career-map-baru/sentuhan/batik-sudut-kiri-bawah.webp")}
.gk-bt-kanan-bawah{right:0;bottom:0;background-image:url("/career-map-baru/sentuhan/batik-sudut-kanan-bawah.webp")}
/* Sumpah Pemuda / 17 Agustus: one bunting strip hanging along the top. */
.gk-bingkai-untaian{background:url("/career-map-baru/sentuhan/merahputih-untaian.webp") repeat-x 0 0/auto 54px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
/* other strips hang the same way: one whole swag per repeat (30 Sep) */
body[data-sentuhan~="hari-migran"] .gk-bingkai-untaian{background-image:url("/career-map-baru/sentuhan/migran-untaian.webp")}
body[data-sentuhan~="natal-tahun-baru"] .gk-bingkai-untaian{background-image:url("/career-map-baru/sentuhan/natal-untaian.webp")}
/* The bunting arrives with the opening: it drops from above the map, sways
   and settles (0.8 s to 4 s), hangs 1 s more, then is drawn up until only a
   10 px strip of rope and flag tops stays under the header, clear of the
   search row and the buttons it used to hide behind (audit 30 Sep, finding
   4). The strip is as tall as the bunting, so the % in translateY is its own
   height. It waits while the curtain is still up (:has; an older browser just
   plays it under the curtain). Switching the theme off and on replays it. */
.gk-bingkai-untaian{--u:54px;bottom:auto;height:var(--u);transform-origin:50% 0;animation:gk-untaian 6.6s both}
body:has(#gk-tirai:not(.angkat)) .gk-bingkai-untaian{animation-play-state:paused}
@keyframes gk-untaian{
  0%{transform:translateY(-100%);animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  12%{transform:translateY(6px);animation-timing-function:ease-out}
  17%{transform:translateY(0);animation-timing-function:ease-in-out}
  24%{transform:translateY(0) skewX(-2.2deg);animation-timing-function:ease-in-out}
  33%{transform:translateY(0) skewX(1.6deg);animation-timing-function:ease-in-out}
  43%{transform:translateY(0) skewX(-1deg);animation-timing-function:ease-in-out}
  53%{transform:translateY(0) skewX(.5deg);animation-timing-function:ease-in-out}
  61%{transform:translateY(0) skewX(0);animation-timing-function:ease-in-out}
  76%{transform:translateY(0);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  88%,100%{transform:translateY(calc(10px - var(--u)))}
}
@media(prefers-reduced-motion:reduce){.gk-bingkai-untaian{animation:none;transform:translateY(calc(10px - var(--u)))}}
body.gk-v2-motion-off .gk-bingkai-untaian{animation:none;transform:translateY(calc(10px - var(--u)))}
@media(max-width:760px){
  /* 1 Oct (finding 5): on a phone only two small top corners that dissolve
     into the map (CODEX 30 Sep) and a thin strip under the header; no side
     or bottom edges, no bottom corners under the controls. */
  .gk-bingkai-batik{--bt:10px;--bs:104px;box-shadow:none}
  .gk-bt-bawah,.gk-bt-kiri,.gk-bt-kanan,.gk-bt-kiri-bawah,.gk-bt-kanan-bawah{display:none}
  .gk-bt-kiri-atas{background-image:url("/career-map-baru/sentuhan/batik-sudut-hp-kiri.webp")}
  .gk-bt-kanan-atas{background-image:url("/career-map-baru/sentuhan/batik-sudut-hp-kanan.webp")}
  .gk-bingkai-untaian{--u:38px;background-size:auto 38px}
}

/* Welcome particles: fall once through the map, then the layer is removed. */
.gk-partikel,.gk-cuaca{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.gk-partikel i,.gk-cuaca i{position:absolute;top:-60px;display:block;background:no-repeat center/contain;animation-name:gk-jatuh;
  animation-timing-function:cubic-bezier(.3,.1,.6,1);animation-fill-mode:both;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
/* 8-frame sheets (daun-*-lembar): one frame wide, stepped through while falling */
.gk-partikel i.gk-p-lembar,.gk-cuaca i.gk-p-lembar{background-size:calc(var(--s) * 8) 100%;background-position:0 0;animation-name:gk-jatuh,gk-kepak;
  animation-timing-function:cubic-bezier(.3,.1,.6,1),steps(8);animation-iteration-count:1,infinite;animation-fill-mode:both,none}
@keyframes gk-kepak{to{background-position:calc(var(--s) * -8) 0}}
@keyframes gk-jatuh{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  10%{opacity:1}
  35%{transform:translate(calc(var(--ayun)*.3 + var(--goyang)),35vh) rotate(calc(var(--putar)*.35))}
  65%{transform:translate(calc(var(--ayun)*.65 - var(--goyang)),70vh) rotate(calc(var(--putar)*.7))}
  90%{opacity:.9}
  100%{transform:translate(var(--ayun),105vh) rotate(var(--putar));opacity:0}
}
/* Season weather (sentuhan.js): born over land, drifts a third of the screen
   and fades, so it does not cross the sea (audit 1 Oct, A04). */
.gk-cuaca i{animation-name:gk-cuaca-jatuh}
.gk-cuaca i.gk-p-lembar{animation-name:gk-cuaca-jatuh,gk-kepak}
@keyframes gk-cuaca-jatuh{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  20%{opacity:.9}
  60%{transform:translate(calc(var(--ayun)*.6 + var(--goyang)),17vh) rotate(calc(var(--putar)*.6))}
  82%{opacity:.85}
  100%{transform:translate(var(--ayun),30vh) rotate(var(--putar));opacity:0}
}
/* depth: near particles pass close to the camera (soft focus), far ones fade */
.gk-partikel i.gk-p-dekat,.gk-cuaca i.gk-p-dekat{filter:blur(1.6px) drop-shadow(0 3px 3px rgba(0,0,0,.2));z-index:2}
.gk-partikel i.gk-p-jauh,.gk-cuaca i.gk-p-jauh{filter:saturate(.8) brightness(.95)}

/* Country card reskin during Hari Batik: a parang band across the top of
   the photo and one corner ornament (top left: the close button is on the
   right); the card keeps its rounded corners, its white border turns ivory. */
body[data-sentuhan~="hari-batik"] .v2-preview{border-color:#f3e5c8}
body[data-sentuhan~="hari-batik"] .v2-preview-media::before{content:'';position:absolute;inset:0 0 auto;height:48px;z-index:1;
  pointer-events:none;background:url("/career-map-baru/sentuhan/batik-sudut-kiri-atas.webp") no-repeat 3px 3px/40px auto,
  url("/career-map-baru/sentuhan/batik-pita.webp") repeat-x 0 0/auto 12px;filter:drop-shadow(0 2px 2px rgba(40,20,0,.35))}
/* Every other theme wears its own band along the card's top edge (CODEX 30
   Sep, finding 6), as thin as the batik one. The band and its height come
   from two variables on <body>, so one rule draws them all. */
body[data-sentuhan~="gugur"]{--pita:url("/career-map-baru/sentuhan/pita-gugur.webp");--pita-h:20px}
body[data-sentuhan~="dingin"]{--pita:url("/career-map-baru/sentuhan/pita-dingin.webp");--pita-h:20px}
/* the event's band comes after the season's: when both are on, the event wins */
body[data-sentuhan~="sumpah-pemuda"]{--pita:url("/career-map-baru/sentuhan/pita-merahputih.webp");--pita-h:15px}
body[data-sentuhan~="hari-migran"]{--pita:url("/career-map-baru/sentuhan/pita-migran.webp");--pita-h:24px}
body[data-sentuhan~="natal-tahun-baru"]{--pita:url("/career-map-baru/sentuhan/pita-natal.webp");--pita-h:18px}
body[data-sentuhan~="hari-pahlawan"]{--pita:url("/career-map-baru/sentuhan/pita-merahputih.webp");--pita-h:15px}
body[data-sentuhan]:not([data-sentuhan~="hari-batik"]):not([data-sentuhan=""]) .v2-preview-media::before{content:'';position:absolute;inset:0 0 auto;height:calc(var(--pita-h) + 4px);z-index:1;
  pointer-events:none;background:var(--pita) repeat-x 0 2px/auto var(--pita-h);filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}

/* The small card of a country's icon landmark (adaptor.js): picture, title,
   one sentence, and the button on to the country's preview card. It sits at
   the bottom of the map, clear of the legend and the theme switch. */
#gk-ikon{position:absolute;left:50%;bottom:64px;translate:-50% 0;z-index:2300;width:min(392px,calc(100% - 24px));
  display:none;grid-template-columns:72px 1fr;gap:12px;align-items:start;padding:12px 40px 12px 12px;
  background:#fffaf0;border:1px solid #e6d9bd;border-radius:16px;box-shadow:0 10px 30px rgba(20,30,40,.28);color:#2b241a}
#gk-ikon.show{display:grid;animation:gk-ikon-masuk .28s cubic-bezier(.2,.9,.3,1) both}
@keyframes gk-ikon-masuk{from{opacity:0;translate:-50% 10px}to{opacity:1;translate:-50% 0}}
#gk-ikon .gk-ikon-gambar{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(40,30,10,.25))}
#gk-ikon .gk-ikon-judul{display:block;font:800 15px/1.25 'DM Sans',sans-serif}
#gk-ikon .gk-ikon-teks{margin:3px 0 8px;font:500 13px/1.4 'DM Sans',sans-serif;color:#5a4d38}
#gk-ikon .gk-ikon-buka{font:700 13px/1 'DM Sans',sans-serif;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#0c3b48;color:#fff;cursor:pointer;transition:transform .1s ease,background .15s}
#gk-ikon .gk-ikon-buka:active{transform:scale(.96);background:#082c36}
#gk-ikon .gk-ikon-tutup{position:absolute;top:0;right:0;width:44px;height:44px;border:0;background:none;font:400 22px/1 sans-serif;color:#8a7a5c;cursor:pointer}
#gk-ikon .gk-ikon-tutup:active{color:#4a3f2a}
body.gk-v2-motion-off #gk-ikon.show{animation:none}
#gk-ikon.keluar{display:grid;pointer-events:none;animation:gk-ikon-keluar .15s cubic-bezier(.4,0,1,1) both}
@keyframes gk-ikon-keluar{from{opacity:1;translate:-50% 0}to{opacity:0;translate:-50% 6px}}
/* Opening curtain over the map area only (header and search stay usable).
   It lifts by itself when the first view is drawn, 3 s at most (adaptor.js);
   no button: the welcome modal was removed on 6 Aug for delaying people.
   A theme paints it in three layers (CODEX 29 Sep): latar (blurred scene),
   tengah, depan. Each comes in once its image has loaded (.muat, tirai.js),
   one after the other: the far one fades in, the nearer ones settle from a
   little closer, 0.1 s apart. They also follow the pointer or the phone's
   tilt a little (--tx/--ty, deeper layers move less). Lifting is an iris:
   a soft hole opens from the middle of the map and widens past the corners
   while the front layers push past the camera; the map itself eases back
   from a slightly closer view (adaptor.js). Transform is kept for the lean,
   the individual `scale` property carries the entry and the push. */
@property --iris{syntax:'<percentage>';inherits:false;initial-value:-16%}
#gk-tirai{position:absolute;inset:0;z-index:2150;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 40%,#1b6a74 0%,#0c3b48 55%,#062630 100%)}
#gk-tirai.angkat{pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent var(--iris),#000 calc(var(--iris) + 16%));
  mask-image:radial-gradient(circle at 50% 46%,transparent var(--iris),#000 calc(var(--iris) + 16%));
  animation:gk-iris 1s cubic-bezier(.55,.05,.25,1) forwards}
@keyframes gk-iris{0%{--iris:-16%;opacity:1}75%{opacity:1}100%{--iris:140%;opacity:0}}
.gk-tl{position:absolute;inset:-3%;display:block;background:no-repeat center/cover;opacity:0;pointer-events:none;
  transform:translate3d(calc(var(--tx,0) * var(--k)),calc(var(--ty,0) * var(--k)),0);
  transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),scale .9s cubic-bezier(.16,1,.3,1)}
.gk-tl.muat{opacity:1;scale:1}
.gk-tl-latar{--k:6px;scale:1.03}
.gk-tl-tengah{--k:14px;scale:1.07;transition-delay:.1s,0s,.1s}
.gk-tl-depan{--k:28px;scale:1.14;transition-delay:.2s,0s,.2s}
#gk-tirai.angkat .gk-tl{transition-delay:0s}
#gk-tirai.angkat .gk-tl-latar{scale:1.08;transition:scale 1.1s ease-out}
#gk-tirai.angkat .gk-tl-tengah{scale:1.22;transition:scale 1s cubic-bezier(.4,0,.6,1)}
#gk-tirai.angkat .gk-tl-depan{scale:1.7;opacity:0;transition:scale 1s cubic-bezier(.5,0,.9,.5),opacity .55s ease .1s}
#gk-tirai.angkat .gk-tirai-isi{opacity:0;scale:.9;transition:opacity .28s ease,scale .5s ease}
@media(prefers-reduced-motion:reduce){.gk-tl,#gk-tirai.angkat .gk-tl{transform:none!important;scale:none!important;transition:opacity .3s!important}
  #gk-tirai.angkat{animation:none;opacity:0;-webkit-mask-image:none;mask-image:none;transition:opacity .3s}}
body.gk-v2-motion-off .gk-tl,body.gk-v2-motion-off #gk-tirai.angkat .gk-tl{transform:none!important;scale:none!important;transition:opacity .3s!important}
body.gk-v2-motion-off #gk-tirai.angkat{animation:none;opacity:0;-webkit-mask-image:none;mask-image:none;transition:opacity .3s}
.gk-tirai-isi{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 40px}
.gk-tirai-emblem{display:none;width:128px;height:128px;margin-bottom:-6px;background:no-repeat center/contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.gk-tirai-logo{font:800 34px/1 'DM Sans',sans-serif;color:#fff8e6;letter-spacing:-.01em}
.gk-tirai-bar{width:200px;height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden}
.gk-tirai-bar i{display:block;width:40%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c18419,#f1c553);
  animation:gk-muat 1.1s ease-in-out infinite}
@keyframes gk-muat{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media(prefers-reduced-motion:reduce){.gk-tirai-bar i{animation:none;width:100%}}
/* Per theme: the colour behind the layers (shown until they load), the three
   layers, the emblem, a panel so the name reads over the painting, and a
   loading bar in the theme's own material. */
body[data-tirai~="hari-batik"] #gk-tirai{background:radial-gradient(ellipse at 50% 40%,#5a3417 0%,#3a200d 60%,#231306 100%)}
body[data-tirai~="hari-batik"] .gk-tl-latar{background-image:url("/career-map-baru/sentuhan/batik-tirai-latar.webp")}
body[data-tirai~="hari-batik"] .gk-tl-tengah{background-image:url("/career-map-baru/sentuhan/batik-tirai-tengah.webp")}
/* the canting hand stays a corner accent on wide screens, not the subject */
body[data-tirai~="hari-batik"] .gk-tl-depan{background-image:url("/career-map-baru/sentuhan/batik-tirai-depan.webp");background-size:auto 72%;background-position:right bottom}
body[data-tirai~="hari-batik"] .gk-tirai-emblem{display:block;background-image:url("/career-map-baru/sentuhan/batik-emblem.webp")}
body[data-tirai~="sumpah-pemuda"] #gk-tirai{background:linear-gradient(180deg,#8e1219 0%,#3a1a14 100%)}
body[data-tirai~="sumpah-pemuda"] .gk-tl-latar{background-image:url("/career-map-baru/sentuhan/merahputih-tirai-latar.webp")}
body[data-tirai~="sumpah-pemuda"] .gk-tl-tengah{background-image:url("/career-map-baru/sentuhan/merahputih-tirai-tengah.webp");background-position:center 70%}
body[data-tirai~="sumpah-pemuda"] .gk-tl-depan{background-image:url("/career-map-baru/sentuhan/merahputih-tirai-depan.webp");background-position:center top}
body[data-tirai~="sumpah-pemuda"] .gk-tirai-emblem{display:block;background-image:url("/career-map-baru/sentuhan/merahputih-emblem.webp")}
body[data-tirai~="gugur"] #gk-tirai{background:radial-gradient(ellipse at 50% 40%,#8a3a12 0%,#51200a 60%,#2c1206 100%)}
body[data-tirai~="gugur"] .gk-tl-latar{background-image:url("/career-map-baru/sentuhan/gugur-tirai-latar.webp")}
body[data-tirai~="gugur"] .gk-tl-tengah{background-image:url("/career-map-baru/sentuhan/gugur-tirai-tengah.webp");background-position:center top}
body[data-tirai~="gugur"] .gk-tl-depan{background-image:url("/career-map-baru/sentuhan/gugur-tirai-depan.webp")}
body[data-tirai~="hari-migran"] #gk-tirai{background:radial-gradient(ellipse at 50% 40%,#b0662a 0%,#5a2e18 60%,#2a160c 100%)}
body[data-tirai~="hari-migran"] .gk-tl-latar{background-image:url("/career-map-baru/sentuhan/migran-tirai-latar.webp")}
body[data-tirai~="hari-migran"] .gk-tl-tengah{background-image:url("/career-map-baru/sentuhan/migran-tirai-tengah.webp");background-position:center bottom}
/* phone and letter as a foreground accent on wide screens (cover made the
   phone cover the title panel, 30 Sep) */
body[data-tirai~="hari-migran"] .gk-tl-depan{background-image:url("/career-map-baru/sentuhan/migran-tirai-depan.webp");background-size:auto 80%;background-position:left bottom}
body[data-tirai~="hari-migran"] .gk-tirai-emblem{display:block;background-image:url("/career-map-baru/sentuhan/migran-emblem.webp")}
body[data-tirai~="natal-tahun-baru"] #gk-tirai{background:radial-gradient(ellipse at 50% 40%,#23406a 0%,#10213c 60%,#081222 100%)}
body[data-tirai~="natal-tahun-baru"] .gk-tl-latar{background-image:url("/career-map-baru/sentuhan/natal-tirai-latar.webp")}
body[data-tirai~="natal-tahun-baru"] .gk-tl-tengah{background-image:url("/career-map-baru/sentuhan/natal-tirai-tengah.webp");background-position:center top}
body[data-tirai~="natal-tahun-baru"] .gk-tl-depan{background-image:url("/career-map-baru/sentuhan/natal-tirai-depan.webp");background-position:center bottom}
body[data-tirai~="natal-tahun-baru"] .gk-tirai-emblem{display:block;background-image:url("/career-map-baru/sentuhan/natal-emblem.webp")}
body[data-tirai~="dingin"] #gk-tirai{background:radial-gradient(ellipse at 50% 40%,#3f5f86 0%,#1d3150 60%,#0c1726 100%)}
body[data-tirai~="dingin"] .gk-tl-latar{background-image:url("/career-map-baru/sentuhan/dingin-tirai-latar.webp")}
body[data-tirai~="dingin"] .gk-tl-tengah{background-image:url("/career-map-baru/sentuhan/dingin-tirai-tengah.webp");background-position:center top}
body[data-tirai~="dingin"] .gk-tl-depan{background-image:url("/career-map-baru/sentuhan/dingin-tirai-depan.webp")}
/* 1 Oct (phone audit 30 Sep, finding 1): no glass box any more. A soft dark
   vignette behind the title keeps it readable over the painting, the title
   carries its own shadow, and the loading bar gives way to the theme's
   ornament (CODEX 30 Sep, the medallion style Rivaldy picked on 1 Oct);
   tirai.js sets its image. */
.gk-tirai-isi{isolation:isolate}
.gk-tirai-judul{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.gk-tirai-ornamen{display:none;width:min(340px,72vw);height:64px;background:no-repeat center/contain;opacity:0;scale:.92;
  transition:opacity .6s ease .35s,scale .9s cubic-bezier(.16,1,.3,1) .35s}
.gk-tirai-ornamen.muat{opacity:1;scale:1}
body[data-sentuhan] .gk-tirai-ornamen{display:block}
body[data-sentuhan] .gk-tirai-bar{display:none}
body[data-sentuhan] .gk-tirai-isi::before{content:"";position:absolute;inset:-70px -110px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(8,5,3,.62) 0%,rgba(8,5,3,.38) 40%,rgba(8,5,3,0) 72%)}
body[data-sentuhan] .gk-tirai-logo{text-shadow:0 2px 14px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.6)}
/* one line saying what the theme is (copy approved 1 Oct); it comes in with the ornament */
.gk-tirai-kalimat{display:none;margin:0;max-width:min(320px,80vw);text-align:center;font:500 14px/1.35 'DM Sans',sans-serif;color:#fff8e6;
  text-shadow:0 1px 8px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.6)}
body[data-sentuhan] .gk-tirai-kalimat:not(:empty){display:block;animation:gk-kalimat .7s ease .5s both}
@keyframes gk-kalimat{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
/* Hari Pahlawan (a small event, it rides on the season's curtain): its emblem */
body[data-sentuhan~="hari-pahlawan"] .gk-tirai-emblem{display:block;background-image:url("/career-map-baru/sentuhan/pahlawan-emblem.webp")}
@media(max-aspect-ratio:1/1){
  /* portrait: the side and front layers keep their full width */
  body[data-tirai] .gk-tl-tengah{background-size:100% auto;background-position:center top}
  /* the two middle layers glued to the bottom get the same feathered edge */
  body[data-tirai~="sumpah-pemuda"] .gk-tl-tengah,body[data-tirai~="hari-migran"] .gk-tl-tengah{inset:auto -3% -3% -3%;height:auto;aspect-ratio:1;
    background-size:100% 100%;background-position:center;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
  /* The front layer is a square painting with a hard cut on its inner edge
     (a gauze that starts mid-screen: the band across the phone in the 30 Sep
     audit). In portrait its box IS the painting (square, glued to the bottom
     or, for Sumpah Pemuda, the top edge) so a mask can feather that edge. */
  body[data-tirai] .gk-tl-depan{inset:auto -3% -3% -3%;height:auto;aspect-ratio:1;background-size:100% 100%;background-position:center;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
  body[data-tirai~="sumpah-pemuda"] .gk-tl-depan{inset:-3% -3% auto -3%;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 18%);mask-image:linear-gradient(to top,transparent 0,#000 18%)}
}
@media(max-width:760px){.gk-tirai-logo{font-size:28px}.gk-tirai-emblem{width:100px;height:100px}}

/* Theme switch (sentuhan.js): one switch for season and event together.
   Desktop: beside "Legenda peta"; phone: a round icon above the legend,
   hidden with the legend while a country card is open. */
/* The two switches (1 Oct): Musim and Event, side by side beside the legend.
   Only the layers there are today have a switch. */
#gk-tema-baris{position:absolute;left:180px;bottom:22px;z-index:2100;display:flex;gap:8px}
.gk-tema-tombol{height:44px;display:flex;align-items:center;gap:8px;
  padding:0 12px 0 11px;border:0;border-radius:999px;background:rgba(255,255,255,.9);color:#17303a;cursor:pointer;
  font:600 12.5px/1 'DM Sans',sans-serif;box-shadow:0 12px 34px rgba(0,34,48,.2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.gk-tema-tombol .lc{width:17px;height:17px;fill:#e0a92a;stroke:#9c6f20;stroke-width:1.2}
#gk-musim .lc{fill:none;stroke:#3f7fa6;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#gk-musim.daun .lc{stroke:#b5561b}
.gk-tema-tombol.mati .lc{fill:none;stroke:#8a9a9f}
.gk-tema-saklar{position:relative;width:30px;height:18px;border-radius:999px;background:#2e7a6d;transition:background .2s}
.gk-tema-saklar i{position:absolute;top:2px;left:14px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .2s}
.gk-tema-tombol.mati .gk-tema-saklar{background:#b9c3c6}
.gk-tema-tombol.mati .gk-tema-saklar i{left:2px}
.gk-tema-tombol:focus-visible{outline:2px solid #ffd36e;outline-offset:2px}
@media(max-width:760px){
  /* phone: two round icon buttons stacked above the legend on the right */
  #gk-tema-baris{left:auto;right:10px;bottom:60px;flex-direction:column;gap:8px;
    transition:opacity .2s ease,transform .24s cubic-bezier(.16,1,.3,1)}
  .gk-tema-tombol{width:44px;padding:0;justify-content:center}
  .gk-tema-teks,.gk-tema-saklar{display:none}
  .gk-tema-tombol .lc{width:19px;height:19px}
  .gk-v2.gk-v2-country-focus #gk-tema-baris{opacity:0;pointer-events:none;transform:translateY(10px)}
}

/* The search box and buttons sit above the curtain (their layer is higher), so
   the opening had two competing centres (audit 1 Oct, A08). They wait until the
   curtain lifts, then come in; :has() is ignored on old browsers, which then
   show them as before. */
.gk-v2 .subhead .search-wrap,.gk-v2 .subhead .v2-top-actions{transition:opacity .45s ease .35s}   /* .35 s: after the iris has opened most of the view (motion audit H08) */
body.gk-v2:has(#gk-tirai:not(.angkat)) .subhead .search-wrap,
body.gk-v2:has(#gk-tirai:not(.angkat)) .subhead .v2-top-actions{opacity:0;pointer-events:none;transition-delay:0s}
body.gk-v2.gk-v2-motion-off .subhead .search-wrap,body.gk-v2.gk-v2-motion-off .subhead .v2-top-actions{transition:none}

/* Preview: the action is a sibling of the scrolling content. A short window,
   long country name or larger text can never push it below the card. */
.gk-kanvas-baru .v2-preview{
  display:flex;flex-direction:column;overflow:hidden;width:340px;top:96px;
  max-height:calc(100% - 112px);border-width:1px;border-color:#e0d8cb;
  background:#fbf7f0;border-radius:16px;box-shadow:0 12px 32px rgba(3,28,39,.2)
}
.gk-kanvas-baru .v2-preview-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.gk-kanvas-baru .v2-preview-media{height:80px;flex:none;border-radius:15px 15px 0 0}
.gk-kanvas-baru .v2-preview-body{padding:16px 20px 12px}
.gk-kanvas-baru .v2-preview-kicker{margin:0 0 8px;min-width:0}
.gk-kanvas-baru .v2-preview-name{font-size:22px;overflow-wrap:anywhere}
.gk-kanvas-baru .v2-preview-summary{display:block;font-size:14px;line-height:1.55;margin:0 0 12px;color:#3b342d}
.gk-kanvas-baru .v2-tier-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.gk-kanvas-baru .v2-tier-medal{width:26px;height:26px;border:1px solid #e0d8cb;background:#fff;color:#3b342d;font-size:13px}
.gk-kanvas-baru .v2-tier-label{font-size:12px;margin:0;color:#62574b}
.gk-kanvas-baru .v2-facts{display:grid;grid-template-columns:1fr;margin-bottom:8px}
.gk-kanvas-baru .v2-fact{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:10px 0;border-right:0}
.gk-kanvas-baru .v2-fact>.lc{display:block;width:18px;height:18px;grid-column:1;align-self:start}
.gk-kanvas-baru .v2-fact>div{grid-column:2;min-width:0}
.gk-kanvas-baru .v2-fact-label{font-size:12px;color:#75695c}
.gk-kanvas-baru .v2-fact-value{font-size:14px;line-height:1.5;color:#3b342d;overflow-wrap:anywhere}
.gk-kanvas-baru .v2-preview-asumsi{margin:8px 0 0;font-size:12px;line-height:1.5;color:#75695c}
.gk-kanvas-baru .v2-preview-actions{flex:none;padding:12px 20px;background:#fbf7f0;border-top:1px solid #e0d8cb}
.gk-kanvas-baru .v2-detail-btn{min-height:48px;line-height:1.35;padding:12px 16px;white-space:normal}
@media(max-width:760px){
  /* 49vh: the card stays under half the screen even with the jobs row and
     the Waspada line; its body scrolls (uji-halaman 'fakta kartu HP terbaca'). */
  .gk-kanvas-baru .v2-preview{top:auto;bottom:max(8px,env(safe-area-inset-bottom));left:8px;right:8px;width:auto;max-height:min(56dvh,49vh)}
  .gk-kanvas-baru .v2-preview-media{height:64px}
  .gk-kanvas-baru .v2-preview-body{padding:12px 16px}
  .gk-kanvas-baru .v2-preview-actions{padding:10px 16px}
  .gk-kanvas-baru .v2-facts{grid-template-columns:1fr 1fr;column-gap:12px}
  .gk-kanvas-baru .v2-fact{display:block;padding:8px 0}
  .gk-kanvas-baru .v2-fact:first-child,.gk-kanvas-baru .v2-fact-loker+.v2-fact{grid-column:1/-1}
  .gk-kanvas-baru .v2-fact>.lc{display:none}
}
@media(max-width:760px) and (orientation:landscape) and (max-height:480px){
  .gk-kanvas-baru .v2-preview{left:auto;right:8px;top:8px;bottom:8px;width:min(340px,48vw);max-height:none}
  .gk-kanvas-baru .v2-preview-media{height:56px}
}

/* Country card photo: soft placeholder, then a fade when it has loaded (audit A10). */
.v2-preview-media{background:linear-gradient(160deg,#cfe0e4,#e7e1d2)}
.v2-preview-media img{transition:opacity .22s ease}
.v2-preview-media img.gk-foto-tunggu{opacity:0}
body.gk-v2-motion-off .v2-preview-media img{transition:none}

/* Caption under a figure in the compare table (rakit-halaman.py, audit A02). */
.cmp-cap{display:block;margin-top:2px;font-size:11px;font-weight:500;line-height:1.35;color:var(--c55,#5b6870)}

/* Musim dan Event pindah ke dalam Menu peta (26 Okt 2026, adaptor.js
   pindahkanTema). Menu peta itu tumpukan pil, jadi dua saklar ini ikut jadi
   pil di tumpukan yang sama, berlabel dan bersaklar juga di HP. */
#gk-tema-baris.di-menu{position:static;flex-direction:column;align-items:flex-start;gap:8px;padding:0;opacity:1;transform:none;pointer-events:auto}
#gk-tema-baris.di-menu .gk-tema-tombol{width:auto;height:44px;padding:0 12px 0 14px;justify-content:flex-start;box-shadow:0 8px 22px rgba(2,30,42,.22);background:rgba(255,255,255,.96)}
#gk-tema-baris.di-menu .gk-tema-teks{display:inline}
#gk-tema-baris.di-menu .gk-tema-saklar{display:block}
#gk-tema-baris.di-menu .gk-tema-tombol .lc{width:17px;height:17px}

/* Camera starts first; the card reveals shortly after, without withholding
   content/focus or delaying layout measurement used by camera padding. */
@keyframes gk-focus-entry { from { opacity:0 } to { opacity:1 } }
body.gk-kanvas-baru:not(.gk-v2-motion-off) .v2-preview.gk-focus-entry.show {
  animation:gk-focus-entry 320ms ease-out 140ms backwards;
}
@media(prefers-reduced-motion:reduce){
  body.gk-kanvas-baru .v2-preview.gk-focus-entry.show{animation:none}
}
body.gk-kanvas-baru .v2-preview.gk-focus-entry.show:focus-within{animation:none}

/* Mobile controls: one menu beside search, comparison inside its dropdown.
   Keep the original desktop home and standalone comparison control. */
.gk-kanvas-baru .gk-menu-compare{display:none}
.gk-kanvas-baru .sub-menu-list{visibility:hidden}
.gk-kanvas-baru .menu-open .sub-menu-list{visibility:visible}
@media(max-width:760px){
  body.gk-kanvas-baru .sh-hp{display:none}
  .gk-kanvas-baru .v2-top-actions>.v2-compare:not(.v2-simpan){display:none}
  .gk-kanvas-baru .main-menu-wrap.di-header-mobile{
    position:relative;inset:auto;gap:0;flex:none;align-items:flex-end;
  }
  .gk-kanvas-baru .di-header-mobile .main-menu-btn{height:44px;padding:0 12px;gap:6px}
  .gk-kanvas-baru .di-header-mobile .main-menu-label{font-size:11px}
  .gk-kanvas-baru .di-header-mobile .sub-menu-list>.sub-menu-btn{flex:none;min-height:44px}
  .gk-kanvas-baru .di-header-mobile .sub-menu-list>#gk-tema-baris{flex:none}
  .gk-kanvas-baru .di-header-mobile .sub-menu-list{
    position:absolute;top:100%;right:0;visibility:hidden;
    width:min(240px,calc(100vw - 20px));
  }
  .gk-kanvas-baru .di-header-mobile.menu-open .sub-menu-list{
    visibility:visible;max-height:min(420px,calc(100dvh - var(--h-header) - 96px));
    overflow-y:auto;overscroll-behavior:contain;
  }
  .gk-kanvas-baru .di-header-mobile .gk-menu-compare{display:flex}
}

/* Lowongan live + tanda Waspada di kartu cepat dan lapisan warna Lowongan
   (adaptor.js isiKartuLoker / pasangTombolLoker, 29 Okt 2026). */
.gk-kanvas-baru .v2-fact[hidden],.gk-kanvas-baru .v2-preview-tanda[hidden]{display:none}
.gk-kanvas-baru .v2-fact-loker .v2-fact-value{font-weight:700;color:#1F5F55}
.gk-kanvas-baru .v2-live-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#2fa36b;box-shadow:0 0 0 3px rgba(47,163,107,.18);vertical-align:1px}
.gk-kanvas-baru .v2-preview-tanda{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:9px 11px;border-radius:12px;background:#fbe9e6;border:1px solid #efc3bb;color:#8f2a1d;font-size:13px;line-height:1.45}
.gk-kanvas-baru .v2-preview-tanda .lc{flex:none;width:16px;height:16px;margin-top:1px}
.gk-v2 .gk-loker-key[hidden]{display:none}
.gk-v2 .gk-loker-ket{margin:6px 0 0;font-size:11.5px;line-height:1.4;color:#526069;max-width:240px}
.gk-v2 #gk-layer button{min-width:72px}