/* Prosestim Küresel Tedarik Haritası */
.psgm {
	--psgm-accent: #f59e6b;
	--psgm-line: #2b4d73;
	--psgm-dur: 500ms;
	--psgm-gap: 48px;
	--psgm-mapgap: 0px;
	--psgm-mapw: 64%;
	--psgm-cols-dev: 5;
	--psgm-land: rgba(255, 255, 255, .06);
	--psgm-land-stroke: rgba(255, 255, 255, .09);
	--psgm-land-in: rgba(255, 255, 255, .08);
	--psgm-land-active: rgba(245, 158, 107, .18);
	--psgm-land-active-stroke: rgba(245, 158, 107, .55);
	--psgm-land-sw: .6;
	--psgm-arc-o: .22;
	--psgm-arc-w: 1;
	--psgm-glow-idle: .12;
	--psgm-glow-active: .7;
	--psgm-pin-r: 3.5;
	--psgm-label: #fff;
	--psgm-card-active: rgba(245, 158, 107, .06);
	--psgm-grid: rgba(255, 255, 255, .03);
	--psgm-grid-hi: rgba(255, 255, 255, .08);
	--psgm-grid-size: 70px;
	--psgm-spot: 420px;
	--psgm-ease: cubic-bezier(.16, 1, .3, 1);

	position: relative;
	box-sizing: border-box;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #0b1b2b;
	padding: 96px 104px;
	color: #c9d3dd;
}

.psgm *,
.psgm *::before,
.psgm *::after { box-sizing: border-box; }

.psgm__inner {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--psgm-gap);
}

