/* ══════════════════════════════════════════════════════════════════════
 *  KAMIENIE MOCY — arkusz dzialu
 *
 *  Uklad, palety i proporcje wziete 1:1 z makiet: granatowo-fioletowa noc,
 *  zlote wlosowe ramki z ozdobnymi naroznikami, wielki serif w rozstrzelonych
 *  wersalikach i pierscienie za kamieniem.
 *
 *  Dwie pulapki tego motywu, sprawdzone wczesniej na Niebie i Ksiezycu:
 *    1. motyw zostawia `content-box`, wiec kazda sekcja zaczyna od resetu,
 *       inaczej przyciski i karty wychodza poza obrys;
 *    2. `overflow-x: hidden` na korzeniu robi kontener przewijania i zabija
 *       `loading="lazy"` (obrazki zostaja puste) — uzywamy `clip`.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── wzorzec pelnoekranowy TT25 (ten sam co Niebo, Ksiezyc, Ksiega) ────
 *
 * Motyw wpuszcza tresc strony w waska kolumne i dokleja wlasny naglowek
 * oraz tytul wpisu. Dzial ma isc na pelna szerokosc i ma JEDNA wspolna
 * belke serwisu, wiec chowamy naglowek motywu, jego stopke i tytul,
 * a pojemnikom zdejmujemy `max-width`.
 */
body:has( .tkm ) .wp-site-blocks > header,
body:has( .tkm ) header.wp-block-template-part,
body:has( .tkm ) .wp-site-blocks > footer,
body:has( .tkm ) footer.wp-block-template-part,
body:has( .tkm ) .wp-block-post-title { display: none !important; }

body:has( .tkm ) .wp-site-blocks,
body:has( .tkm ) .wp-block-group,
body:has( .tkm ) .wp-block-post-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

body:has( .tkm ) .wp-block-post-content > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body:has( .tkm ) { background: #0a0722; }

.tkm {
	min-height: 100vh;
	padding-bottom: 10px;
	--noc:       #0a0722;
	--noc2:      #150c36;
	--noc3:      #1d1147;
	--panel:     rgba( 26, 16, 62, .62 );
	--panel2:    rgba( 18, 11, 44, .82 );
	--obrys:     rgba( 214, 176, 102, .22 );
	--obrys2:    rgba( 214, 176, 102, .40 );
	--zloto:     #ecd08a;
	--zloto2:    #c9a24a;
	--zloto3:    #8a6a2a;
	--tekst:     #e9e3f6;
	--przygasz:  #a79dc6;
	--cien:      0 18px 50px rgba( 4, 2, 16, .55 );

	/* barwa kamienia — podmieniana na karcie szczegolu */
	--k:  #a570e8;
	--k2: #3b1d6b;

	--ramka: clamp( 16px, 4vw, 56px );
	--odstep: clamp( 40px, 6vw, 86px );

	position: relative;
	box-sizing: border-box;
	overflow-x: clip;
	color: var( --tekst );
	font-family: 'Jost', system-ui, sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	background:
		radial-gradient( 120% 70% at 78% 6%,  rgba( 120, 70, 190, .30 ), transparent 62% ),
		radial-gradient( 90% 60% at 12% 32%, rgba( 60, 40, 150, .24 ), transparent 66% ),
		radial-gradient( 70% 50% at 50% 100%, rgba( 90, 55, 160, .18 ), transparent 70% ),
		linear-gradient( 180deg, var( --noc ) 0%, var( --noc2 ) 46%, var( --noc ) 100% );
}

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

.tkm-laduje {
	padding: 120px 20px;
	text-align: center;
	color: var( --zloto2 );
	letter-spacing: .28em;
	text-transform: uppercase;
	font-size: 12px;
}

/* Gwiazdy: dwie warstwy kropek zamiast obrazka — zero transferu. */
.tkm::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .55;
	background-image:
		radial-gradient( 1px 1px at 12% 18%, rgba( 255, 244, 214, .9 ), transparent ),
		radial-gradient( 1px 1px at 62% 8%,  rgba( 255, 244, 214, .7 ), transparent ),
		radial-gradient( 1px 1px at 82% 24%, rgba( 255, 244, 214, .8 ), transparent ),
		radial-gradient( 1px 1px at 28% 42%, rgba( 236, 208, 138, .6 ), transparent ),
		radial-gradient( 1px 1px at 92% 56%, rgba( 255, 244, 214, .6 ), transparent ),
		radial-gradient( 1px 1px at 44% 72%, rgba( 255, 244, 214, .7 ), transparent ),
		radial-gradient( 1px 1px at 8%  86%, rgba( 236, 208, 138, .5 ), transparent ),
		radial-gradient( 1px 1px at 70% 92%, rgba( 255, 244, 214, .6 ), transparent );
	background-size: 100% 100%;
}

.tkm-plyta { position: relative; z-index: 1; padding: 0 var( --ramka ); }
.tkm-srodek { max-width: 1520px; margin: 0 auto; }

/* ── typografia ──────────────────────────────────────────────────────── */

.tkm-oko {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var( --zloto2 );
}
.tkm-oko::before,
.tkm-oko::after { content: '✦'; font-size: 10px; opacity: .8; letter-spacing: 0; }

