/*
 * Front-page-only styles.
 *
 * Route-scoped on purpose. The slider, the district rail, the guide grid, the
 * question list, the glass bar and the fact strip exist on exactly one URL.
 * Carrying them in site.css put every other page — thirty-eight services,
 * forty-five districts, fifty-one articles — through six kilobytes of CSS none
 * of them can use, and pushed the site past the 45 KB gzip ceiling in
 * DESIGN_MODE.md. Splitting the file put every other page below where it
 * started and left the front page paying only for what it renders.
 *
 * Enqueued after site.css and declaring it as a dependency, so the unlayered
 * cascade still resolves by source order: a selector shared with site.css wins
 * here, which is what these rules were written assuming.
 *
 * @package Akım 360
 */

/* Bottom rail: underlined quick links, the way the reference does it. */
.hero-alt {
	position: relative;
	border-top: 1px solid var(--color-line);
	background-color: rgb(255 255 255 / 0.72);
	backdrop-filter: blur(6px);
}

.hero-alt-ic {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	padding-block: 1.375rem;
}

.hero-alt-oge {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.hero-alt-oge b {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-primary);
	border-bottom: 2px solid var(--akim-signal);
	padding-bottom: 0.25rem;
	align-self: flex-start;
}

.hero-alt-oge span {
	font-size: 0.8125rem;
	color: var(--color-muted);
}



/*
 * On the front page the bar is glass until you scroll.
 *
 * The header floats over the hero — that part was always true — but it did it
 * wearing an opaque white card, which covered the top 119px of the slide. The
 * slider looked like it started underneath the header instead of behind it.
 *
 * With the card transparent the slide runs edge to edge from the very top and
 * the logo and the menu sit directly on it. Legibility is not a gamble here:
 * the hero's left two thirds are the light stage (#f7f9fa through white) and
 * the photograph is masked and scrimmed away from exactly that region, so the
 * navy mark and navy links keep the same contrast they had on white.
 *
 * The card comes back the moment the page scrolls. Above 768 that is
 * `.is-yapisik`, set by widget.js from an IntersectionObserver on a sentinel;
 * below it there is no sticky header at all, so the bar simply leaves with the
 * page and never needs a background.
 */
.home .site-header > .container-site {
	border-color: transparent;
	background-color: transparent;
	box-shadow: none;
}

/*
 * A scrim under the glass bar, and it is not decoration.
 *
 * The menu sits on the right of the header and the slide's photograph is also
 * on the right — from roughly 950px across at 1440, the links are directly
 * over it. The white card used to be what made them readable; with the card
 * gone they need something, and the site has measured what happens when type
 * goes over one of these frames unprotected: 1.45:1.
 *
 * A gradient rather than a band: opaque enough at the very top to hold the
 * links, gone by 150px, so the slide still reads as running to the edge of the
 * screen. It is behind the bar's own content and above the slide, and it never
 * appears on any page but this one.
 */
.home .site-header::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: calc(var(--akim-header-h, 0px) + 3rem);
	background: linear-gradient(
		180deg,
		rgb(247 249 250 / 0.94) 0%,
		rgb(247 249 250 / 0.72) 46%,
		rgb(247 249 250 / 0) 100%
	);
	pointer-events: none;
	transition: opacity var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

/* Once the bar is solid the scrim has nothing left to do. */
.home .site-header.is-yapisik::after {
	opacity: 0;
}

.home .site-header.is-yapisik > .container-site {
	border-color: var(--color-line);
	background-color: var(--color-surface);
	box-shadow: 0 1px 2px rgb(31 33 42 / 0.06), 0 14px 32px -14px rgb(31 33 42 / 0.3);
}


/*
 * The hero runs under the floating bar, and the bar's height is the only thing
 * that has to be agreed on. Pulling the section up by exactly that and padding
 * it back down keeps the header transparent over the slide instead of sitting
 * on a white strip above it.
 */