/* ---------- Optional grid + cursor spotlight ---------- */
.psgm--grid::before,
.psgm--grid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--psgm-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--psgm-grid) 1px, transparent 1px);
	background-size: var(--psgm-grid-size) var(--psgm-grid-size);
}
.psgm--grid::after {
	background-image:
		linear-gradient(var(--psgm-grid-hi) 1px, transparent 1px),
		linear-gradient(90deg, var(--psgm-grid-hi) 1px, transparent 1px);
	-webkit-mask-image: radial-gradient(circle var(--psgm-spot) at var(--psgm-gx, -999px) var(--psgm-gy, -999px), #000 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.15) 70%, transparent 100%);
	mask-image: radial-gradient(circle var(--psgm-spot) at var(--psgm-gx, -999px) var(--psgm-gy, -999px), #000 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.15) 70%, transparent 100%);
	opacity: 0;
	transition: opacity .4s ease;
}
@media (hover: hover) and (pointer: fine) {
	.psgm--grid.is-pointer::after { opacity: 1; }
}

/* ---------- Header ---------- */
.psgm__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 64px;
	row-gap: 24px;
	align-items: end;
}
.psgm__header--stacked { grid-template-columns: minmax(0, 1fr); }

.psgm__overline {
	margin: 0 0 18px;
	font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--psgm-accent);
}
.psgm__heading {
	margin: 0;
	font-size: clamp(32px, 3.6vw, 46px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.025em;
	color: #fff;
}
.psgm__desc {
	margin: 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.75;
	color: #c9d3dd;
}
.psgm__desc p { margin: 0; }

/* ---------- Body layout ----------
   Map and cards sit in named grid areas. The "Kartların konumu" control rewrites
   the areas per device; these are the defaults (cards below the map). */
.psgm__body {
	display: grid;
	gap: var(--psgm-mapgap);
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(min-content, 1fr) auto;
	grid-template-areas: "map" "cards";
	--psgm-cards-m: -1px 0 0 0;
	--psgm-cols-auto: var(--psgm-cols-dev);
}
.psgm__map { grid-area: map; }
.psgm__cards { grid-area: cards; }
.psgm--nomap .psgm__body { grid-template-areas: "cards"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }

/* ---------- Map ---------- */
.psgm__map {
	position: relative;
	padding: 24px;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Stage = the map area. Its height comes from the map's own ratio unless a height is set. */
.psgm__stage {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: var(--psgm-ar, 1000 / 406);
}
.psgm__svg {
	position: absolute;
	left: var(--psgm-map-x, 50%);
	top: var(--psgm-map-y, 50%);
	width: calc(var(--psgm-map-scale, 100) * 1%);
	height: calc(var(--psgm-map-scale, 100) * 1%);
	max-width: none;
	transform: translate(-50%, -50%);
	display: block;
	overflow: visible;
}

/* Fill: the map takes whatever height is left after header and cards. */
.psgm--fill .psgm__body { flex: 1 1 auto; min-height: 0; }
/* --psgm-stage-ar is set per device by the height mode: "auto" keeps the map ratio, "min"/"fixed" let it stretch. */
.psgm--fill .psgm__stage {
	flex: 1 1 auto;
	aspect-ratio: var(--psgm-stage-ar, var(--psgm-ar));
	min-height: 140px;
}

.psgm-land {
	fill: var(--psgm-land);
	stroke: var(--psgm-land-stroke);
	stroke-width: var(--psgm-land-sw);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: fill var(--psgm-dur) ease, stroke var(--psgm-dur) ease;
}
.psgm-land--in { fill: var(--psgm-land-in); }
.psgm[data-map-sync="1"] .psgm-land--in { cursor: pointer; }
.psgm-land.is-active {
	fill: var(--psgm-land-active);
	stroke: var(--psgm-land-active-stroke);
}

.psgm-stop { stop-color: var(--psgm-glow, var(--psgm-accent)); }
.psgm-stop--in { stop-opacity: .5; }
.psgm-stop--out { stop-opacity: 0; }
.psgm-glow {
	opacity: var(--psgm-glow-idle);
	pointer-events: none;
	transition: opacity var(--psgm-dur) ease;
}
.psgm-glow.is-active { opacity: var(--psgm-glow-active); }

.psgm-arc {
	fill: none;
	stroke: var(--psgm-arc, var(--psgm-accent));
	stroke-opacity: var(--psgm-arc-o);
	stroke-width: var(--psgm-arc-w);
	stroke-linecap: round;
	stroke-dasharray: 6 4;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
	transition: stroke-opacity var(--psgm-dur) ease, stroke-width var(--psgm-dur) ease, opacity .8s var(--psgm-ease);
}
.psgm--solid .psgm-arc { stroke-dasharray: none; }
.psgm-arc.is-active {
	stroke-opacity: .8;
	stroke-width: calc(var(--psgm-arc-w) * 2);
}
.psgm--flow .psgm-arc.is-active { animation: psgm-flow 1.1s linear infinite; }
.psgm--flow.psgm--solid .psgm-arc.is-active { animation: none; }

/* reveal on scroll */
.psgm--reveal.is-js .psgm-arc { opacity: 0; }
.psgm--reveal.is-js.is-inview .psgm-arc {
	opacity: 1;
	transition-delay: 0s, 0s, calc(var(--psgm-i, 0) * 60ms + 200ms);
}

.psgm-pin__halo,
.psgm-pin__dot,
.psgm-hub__ring {
	transform-box: fill-box;
	transform-origin: center;
}
.psgm-pin__halo {
	fill: var(--psgm-pin, var(--psgm-accent));
	fill-opacity: .16;
	opacity: 0;
	transform: scale(calc(var(--psgm-pin-r) / 3.5 * .6));
	transition: opacity var(--psgm-dur) ease, transform var(--psgm-dur) var(--psgm-ease);
}
.psgm-pin__dot {
	fill: var(--psgm-pin, var(--psgm-accent));
	opacity: .6;
	transform: scale(calc(var(--psgm-pin-r) / 3.5));
	transition: opacity var(--psgm-dur) ease, transform var(--psgm-dur) var(--psgm-ease);
}
.psgm-pin__label {
	fill: var(--psgm-label);
	fill-opacity: .4;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	pointer-events: none;
	transition: fill-opacity var(--psgm-dur) ease;
}
.psgm-pin__hit { fill: transparent; }
.psgm[data-map-sync="1"] .psgm-pin { cursor: pointer; }

.psgm-pin.is-active .psgm-pin__halo {
	opacity: 1;
	transform: scale(calc(var(--psgm-pin-r) / 3.5 * 1.2));
}
.psgm--pulse .psgm-pin.is-active .psgm-pin__halo {
	animation: psgm-pulse 2.2s ease-in-out infinite;
	animation-delay: calc(var(--psgm-k, 0) * 140ms);
}
.psgm-pin.is-active .psgm-pin__dot {
	opacity: 1;
	transform: scale(calc(var(--psgm-pin-r) / 3.5 * 1.45));
}
.psgm-pin.is-active .psgm-pin__label { fill-opacity: .95; }

/* dim inactive while something is active */
.psgm--dim.has-active .psgm-pin:not(.is-active),
.psgm--dim.has-active .psgm-arc:not(.is-active) { opacity: .3; }
.psgm--dim.has-active .psgm-card:not(.is-active) { opacity: .55; }

.psgm-hub__ring {
	fill: var(--psgm-hub, var(--psgm-accent));
	fill-opacity: .12;
}
.psgm--pulse .psgm-hub__ring { animation: psgm-hub 2s ease-in-out infinite; }
.psgm-hub__core { fill: var(--psgm-hub, var(--psgm-accent)); }
.psgm-hub__dot { fill: #fff; }
.psgm-hub__label {
	fill: var(--psgm-hub, var(--psgm-accent));
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
}

/* ---------- Cards ---------- */
.psgm__cards {
	display: grid;
	/* Explicit column count wins; otherwise 5/2/1 when stacked, 1 when beside the map. */
	grid-template-columns: repeat(var(--psgm-cols, var(--psgm-cols-auto, 5)), minmax(0, 1fr));
	border-top: 1px solid var(--psgm-line);
	border-left: 1px solid var(--psgm-line);
	min-width: 0;
	align-self: start;
	align-content: start;
	/* Overlap the shared 1px edge with the map frame so it reads as one line. */
	margin: var(--psgm-cards-m, 0);
}
.psgm--nomap .psgm__cards { margin: 0; }

.psgm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 150px;
	padding: 28px 24px 30px;
	border-right: 1px solid var(--psgm-line);
	border-bottom: 1px solid var(--psgm-line);
	/* No overflow clipping here: a card must never shrink below its own content (links stay visible). */
	outline: none;
	cursor: default;
	transition: background-color var(--psgm-dur) ease, opacity var(--psgm-dur) ease;
}
.psgm-card.is-active,
.psgm:not(.is-js) .psgm-card:hover { background-color: var(--psgm-card-active); }
.psgm-card:focus-visible { box-shadow: inset 0 0 0 2px var(--psgm-accent); }

.psgm-card__code {
	font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--psgm-accent);
	margin: 0 0 var(--psgm-gap-code, 14px);
}
.psgm-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #fff;
	overflow-wrap: anywhere;
}
.psgm-card__desc {
	margin: var(--psgm-gap-desc, 8px) 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: #a4aebb;
}
.psgm-card__links {
	margin-top: var(--psgm-links-push, auto);
	padding-top: var(--psgm-gap-links, 32px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--psgm-gap-link-items, 6px);
	font-size: 14px;
	line-height: 1.4;
	color: #a4aebb;
}
.psgm-card__links a {
	color: inherit;
	text-decoration: none;
	position: relative;
	z-index: 2;
	transition: color .2s ease;
}
.psgm-card__links a:hover,
.psgm-card__links a:focus-visible { color: var(--psgm-accent); }