.tkm-tytul {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp( 40px, 7vw, 86px );
	line-height: 1.02;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: linear-gradient( 180deg, #fbeec2 0%, var( --zloto ) 42%, var( --zloto2 ) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tkm-pod {
	margin: 10px 0 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: clamp( 16px, 2vw, 22px );
	color: var( --przygasz );
}

.tkm-lead { margin: 18px 0 0; max-width: 52ch; color: var( --przygasz ); }

/* Ozdobnik: cienka linia z rombem posrodku — powtarza sie w calej makiecie. */
.tkm-ozdoba {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 22px 0;
	color: var( --zloto2 );
}
.tkm-ozdoba::before,
.tkm-ozdoba::after {
	content: '';
	height: 1px;
	width: min( 190px, 22vw );
	background: linear-gradient( 90deg, transparent, var( --obrys2 ), transparent );
}
.tkm-ozdoba span { font-size: 11px; }

/* ── przyciski ───────────────────────────────────────────────────────── */

.tkm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 30px;
	border-radius: 999px;
	border: 1px solid var( --obrys2 );
	background: transparent;
	color: var( --zloto );
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.tkm-btn:hover { border-color: var( --zloto ); color: #fff6dc; transform: translateY( -1px ); }
.tkm-btn:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tkm-btn--zloty {
	border-color: transparent;
	color: #2a1c04;
	background: linear-gradient( 180deg, #f6dfa4, var( --zloto2 ) );
	box-shadow: 0 10px 30px rgba( 201, 162, 74, .28 );
}
.tkm-btn--zloty:hover { color: #1d1302; background: linear-gradient( 180deg, #fdeec3, #d8b158 ); }

.tkm-akcje { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ── pasek dzialu (zamiast drugiej belki serwisu) ────────────────────── */

.tkm-pasek {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 14px, 3vw, 40px );
	flex-wrap: wrap;
	padding: 16px var( --ramka );
	border-bottom: 1px solid var( --obrys );
	background: rgba( 10, 7, 34, .55 );
}
.tkm-pasek__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 17px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-pasek nav { display: flex; gap: clamp( 12px, 2.4vw, 30px ); flex-wrap: wrap; }
.tkm-pasek button {
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var( --przygasz );
	font-family: 'Jost', sans-serif;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}
.tkm-pasek button:hover { color: var( --tekst ); }
.tkm-pasek button.jest { color: var( --zloto ); border-bottom-color: var( --zloto2 ); }
.tkm-pasek button:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

/* ── hero ────────────────────────────────────────────────────────────── */

.tkm-hero {
	display: grid;
	grid-template-columns: minmax( 0, 1.02fr ) minmax( 0, 1fr ) 210px;
	align-items: center;
	gap: clamp( 24px, 4vw, 60px );
	padding: clamp( 44px, 6vw, 86px ) 0 var( --odstep );
}
.tkm-hero__tekst { min-width: 0; }
.tkm-hero__tekst .tkm-oko { justify-content: flex-start; }
.tkm-hero__tekst .tkm-ozdoba { justify-content: flex-start; margin-left: 0; }
.tkm-hero__tekst .tkm-ozdoba::after { display: none; }

.tkm-hero__obraz { position: relative; display: grid; place-items: center; min-height: 300px; }

.tkm-filary { display: grid; gap: 26px; }
.tkm-filar { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.tkm-filar__kolko {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var( --obrys2 );
	color: var( --zloto );
	font-size: 17px;
}
.tkm-filar h3 {
	margin: 0 0 3px;
	font-family: 'Jost', sans-serif;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-filar p { margin: 0; font-size: 13px; color: var( --przygasz ); line-height: 1.55; }

/* ── pierscienie za kamieniem (element sygnaturowy makiety) ──────────── */

.tkm-krag { position: relative; display: grid; place-items: center; width: 100%; }
.tkm-krag__svg {
	position: absolute;
	inset: 0;
	margin: auto;
	width: min( 100%, 460px );
	height: auto;
	pointer-events: none;
	opacity: .85;
}
.tkm-krag__svg circle { fill: none; stroke: var( --obrys2 ); }
.tkm-krag__svg .tkm-obrot { transform-origin: 50% 50%; animation: tkm-krec 120s linear infinite; }
.tkm-krag__svg .tkm-obrot--wstecz { animation-duration: 190s; animation-direction: reverse; }

@keyframes tkm-krec { to { transform: rotate( 360deg ); } }

/* Kadr kwadratowy z `cover`: wycinki sa poziome i maja jasna mglawice az do
   krawedzi, wiec bez przyciecia w kolo widac na karcie prostokat zdjecia.
   `cover` obcina boki, kamien zostaje w srodku, a maska nizej gasi to, co
   z krawedzi zostalo. */
.tkm-krag__kamien {
	position: relative;
	width: min( 100%, 386px );
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 46%;
	filter: drop-shadow( 0 24px 60px rgba( 0, 0, 0, .55 ) );
}

/* Wycinki sa prostokatne i maja wlasne, ciemne tlo. Bez wytlumienia
 * krawedzi widac na karcie wyrazna ramke zdjecia. Miekka maska gasi rogi,
 * a kamien zostaje nietkniety — dziala tak samo dla jasnego ametystu,
 * jak i dla czarnego obsydianu (inaczej niz tryb mieszania `screen`,
 * ktory zjadlby ciemne kamienie).
 *
 * WAZNE: ta maska obsluguje KAFLE i male kolo mocy i ma zostac taka, jaka
 * byla. Przyciecie do kola dotyczy wylacznie duzego kamienia w hero —
 * nizej, osobna regula. Nie laczyc tych dwoch, bo jedna zmiana zjada
 * wtedy grafiki w calym atlasie. */
.tkm-karta__obraz img,
.tkm-moc__kolo img {
	-webkit-mask-image: radial-gradient( ellipse 74% 74% at 50% 48%, #000 52%, transparent 92% );
	mask-image: radial-gradient( ellipse 74% 74% at 50% 48%, #000 52%, transparent 92% );
}

/* TYLKO duzy kamien w hero. Promienie elipsy podane jako 74% szerokosci
   i 74% wysokosci daja elipse WIEKSZA niz sam obrazek, wiec cale wygaszanie
   wypadalo poza kadrem i prostokat zostawal widoczny. `closest-side` ustawia
   promien na odleglosc do najblizszej krawedzi — kolo jest wpisane w kadr,
   a wygaszenie konczy sie wewnatrz. */
.tkm-krag__kamien {
	-webkit-mask-image: radial-gradient( circle closest-side at 50% 50%,
		#000 58%, rgba( 0, 0, 0, .55 ) 80%, transparent 99% );
	mask-image: radial-gradient( circle closest-side at 50% 50%,
		#000 58%, rgba( 0, 0, 0, .55 ) 80%, transparent 99% );
}

/* Kamien bez wlasnej grafiki: klejnot z jego prawdziwych barw z bazy. */
.tkm-klejnot {
	width: min( 74%, 190px );
	height: auto;
	filter: drop-shadow( 0 10px 26px rgba( 0, 0, 0, .5 ) );
}
.tkm-karta__obraz .tkm-klejnot { width: auto; height: 128px; }
.tkm-krag .tkm-klejnot { width: min( 58%, 240px ); }
.tkm-moc__kolo .tkm-klejnot { width: auto; height: 76px; }

/* Klejnot dostaje ta sama poswiate, co kamienie ze zdjeciem — inaczej
 * karta z klejnotem wyglada obok karty ze zdjeciem jak nieskonczona. */
.tkm-karta__obraz,
.tkm-krag { position: relative; }
.tkm-karta__obraz::before {
	content: '';
	position: absolute;
	inset: 8% 14%;
	border-radius: 50%;
	background: radial-gradient( circle, color-mix( in srgb, var( --kk, #6b4bb8 ) 34%, transparent ), transparent 68% );
	filter: blur( 16px );
	pointer-events: none;
}

/* ── sekcje ──────────────────────────────────────────────────────────── */

.tkm-sekcja { padding: 0 0 var( --odstep ); }
.tkm-sekcja__glowa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}
.tkm-sekcja__glowa .tkm-oko { margin: 0; }
.tkm-wiecej {
	border: 0;
	background: none;
	color: var( --zloto2 );
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
}
.tkm-wiecej:hover { color: var( --zloto ); }
.tkm-wiecej:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

/* ── karta kamienia ──────────────────────────────────────────────────── */

.tkm-siatka {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
	gap: 20px;
}

.tkm-karta {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 18px 18px 20px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background:
		radial-gradient( 120% 80% at 50% 0%, color-mix( in srgb, var( --kk, #6b4bb8 ) 22%, transparent ), transparent 68% ),
		var( --panel );
	box-shadow: var( --cien );
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: border-color .3s, transform .3s, box-shadow .3s;
}
.tkm-karta:hover {
	border-color: var( --obrys2 );
	transform: translateY( -4px );
	box-shadow: 0 26px 60px rgba( 4, 2, 16, .7 );
}
.tkm-karta:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tkm-karta__obraz {
	display: grid;
	place-items: center;
	height: 148px;
	margin-bottom: 14px;
}
.tkm-karta__obraz img { max-width: 100%; max-height: 148px; object-fit: contain; }
.tkm-karta__nazwa {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-size: 21px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-karta__pod { margin: 4px 0 0; font-size: 12.5px; color: var( --przygasz ); line-height: 1.5; }
.tkm-karta__stopka {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --zloto2 );
}

/* Serce: afordancja widoczna od wejscia, nie pod hoverem. */
.tkm-serce {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var( --obrys );
	background: rgba( 10, 7, 34, .6 );
	color: var( --przygasz );
	font-size: 12px;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}
.tkm-serce:hover { color: var( --zloto ); border-color: var( --obrys2 ); }
.tkm-serce.jest { color: #f0a8bd; border-color: rgba( 240, 168, 189, .5 ); }
.tkm-serce:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

/* ── narzedzia atlasu ────────────────────────────────────────────────── */

.tkm-narzedzia {
	display: grid;
	grid-template-columns: minmax( 200px, 320px ) auto 1fr;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}
.tkm-szukaj, .tkm-sort {
	width: 100%;
	padding: 11px 16px;
	border: 1px solid var( --obrys );
	border-radius: 999px;
	background: var( --panel2 );
	color: var( --tekst );
	font: inherit;
	font-size: 13px;
}
.tkm-szukaj::placeholder { color: rgba( 167, 157, 198, .7 ); }
.tkm-szukaj:focus, .tkm-sort:focus { outline: 0; border-color: var( --obrys2 ); }
.tkm-sort { width: auto; padding-right: 34px; cursor: pointer; }
.tkm-sort option { background: var( --noc2 ); }

.tkm-chipy { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tkm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border: 1px solid var( --obrys );
	border-radius: 999px;
	background: rgba( 18, 11, 44, .5 );
	color: var( --przygasz );
	font: inherit;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .2s, border-color .2s, background .2s;
}
.tkm-chip:hover { color: var( --tekst ); border-color: var( --obrys2 ); }
.tkm-chip.jest { color: #2a1c04; background: linear-gradient( 180deg, #f6dfa4, var( --zloto2 ) ); border-color: transparent; }
.tkm-chip:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

.tkm-atlas { display: grid; grid-template-columns: 232px minmax( 0, 1fr ); gap: 26px; align-items: start; }

.tkm-filtry {
	padding: 20px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: var( --panel );
}
.tkm-filtry h3 {
	margin: 0 0 14px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-grupa { padding-top: 16px; margin-top: 16px; border-top: 1px solid var( --obrys ); }
.tkm-grupa:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.tkm-grupa > p {
	margin: 0 0 10px;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto2 );
}
.tkm-opcje { display: flex; flex-wrap: wrap; gap: 7px; }
.tkm-opcja {
	padding: 5px 11px;
	border: 1px solid var( --obrys );
	border-radius: 999px;
	background: none;
	color: var( --przygasz );
	font: inherit;
	font-size: 11px;
	cursor: pointer;
	transition: color .2s, border-color .2s, background .2s;
}
.tkm-opcja:hover { color: var( --tekst ); }
.tkm-opcja.jest { color: var( --zloto ); border-color: var( --obrys2 ); background: rgba( 236, 208, 138, .1 ); }
.tkm-opcja:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

.tkm-kropka {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-right: 6px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, .25 );
	vertical-align: -1px;
}

.tkm-licznik { margin: 18px 0 0; font-size: 12px; color: var( --przygasz ); text-align: right; }

.tkm-pusto {
	padding: 60px 20px;
	border: 1px dashed var( --obrys );
	border-radius: 16px;
	text-align: center;
	color: var( --przygasz );
}
.tkm-pusto strong { display: block; margin-bottom: 8px; color: var( --zloto ); font-weight: 400; }

/* ── karta szczegolu ─────────────────────────────────────────────────── */

.tkm-wroc {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 18px;
	border: 0;
	background: none;
	color: var( --przygasz );
	font: inherit;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
}
.tkm-wroc:hover { color: var( --zloto ); }
.tkm-wroc:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tkm-glowa {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.05fr ) 250px;
	gap: clamp( 20px, 3vw, 46px );
	align-items: center;
	padding-bottom: 30px;
}
.tkm-glowa__tytul {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: clamp( 38px, 6vw, 74px );
	line-height: 1;
	letter-spacing: .09em;
	text-transform: uppercase;
	background: linear-gradient( 180deg, #fbeec2 0%, var( --k ) 120% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.tkm-glowa__opis { margin: 20px 0 0; color: var( --przygasz ); max-width: 56ch; }

.tkm-moc {
	padding: 20px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: var( --panel );
	text-align: center;
}
.tkm-moc__etyk {
	margin: 0 0 14px;
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto2 );
}
.tkm-moc__kolo {
	display: grid;
	place-items: center;
	width: 118px;
	height: 118px;
	margin: 0 auto 14px;
	border-radius: 50%;
	border: 1px solid var( --obrys2 );
	background: radial-gradient( circle, color-mix( in srgb, var( --k ) 26%, transparent ), transparent 70% );
}
.tkm-moc__kolo img { max-width: 78%; max-height: 78%; object-fit: contain; }
.tkm-moc p { margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15.5px; color: var( --tekst ); }

/* pasek szesciu faktow */
.tkm-fakty {
	display: grid;
	grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: var( --panel );
	overflow: hidden;
}
.tkm-fakt {
	display: grid;
	grid-template-columns: 44px minmax( 0, 1fr );
	gap: 12px;
	align-items: center;
	padding: 18px 16px;
	border-left: 1px solid var( --obrys );
}
.tkm-fakt:first-child { border-left: 0; }
.tkm-fakt__ikona {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var( --obrys2 );
	color: var( --k );
	font-size: 17px;
}
/* Kulka barwy: te same 44px co glif obok, ale wypelnia ja kolor kamienia.
   Cienie wewnetrzne robia wypuklosc, obrys trzyma ja w jednej rodzinie
   z pozostalymi pieczeciami w pasku faktow. */
.tkm-kula {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	box-shadow:
		inset 0 -3px 7px rgba( 0, 0, 0, .55 ),
		inset 0 3px 5px rgba( 255, 255, 255, .20 ),
		0 3px 9px rgba( 0, 0, 0, .45 ),
		0 0 0 1px var( --obrys2 );
}
.tkm-fakt__etyk {
	margin: 0;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto2 );
}
.tkm-fakt__wart { margin: 2px 0 0; font-size: 13.5px; color: var( --tekst ); line-height: 1.4; }

/* trzy panele */
.tkm-panele {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 22px;
	margin-top: 22px;
}
.tkm-panel {
	padding: 26px 24px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: var( --panel );
}
.tkm-panel__tytul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 20px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto );
	text-align: center;
}
.tkm-panel__tytul::before,
.tkm-panel__tytul::after { content: '✦'; font-size: 9px; color: var( --zloto2 ); }

.tkm-poz { display: grid; grid-template-columns: 40px minmax( 0, 1fr ); gap: 14px; align-items: start; }
.tkm-poz + .tkm-poz { margin-top: 20px; }
.tkm-poz__ikona {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var( --obrys );
	background: radial-gradient( circle, color-mix( in srgb, var( --k ) 24%, transparent ), transparent 72% );
	color: var( --k );
	font-size: 15px;
}
.tkm-poz h4 {
	margin: 0 0 4px;
	font-family: 'Jost', sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-poz p { margin: 0; font-size: 13px; color: var( --przygasz ); line-height: 1.6; }

/* rytual — numerowane kroki; numeracja NIESIE kolejnosc, wiec jest zasadna */
.tkm-krok { display: grid; grid-template-columns: 34px minmax( 0, 1fr ); gap: 14px; align-items: start; }
.tkm-krok + .tkm-krok { margin-top: 18px; }
.tkm-krok__nr {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var( --obrys2 );
	font-family: 'Cormorant Garamond', serif;
	font-size: 15px;
	color: var( --zloto );
}
.tkm-krok p { margin: 0; font-size: 13px; color: var( --przygasz ); line-height: 1.6; }

.tkm-afirmacja {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	gap: 26px;
	align-items: center;
	margin-top: 22px;
	padding: 22px 28px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: linear-gradient( 90deg, color-mix( in srgb, var( --k2 ) 42%, transparent ), transparent 70% ), var( --panel2 );
}
.tkm-afirmacja__etyk {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 10.5px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto2 );
	white-space: nowrap;
}
.tkm-afirmacja p {
	margin: 0;
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: clamp( 16px, 2vw, 21px );
	color: var( --tekst );
}

.tkm-uwaga {
	display: grid;
	grid-template-columns: 28px minmax( 0, 1fr );
	gap: 12px;
	align-items: start;
	margin-top: 22px;
	padding: 16px 20px;
	border: 1px solid rgba( 214, 140, 102, .3 );
	border-radius: 14px;
	background: rgba( 60, 26, 18, .3 );
}
.tkm-uwaga span { color: #e8a37a; font-size: 15px; }
.tkm-uwaga p { margin: 0; font-size: 13px; color: #f0cdb6; line-height: 1.6; }

/* ── stopka dzialu ───────────────────────────────────────────────────── */

.tkm-stopka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	margin: 0 0 var( --odstep );
	padding: 22px 30px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: var( --panel2 );
}
.tkm-stopka h3 {
	margin: 0 0 4px;
	font-family: 'Jost', sans-serif;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-stopka p { margin: 0; font-size: 13px; color: var( --przygasz ); }

.tkm-zastrzezenie {
	margin: 0 0 var( --odstep );
	padding: 16px 20px;
	border-top: 1px solid var( --obrys );
	font-size: 12px;
	line-height: 1.65;
	color: rgba( 167, 157, 198, .78 );
	text-align: center;
}

/* ── narozniki ozdobne ───────────────────────────────────────────────── */

/* Narozniki to teraz ozdobnik WYCIETY Z MAKIETY, nie moja imitacja
 * z dwoch kresek: secesyjna wic z kolem i listkiem. Wyciety z ciemnego
 * tla przez przeniesienie jasnosci do kanalu alfa, wiec siada na kazdym
 * podkladzie. Jeden plik, cztery odbicia. */
.tkm-rog {
	position: absolute;
	width: 38px;
	height: 48px;
	border: 0;
	background: url( gfx/rog.png ) no-repeat center / contain;
	opacity: .8;
	pointer-events: none;
}
.tkm-rog--lg { top: 7px;    left: 7px; }
.tkm-rog--pg { top: 7px;    right: 7px;  transform: scaleX( -1 ); }
.tkm-rog--ld { bottom: 7px; left: 7px;   transform: scaleY( -1 ); }
.tkm-rog--pd { bottom: 7px; right: 7px;  transform: scale( -1 ); }

/* ── responsywnosc ───────────────────────────────────────────────────── */

@media ( max-width: 1180px ) {
	.tkm-hero { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); }
	.tkm-filary { grid-column: 1 / -1; grid-template-columns: repeat( 3, 1fr ); }
	.tkm-glowa { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); }
	.tkm-moc { grid-column: 1 / -1; }
	.tkm-fakty { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.tkm-fakt:nth-child(3n+1) { border-left: 0; }
	.tkm-fakt:nth-child(n+4) { border-top: 1px solid var( --obrys ); }
	.tkm-panele { grid-template-columns: 1fr; }
}

@media ( max-width: 900px ) {
	.tkm-atlas { grid-template-columns: 1fr; }
	.tkm-narzedzia { grid-template-columns: 1fr; }
	.tkm-chipy { justify-content: flex-start; }
}

@media ( max-width: 720px ) {
	.tkm-hero { grid-template-columns: 1fr; }
	.tkm-hero__obraz { order: -1; min-height: 220px; }
	.tkm-filary { grid-template-columns: 1fr; }
	.tkm-glowa { grid-template-columns: 1fr; }
	.tkm-fakty { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tkm-fakt { border-left: 0; border-top: 1px solid var( --obrys ); }
	.tkm-fakt:nth-child(2n) { border-left: 1px solid var( --obrys ); }
	.tkm-fakt:nth-child(-n+2) { border-top: 0; }
	.tkm-afirmacja { grid-template-columns: 1fr; gap: 12px; }
	.tkm-siatka { grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) ); }
	.tkm-karta__obraz { height: 112px; }
	.tkm-karta__obraz img { max-height: 112px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tkm-krag__svg .tkm-obrot { animation: none; }
	.tkm-karta, .tkm-btn { transition: none; }
	.tkm-karta:hover { transform: none; }
}/* ══════════════════  intencje,
siatki i odmiany  ══════════════════════
 *
 * Trzy rzeczy,
ktore byly w ksiazkach,
a nie bylo ich na stronie:
 * po co siegasz po kamien (z mantra i czterema krokami),
uklad kamieni
 * oraz odmiany opisane w ksiedze 2. Rozwiniecie intencji jest zwyklym
 * przyciskiem — widac je od wejscia{ display: grid; gap: 10px; }

.tkm-mantra {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 12px;
	background: linear-gradient( 90deg, rgba( 236, 208, 138, .1 ), transparent 72% );
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 18px;
	color: var( --tekst );
}
.tkm-mantra__etyk {
	font-family: 'Jost', sans-serif;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto2 );
}

.tkm-siatka-karta {
	margin-top: 20px;
	padding: 18px 20px;
	border: 1px dashed var( --obrys2 );
	border-radius: 12px;
}
.tkm-siatka-karta__tytul {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-siatka-karta__glif { font-size: 19px; color: var( --zloto2 ); }
.tkm-siatka-karta__pod { margin: 0 0 12px; font-size: 12.5px; color: var( --przygasz ); }
.tkm-siatka-karta__rola { display: grid; grid-template-columns: 190px minmax( 0, 1fr ); gap: 12px; margin: 0 0 6px; font-size: 13px; }
.tkm-siatka-karta__rola span { color: var( --zloto2 ); letter-spacing: .1em; font-size: 10.5px; text-transform: uppercase; }
.tkm-siatka-karta__rola em { color: var( --przygasz ); font-style: normal; }

.tkm-fakt__zrodlo { margin: 3px 0 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba( 167, 157, 198, .65 ); }

.tkm-odmiany { display: grid; grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); gap: 16px; }
.tkm-odmiana {
	padding: 18px 20px;
	border: 1px solid var( --obrys );
	border-radius: 14px;
	background: var( --panel );
}
.tkm-odmiana h4 {
	margin: 0 0 8px;
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .06em;
	color: var( --zloto );
}
.tkm-odmiana p { margin: 0; font-size: 13px; line-height: 1.6; color: var( --przygasz ); }
.tkm-odmiana__znak { margin-top: 10px !important; color: var( --k ) !important; font-size: 12px !important; }

@media ( max-width: 720px ) {
	.tkm-siatka-karta__rola { grid-template-columns: 1fr; gap: 2px; }
}

/* Znak zodiaku w ramce „Moc kamienia” — pasek faktow zostaje szescioelementowy,
 * dokladnie jak makieta. */
.tkm-moc__znaki {
	margin: 14px 0 0 !important;
	padding-top: 12px;
	border-top: 1px solid var( --obrys );
	font-family: 'Jost', sans-serif !important;
	font-style: normal !important;
	font-size: 12.5px !important;
	color: var( --k ) !important;
	letter-spacing: .06em;
}
.tkm-moc__znaki em {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba( 167, 157, 198, .65 );
}

/* ══════════════  ozdobniki wycięte z makiet  ═══════════════════════════
 *
 * Przem: „wykorzystaj zdobienia z tych plików". Więc zamiast rysować
 * przybliżenia w CSS, ozdobniki są wycięte z ekranów i wykluczowane —
 * jasność piksela poszła do kanału alfa, ciemne tło zniknęło, a złota
 * kreska została ze swoim własnym cieniowaniem.
 *
 * Godło działu to kryształ w lotosie stojący w makiecie obok wordmarku.
 * Gwiazda i pył gwiezdny są z paska afirmacji — tam też zostają, żeby
 * nie rozsypywać ich po całej stronie.
 * ══════════════════════════════════════════════════════════════════════ */

.tkm-godlo {
	display: inline-block;
	width: 26px;
	height: 30px;
	background: url( gfx/glif.png ) no-repeat center / contain;
	vertical-align: -6px;
}

.tkm-afirmacja__etyk::before {
	content: '';
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	background: url( gfx/gwiazda.png ) no-repeat center / contain;
}

/* Pył gwiezdny biegnie za etykietą, dokładnie jak w makiecie. */
.tkm-afirmacja {
	position: relative;
	overflow: hidden;
}
.tkm-afirmacja::before {
	content: '';
	position: absolute;
	left: 172px;
	top: 50%;
	width: 210px;
	height: 46px;
	transform: translateY( -50% );
	background: url( gfx/pyl.png ) no-repeat center / contain;
	opacity: .7;
	pointer-events: none;
}

/* Hero dostaje ten sam kryształ jako znak nad tytułem — jeden akcent,
 * nie girlanda. */
.tkm-hero__tekst .tkm-oko::before { content: none; }
.tkm-hero__godlo {
	display: block;
	width: 40px;
	height: 46px;
	margin: 0 0 14px;
	background: url( gfx/glif.png ) no-repeat center / contain;
}

@media ( max-width: 900px ) {
	.tkm-afirmacja::before { display: none; }
}/* ══════════════════════════════════════════════════════════════════════
 *  STYL PANELI Z MAKIETY (3 wrz)
 *
 *  Makieta trzech paneli („Jak używać / Rytuał / Właściwości") pokazuje
 *  cztery rzeczy,
których wcześniej nie miałem:
 *    1. PODWÓJNY włos — zewnętrzny i cieńszy wewnętrzny,
5 px do środka;
 *    2. narożne wsporniki: czyste kątowniki,
nie ozdobna wić;
 *    3. ozdobną kreskę z rombem POD tytułem panelu;
 *    4. kółka ikon z cienkim złotym pierścieniem i ciemnym wnętrzem.
 *
 *  Styl idzie na CAŁY dział,
nie tylko na te trzy panele: karty kamieni,
*  filtry,
intencje i sekcję opieki dostają tę samą gramatykę.
 * ══════════════════════════════════════════════════════════════════════ */

.tkm-panel,
.tkm-moc,
.tkm-filtry,
.tkm-odmiana,
.tkm-karta{
	position: relative;
	border-radius: 18px;
}/* wewnętrzny włos — drugi obrys 5 px do środka */
.tkm-panel::after,
.tkm-moc::after,
.tkm-filtry::after,
.tkm-karta::after{
	content: '';
	position: absolute;
	inset: 5px;
	border: 1px solid rgba( 214, 176, 102, .13 );
	border-radius: 13px;
	pointer-events: none;
}

/* Kątowniki: czyste, jak w makiecie. Zastępują ozdobną wić na panelach —
 * wić zostaje tam, gdzie makieta ją pokazuje, czyli na ramie strony. */
.tkm-panel .tkm-rog,
.tkm-moc .tkm-rog {
	width: 16px;
	height: 16px;
	background: none;
	border: 0;
	opacity: 1;
}
.tkm-panel .tkm-rog::before,
.tkm-moc .tkm-rog::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba( 214, 176, 102, .55 );
}
.tkm-panel .tkm-rog--lg, .tkm-moc .tkm-rog--lg { top: 11px; left: 11px; }
.tkm-panel .tkm-rog--pg, .tkm-moc .tkm-rog--pg { top: 11px; right: 11px; }
.tkm-panel .tkm-rog--ld, .tkm-moc .tkm-rog--ld { bottom: 11px; left: 11px; }
.tkm-panel .tkm-rog--pd, .tkm-moc .tkm-rog--pd { bottom: 11px; right: 11px; }
.tkm-panel .tkm-rog--lg::before, .tkm-moc .tkm-rog--lg::before { border-width: 1px 0 0 1px; }
.tkm-panel .tkm-rog--pg::before, .tkm-moc .tkm-rog--pg::before { border-width: 1px 1px 0 0; }
.tkm-panel .tkm-rog--ld::before, .tkm-moc .tkm-rog--ld::before { border-width: 0 0 1px 1px; }
.tkm-panel .tkm-rog--pd::before, .tkm-moc .tkm-rog--pd::before { border-width: 0 1px 1px 0; }

/* Kreska ozdobna pod tytułem panelu — linia gasnąca ku brzegom z rombem. */
.tkm-panel__tytul {
	position: relative;
	padding-bottom: 18px;
	margin-bottom: 22px;
}
.tkm-panel__tytul::before,
.tkm-panel__tytul::after {
	content: '✦';
	font-size: 8px;
	color: var( --zloto2 );
}
.tkm-panel__kreska {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min( 78%, 260px );
	height: 9px;
	transform: translateX( -50% );
	pointer-events: none;
}
.tkm-panel__kreska::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 4px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 214, 176, 102, .5 ), transparent );
}
.tkm-panel__kreska::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 1px;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	transform: rotate( 45deg );
	border: 1px solid var( --zloto2 );
	background: var( --noc );
}

/* Kółka ikon: ciemne wnętrze, cienki złoty pierścień, glif w środku. */
.tkm-poz__ikona,
.tkm-krok__nr,
.tkm-fakt__ikona {
	background:
		radial-gradient( circle at 50% 34%, rgba( 236, 208, 138, .16 ), transparent 62% ),
		rgba( 12, 8, 34, .85 );
	border: 1px solid rgba( 214, 176, 102, .42 );
	box-shadow: inset 0 0 12px rgba( 236, 208, 138, .07 );
	color: #f2e2b4;
}
.tkm-krok__nr {
	width: 44px;
	height: 44px;
	font-size: 17px;
	color: var( --zloto );
}
.tkm-krok { grid-template-columns: 44px minmax( 0, 1fr ); gap: 18px; align-items: center; }
.tkm-krok + .tkm-krok { margin-top: 20px; }

/* Panel rytuału dostaje ledwie widoczną mandalę pod spodem i gwiazdkę
 * na dole — dokładnie jak w makiecie. */
.tkm-panele .tkm-panel:nth-child(2) { overflow: hidden; }
.tkm-panele .tkm-panel:nth-child(2)::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 46%;
	width: 260px;
	height: 260px;
	margin: -130px 0 0 -130px;
	border-radius: 50%;
	border: 1px solid rgba( 214, 176, 102, .08 );
	box-shadow: 0 0 0 26px rgba( 214, 176, 102, .04 ), inset 0 0 0 34px rgba( 214, 176, 102, .04 );
	pointer-events: none;
}

.tkm-gwiazdka {
	display: block;
	width: 20px;
	height: 20px;
	margin: 22px auto 0;
	background: url( gfx/gwiazda.png ) no-repeat center / contain;
	opacity: .55;
}

/* Nagłówki pozycji — wersaliki w złocie, jak w makiecie. */
.tkm-poz h4 {
	font-size: 13px;
	letter-spacing: .13em;
	color: #f0dca8;
}
.tkm-poz p { font-size: 13.5px; line-height: 1.62; }
.tkm-poz { grid-template-columns: 46px minmax( 0, 1fr ); gap: 16px; }
.tkm-poz__ikona { width: 46px; height: 46px; font-size: 16px; }

@media ( max-width: 720px ) {
	.tkm-panele .tkm-panel:nth-child(2)::before { display: none; }
}

/* ══════════════  pieczęcie żywiołów, planet, czakr i znaków  ══════════
 *
 * Przem: „tam gdzie w kamieniach pojawiają się żywioły używaj tych zdjęć,
 * obrób je w okrągłe pieczęcie; gdzie używasz planet — naszych planet”.
 * Zdjęcia żywiołów i mandale czakr są przycięte w koło z miękką krawędzią
 * i złotym pierścieniem (`pieczecie.py`), planety biorę z działu Niebo,
 * a znaki zodiaku z konstelacji `planety/znaki2/`.
 * ══════════════════════════════════════════════════════════════════════ */

.tkm-fakt__ikona--foto {
	overflow: hidden;
	padding: 0;
	background: rgba( 10, 7, 34, .7 );
	border-color: transparent;
	box-shadow: none;
}
.tkm-fakt__ikona--foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* Afordancja klikalności widoczna od wejścia, nie pod hoverem. */
.tkm-fakt--klik { cursor: pointer; transition: background .2s; }
.tkm-fakt--klik::after {
	content: '＋';
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 11px;
	line-height: 1;
	color: var( --zloto2 );
	opacity: .55;
}
.tkm-fakt { position: relative; }
.tkm-fakt--klik:hover { background: rgba( 236, 208, 138, .06 ); }
.tkm-fakt--klik:hover::after { opacity: 1; }
.tkm-fakt--klik:focus-visible { outline: 2px solid var( --zloto ); outline-offset: -3px; }

/* znaki zodiaku w ramce „Moc kamienia” */
.tkm-znaki { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tkm-znak {
	display: grid;
	justify-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --k );
	font: inherit;
	font-size: 11.5px;
	letter-spacing: .08em;
	cursor: pointer;
}
.tkm-znak img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var( --obrys2 );
	filter: saturate( .9 );
	transition: border-color .2s, transform .2s;
}
.tkm-znak:hover img { border-color: var( --zloto ); transform: scale( 1.06 ); }
.tkm-znak:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

/* ── okienko opisu ─────────────────────────────────────────────────── */

.tkm-okno {
	/* Okno doklejamy do <body>, czyli POZA `.tkm` — a paleta jest zdefiniowana
	 * na `.tkm`. Bez powtorzenia tokenow `var(--panel2)` i reszta sa tu
	 * nieprawidlowe, wiec tlo panelu wychodzilo przezroczyste i tekst lezal
	 * wprost na stronie. Ta sama pulapka co kiedys z `#astro-karta`. */
	--noc:      #0a0722;
	--noc2:     #150c36;
	--panel:    rgba( 26, 16, 62, .62 );
	--panel2:   rgba( 18, 11, 44, .96 );
	--obrys:    rgba( 214, 176, 102, .22 );
	--obrys2:   rgba( 214, 176, 102, .40 );
	--zloto:    #ecd08a;
	--zloto2:   #c9a24a;
	--tekst:    #e9e3f6;
	--przygasz: #a79dc6;
	--k:        #a570e8;

	position: fixed;
	inset: 0;
	font-family: 'Jost', system-ui, sans-serif;
	font-weight: 300;
	line-height: 1.7;
	color: var( --tekst );
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba( 5, 3, 16, .88 );
	backdrop-filter: blur( 10px );
}
.tkm-okno__panel {
	position: relative;
	width: min( 560px, 100% );
	max-height: 88vh;
	overflow-y: auto;
	padding: 34px 34px 30px;
	border: 1px solid var( --obrys2 );
	border-radius: 18px;
	background:
		radial-gradient( 120% 70% at 50% 0%, rgba( 120, 70, 190, .34 ), transparent 64% ),
		linear-gradient( 180deg, #1a1046 0%, #120b2c 100% );
	box-shadow: 0 30px 80px rgba( 2, 1, 10, .7 );
	scrollbar-width: thin;
	scrollbar-color: rgba( 192, 144, 80, .55 ) transparent;
}
.tkm-okno__x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var( --obrys );
	background: rgba( 10, 7, 34, .7 );
	color: var( --zloto );
	font-size: 14px;
	cursor: pointer;
}
.tkm-okno__x:hover { border-color: var( --zloto ); }
.tkm-okno__x:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

.tkm-okno__obraz { display: grid; place-items: center; margin-bottom: 18px; }
.tkm-okno__obraz img {
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var( --obrys2 );
}
.tkm-okno__tytul {
	margin: 0;
	text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: 30px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-okno__pod {
	margin: 6px 0 0;
	text-align: center;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var( --zloto2 );
}
.tkm-okno__akapit { margin: 18px 0 0; color: var( --przygasz ); line-height: 1.7; }
.tkm-okno__brak { margin: 0; text-align: center; color: var( --przygasz ); }

/* Sekcje w okienku opisu: etykieta nad akapitem, jak w książce. */
.tkm-okno__sekcja { margin-top: 20px; }
.tkm-okno__sekcja:first-of-type { margin-top: 22px; }
.tkm-okno__etyk {
	margin: 0 0 5px;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto2 );
}
.tkm-okno__sekcja .tkm-okno__akapit { margin: 0; font-size: 14px; }

/* Plansza pokazywana w całości (skala Mohsa) — obraz jest treścią,
 * więc panel ustępuje mu miejsca. */
.tkm-okno__plansza { margin: -14px -14px 0; }
.tkm-okno__plansza img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.tkm-okno__panel:has( .tkm-okno__plansza ) {
	width: min( 480px, 100% );
	padding: 22px;
}

/* Plansza (skala Mohsa) we wspólnym oknie `ak-*`. */
#astro-karta .tkm-plansza { margin: -6px 0 0; }
#astro-karta .tkm-plansza img { display: block; width: 100%; height: auto; border-radius: 12px; }

/* ══════════════════════════════════════════════════════════════════════
 *  PO CO SIĘGASZ PO KAMIEŃ — karuzela intencji
 *
 *  Sekcja odpowiada na jedno pytanie: „czego dziś potrzebuję?”. Dlatego
 *  wybór jest paskiem kafli, a nie listą rozwijaną — widać naraz wszystkie
 *  możliwości i nic nie rozpycha strony w dół. Podgląd podmienia się pod
 *  paskiem, więc czytelnik nie traci miejsca, w którym był.
 *
 *  Ozdobniki są policzalne i mają robotę: romb dzieli, gwiazdka otwiera
 *  podtytuł, inicjał zaczyna opowieść, kropki mówią, ile jest intencji.
 *  Boldem idzie jedno miejsce — inicjał. Reszta jest cicha.
 * ══════════════════════════════════════════════════════════════════════ */

.tkm-int {
	position: relative;
	padding-top: 12px;
	/* Miękkie przejście tonalne: sekcja wypływa z tła i w nie wraca. */
	background:
		radial-gradient( 78% 60% at 50% 0%, rgba( 122, 74, 196, .20 ), transparent 68% ),
		radial-gradient( 60% 50% at 50% 100%, rgba( 60, 40, 150, .14 ), transparent 72% );
}

.tkm-int__glowa { text-align: center; margin-bottom: 30px; }

.tkm-int__tytul {
	margin: 16px 0 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp( 28px, 3.6vw, 46px );
	line-height: 1.1;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: linear-gradient( 180deg, #fbeec2 0%, var( --zloto ) 46%, var( --zloto2 ) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tkm-int__lead {
	margin: 12px auto 0;
	max-width: 60ch;
	font-size: 14.5px;
	color: var( --przygasz );
}

/* ── ozdobna linia z rombem ─────────────────────────────────────────── */

.tkm-oz-linia {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var( --zloto2 );
}
.tkm-oz-linia::before,
.tkm-oz-linia::after {
	content: '';
	height: 1px;
	width: min( 190px, 22vw );
	background: linear-gradient( 90deg, transparent, rgba( 214, 176, 102, .5 ), transparent );
}
.tkm-oz-linia__romb { font-size: 11px; }

/* ── karuzela ───────────────────────────────────────────────────────── */

.tkm-karuzela {
	display: grid;
	grid-template-columns: 46px minmax( 0, 1fr ) 46px;
	align-items: center;
	gap: 14px;
}

.tkm-karuzela__tor {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 2px 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba( 192, 144, 80, .45 ) transparent;
}
.tkm-karuzela__tor::-webkit-scrollbar { height: 5px; }
.tkm-karuzela__tor::-webkit-scrollbar-track { background: transparent; }
.tkm-karuzela__tor::-webkit-scrollbar-thumb {
	background: rgba( 192, 144, 80, .45 );
	border-radius: 3px;
}

.tkm-strzalka {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var( --obrys2 );
	background: rgba( 10, 7, 34, .55 );
	color: var( --zloto );
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
}
.tkm-strzalka:hover { border-color: var( --zloto ); background: rgba( 236, 208, 138, .08 ); }
.tkm-strzalka:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

/* ── kafel intencji ─────────────────────────────────────────────────── */

.tkm-kafel {
	position: relative;
	flex: 0 0 auto;
	width: 148px;
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 20px 12px 16px;
	scroll-snap-align: center;
	border: 1px solid var( --obrys );
	border-radius: 14px;
	background: rgba( 18, 11, 44, .5 );
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.tkm-kafel:hover { border-color: var( --obrys2 ); transform: translateY( -3px ); }
.tkm-kafel:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; }

.tkm-kafel.jest {
	border-color: rgba( 236, 208, 138, .75 );
	background: linear-gradient( 180deg, rgba( 74, 44, 130, .55 ), rgba( 26, 16, 62, .8 ) );
	box-shadow: 0 0 0 1px rgba( 236, 208, 138, .18 ), 0 16px 40px rgba( 60, 30, 120, .45 );
}
/* Wybrany kafel dostaje romb-znacznik pod spodem — pokazuje, skąd
 * bierze się treść panelu poniżej. */
.tkm-kafel.jest::after {
	content: '◈';
	position: absolute;
	bottom: -19px;
	left: 50%;
	transform: translateX( -50% );
	font-size: 10px;
	color: var( --zloto );
}

.tkm-kafel__glif { font-size: 21px; color: var( --zloto ); line-height: 1; }
.tkm-kafel__nazwa {
	font-family: 'Jost', sans-serif;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: center;
	color: var( --tekst );
	line-height: 1.35;
}
.tkm-kafel.jest .tkm-kafel__nazwa { color: var( --zloto ); }
.tkm-kafel__ile {
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba( 167, 157, 198, .75 );
}

/* ── kropki ─────────────────────────────────────────────────────────── */

.tkm-kropki {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 18px 0 26px;
}
.tkm-kropki::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: min( 520px, 60% );
	height: 1px;
	transform: translate( -50%, -50% );
	background: linear-gradient( 90deg, transparent, rgba( 214, 176, 102, .22 ), transparent );
}
.tkm-kropka-nav {
	position: relative;
	width: 5px;
	height: 5px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 214, 176, 102, .35 );
	cursor: pointer;
	transition: background .2s, transform .2s, box-shadow .2s;
}
.tkm-kropka-nav:hover { background: var( --zloto2 ); }
.tkm-kropka-nav.jest {
	background: var( --zloto );
	transform: scale( 1.7 );
	box-shadow: 0 0 10px rgba( 236, 208, 138, .8 );
}
.tkm-kropka-nav:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 4px; }

/* ── panel podglądu ─────────────────────────────────────────────────── */

.tkm-int-panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr );
	gap: clamp( 22px, 3vw, 46px );
	padding: clamp( 26px, 3vw, 44px );
	border: 1px solid var( --obrys );
	border-radius: 20px;
	background:
		radial-gradient( 90% 70% at 12% 0%, rgba( 92, 56, 168, .22 ), transparent 62% ),
		var( --panel );
	box-shadow: var( --cien );
}
.tkm-int-panel::after {
	content: '';
	position: absolute;
	inset: 6px;
	border: 1px solid rgba( 214, 176, 102, .12 );
	border-radius: 15px;
	pointer-events: none;
}

.tkm-int-panel.wchodzi { animation: tkm-wejdz .45s cubic-bezier( .22, .61, .36, 1 ); }
@keyframes tkm-wejdz {
	from { opacity: 0; transform: translateY( 10px ); }
	to   { opacity: 1; transform: none; }
}

.tkm-int-panel__tytul {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 300;
	font-size: clamp( 30px, 3.4vw, 46px );
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-int-panel__lewa > .tkm-oz-linia { justify-content: flex-start; margin: 14px 0 20px; }
.tkm-int-panel__lewa > .tkm-oz-linia::before { display: none; }
.tkm-int-panel__lewa > .tkm-oz-linia::after { width: min( 150px, 40% ); }

.tkm-int-panel__wstep {
	margin: 0;
	max-width: 58ch;
	color: var( --przygasz );
	line-height: 1.75;
}

/* Inicjał — jedyne miejsce, w którym ta sekcja podnosi głos. */
.tkm-inicjal {
	float: left;
	margin: 4px 12px 0 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 58px;
	line-height: .78;
	color: var( --zloto );
	text-shadow: 0 0 22px rgba( 236, 208, 138, .3 );
}

.tkm-mantra-ramka {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr );
	align-items: center;
	gap: 20px;
	margin-top: 24px;
	padding: 16px 22px;
	border: 1px solid var( --obrys2 );
	border-radius: 12px;
	background: linear-gradient( 90deg, rgba( 236, 208, 138, .07 ), transparent 76% );
}
.tkm-mantra-ramka__etyk {
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var( --zloto2 );
	white-space: nowrap;
}
.tkm-mantra-ramka__tekst {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-size: clamp( 16px, 1.6vw, 20px );
	color: var( --tekst );
}

.tkm-podtytul-oz {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 26px 0 14px;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-podtytul-oz__glif { color: var( --zloto2 ); font-size: 9px; }

/* Numerowanie kroków niesie kolejność rytuału, więc jest zasadne. */
.tkm-kroki-lista { margin: 0; padding: 0; list-style: none; counter-reset: krok; }
.tkm-kroki-lista li {
	display: grid;
	grid-template-columns: 34px minmax( 0, 1fr );
	gap: 16px;
	align-items: center;
	margin-bottom: 14px;
	font-size: 13.5px;
	color: var( --przygasz );
	line-height: 1.6;
}
.tkm-kroki-lista li::before {
	counter-increment: krok;
	content: counter( krok );
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var( --obrys2 );
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 15px;
	color: var( --zloto );
}

.tkm-chipy-kamieni { display: flex; flex-wrap: wrap; gap: 8px; }
.tkm-chip-kamien {
	padding: 7px 16px;
	border: 1px solid var( --obrys );
	border-radius: 999px;
	background: rgba( 18, 11, 44, .5 );
	color: var( --przygasz );
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}
.tkm-chip-kamien:hover { color: var( --zloto ); border-color: var( --obrys2 ); }
.tkm-chip-kamien:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 2px; }

/* ── prawa kolumna: kamienie intencji ───────────────────────────────── */

.tkm-int-panel__prawa {
	position: relative;
	align-self: start;
	padding: 24px 22px 30px;
	border: 1px solid var( --obrys );
	border-radius: 16px;
	background: rgba( 12, 8, 34, .5 );
}
.tkm-int-panel__etyk {
	margin: 0 0 6px;
	text-align: center;
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --zloto );
}

.tkm-wiersz {
	display: grid;
	grid-template-columns: 62px minmax( 0, 1fr );
	gap: 16px;
	align-items: center;
	width: 100%;
	padding: 16px 4px;
	border: 0;
	border-top: 1px solid rgba( 214, 176, 102, .14 );
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .2s;
}
.tkm-wiersz:first-of-type { border-top: 0; }
.tkm-wiersz:hover { background: rgba( 236, 208, 138, .05 ); }
.tkm-wiersz:focus-visible { outline: 2px solid var( --zloto ); outline-offset: -2px; }

.tkm-wiersz__obraz { display: grid; place-items: center; width: 62px; height: 62px; }
.tkm-wiersz__obraz img { max-width: 100%; max-height: 62px; object-fit: contain; }
.tkm-wiersz__nazwa {
	display: block;
	font-family: 'Jost', sans-serif;
	font-size: 12.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --zloto );
}
.tkm-wiersz__opis {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var( --przygasz );
}

.tkm-int-panel__gwiazdka {
	position: absolute;
	left: 50%;
	bottom: 10px;
	width: 18px;
	height: 18px;
	transform: translateX( -50% );
	background: url( gfx/gwiazda.png ) no-repeat center / contain;
	opacity: .5;
}

@media ( max-width: 900px ) {
	.tkm-int-panel { grid-template-columns: 1fr; }
	.tkm-karuzela { grid-template-columns: 38px minmax( 0, 1fr ) 38px; gap: 8px; }
	.tkm-strzalka { width: 38px; height: 38px; font-size: 17px; }
	.tkm-kafel { width: 128px; }
	.tkm-mantra-ramka { grid-template-columns: 1fr; gap: 8px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tkm-int-panel.wchodzi { animation: none; }
	.tkm-kafel { transition: none; }
	.tkm-kafel:hover { transform: none; }
}

/* Pasek pod planszą skali Mohsa — wiąże planszę z konkretnym kamieniem. */
#astro-karta .tkm-mohs-pasek {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba( 240, 206, 126, .18 );
}
#astro-karta .tkm-mohs-pasek__glowa {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
#astro-karta .tkm-mohs-pasek__nazwa {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 21px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #f0ce7e;
}
#astro-karta .tkm-mohs-pasek__wartosc {
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #9a93c4;
}
#astro-karta .tkm-mohs-pasek__tekst {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: #c9c3e0;
}
#astro-karta .tkm-mohs-pasek__uwaga {
	margin: 12px 0 0;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid rgba( 214, 140, 102, .3 );
	background: rgba( 60, 26, 18, .28 );
	font-size: 12.5px;
	line-height: 1.6;
	color: #f0cdb6;
}