/*
 * The bar sits ON the slide, not above it.
 *
 * This used to pad the section down by the header's height, which pushed the
 * track — and with it the photograph — below the bar: the top 119px of the
 * page was empty stage and the slide only began underneath it. Pulling the
 * section up without padding it back down lets the track fill the viewport
 * from y=0, so the photograph runs edge to edge and the transparent header
 * floats over it. The clearance the content needs is now on the content, in
 * `.kaydirac-ic`, where it belongs.
 */
.home .section-hero-kaydirac {
	margin-top: calc(-1 * var(--akim-header-h, 0px));
	padding-top: 0;
}

/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* Front page: the three-slide hero                                    */
/* ------------------------------------------------------------------ */

/*
 * A slider that is a scroll container, not a JavaScript widget.
 *
 * The track pages itself with scroll-snap; widget.js only adds the arrows, the
 * dots and the announcement, and it reveals them from `hidden` so a script that
 * never runs leaves a strip that still swipes rather than dead controls. This
 * is the contract `.seri` already uses further up this file, and it is the
 * reason nothing here needs GSAP: the front page does not load that bundle
 * today, and 45 KB gzip against a 45 KB total-JS budget is not a rounding
 * error. Motion below is transform and opacity only.
 *
 * The namespace is new on purpose. This replaces `hero-akim`, whose rules were
 * split across three places hundreds of lines apart — bin/css-denetim.php
 * reported four of them as duplicate definitions — and one of which referenced
 * a custom property that was never declared. Those blocks are deleted in the
 * same change that adds these, because leaving both is exactly how a component
 * ends up defined twice.
 */

.section-hero-kaydirac {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--akim-sahne);
}

/*
 * Ghosted wordmark, held still while the slides move over it.
 *
 * Its offset is written out here rather than layered on top of a base rule:
 * the version this replaces added the header height to an undeclared
 * `--akim-hero-wordmark-top`, so the fallback 0px silently replaced the
 * intended clamp and the mark sat higher than it was drawn.
 */
.kaydirac-filigran {
	position: absolute;
	top: calc(clamp(1rem, 4vw, 3.5rem) + var(--akim-header-h, 0px));
	left: -0.06em;
	z-index: -2;
	font-size: clamp(6rem, 17.5vw, 17rem);
	font-weight: 800;
	letter-spacing: -0.055em;
	line-height: 0.9;
	color: #0b0d0f;
	opacity: 0.045;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

.kaydirac-filigran i {
	font-style: normal;
}

.kaydirac {
	position: relative;
}

/* --- The track ------------------------------------------------------ */

.kaydirac-ray {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/*
	 * Full screen, minus the bar floating over it, so the slide and the header
	 * together are exactly one viewport.
	 *
	 * `vh` first as the fallback, then `svh`. `dvh` is deliberately not used:
	 * it re-resolves as the mobile address bar collapses, which resizes the
	 * track mid-scroll and makes the snap fight the browser. `min-height`, not
	 * `height`, so a long headline on a short screen grows the slide instead of
	 * being clipped by it.
	 */
	min-height: 100vh;
	min-height: 100svh;
}

.kaydirac-ray::-webkit-scrollbar {
	display: none;
}

/*
 * The track is focusable so a keyboard can reach it; without a tab stop the
 * arrow keys have nothing to act on. It keeps a visible ring — removing focus
 * styling from the one element that needs it would be the wrong trade.
 */
.kaydirac-ray:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -4px;
}

.kaydirac-slayt {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* --- The photograph ------------------------------------------------- */

/*
 * Bleeding off the right edge, masked in rather than butted against the type.
 * `min-width: 0` above and this box being absolute are what keep the track from
 * widening: an image that participated in layout would make each column wider
 * than 100% and scroll the whole document sideways, which is the failure this
 * site has already had three times.
 */
.kaydirac-gorsel {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -1;
	width: 52%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

.kaydirac-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}

/*
 * A light scrim over the left of the photograph. Without it the headline sits
 * on a busy cabinet shot and neither reads — measured at 1.45:1 the last time
 * type was put over one of these frames unscrimmed.
 */
.kaydirac-gorsel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		#f7f9fa 0%,
		rgb(247 249 250 / 0.86) 26%,
		rgb(247 249 250 / 0.34) 56%,
		rgb(247 249 250 / 0) 82%
	);
}

