/* Umervion D6 Yakamoz — figure.css (r5 fix, T8): the crafted globes (formerly globe.css) and the Türkiye map (formerly map.css) in one stylesheet */
/* UMERVION · Yakamoz r5 — the crafted globes: DOM labels over the engine's light (cards with leader lines, the arc's
   distance, the heute neatline, route ends, the services legend). Positions come from the engine (translate3d on
   [data-fig-pin], data-vis, --depth); everything else is here. Append to styles.css on integration. */

/* ---- city cards: a leader from the point, a card on a hairline shelf ---- */
.gp { --ll:34px; --la:-140deg; position:absolute; left:0; top:0; width:0; height:0; opacity:0; pointer-events:none; transition:opacity .7s var(--e-out); }
.gp[data-vis="1"] { opacity:calc(.4 + .6 * var(--depth,1)); }
.fig-live [data-fig="globe"]:not(.is-formed) .gp,.fig-live [data-fig="flows"]:not(.is-formed) .gp { opacity:0; transition-duration:.25s; transition-delay:0s; }
.fig-live .is-formed .gp[data-vis="1"] { transition-delay:.55s; } /* after the crisp layer has developed from Köln */
.gp-l { position:absolute; left:0; top:0; width:var(--ll); height:1px; transform-origin:0 50%; transform:rotate(var(--la)); background:linear-gradient(90deg,rgba(231,207,155,0) 0 7px,rgba(231,207,155,.8) 9px,rgba(231,207,155,.42)); }
.gp-c { position:absolute; display:flex; flex-direction:column; gap:4px; white-space:nowrap; padding:0 2px 6px; border-bottom:1px solid rgba(231,207,155,.42); text-shadow:0 0 14px #0a0908,0 0 4px #0a0908; }
.gp-c::before { content:""; position:absolute; inset:-12px -18px -8px; z-index:-1; background:radial-gradient(closest-side,rgba(10,9,8,.78),rgba(10,9,8,.5) 55%,rgba(10,9,8,0)); pointer-events:none; }
.gp-c b { font-family:var(--serif); font-style:italic; font-weight:400; font-size:17px; line-height:1; color:var(--cream); letter-spacing:.005em; }
.gp-c small { font-family:var(--sans); font-weight:500; font-size:11px; line-height:1.2; letter-spacing:.17em; text-transform:uppercase; color:var(--gold); }
/* directions: the card sits on its shelf at the leader's end */
.gp--nw { --la:-142deg; } .gp--nw .gp-c { right:calc(var(--ll) * .79 - 1px); bottom:calc(var(--ll) * .62); align-items:flex-end; text-align:right; }
.gp--ne { --la:-38deg; }  .gp--ne .gp-c { left:calc(var(--ll) * .79 - 1px); bottom:calc(var(--ll) * .62); }
.gp--sw { --la:142deg; }  .gp--sw .gp-c { right:calc(var(--ll) * .79 - 1px); top:calc(var(--ll) * .62); align-items:flex-end; text-align:right; border-bottom:0; border-top:1px solid rgba(231,207,155,.42); padding:6px 2px 0; }
.gp--se { --la:38deg; }   .gp--se .gp-c { left:calc(var(--ll) * .79 - 1px); top:calc(var(--ll) * .62); border-bottom:0; border-top:1px solid rgba(231,207,155,.42); padding:6px 2px 0; }
/* near the right edge of the screen the engine sets data-flip: the card turns to the left */
.gp--ne[data-flip="1"],.gp--se[data-flip="1"] { --la:-142deg; }
.gp--se[data-flip="1"] { --la:142deg; }
.gp--ne[data-flip="1"] .gp-c,.gp--se[data-flip="1"] .gp-c { left:auto; right:calc(var(--ll) * .79 - 1px); align-items:flex-end; text-align:right; }
.gp--hq .gp-c b { font-size:19px; }
.gp--hq time { margin-left:.55em; font-family:var(--sans); font-style:normal; font-weight:500; font-size:11px; letter-spacing:.14em; color:var(--gold-l); font-variant-numeric:tabular-nums; vertical-align:2px; }

/* ---- the arc's distance, above its apex ---- */
.gkm { position:absolute; left:0; top:0; width:0; height:0; opacity:0; pointer-events:none; transition:opacity .8s var(--e-out); }
.gkm[data-vis="1"] { opacity:1; }
.fig-live .is-formed .gkm[data-vis="1"] { transition-delay:1.1s; }
.fig-live [data-fig="globe"]:not(.is-formed) .gkm { opacity:0; transition:opacity .25s; }
.gkm > span::before { content:""; position:absolute; inset:-8px -16px; z-index:-1; background:radial-gradient(closest-side,rgba(10,9,8,.7),rgba(10,9,8,0)); }
.gkm > span { position:absolute; left:0; bottom:16px; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:3px; white-space:nowrap; text-shadow:0 0 12px #0a0908,0 0 4px #0a0908; }
.gkm b { font-family:var(--serif); font-style:italic; font-weight:400; font-size:16px; line-height:1; color:var(--gold-l); }
.gkm small { font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); }

/* ---- heute: the frame becomes a chart's neatline with degree ticks ---- */
.stage-frame[data-fig-cam="heute"],.era-media[data-fig-cam="heute"] { border-color:rgba(201,164,92,.2); transition:border-color 1.2s var(--e-out) .4s; }
.gtk { position:absolute; left:0; top:0; width:0; height:0; opacity:0; pointer-events:none; transition:opacity .6s var(--e-out); }
.gtk[data-vis="1"] { opacity:1; }
.fig-live [data-fig="globe"]:not(.is-formed) .gtk { opacity:0; }
/* fig-off (reduced motion): the posters; on the desktop stage the 4:3 ones, on phones the services globe's own crop */
.st-poster.st-poster--p { display:none; }
/* r5 integrate: the services phone poster (< 1100px) is a <picture> source of the one .fig-poster (one image, one request) */
.gtk::before { content:""; position:absolute; background:rgba(231,207,155,.55); }
.gtk::after { position:absolute; white-space:nowrap; font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.12em; color:rgba(231,207,155,.7); font-variant-numeric:tabular-nums; }
.gtk[data-edge="top"]::before { left:0; top:0; width:1px; height:7px; }
.gtk[data-edge="top"]::after { left:0; top:11px; translate:-50% 0; }
.gtk[data-edge="left"]::before { left:0; top:0; width:7px; height:1px; }
.gtk[data-edge="left"]::after { left:11px; top:0; translate:0 -50%; }
.gtk[data-ax="n"]::after { content:attr(data-deg) "° N"; }
.gtk[data-ax="z"]::after { content:attr(data-deg) "°"; }
.gtk[data-ax="e"]::after { content:attr(data-deg) "° O"; }
.gtk[data-ax="w"]::after { content:attr(data-deg) "° W"; }
html[lang="tr"] .gtk[data-ax="n"]::after { content:attr(data-deg) "° K"; }
html[lang="tr"] .gtk[data-ax="e"]::after { content:attr(data-deg) "° D"; }
html[lang="tr"] .gtk[data-ax="w"]::after { content:attr(data-deg) "° B"; }
html[lang="en"] .gtk[data-ax="e"]::after { content:attr(data-deg) "° E"; }

/* ---- services: route ends in small caps, outward from Köln ---- */
.fig-slot--flows .fig-pins { overflow:hidden; }
.gsv { position:absolute; left:0; top:0; width:0; height:0; opacity:0; pointer-events:none; transition:opacity .5s var(--e-out); }
.gsv[data-vis="1"] { opacity:1; transition-delay:.35s; }
.gsv > span { position:absolute; top:0; left:9px; translate:0 -50%; white-space:nowrap; font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:rgba(243,236,224,.86); text-shadow:0 0 10px #0a0908,0 0 3px #0a0908,0 0 2px #0a0908; }
.gsv[data-side="l"] > span { left:auto; right:9px; }
.gsv[data-side="u"] > span { left:0; top:-9px; translate:-50% -100%; }
.gsv[data-side="d"] > span { left:0; top:9px; translate:-50% 0; }
.gsv.gsv--hub > span { font-family:var(--serif); font-style:italic; font-weight:400; font-size:16px; letter-spacing:0; text-transform:none; color:var(--cream); }
.svc-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px; margin-top:10px; font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); }
.svc-legend span { display:inline-flex; align-items:center; gap:9px; }
.svc-legend i { display:inline-block; flex:none; }
.lg-hub { width:9px; height:9px; border-radius:50%; border:1px solid var(--gold-l); box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 4px var(--gold-l); }
.lg-route { width:26px; height:1px; background:linear-gradient(90deg,rgba(231,207,155,.25),var(--gold-l) 80%,#f3ece0); box-shadow:0 0 6px rgba(231,207,155,.5); }
.lg-end { width:7px; height:7px; border-radius:50%; border:1px solid rgba(231,207,155,.8); }
.fig-off .svc-legend .lg-route { box-shadow:none; }

/* ---- phone: fewer, larger-spaced labels ---- */
@media (max-width:699px) {
  .gp-c b { font-size:15px; }
  .gp-c small { font-size:11px; letter-spacing:.14em; }
  .gp { --ll:26px; }
  .gp--sub-ph .gp-c small { display:none; }
  .gp--ph-hide { display:none; }
  .gp--ph-show { display:block; }
  .gsv:not(.gsv--ph) { display:none; }
  .gsv > span { font-size:11px; letter-spacing:.12em; }
  .gsv.gsv--hub > span { font-size:15px; letter-spacing:0; }
  /* heute on the phone: the HQ card below-right of Köln, Istanbul's to its lower left (inside the 4:5 frame) */
  .era-media .gp--hq { --la:38deg; }
  .era-media .gp--hq .gp-c { right:auto; bottom:auto; left:calc(var(--ll) * .79 - 1px); top:calc(var(--ll) * .62); align-items:flex-start; text-align:left; border-bottom:0; border-top:1px solid rgba(231,207,155,.42); padding:6px 2px 0; }
  .era-media .gp--hq .gp-c b { font-size:16px; }
  .era-media [data-fig-pin="istanbul"] { --la:142deg; }
  .era-media [data-fig-pin="istanbul"] .gp-c { left:auto; right:calc(var(--ll) * .79 - 1px); align-items:flex-end; text-align:right; }
  .svc-legend { margin-top:6px; gap:4px 16px; font-size:11px; letter-spacing:.14em; }
  .gkm b { font-size:14px; }
}
/* below 1280px the About globe is ≤ 560px: Istanbul, Ankara and Mersin (≈ 15px apart) share one card */
@media (max-width:1279px) { .gp--ph-hide { display:none; } .gp--ph-show { display:block; } }
@media (min-width:1280px) { .gp--ph-show { display:none; } }
@media (prefers-reduced-motion:reduce) { .gp,.gkm,.gtk,.gsv,.gsea,.gp-v,.gsel-b,.gsel-b::before { transition:none; } }
/* the story stage shows its globe labels only while it is a globe */
.stage-frame:not([data-fig="globe"]) .fig-pins > * { opacity:0 !important; transition:none; }

/* ---- r5.3: the chart's water names (letter-spaced Cormorant italic, placed by the engine in open sea) ---- */
.gsea { position:absolute; left:0; top:0; width:0; height:0; opacity:0; pointer-events:none; transition:opacity 1.1s var(--e-out); }
.gsea[data-vis="1"] { opacity:calc(.35 + .65 * var(--depth,1)); }
.fig-live .is-formed .gsea[data-vis="1"] { transition-delay:.9s; }
.fig-live [data-fig="globe"]:not(.is-formed) .gsea { opacity:0; transition-duration:.25s; transition-delay:0s; }
.gsea > span { position:absolute; left:0; top:0; translate:-50% -50%; white-space:nowrap; font-family:var(--serif); font-style:italic; font-weight:400; font-size:15px; line-height:1; letter-spacing:.26em; color:rgba(231,207,155,.66); text-shadow:0 0 10px #0a0908,0 0 3px #0a0908; }
[data-fig-cam="heute"] .gsea > span { font-size:14px; letter-spacing:.2em; }
.gsea > span { white-space:normal; width:min-content; text-align:center; line-height:1.15; } /* names of two words stack, as on a chart (narrow seas, long TR/EN names) */
@media (max-width:699px) { .gsea > span,[data-fig-cam="heute"] .gsea > span { font-size:13px; letter-spacing:.12em; } }

/* ---- r5.3: the grouped card (below 1280px) points at all three cities: two hairlines from Ankara to İstanbul and Mersin ---- */
.gp[data-fig-pin="tr3"]::before,.gp[data-fig-pin="tr3"]::after { content:""; position:absolute; left:0; top:0; height:1px; transform-origin:0 50%; background:linear-gradient(90deg,rgba(231,207,155,0) 0 4px,rgba(231,207,155,.55) 6px calc(100% - 6px),rgba(231,207,155,0) calc(100% - 4px)); }
.gp[data-fig-pin="tr3"]::before { width:var(--t1,0px); transform:rotate(var(--a1,0deg)); }
.gp[data-fig-pin="tr3"]::after { width:var(--t2,0px); transform:rotate(var(--a2,0deg)); }

/* ---- r5.3: selection (hover / focus / tap): the card opens to its venues with today's open state ---- */
.gp-v { display:none; align-items:center; gap:7px; font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.1; color:var(--cream); }
.gp-v i { width:6px; height:6px; border-radius:50%; border:1px solid rgba(231,207,155,.6); flex:none; }
.gp-v i.is-open { background:var(--gold-l); border-color:var(--gold-l); box-shadow:0 0 6px rgba(231,207,155,.8); }
.gp-v i:not([data-open]) { border-style:dotted; }
.gp[data-open="istanbul"] .gp-v--istanbul,.gp[data-open="ankara"] .gp-v--ankara,.gp[data-open="mersin"] .gp-v--mersin,.gp[data-open="tr3"] .gp-v { display:flex; }
.gp[data-open] { z-index:2; }
.gp[data-open] .gp-c::before { inset:-16px -24px -12px; background:radial-gradient(closest-side,rgba(10,9,8,.9),rgba(10,9,8,.7) 60%,rgba(10,9,8,0)); }
.gp--nw .gp-v,.gp--sw .gp-v,.gp[data-flip="1"] .gp-v { flex-direction:row-reverse; }
/* the cards and route ends take the pointer once they stand (mouse hover, tap); keyboard: the strip below */
@media (hover:hover) and (pointer:fine) { .fig-live .fig-slot--globe.is-formed .gp[data-vis="1"] .gp-c { pointer-events:auto; cursor:pointer; } }
.fig-live .fig-slot--flows.is-formed .gsv[data-vis="1"] > span { pointer-events:auto; cursor:pointer; }
.gsv > span::before { content:""; position:absolute; inset:-9px -5px; } /* a larger hit area that never changes the measured box */
.gsv > span[data-join]::after { content:" · " attr(data-join); }
.fig-live .is-formed[data-fig-sel] .gp[data-vis="1"]:not([data-open]):not(.gp--hq) { opacity:calc(.32 * var(--depth,1)); transition-delay:0s; }

/* ---- r5.3: the About strip — real buttons (keyboard, screen readers, 44px touch) outside the aria-hidden figure ---- */
.gsel { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:18px auto 0; max-width:620px; border-top:1px solid rgba(231,207,155,.18); }
.gsel-b { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:58px; padding:14px 14px 10px; background:none; border:0; border-left:1px solid rgba(231,207,155,.1); color:var(--cream); cursor:pointer; text-align:left; font:inherit; transition:background .35s var(--e-out); }
.gsel-b:first-child { border-left:0; }
.gsel-b::before { content:""; position:absolute; left:-1px; right:0; top:-1px; height:1px; background:var(--gold-l); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--e-out); }
.gsel-b b { font-family:var(--serif); font-style:italic; font-weight:400; font-size:19px; line-height:1; letter-spacing:.005em; }
.gsel-b small { font-family:var(--sans); font-weight:500; font-size:11px; line-height:1.2; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.gsel-b:hover,.gsel-b.is-sel { background:linear-gradient(180deg,rgba(201,164,92,.09),rgba(201,164,92,0)); }
.gsel-b:hover::before,.gsel-b.is-sel::before { transform:scaleX(1); }
.gsel-b:focus-visible { outline:1px solid var(--gold-l); outline-offset:-1px; }
.gsel-b[data-gsel="koln"] small { color:var(--gold-l); }
@media (max-width:699px) {
  .gsel { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:10px; }
  .gsel-b { min-height:56px; padding:12px 12px 10px; }
  .gsel-b:nth-child(3) { border-left:0; }
  .gsel-b:nth-child(n+3) { border-top:1px solid rgba(231,207,155,.1); }
  .gsel-b b { font-size:18px; }
}
/* the strip travels with the sticky globe (one sticky unit: globe + strip) */
.gstick { --s:min(44vw,calc(74svh - 64px),700px); position:sticky; top:calc(50svh - (var(--s) + 76px) / 2); }
.gstick > .fig-slot--globe { --s:inherit; position:relative; top:auto; }
@media (max-width:1099px) { .gstick { position:relative; top:auto; } .gstick > .fig-slot--globe { --s:auto; } }
/* a card near the screen edge slides along its shelf (--gx from the engine; the leader still meets the shelf) */
.gp-c { translate:var(--gx,0px) 0; }

/* r5 fix (T1): no globe card can ever widen the page (body's clip is propagated to the viewport, which phones ignore) */
.about,.story { overflow-x:clip; }
/* r5 fix (A4): the Heute HQ card's halo is tight and lighter, so the coasts under it (England, the Channel) still show */
.story .gp--hq .gp-c::before { inset:-6px -8px -4px; background:radial-gradient(closest-side,rgba(10,9,8,.6),rgba(10,9,8,.38) 60%,rgba(10,9,8,0)); }

/* ======== the Türkiye map (formerly map.css) ======== */
/* UMERVION · Design 6 "Yakamoz" · the Türkiye map, round 5 prototype — the crisp layer over the engine's motes.
   An engraved night chart in gold: Yakamoz water-lines in the sea, 81 provinces in hairlines, the coast as one filament,
   three lifted copper plates, a call-out loupe for the active city. Positions are in map km (Lambert conformal conic,
   y down); the slot's view (--tk-vx/vy/vw/vh, km) is set here per breakpoint and read by map.js and the engine. */

@property --tk-r { syntax:"<percentage>"; inherits:true; initial-value:0%; }

/* prototype scaffolding: room above/below so the slot can enter and leave the viewport */
.proto-gap { height:70vh; }
.proto-gap--end { height:120vh; }

/* ---- the slot: 2:1 (was 12/5) — Türkiye fills the width, the Black Sea above, the Mediterranean and Cyprus below ---- */
.fig-slot--turkiye { aspect-ratio:7 / 4; --tk-vx:-837.8; --tk-vy:-417.4; --tk-vw:1748.9; --tk-vh:874.5; }
@media (min-width:1100px) {
  .m-ready .venues-inner { --map-h:min(calc(var(--map-w) * 4 / 7),var(--map-max)); }
  .m-ready .fig-slot--turkiye { width:min(100%,calc(var(--map-max) * 7 / 4)); }
}
/* phone: full bleed, taller: the call-out lives in its own band under the south coast */
@media (max-width:699px) {
  .venues-map { margin-inline:calc(-1 * var(--g)); }
  .fig-slot--turkiye { aspect-ratio:390 / 292; --tk-vx:-837.8; --tk-vy:-411.4; --tk-vw:1748.9; --tk-vh:1309.4; }
}
.fig-slot--turkiye .fig-poster { object-fit:cover; }

.tk { position:absolute; inset:0; z-index:1; --tk-ox:30%; --tk-oy:35%; }
.tk-par { position:absolute; inset:0; will-change:transform; }
.tk-clip { position:absolute; inset:0; overflow:hidden;
  /* the chart dissolves into the page at its edges (no box), and develops from the active city outward */
  -webkit-mask-image:radial-gradient(circle at var(--tk-ox) var(--tk-oy),#000 calc(var(--tk-r) - 22%),transparent var(--tk-r)),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent);
  -webkit-mask-composite:source-in,source-in; mask-image:radial-gradient(circle at var(--tk-ox) var(--tk-oy),#000 calc(var(--tk-r) - 22%),transparent var(--tk-r)),linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent);
  mask-composite:intersect; transition:--tk-r 2.8s cubic-bezier(.45,.05,.35,1); }
.tk.is-dev .tk-clip { --tk-r:190%; }
.tk-svg { position:absolute; left:0; top:0; display:block; max-width:none; overflow:visible; }
.tk-svg * { vector-effect:non-scaling-stroke; }

/* the sea: Yakamoz water-lines, fading outward */
.tk-ring { fill:none; stroke:#c9a45c; stroke-width:.7px; stroke-linejoin:round; stroke-linecap:round; }
.tk-ring--0 { stroke-opacity:.42; }
.tk-ring--1 { stroke-opacity:.27; }
.tk-ring--2 { stroke-opacity:.18; stroke-width:.6px; }
.tk-ring--3 { stroke-opacity:.12; stroke-width:.6px; }
.tk-ring--4 { stroke-opacity:.075; stroke-width:.6px; }

/* the neighbours: quiet */
.tk-nb path { fill:none; stroke-linejoin:round; }
.tk-nb-coast { stroke:#c9a45c; stroke-opacity:.34; stroke-width:.6px; }
.tk-nb-bord { stroke:#9c7838; stroke-opacity:.42; stroke-width:.6px; stroke-dasharray:3 3; }
.tk-nb-lake { stroke:#c9a45c; stroke-opacity:.22; stroke-width:.5px; }

/* Türkiye */
.tk-fill { fill:#110e0a; }
.tk-prov { fill:#e7cf9b; fill-opacity:0; stroke:none; pointer-events:all; cursor:default; transition:fill-opacity .35s; }
.tk-prov.is-hover { fill-opacity:.075; }
.tk-prov.is-lit { cursor:pointer; }
.tk-pl { fill:none; stroke:#c9a45c; stroke-opacity:.34; stroke-width:.55px; stroke-linejoin:round; }
.tk-lake { fill:#0a0908; stroke:#c9a45c; stroke-opacity:.6; stroke-width:.6px; }
.tk-bord { fill:none; stroke:#e7cf9b; stroke-opacity:.55; stroke-width:.8px; stroke-dasharray:5 2.2 1 2.2; }
.tk-coast { fill:none; stroke:#e7cf9b; stroke-opacity:.92; stroke-width:.95px; stroke-linejoin:round; }
.tk-coast-glow { fill:none; stroke:#c9a45c; stroke-opacity:.13; stroke-width:4px; stroke-linejoin:round; }

/* the copper plates: lifted 3px over their own shadow, embossed, the active one brighter */
.tk-plate { pointer-events:none; }
.tk-halo { fill:url(#tkHalo); opacity:0; transition:opacity 1.2s; }
.tk-plate.is-on .tk-halo { opacity:1; }
.tk-slab { fill:#070605; stroke:#9c7838; stroke-opacity:.85; stroke-width:.8px; filter:url(#tkSlab); transform:translate(0,calc(1.4px / var(--tk-k,.4))); }
.tk-lift { transform:translate(0,calc(-1.8px / var(--tk-k,.4))); }
.tk-pfill { fill:url(#tkPlate); filter:url(#tkEmb); }
.tk-plate.is-on .tk-pfill { fill:url(#tkPlateOn); }
.tk-pedge { fill:none; stroke:#c9a45c; stroke-opacity:.8; stroke-width:.8px; }
.tk-plate.is-on .tk-pedge { stroke:#e7cf9b; stroke-opacity:1; stroke-width:1px; }

/* bearing to Köln, the call-out leader and its source ring */
.tk-koln { fill:none; stroke:#e7cf9b; stroke-opacity:.6; stroke-width:.8px; stroke-dasharray:1.5 4; stroke-linecap:round; }
.tk-lead { fill:none; stroke:#e7cf9b; stroke-opacity:.75; stroke-width:.75px; stroke-dasharray:1 1; stroke-dashoffset:0; }
.tk-src { fill:none; stroke:#f3ece0; stroke-opacity:.85; stroke-width:.8px; }

/* ---- labels (map km → % of the slot) ---- */
.tk-labels,.tk-glabs { position:absolute; inset:0; pointer-events:none; }
.tk-lab { position:absolute; text-shadow:0 0 8px #0a0908,0 0 3px #0a0908; left:calc((var(--x) - var(--tk-vx)) / var(--tk-vw) * 100%); top:calc((var(--y) - var(--tk-vy)) / var(--tk-vh) * 100%); translate:-50% -50%; white-space:nowrap; line-height:1; }
.tk-sea { font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(11px,.92vw,14px); letter-spacing:.34em; color:rgba(231,207,155,.62); }
.tk-sea--v,.tk-nbl--v { writing-mode:vertical-rl; transform:rotate(180deg); }
.tk-nbl { font-family:var(--sans); font-weight:500; font-size:8px; letter-spacing:.3em; text-transform:uppercase; color:rgba(201,164,92,.5); }
.tk-cityl { font-family:var(--sans); font-weight:500; font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:rgba(243,236,224,.78); display:flex; align-items:baseline; gap:6px; }
.tk-cityl i { font-family:var(--serif); font-style:italic; font-weight:400; font-size:12px; letter-spacing:0; color:var(--gold-l); }
.tk-cityl--istanbul { translate:-10% 90%; }
.tk-cityl--ankara { translate:-50% 150%; }
.tk-cityl--mersin { translate:18px -10%; }
.tk[data-city="istanbul"] .tk-cityl--istanbul,.tk[data-city="ankara"] .tk-cityl--ankara,.tk[data-city="mersin"] .tk-cityl--mersin { color:var(--cream); }

/* graticule ticks and their degrees */
.tk-glab { position:absolute; font-family:var(--serif); font-style:italic; font-size:10px; line-height:1; color:rgba(201,164,92,.55); }
.tk-glab--l { left:10px; translate:0 -50%; }
.tk-glab--r { right:10px; translate:0 -50%; }
.tk-glab--b { bottom:4px; translate:-50% 0; }
.tk-tick { position:absolute; background:rgba(231,207,155,.45); }
.tk-tick--l,.tk-tick--r { width:6px; height:1px; }
.tk-tick--l { left:0; } .tk-tick--r { right:0; }
.tk-tick--t,.tk-tick--b { width:1px; height:6px; }
.tk-tick--t { top:0; } .tk-tick--b { bottom:0; }
.tk-corner { position:absolute; width:12px; height:12px; border:0 solid rgba(231,207,155,.5); }
.tk-corner--tl { left:0; top:0; border-width:1px 0 0 1px; } .tk-corner--tr { right:0; top:0; border-width:1px 1px 0 0; }
.tk-corner--bl { left:0; bottom:0; border-width:0 0 1px 1px; } .tk-corner--br { right:0; bottom:0; border-width:0 1px 1px 0; }

/* Köln, where the bearing leaves the frame */
.tk-kolnlab { position:absolute; left:0; top:0; translate:4px 2px; font-family:var(--sans); font-weight:500; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,236,224,.7); white-space:nowrap; pointer-events:none; }
.tk-kolnlab b { font-family:var(--serif); font-style:italic; font-weight:400; font-size:12.5px; letter-spacing:0; text-transform:none; color:var(--gold-l); margin-right:4px; }
.tk-kolnlab::before { content:"\2196"; margin-right:5px; color:var(--gold-l); letter-spacing:0; }

/* city buttons (44px targets; the engine's ember is the visible mark) */
.tk-cities { position:absolute; inset:0; pointer-events:none; }
.tk-city { position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; pointer-events:auto; }
.tk-city::before { content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:1px solid var(--gold-l); opacity:0; transform:scale(.6); transition:opacity .3s,transform .45s var(--e-out); }
.tk-city:hover::before,.tk-city:focus-visible::before { opacity:.9; transform:none; }
.tk-city:focus-visible { outline:none; }
.tk-dot { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--gold-l); box-shadow:0 0 0 3px rgba(231,207,155,.12),0 0 14px rgba(231,207,155,.55); opacity:0; }
.fig-off .tk-dot { opacity:1; }
.fig-off .tk-city.is-on .tk-dot { box-shadow:0 0 0 4px rgba(231,207,155,.18),0 0 22px rgba(243,236,224,.8); background:var(--cream); }

/* ---- the call-out: a loupe on the active city (a bezel with 64 ticks, its name on the arc) and a card ---- */
.tk-call { position:absolute; left:0; top:0; width:0; height:0; --lr:56px; z-index:3; }
.tk-loupe { position:absolute; left:calc(-1 * var(--lr)); top:calc(-1 * var(--lr)); width:calc(2 * var(--lr)); height:calc(2 * var(--lr)); }
.tk-lglass { position:absolute; inset:0; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 38% 32%,#17130d,#0b0a08 72%);
  box-shadow:0 0 0 1px rgba(231,207,155,.62),0 0 0 4px rgba(10,9,8,.9),0 14px 34px rgba(0,0,0,.65),inset 0 0 22px rgba(0,0,0,.75); }
.tk-lglass::after { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 32% 26%,rgba(243,236,224,.10),rgba(243,236,224,0) 42%); pointer-events:none; }
.tk-lsvg { position:absolute; inset:0; width:100%; height:100%; opacity:0; transform:scale(.7); transition:opacity .45s,transform .9s var(--e-out); }
.tk-call[data-city="istanbul"] .tk-lsvg[data-city="istanbul"],.tk-call[data-city="ankara"] .tk-lsvg[data-city="ankara"],.tk-call[data-city="mersin"] .tk-lsvg[data-city="mersin"] { opacity:1; transform:none; }
.tk-lsea { fill:#0b0a08; }
.tk-lring { fill:none; stroke:#c9a45c; stroke-opacity:.3; stroke-width:.6px; }
.tk-lland { fill:#15110b; }
.tk-lurban { stroke:#c9a45c; stroke-opacity:.5; stroke-width:.6px; stroke-dasharray:1 2; }
.tk-lprov { fill:none; stroke:#c9a45c; stroke-opacity:.45; stroke-width:.6px; stroke-dasharray:3 2; }
.tk-lcoast { fill:none; stroke:#e7cf9b; stroke-opacity:.9; stroke-width:.8px; }
.tk-bezel { position:absolute; left:50%; top:50%; width:calc(2 * var(--lr) * 72 / 55.4); height:calc(2 * var(--lr) * 72 / 55.4); translate:-50% -50%; overflow:visible; pointer-events:none; }
.tk-bezel .tk-bz1 { fill:none; stroke:#e7cf9b; stroke-opacity:.35; stroke-width:.6px; }
.tk-bezel .tk-bz2 { display:none; }
.tk-bzt line { stroke:#e7cf9b; stroke-opacity:.45; stroke-width:.6px; }
.tk-bzl { font-family:var(--sans); font-weight:500; font-size:7.2px; letter-spacing:.34em; fill:var(--cream); }
.tk-bzs { font-family:var(--sans); font-weight:500; font-size:6.2px; letter-spacing:.26em; fill:var(--gold-l); }
.tk-bzs.is-closed,.tk-bzs.is-none { fill:var(--muted); }
.tk-lpins,.tk-ltxts { position:absolute; left:50%; top:50%; width:0; height:0; }
.tk-vpin { position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; }
.tk-vpin i { position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:#c9a45c; box-shadow:0 0 0 2px rgba(10,9,8,.85); transition:background-color .3s,box-shadow .3s; }
.tk-vpin.is-on i { background:var(--cream); box-shadow:0 0 0 2px rgba(10,9,8,.85),0 0 0 4px rgba(231,207,155,.55),0 0 16px 3px rgba(231,207,155,.6); }
.tk-vpin:hover i,.tk-vpin:focus-visible i { box-shadow:0 0 0 2px rgba(10,9,8,.85),0 0 0 4px rgba(231,207,155,.8); }
.tk-vpin:focus-visible { outline:none; }
.tk-vname { position:absolute; left:50%; top:calc(50% + 7px); translate:-50% 0; font-family:var(--sans); font-weight:500; font-size:8px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; color:rgba(243,236,224,.62); text-shadow:0 0 6px #0a0908,0 0 2px #0a0908; pointer-events:none; }
.tk-vpin.is-on .tk-vname { font-family:var(--serif); font-style:italic; font-weight:400; font-size:13px; letter-spacing:0; text-transform:none; color:var(--cream); }
.tk-vpin.is-up .tk-vname { top:auto; bottom:calc(50% + 7px); }
.tk-vpin.is-left .tk-vname { left:auto; right:calc(50% + 8px); top:50%; translate:0 -50%; }
.tk-vpin.is-right .tk-vname { left:calc(50% + 8px); top:50%; translate:0 -50%; }
.tk-ltxt { position:absolute; translate:-50% -50%; white-space:nowrap; pointer-events:none; font-family:var(--serif); font-style:italic; font-size:10px; letter-spacing:.14em; color:rgba(231,207,155,.62); text-shadow:0 0 6px #0b0a08; }
.tk-ltxt--city { font-style:normal; font-family:var(--sans); font-weight:500; font-size:7.5px; letter-spacing:.3em; text-transform:uppercase; color:rgba(243,236,224,.55); }
.tk-ltxt--strait { rotate:-62deg; font-size:9px; }
.tk-ltxt--sea { font-size:9px; letter-spacing:.08em; }
.tk-lscale { position:absolute; left:79%; bottom:31%; translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:3px; pointer-events:none; }
.tk-lscale i { display:block; width:var(--w,30px); height:4px; border:1px solid rgba(231,207,155,.55); border-top:0; }
.tk-lscale b { font-family:var(--sans); font-weight:500; font-size:7px; letter-spacing:.2em; color:rgba(231,207,155,.7); }

.tk-card { position:absolute; left:calc(var(--lr) + 18px); top:var(--cy,-34px); width:max-content; max-width:240px; padding:11px 16px 12px; pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,11,.92),rgba(12,10,9,.84)); border:1px solid rgba(231,207,155,.22); box-shadow:0 12px 30px rgba(0,0,0,.45); }
.tk-card::before { content:""; position:absolute; top:calc(-1 * var(--cy,-34px) - 1px); right:100%; width:18px; height:1px; background:rgba(231,207,155,.55); }
.tk-call[data-side="l"] .tk-card::before { right:auto; left:100%; }
.tk-call[data-side="l"] .tk-card { left:auto; right:calc(var(--lr) + 18px); text-align:right; }
.tk-cno { font-family:var(--sans); font-weight:500; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); line-height:1.3; }
.tk-cno span { font-family:var(--serif); font-style:italic; font-weight:400; font-size:.95rem; letter-spacing:0; color:var(--gold-l); margin-right:.35em; }
.tk-cname { margin-top:4px; font-family:var(--serif); font-weight:400; font-style:italic; font-size:1.42rem; line-height:1.05; color:var(--gold-l); }
.tk-cname em { font-style:italic; }
.tk-cbrand { display:none; font-style:normal; font-size:.62em; color:rgba(243,236,224,.72); }
.tk-call[data-ven="shangai"] .tk-cbrand { display:none; }
.tk-cstate { display:flex; align-items:center; gap:8px; margin-top:7px; font-family:var(--sans); font-weight:500; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-l); white-space:nowrap; }
.tk-call[data-side="l"] .tk-cstate { justify-content:flex-end; }
.tk-cstate.is-closed { color:var(--muted); }
.tk-cstate .ember { width:6px; height:6px; }
.tk-cstate.is-cuisine .ember,.tk-cstate.is-none .ember { display:none; }

@media (min-width:700px) { .tk-card { display:none; } }
@media (max-width:699px) { .tk-bzs { display:none; } }

/* entrance: after the spark lands (≈ .7s), the loupe opens like an iris and the card develops */
.tk-loupe { opacity:0; transform:scale(.55); transition:opacity .25s,transform .25s; }
.tk-card { opacity:0; transform:translateX(-8px); transition:opacity .2s,transform .2s; }
.tk.is-dev .tk-call.is-in .tk-loupe { opacity:1; transform:none; transition:opacity .5s var(--e-out) .45s,transform .9s var(--e-out) .45s; }
.tk.is-dev .tk-call.is-in .tk-card { opacity:1; transform:none; transition:opacity .6s var(--e-out) .7s,transform .8s var(--e-out) .7s; }
.tk-lead { stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset .1s; }
.tk.is-dev .tk-lead { stroke-dashoffset:0; transition:stroke-dashoffset .7s var(--e-out) .5s; }
.tk.is-moved .tk-lead { animation:tk-draw .8s var(--e-out) .45s both; }
@keyframes tk-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.tk-src { opacity:0; transition:opacity .3s; }
.tk.is-dev .tk-src { opacity:1; transition:opacity .5s .55s; }
.tk-koln { opacity:0; transition:opacity .3s; }
.tk.is-dev .tk-koln { opacity:1; transition:opacity 1s 1.1s; }
.tk.is-moved .tk-koln,.tk.is-moved .tk-kolnlab { animation:tk-fade 1.2s ease .5s both; }
@keyframes tk-fade { from { opacity:0; } }

/* the labels develop after the hairlines */
.tk-labels,.tk-glabs,.tk-kolnlab,.tk-cart { opacity:0; transition:opacity .4s; }
.tk.is-dev .tk-labels,.tk.is-dev .tk-glabs { opacity:1; transition:opacity 1.2s ease .9s; }
.tk.is-dev .tk-kolnlab { opacity:1; transition:opacity 1s ease 1.3s; }
.tk.is-dev .tk-cart { opacity:1; transition:opacity 1s ease 1.5s; }

/* ---- the tooltip ---- */
.tk-tip { position:absolute; left:0; top:0; z-index:6; min-width:120px; padding:10px 14px 11px; background:rgba(14,12,11,.94); border:1px solid rgba(231,207,155,.3); box-shadow:0 14px 34px rgba(0,0,0,.55); pointer-events:none; opacity:0; transition:opacity .2s; }
.tk-tip.is-on { opacity:1; }
.tk-tip p { margin:0; line-height:1.3; }
.tk-tno { font-family:var(--serif); font-style:italic; font-size:.95rem; color:var(--gold-l); }
.tk-tno b { font-style:normal; font-weight:400; font-size:1.15rem; color:var(--cream); margin-left:.2em; }
.tk-tname { margin-top:2px !important; font-family:var(--sans); font-weight:500; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); }
.tk-tname em { font-family:var(--serif); font-weight:400; font-size:1.05rem; letter-spacing:0; text-transform:none; color:var(--gold-l); }
.tk-tsub { margin-top:4px !important; font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.tk-tip ul { margin-top:7px; padding-top:7px; border-top:1px solid var(--hair); }
.tk-tip li { display:flex; align-items:center; gap:8px; font-size:.78rem; line-height:1.7; color:var(--text); white-space:nowrap; }
.tk-tip li em { font-family:var(--serif); font-size:.98rem; color:var(--gold-l); }
.tk-tip .ember { width:6px; height:6px; }

/* ---- the cartouche: stats + scale bar ---- */
.tk-cart { position:absolute; right:16px; bottom:24px; display:flex; align-items:flex-end; gap:18px; pointer-events:none; }
.tk-stats { font-family:var(--sans); font-weight:500; font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(243,236,224,.62); white-space:nowrap; }
.tk-stats b { font-family:var(--serif); font-style:italic; font-weight:400; font-size:1rem; letter-spacing:0; color:var(--gold-l); margin-right:.15em; }
.tk-scale { position:relative; display:flex; justify-content:space-between; width:calc(200px * var(--tk-k,.4)); height:12px; font-family:var(--sans); font-size:7px; letter-spacing:.12em; color:rgba(231,207,155,.6); }
.tk-scale i { position:absolute; left:0; right:0; top:0; height:3px; border:1px solid rgba(231,207,155,.5); border-top:0; background:linear-gradient(90deg,rgba(231,207,155,.5) 50%,transparent 50%); background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat; }
.tk-scale span { position:relative; top:6px; translate:-50% 0; }
.tk-scale span:last-child { translate:-30% 0; }
.tk-scale span:nth-child(3) { visibility:hidden; }

/* ---- fig-off (reduced motion, no WebGL): the poster carries the motes, everything crisp is simply there ---- */
.fig-off .tk-clip { -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 92%,transparent); }
.fig-off .tk-fill,.fig-off .tk-slab { fill-opacity:0; }
.fig-off .tk-ltxts { opacity:1; }

/* ---- phone ---- */
@media (max-width:699px) {
  .tk-sea { font-size:9.5px; letter-spacing:.26em; }
  .tk-nbl { display:none; }
  .tk-cityl { font-size:7.5px; letter-spacing:.22em; }
  .tk-cityl i { font-size:10px; }
  .tk-glab { font-size:8.5px; }
  .tk-glab--r { display:none; }
  .tk-call { --lr:40px; }
  .tk-card { left:calc(var(--lr) + 12px); padding:2px 0 0 12px; max-width:200px; background:none; border:0; border-left:1px solid rgba(231,207,155,.3); box-shadow:none; }
  .tk-card::before { display:none; }
  .tk-cname { font-size:1.2rem; }
  .tk-cstate { font-size:.52rem; letter-spacing:.14em; }
  .tk-cart { right:12px; bottom:12px; }
  .tk-ltxt,.tk-lscale,.tk-vname { display:none; }
  .tk-card { left:calc(var(--lr) + 18px); }
  .tk-sea--med { display:none; }
  .tk-scale { display:none; }
  .tk-stats { font-size:.5rem; letter-spacing:.18em; }
  .tk-sea--v { display:none; }
  .tk-kolnlab { font-size:7.5px; }
  .tk-kolnlab b { font-size:11px; }
}

@media (prefers-reduced-motion:reduce) {
  .tk *,.tk-clip { transition:none !important; animation:none !important; }
}

/* ==== r5 refine (after the review): whole Cyprus in view, neighbour land, type minimums (11px words / 10px numbers),
   a larger lens, lit-copper plates with a soft slab, a distinct focus ring, the hovered province lifted ==== */
.fig-slot--turkiye { --tk-vy:-423.1; --tk-vh:999.4; }
@media (max-width:699px) {
  .fig-slot--turkiye { aspect-ratio:390 / 312; --tk-vy:-434.1; --tk-vh:1399.2; }
}
.tk-nb-land { fill:#c9a45c !important; fill-opacity:.05; stroke:#c9a45c; stroke-opacity:.44; stroke-width:.7px; }
.tk-prov.is-hover { fill-opacity:.16; stroke:#f3ece0; stroke-opacity:.85; stroke-width:1.1px; filter:drop-shadow(0 0 4px rgba(231,207,155,.45)); }
.tk-slab { fill:#000; stroke:none; transform:translate(0,calc(.8px / var(--tk-k,.4))); }
.tk-pedge { stroke-opacity:.95; }
.tk-hid { visibility:hidden !important; }
/* type: words ≥ 11px, numbers ≥ 10px; sea/neighbour ≥ 3:1, city/stats/status ≥ 4.5:1 on #0a0908 */
.tk-sea { font-size:clamp(12px,.95vw,15px); color:rgba(231,207,155,.74); }
.tk-nbl { font-size:11px; letter-spacing:.24em; color:rgba(201,164,92,.78); }
.tk-cityl { font-size:11px; letter-spacing:.24em; color:rgba(243,236,224,.9); }
.tk-cityl i { font-size:14px; }
.tk-glab { font-size:11px; color:rgba(201,164,92,.8); }
.tk-kolnlab { font-size:11px; letter-spacing:.14em; color:rgba(243,236,224,.86); }
.tk-kolnlab b { font-size:14px; }
.tk-stats { font-size:11px; letter-spacing:.2em; color:rgba(243,236,224,.86); }
.tk-stats b { font-size:15px; }
.tk-scale { font-size:10px; color:rgba(231,207,155,.82); height:14px; }
.tk-call { --lr:66px; }
.tk-bzl { font-size:9.3px; letter-spacing:.26em; }
.tk-bzs { font-size:9.1px; letter-spacing:.16em; }
.tk-vname { font-size:11px; letter-spacing:.16em; color:rgba(243,236,224,.82); }
.tk-vpin.is-on .tk-vname { font-size:16px; }
.tk-ltxt { font-size:11px; color:rgba(231,207,155,.8); }
.tk-ltxt--strait,.tk-ltxt--sea { font-size:11px; }
.tk-lscale b { font-size:10px; color:rgba(231,207,155,.86); white-space:nowrap; }
.tk-city:focus-visible::before { opacity:1; transform:none; width:28px; height:28px; margin:-14px 0 0 -14px; border:2px solid var(--cream); box-shadow:0 0 0 2px #0a0908,0 0 14px rgba(243,236,224,.5); }
@media (max-width:699px) {
  .tk-call { --lr:56px; }
  .tk-bzl { font-size:10.9px; letter-spacing:.2em; }
  .tk-sea { font-size:11px; letter-spacing:.2em; }
  .tk-cityl { font-size:11px; letter-spacing:.16em; }
  .tk-cityl i { font-size:13px; }
  .tk-glab { font-size:10px; }
  .tk-kolnlab { font-size:11px; letter-spacing:.1em; }
  .tk-kolnlab b { font-size:13px; }
  .tk-stats { font-size:11px; letter-spacing:.1em; }
  .tk-stats b { font-size:14px; }
  .tk-cno { font-size:11px; }
  .tk-cstate { font-size:11px; letter-spacing:.1em; }
}
.tk-vpin.is-flip .tk-vname { top:auto; bottom:calc(50% + 7px); }
.tk-tnear { margin-top:3px !important; font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.12em; color:var(--cream); }
.tk-tnear em { font-family:var(--serif); font-size:1rem; letter-spacing:0; color:var(--gold-l); margin-right:.3em; }
/* the bezel carries the city only (the status is on the pin's ember, in the tooltip and in the rail next to the map) */
.tk-bzs { display:none; }
@media (max-width:699px) {
  .tk-cart { bottom:7px; }
  .tk-cname { font-size:1.12rem; margin-top:2px; }
  .tk-cstate { margin-top:5px; }
}
.tk-bezel { max-width:none; width:calc(2 * var(--lr)); height:calc(2 * var(--lr)); } /* the ring sits on the glass edge (compact: 132 px desktop, 112 px phone) */
.tk-bzl { font-size:12px; letter-spacing:.2em; }
.tk-vpin.is-flip .tk-vname { top:auto; bottom:calc(50% + 7px); left:50%; right:auto; translate:-50% 0; }
.tk-vpin.is-up.is-flip .tk-vname,.tk-vpin.is-left.is-flip .tk-vname,.tk-vpin.is-right.is-flip .tk-vname { top:calc(50% + 7px); bottom:auto; left:50%; right:auto; translate:-50% 0; }
@media (max-width:699px) { .tk-bzl { font-size:14.2px; letter-spacing:.12em; } }
.tk-lprov { stroke-dasharray:none; stroke-opacity:.5; stroke-width:.7px; } /* solid: a dashed hairline at lens scale read as a rendering fault */
/* short laptops: keep ≥ 16 px between the chart's frame and the venue bar (the 7:4 slot is taller than r4's 12:5) */
@media (min-width:1100px) {
  .m-ready .venues-inner { --map-h:min(calc(var(--map-w) * 4 / 7),calc(var(--map-max) - 16px)); }
  .m-ready .fig-slot--turkiye { width:min(100%,calc((var(--map-max) - 16px) * 7 / 4)); }
}
.tk-vpin.is-above .tk-vname { top:auto; bottom:calc(50% + 7px); left:50%; right:auto; translate:-50% 0; }

/* r5 integrate (site): a keyboard user can reach the lens's venue pins before the map has developed (tablet / phone rail):
   while focus is inside the call-out, the lens is simply there (no invisible focused control) */
.tk-call:focus-within .tk-loupe { opacity:1; transform:none; transition:none; }
/* the map loads lazily (motion.js mapLazy): with the posters (reduced motion, no WebGL) the cartouche's real text does not wait for map.js */
.fig-off .tk-cart { opacity:1; }
@media (prefers-reduced-motion:reduce) { .tk-cart { opacity:1; } }

/* ==== r5 fix (review round 5) ==== */
/* A1 / T6: the tip is a solid card (the engine also cuts its motes out under it) */
.tk-tip { background:#0e0c0b; border-color:rgba(231,207,155,.42); }
/* T9: city names on a lit plate or the coast keep a dark halo */
.tk-cityl { text-shadow:0 0 3px #0a0908,0 0 7px #0a0908; }
/* T5: venue pins reach 44 px of touch target */
@media (pointer:coarse) { .tk-vpin::after { content:""; position:absolute; inset:-7px; border-radius:50%; } }
@media (max-width:699px) {
  .tk-glab { font-size:10.5px; } /* T4: numbers ≥ 10 px rendered */
  .tk-cno,.tk-stats { font-size:11.5px; } /* T4: words ≥ 11 px rendered (11px measured 10.9) */
  .tk-cityl--istanbul { translate:-55% -175%; } /* A5: over the Black Sea, off the Ankara plate */
}