/* ══ karuzela „Wybrane kamienie" ════════════════════════════════════════
 *
 * Rzad pieciu kafli traktowal wszystkie kamienie jednakowo. Tu jeden stoi
 * na wprost, a reszta jest odchylona i cofnieta — wiadomo, na ktory patrzysz.
 * Glebia idzie z `perspective`, nie z cieni, wiec skala i obrot licza sie
 * na GPU i nie przerysowuja ukladu.
 */

.tkm-sekcja--kolo { text-align: center; }
.tkm-sekcja--kolo .tkm-oko { justify-content: center; }

.tkm-kolo__podpis {
	margin: 10px 0 0;
	font-size: .88rem;
	color: var( --przygasz );
}

/* Trzy kolumny zamiast strzalek zawieszonych absolutnie: przy `top: 50%`
   obie mialy rownac sie do srodka sceny, a wychodzily na roznych wysokosciach.
   W siatce leza w jednym rzedzie i nie ma jak ich przekrzywic. */
.tkm-kolo {
	position: relative;
	display: grid;
	grid-template-columns: 54px minmax( 0, 1fr ) 54px;
	align-items: center;
	gap: clamp( 4px, 2vw, 30px );
	min-height: 480px;
	margin: 26px 0 0;
	perspective: 1500px;
}