/* --- Slide content --------------------------------------------------- */

/*
 * The header's height is carried here, by the text, rather than by the section.
 * That is what keeps the photograph full-bleed while the words still clear the
 * bar floating over them.
 */
/*
 * The slide's text starts where the logo starts.
 *
 * This carried `max-width: 1360px`, inherited from the hero it replaced, while
 * the header bar is `.container-site`'s own 72rem. The two containers were
 * different widths, so the headline began 105px to the left of the logo above
 * it and the page had two left edges. Dropping the override puts the slide on
 * the same grid as the bar, the footer and every other page.
 */
.kaydirac-ic {
	position: relative;
	width: 100%;
	padding-top: calc(var(--akim-header-h, 0px) + clamp(1.5rem, 4vw, 3rem));
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.kaydirac-rozet {
	display: inline-block;
	margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
	padding: 0.6875rem 1.375rem;
	border-radius: var(--akim-radius-hap);
	background-color: var(--akim-signal);
	color: #10151f;
	font-family: var(--akim-mono);
	font-size: 0.71875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kaydirac-baslik {
	max-width: 15ch;
	font-size: clamp(2.5rem, 6.2vw, 5.25rem);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: var(--akim-lh-display);
	color: var(--color-primary);
	text-wrap: balance;
}

.kaydirac-baslik strong {
	font-weight: 800;
	box-shadow: none;
}

/*
 * Slides two and three are a step down, in size and in claim. They carry an h2
 * and a quieter headline because the page has already made its argument on the
 * first slide; repeating it at the same weight three times reads as three
 * competing openings rather than one with support.
 */
.kaydirac-slayt + .kaydirac-slayt .kaydirac-baslik {
	max-width: 20ch;
	font-size: clamp(2rem, 4.4vw, 3.5rem);
}

.kaydirac-metin {
	max-width: 42ch;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.62;
	color: var(--color-muted);
}

.kaydirac-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.kaydirac-eylem:empty {
	display: none;
}

/* --- Controls -------------------------------------------------------- */

.kaydirac-kumanda {
	position: absolute;
	left: 50%;
	bottom: clamp(1rem, 2.5vw, 2rem);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.3125rem;
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-hap);
	background-color: rgb(255 255 255 / 0.82);
	backdrop-filter: blur(8px);
	transform: translateX(-50%);
}

/*
 * 44px, not 36px. The WCAG target-size minimum is 24px and the practical one on
 * a phone is 44; these were 36 and sat side by side, so a thumb aiming at "next"
 * could take "pause" instead. The cluster grows by 8px and nothing else moves.
 */
.kaydirac-ok,
.kaydirac-dur {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-primary);
	cursor: pointer;
	transition: background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.kaydirac-ok:hover,
.kaydirac-ok:focus-visible,
.kaydirac-dur:hover,
.kaydirac-dur:focus-visible {
	background-color: var(--color-surface-alt);
}

.kaydirac-noktalar {
	display: flex;
	align-items: center;
}

/*
 * The dot is drawn by a pseudo-element so the button can be 28×36 while the
 * mark stays 8px. A control the size of its own dot is not a target.
 */
.kaydirac-nokta {
	position: relative;
	width: 1.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--akim-radius-kontrol);
	background: none;
	cursor: pointer;
}

.kaydirac-nokta::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	margin: -0.25rem 0 0 -0.25rem;
	border-radius: 50%;
	background-color: var(--color-line);
	transition: background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.kaydirac-nokta:hover::before {
	background-color: var(--color-muted);
}

.kaydirac-nokta[aria-current="true"]::before {
	background-color: var(--color-primary);
}