/* Link = optional icon + text. "Bağlantı görünümü" switches these through CSS variables per device. */
.psgm-card__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--psgm-li-gap, 6px);
}
.psgm-card__ltext {
	position: var(--psgm-lt-pos, static);
	width: var(--psgm-lt-w, auto);
	height: var(--psgm-lt-h, auto);
	overflow: var(--psgm-lt-ov, visible);
	clip-path: var(--psgm-lt-clip, none);
	white-space: nowrap;
}
.psgm-card__sep { display: var(--psgm-sep-d, inline); }
.psgm-card__licon {
	display: var(--psgm-li-d, none);
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: var(--psgm-li-box, 0px);
	min-height: var(--psgm-li-box, 0px);
	font-size: var(--psgm-li-size, 16px);
	line-height: 1;
	color: var(--psgm-li-c, currentColor);
	background-color: var(--psgm-li-bg, transparent);
	border: 1px solid var(--psgm-li-bc, transparent);
	border-radius: var(--psgm-li-radius, 0px);
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.psgm-card__licon i { font-size: inherit; line-height: 1; }
.psgm-card__licon svg { width: 1em; height: 1em; fill: currentColor; display: block; }
.psgm-card__links a:hover .psgm-card__licon,
.psgm-card__links a:focus-visible .psgm-card__licon {
	color: var(--psgm-li-hc, var(--psgm-accent));
	background-color: var(--psgm-li-hbg, var(--psgm-li-bg, transparent));
}
.psgm-card__links a:focus-visible { outline: 1px solid var(--psgm-accent); outline-offset: 2px; }

/* Active lines, both anchored at the bottom-left corner and fading outward:
   vertical — solid at the bottom, transparent towards the top;
   horizontal — solid at the left, transparent towards the right. */
.psgm-card__corner,
.psgm-card__line {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	display: none;
	transition: transform .5s var(--psgm-ease), opacity var(--psgm-dur) ease;
}
.psgm-card__corner {
	left: -1px;
	top: 0;
	bottom: -1px;
	width: var(--psgm-vline-w, 2px);
	background: linear-gradient(to top, var(--psgm-lines-c, var(--psgm-accent)) 0%, transparent var(--psgm-vline-fade, 100%));
	transform: scaleY(0);
	transform-origin: bottom;
}
.psgm-card__line {
	left: -1px;
	right: 0;
	bottom: -1px;
	height: var(--psgm-hline-w, 2px);
	background: linear-gradient(to right, var(--psgm-lines-c, var(--psgm-accent)) 0%, transparent var(--psgm-hline-fade, 100%));
	transform: scaleX(0);
	transform-origin: left;
}
.psgm--corner .psgm-card__corner,
.psgm--line .psgm-card__line { display: block; }
.psgm-card.is-active .psgm-card__corner,
.psgm:not(.is-js) .psgm-card:hover .psgm-card__corner { transform: scaleY(1); }
.psgm-card.is-active .psgm-card__line,
.psgm:not(.is-js) .psgm-card:hover .psgm-card__line { transform: scaleX(1); }

/* ---------- Keyframes ---------- */
@keyframes psgm-flow { to { stroke-dashoffset: -20; } }
@keyframes psgm-pulse {
	0%, 100% { transform: scale(calc(var(--psgm-pin-r) / 3.5 * 1)); opacity: 1; }
	50% { transform: scale(calc(var(--psgm-pin-r) / 3.5 * 1.7)); opacity: .45; }
}
@keyframes psgm-hub {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.45); opacity: .4; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.psgm { padding: 72px 40px; }
	.psgm { --psgm-cols-dev: 2; }
	.psgm__header { column-gap: 40px; }
}
@media (max-width: 767px) {
	.psgm { padding: 56px 20px; }
	.psgm__header { grid-template-columns: minmax(0, 1fr); }
	.psgm { --psgm-cols-dev: 1; }
	.psgm__map { padding: 12px; }
	.psgm-card { min-height: 0; }
	/* On narrow screens the map is scaled down ~3×: show only the active region's labels, larger. */
	.psgm .psgm-pin__label { font-size: 26px; opacity: 0; transition: opacity var(--psgm-dur) ease; }
	.psgm .psgm-pin.is-active .psgm-pin__label { opacity: 1; }
	.psgm .psgm-hub__label { font-size: 24px; }
}


@media (prefers-reduced-motion: reduce) {
	.psgm *,
	.psgm *::before,
	.psgm *::after {
		animation: none !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.psgm--reveal.is-js .psgm-arc { opacity: 1; }
}