.tkm-kolo__tor { margin: 0 auto; }

.tkm-kolo__tor {
	position: relative;
	width: min( 300px, 74vw );
	height: 400px;
	transform-style: preserve-3d;
}

/* Wspolna podloga: karty skaluja sie od DOLU, wiec stoja na jednej linii
   zamiast rozjezdzac sie w pionie wraz ze skala. */
.tkm-kolo__poz {
	position: absolute;
	inset: 0;
	transform-origin: center bottom;
	transition: transform .45s cubic-bezier( .22, .61, .36, 1 ), opacity .45s, filter .45s;
	will-change: transform;
	cursor: pointer;
}

.tkm-kolo__poz .tkm-karta { height: 100%; cursor: pointer; }

/* Jeden podpis roli nad calym kolem, nie przy kazdej karcie: opisuje te,
   ktora stoi na wprost. Piec podpisow jechalo razem ze skala kart i rzad
   wygladal jak schodki. */
.tkm-kolo__rola {
	margin: 14px 0 0;
	min-height: 40px;
	line-height: 1.35;
	text-align: center;
}

.tkm-kolo__rola b {
	display: block;
	font-weight: 400;
	font-size: .66rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var( --zloto );
}

.tkm-kolo__rola span {
	display: block;
	font-size: .74rem;
	color: var( --przygasz );
}