/* Two bars while it is running, a triangle once it is stopped. */
.kaydirac-dur-ikon {
	width: 0.625rem;
	height: 0.75rem;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.kaydirac-dur[aria-pressed="true"] .kaydirac-dur-ikon {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-top: 6px solid transparent;
	border-right: 0;
	border-bottom: 6px solid transparent;
	border-left: 9px solid currentColor;
}

/* --- Narrow screens --------------------------------------------------- */

@media (max-width: 1099px) {
	.kaydirac-gorsel {
		width: 100%;
		opacity: 0.16;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/*
	 * Centre the crop below the split layout. `62% 50%` was chosen for the
	 * desktop panel, where only the right half of the frame is visible; on a
	 * portrait phone the same offset pushes the subject off the edge and the
	 * picture reads as a sliver of something rather than a photograph.
	 */
	.kaydirac-gorsel img {
		object-position: 50% 50%;
	}
}

/*
 * Below 768 the fixed contact bar owns the bottom of the screen, so the
 * controls and the slide's own text both clear it — including the safe-area
 * inset, which is what stops the controls landing under the home indicator.
 */
/*
 * Below 1024 the header card insets itself from the screen edge, so the logo
 * starts further in than `.container-site`'s own padding. The slide matches that
 * inset exactly — card margin + card padding + its 1px border — rather than
 * approximating it, so the two left edges stay locked together as both clamps
 * resolve across the range. Measured: 23px at 390 and 360, 33px at 768, on both
 * the logo and the headline.
 */
@media (max-width: 1023.98px) {
	.kaydirac-ic {
		padding-inline: calc(
			clamp(0.625rem, 2.5vw, 1rem) + clamp(0.75rem, 2.5vw, 1rem) + 1px
		);
	}
}

@media (max-width: 767px) {
	.kaydirac-kumanda {
		bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
	}

	.kaydirac-ic {
		padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
	}
}

/* --- Motion ----------------------------------------------------------- */

/*
 * Hiding is opt-in twice over, and that is the point.
 *
 * `.akim-motion` is only on the root when motion.js decided motion is allowed;
 * `.is-hazir` is only on the slider once widget.js has wired it. Either one
 * missing leaves every slide's content plain and visible. The alternative —
 * hiding by default and revealing with script — is how a broken bundle turns
 * two thirds of a hero into empty space, and this file has paid for that
 * lesson once already.
 */
.akim-motion .kaydirac.is-hazir .kaydirac-ic > * {
	transition:
		opacity var(--akim-hiz-orta) var(--akim-egri-yumusak),
		transform var(--akim-hiz-panel) var(--akim-egri);
}

.akim-motion .kaydirac.is-hazir .kaydirac-slayt:not(.is-etkin) .kaydirac-ic > * {
	opacity: 0;
	transform: translateY(0.75rem);
}

.akim-motion .kaydirac.is-hazir .kaydirac-slayt.is-etkin .kaydirac-ic > *:nth-child(2) {
	transition-delay: 70ms;
}

.akim-motion .kaydirac.is-hazir .kaydirac-slayt.is-etkin .kaydirac-ic > *:nth-child(3) {
	transition-delay: 140ms;
}

/* ------------------------------------------------------------------ */
/* Front page: where we work                                           */
/* ------------------------------------------------------------------ */

/*
 * Forty-five district names on two rails, drifting in opposite directions.
 *
 * The static state is the safe one and it is the default: a wrapped tag cloud
 * with the duplicate half hidden. The marquee only exists inside
 * `prefers-reduced-motion: no-preference`, so a reader who has asked for less
 * movement gets a legible list rather than a frozen strip showing the first
 * eight names — and the parent's `!important` motion clamp, which an unlayered
 * child cannot override, never has anything to fight.
 *
 * `overflow: hidden` on the viewport element is what keeps a track wider than
 * the screen from scrolling the document. It is on the wrapper, never on an
 * ancestor of the sticky header.
 */
.section-bolgeler {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-line);
}

.bolgeler-basi-grid {
	display: grid;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-top: 1rem;
}

@media (min-width: 900px) {
	.bolgeler-basi-grid {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}
}

.bolgeler-not {
	max-width: 52ch;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.62;
	color: var(--color-muted);
}

.bolgeler-tum {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
}

.bolgeler-ok {
	display: inline-flex;
	transition: transform var(--akim-hiz-orta) var(--akim-egri);
}

.bolgeler-tum:hover .bolgeler-ok,
.bolgeler-tum:focus-visible .bolgeler-ok {
	transform: translateX(8px);
}

.bolgeler-akis {
	overflow: hidden;
	margin-top: clamp(2rem, 4vw, 3rem);
	/*
	 * Fade the ends so names enter and leave instead of being cut. On a static
	 * wrapped list there is nothing at the edges to fade, and the mask costs
	 * nothing there.
	 */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bolgeler-ray {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.bolgeler-ray + .bolgeler-ray {
	margin-top: 0.5rem;
}

/* The seamless half. Shown only when there is something to loop. */
.bolgeler-grup + .bolgeler-grup {
	display: none;
}

.bolgeler-grup {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.bolgeler-oge {
	display: inline-flex;
	align-items: center;
	height: 2.75rem;
	padding-inline: 1.125rem;
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-hap);
	background-color: var(--color-surface);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-primary);
	text-decoration: none;
	white-space: nowrap;
	transition:
		border-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.bolgeler-oge:hover,
.bolgeler-oge:focus-visible {
	border-color: var(--color-primary);
	background-color: var(--akim-signal);
}

@media (prefers-reduced-motion: no-preference) {
	.bolgeler-ray {
		flex-wrap: nowrap;
		width: max-content;
		padding-inline: 0;
		animation: bolge-kay 64s linear infinite;
	}

	.bolgeler-ray-2 {
		animation-duration: 82s;
		animation-direction: reverse;
	}

	.bolgeler-grup {
		flex-wrap: nowrap;
	}

	.bolgeler-grup + .bolgeler-grup {
		display: flex;
		margin-left: 0.5rem;
	}

	/* Stop while it is being read. */
	.bolgeler-akis:hover .bolgeler-ray {
		animation-play-state: paused;
	}

	/*
	 * Tabbing into the rail stops the marquee and unwinds it — keyboard only.
	 *
	 * Pausing alone was not enough: the track is translated, so a link the
	 * keyboard has just focused can sit hundreds of pixels off the left edge
	 * behind the mask, and the browser has nothing to scroll to bring it back.
	 * Measured: 22 of the 45 links were outside the visible area at some point
	 * in the cycle. On focus the rail drops back to the wrapped layout it uses
	 * under reduced motion, where every link is on screen and in order — the
	 * same state, reached two different ways.
	 *
	 * The trigger is `:has(:focus-visible)`, not `:focus-within`. A tap focuses
	 * the link too, so `:focus-within` unwound the entire rail on the first tap:
	 * a 728px reflow under the finger that swallowed the tap and only settled on
	 * the second one (measured on the live site at 390px, the district a visitor
	 * had just aimed at jumps out from under them). `:focus-visible` is set for
	 * keyboard focus and withheld for a pointer tap, so the unwind now serves the
	 * reader who needs it and stays out of the way of the one who tapped a
	 * district to open it. Where `:has()` is unsupported the whole rule is
	 * dropped: no keyboard unwind there, but no tap reflow either.
	 */
	.bolgeler-akis:has(:focus-visible) .bolgeler-ray {
		flex-wrap: wrap;
		width: auto;
		padding-inline: clamp(1rem, 4vw, 2rem);
		animation: none;
	}

	.bolgeler-akis:has(:focus-visible) .bolgeler-grup {
		flex-wrap: wrap;
	}

	.bolgeler-akis:has(:focus-visible) .bolgeler-grup + .bolgeler-grup {
		display: none;
	}
}

/*
 * -50% of the track, which is exactly one copy of the list. The second copy
 * lands where the first started, so the loop closes without a seam.
 */
@keyframes bolge-kay {
	to {
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------------------ */
/* Front page: the guide                                               */
/* ------------------------------------------------------------------ */

.section-rehber {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background-color: var(--color-surface-alt);
}

.rehber-basi {
	display: grid;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	margin-top: 1rem;
}

@media (min-width: 900px) {
	.rehber-basi {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: end;
	}
}

.rehber-not {
	max-width: 54ch;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.62;
	color: var(--color-muted);
}

.rehber-izgara {
	display: grid;
	gap: clamp(0.75rem, 1.6vw, 1.25rem);
	margin-top: clamp(2rem, 4vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.rehber-izgara {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.rehber-izgara {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rehber-kart {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-surface);
	text-decoration: none;
	transition:
		border-color var(--akim-hiz-orta) var(--akim-egri-yumusak),
		transform var(--akim-hiz-orta) var(--akim-egri),
		box-shadow var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

.rehber-kart:hover,
.rehber-kart:focus-visible {
	border-color: var(--color-primary);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -24px rgb(31 33 42 / 0.34);
}

.rehber-gorsel {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var(--color-surface-alt);
}

.rehber-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.94);
	transition: transform var(--akim-hiz-panel) var(--akim-egri);
}

.rehber-kart:hover .rehber-gorsel img {
	transform: scale(1.04);
}

.rehber-govde {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1rem, 2vw, 1.375rem);
}

.rehber-kat {
	color: var(--color-muted);
}

.rehber-ad {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.015em;
	color: var(--color-primary);
	text-wrap: balance;
}

.rehber-ozet {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--color-muted);
}

.rehber-tum {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
}

.rehber-ok {
	display: inline-flex;
	transition: transform var(--akim-hiz-orta) var(--akim-egri);
}

.rehber-tum:hover .rehber-ok,
.rehber-tum:focus-visible .rehber-ok {
	transform: translateX(8px);
}

/* ------------------------------------------------------------------ */
/* Front page: questions                                               */
/* ------------------------------------------------------------------ */

.section-sorular {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-line);
}

.sorular-grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-top: 1rem;
}

@media (min-width: 900px) {
	.sorular-grid {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		align-items: start;
	}
}

.sorular-not {
	max-width: 40ch;
	margin-top: 1rem;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.62;
	color: var(--color-muted);
}

.sorular-liste {
	min-width: 0;
	border-top: 1px solid var(--color-line);
}

.sorular-oge {
	border-bottom: 1px solid var(--color-line);
}

/*
 * `<summary>` is the control, so it carries the whole row. The default marker is
 * removed in both spellings — WebKit still needs its own — and replaced by a
 * mark that is drawn rather than typed, so it cannot be selected with the text.
 */
.sorular-soru {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding-block: clamp(1rem, 2vw, 1.375rem);
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.4;
	color: var(--color-primary);
	list-style: none;
	cursor: pointer;
	transition: color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.sorular-soru::marker {
	content: "";
}

.sorular-soru::-webkit-details-marker {
	display: none;
}

.sorular-soru:hover {
	color: var(--color-primary-hover);
}

.sorular-isaret {
	position: relative;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
}

.sorular-isaret::before,
.sorular-isaret::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1.5px;
	margin: -0.75px 0 0 -0.5rem;
	border-radius: 1px;
	background-color: currentColor;
	transition: transform var(--akim-hiz-orta) var(--akim-egri);
}

.sorular-isaret::after {
	transform: rotate(90deg);
}

/* Plus becomes minus: only the upright bar turns. */
.sorular-oge[open] .sorular-isaret::after {
	transform: rotate(0deg);
}

.sorular-cevap {
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.sorular-cevap p {
	max-width: 68ch;
	font-size: 0.9375rem;
	line-height: 1.68;
	color: var(--color-muted);
}

.sorular-kaynak {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.875rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
}

.sorular-kaynak .sorular-ok {
	display: inline-flex;
	transition: transform var(--akim-hiz-orta) var(--akim-egri);
}

.sorular-kaynak:hover .sorular-ok,
.sorular-kaynak:focus-visible .sorular-ok {
	transform: translateX(6px);
}

/*
 * The open animation runs on the panel, not on the element's height. `details`
 * has no height to tween — it swaps `content-visibility` — so the honest thing
 * is to move what is now displayed rather than pretend the box grew.
 */
@media (prefers-reduced-motion: no-preference) {
	.sorular-oge[open] .sorular-cevap {
		animation: sorular-ac var(--akim-hiz-orta) var(--akim-egri);
	}
}

@keyframes sorular-ac {
	from {
		opacity: 0;
		transform: translateY(-0.375rem);
	}
}