.tkm-kolo__poz.jest .tkm-karta {
	border-color: var( --obrys2 );
	box-shadow: 0 26px 60px rgba( 4, 2, 16, .7 ), 0 0 44px rgba( 122, 84, 200, .28 );
}

/* Strzalka: JEDNA regula, nie trzy. Wczesniej doklejalem kolejne bloki
   pod siebie i ostatni cichaczem nadpisywal wczesniejsze — stad ryzyko,
   ze przy nastepnej zmianie strzalki znowu sie rozjada. Rysunek niesie
   ksztalt (romb z chevronem), wiec obrys kola i tlo sa zbedne. */
.tkm-kolo__strzalka {
	position: relative;
	z-index: 30;
	width: 54px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --zloto2 );
	line-height: 1;
	cursor: pointer;
	transition: color .25s, transform .25s;
}

.tkm-kolo__strzalka svg { display: block; width: 100%; height: 100%; }

/* Lewa strzalka to odbicie prawej. `scaleX` w CSS obraca wokol srodka
   elementu, wiec obie leza dokladnie tak samo — inaczej niz obrot zadany
   atrybutem na `<svg>`, ktory liczy srodek w innej jednostce. */
.tkm-kolo__strzalka--l svg { transform: scaleX( -1 ); }
.tkm-kolo__strzalka:hover { color: var( --zloto ); transform: scale( 1.08 ); }
.tkm-kolo__strzalka:focus-visible { outline: 2px solid var( --zloto ); outline-offset: 3px; border-radius: 999px; }

.tkm-kolo__kropki {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin: 18px 0 0;
}

.tkm-kolo__kropka {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba( 236, 208, 138, .28 );
	cursor: pointer;
}

.tkm-kolo__kropka[aria-current="true"] { background: var( --zloto ); transform: scale( 1.35 ); }

.tkm-wiecej--sredek,
.tkm-wiecej--srodek { display: inline-block; margin: 22px auto 0; }

@media ( max-width: 720px ) {
	.tkm-kolo { min-height: 380px; }
	.tkm-kolo__tor { height: 350px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.tkm-kolo__poz { transition: none; }
}

/* Rytm dzialu: kazda sekcja konczy sie 86 px odstepu i to on tworzy przerwe
   do nastepnej. Panel doboru przyszedl z zewnatrz i tego odstepu nie mial —
   naglowek karuzeli siadal tuz pod jego ramka. Dokladamy tu, a nie w arkuszu
   panelu, bo to zasada TEJ strony. */
.tkm-srodek > .tkd { padding-bottom: 86px; }